一直就有要做一个前后端完整的个人项目的想法，但因为学校和面试的事一直没开始。两个星期前开始了行动，选定Vue + express + mongoDB 的技术栈。Vue框架的文档还是非常友好易懂的，一个星期看官方文档和写小demo，一个星期开始正式开发。总算完成了主体功能的开发。现在写个文章做个阶段性总结。
Github地址：https://github.com/Howell5/Josephong.me
项目架构图
个人博客项目架构图.png
client
- 技术框架和基本库：
- 用了Vue-cli 构建基本项目目录，Vue-Router 做路由控制，用 axios 库做 ajax 操作。
- 前台展示页（/psot 和 /postDetail）
- 用 Marked.js 和 highlight.js 处理 Markdow 转化为 HTML。从服务器拿到数据进行渲染。
- UI 借用了尤雨溪大佬博客的风格，因为实在没想好自己的博客风格，后期会改。
- 后台管理页（/admin 和 /admin/articleEdit）
- 这里用到了嵌套路由。编辑器用了第三方插件 simplemde。
- UI 用 element-ui 很快能搭建好，毕竟不是展示页，简洁好用就行。
Webpack作为静态资源的打包和发布工具。
server
服务端部分采用 express 作为开发框架，提供api接口服务给前端ajax调用，后端不做页面模板的渲染和路由的导航工作，这部分都由前端的 vue 来处理，所以该博客其实是一个前后端分离，以 RESTful api 来通信的单页应用。
因为主要逻辑处理（虽然也没有多少业务逻辑）都放在了前端，所以服务端写的很简单。利用 mongoose 与数据库 MongoDB 建立连接，并写好CURD（增删改查）的接口给前端用就行了。
不得不说这种开发方式很爽，不像以前后端丢一个JSP页面，然后才能进行前端工作。我个人认为 业务进行前后端分离，而个人开发者进行全栈发展。
难点
跨域
因为在vue-cli中本身就有一个小型服务器（本项目中：localhost:8525）供我们的vue项目跑起来，但我们需要的数据是我们自己搭建的服务器（本项目中：localhost:9999）提供给我们的。因为浏览器的“同源政策”，我们不能直接进行跨域访问，解决方案也有很多。CORS，jsonp，...。详情见文章 浏览器同源政策及其规避方法---阮一峰。而在我们的项目中，webpack-dev-server 给我们提供的proxy模块，可以很快解决这个问题。配置如下：
** config/index.js **
dev: {
env: require('./dev.env'),
port: 8525,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:9999
changeOrigin: true
}
},
嵌套路由
一开始在文章管理后台中，我比较头痛组件复用问题，在github看了相似项目的源码，发现他们直接用复制代码解决，显然代码冗余严重。在看Vue-Router的文档中，一开始并没有注意嵌套路由的作用，后面多看几遍就发现嵌套路由可以很完美解决这个问题（果然官方文档还是要反复看的）。我的路由配置：
{
path: '/admin',
name: 'admin',
component: admin,
children: [
{
path: '/',
component: articleList
},
{
path: 'articleList',
component: articleList
},
{
path: 'articleEdit',
component: articleEdit
},
{
path: 'articleEdit/?id=:id',
name: 'EditArticle',
component: articleEdit
}
]
}
实际演示
博客前台演示页面.gif
后台管理页面演示.gif
TODO
- [ ] 增加登录/注册功能
- [ ] 前台展示页面UI重新设计，完善细节
- [ ] 部署到云服务器上
- [ ] 移动端适配
本项目持续更新，如果对你有所帮助，欢迎到github上点个star :)
网友评论