当前位置: 首页>数据库>正文

博客項目java 博客项目总结

介绍

前端采用vue2.0+es6+webpack+axios
后端采用express+nodejs+es6+restful api+mongodb

简单博客系统,实现基本的增删改查文章,以及箴言。目前的功能比较少,能适应基本的需求,后期会增加更多的功能。这个博客从后端到前端共花费21天,除了上课,就在完成这个项目。暂时还没上线,界面。。。似乎略丑(我有什么办法,我也很无奈~)。 

1.后端(blogSystem_server)

主要有manager、mongo、router、public文件夹以及入口文件app.js,mongo文件夹存储mongoose连接细节以及发布schema模版(发布的模板包括article,maxim,articleType),router文件夹存储主要路由),manager存储更多函数的细节,public/images存储前端上传图片文件。数据库的操作借助于mongoose实现。

文件结构

博客項目java 博客项目总结,博客項目java 博客项目总结_博客項目java,第1张

2.前端

主要有assets文件夹存储静态文件,components存储模版,getCGI发起请求数据,routers主要路由。

文件结构:

博客項目java 博客项目总结,博客項目java 博客项目总结_文件结构_02,第2张

踩的坑以及解决办法:
1.发表新文章和编辑新文章公用的同一个组件editArticle.vue,出现的问题是:当我点击某一篇文章的编辑后,再点击“新文章”,这个路由从地址上来看进行切换,但是界面并不刷新。原来,公用组件时,组件只会在第一次加载时创建(mounted函数只调用一次),通过查询,发现可以通过监听路由变化来改变数据,最终解决了不刷新的问题。

2.有点棘手的莫过于对图片的处理了。前端想要对图片进行剪裁,并实现上传。这个问题想的比较久,最后是前端用jquery的jcrop插件,去约束裁减范围,缩放比例等参数,有一个图片预览的功能,这里用canvas去实现图片,当我前端裁剪完成并提交后,将canvas的图片路径转换为base64格式。后端接收到路径后,用fs模块将其写入文件夹内,删除时,也需要用fs删除图片文件。

总结:通过这个项目,加深了对vue的理解,特别是各个生命周期钩子函数,解决了一些实际问题,当然,其中存在很多的不足,希望能一直进步。后期还要不断的完善。




https://www.xamrdz.com/database/6a61959981.html

相关文章: