个⼈博客项⽬总结（⼀）
介绍
前端采⽤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实现。
⽂件结构：
2.前端
主要有assets⽂件夹存储静态⽂件，components存储模版，getCGI发起请求数据，routers主要路由。
jquery在项目里是干啥的⽂件结构：
踩的坑以及解决办法：
1.发表新⽂章和编辑新⽂章公⽤的同⼀个组件editArticle.vue，出现的问题是：当我点击某⼀篇⽂章的编辑后，再点击“新⽂章”，这个路由从地址上来看进⾏切换，但是界⾯并不刷新。原来，公⽤组件时，组件只会在第⼀次加载时创建(mounted函数只调⽤⼀次)，通过查询，发现可以通过监听路由变化来改变数据，最终解决了不刷新的问题。
2.有点棘⼿的莫过于对图⽚的处理了。前端想要对图⽚进⾏剪裁，并实现上传。这个问题想的⽐较久，最后是前端⽤jquery的jcrop插件，去约束裁减范围，缩放⽐例等参数，有⼀个图⽚预览的功能，这⾥⽤canvas去实现图⽚，当我前端裁剪完成并提交后，将canvas的图⽚路径转换为base64格式。后端接收到路径后，⽤fs模块将其写⼊⽂件夹内，删除时，也需要⽤fs删除图⽚⽂件。
总结：通过这个项⽬，加深了对vue的理解，特别是各个⽣命周期钩⼦函数，解决了⼀些实际问题，当然，其中存在很多的不⾜，希望能⼀直进步。后期还要不断的完善。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。