Vue+Node.js+MongoDB 个人博客项目总结（一）

一直就有要做一个前后端完整的个人项目的想法，但因为学校和面试的事一直没开始。两个星期前开始了行动，选定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 :)