个人博客项目总结（一）

介绍

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

简单博客系统，实现基本的增删改查文章，以及箴言。目前的功能比较少，能适应基本的需求，后期会增加更多的功能。这个博客从后端到前端共花费21天，除了上课，就在完成这个项目。暂时还没上线，界面。。。似乎略丑（我有什么办法，我也很无奈~）。更多代码细节可查看：https://github.com/susantong/blogSystem

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主要路由。
文件结构：

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

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

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

转载于:https://www.cnblogs.com/susantong/p/6882150.html