前言

這篇文章實現的博客系統使用 Vue 做前端框架，Node + express 做后端，數據庫使用的是 MongoDB。實現了用戶注冊、用戶登錄、博客管理（文章的修改和刪除）、文章編輯（Markdown）、標簽分類等功能。

前端模仿的是 hexo 的經典主題 NexT ，本來是想把源碼直接拿過來用的，后來發現還不如自己寫來得快，就全部自己動手實現成 vue components。

實現的功能

      1.文章的編輯，修改，刪除

      2.支持使用 Markdown 編輯與實時預覽

      3.支持代碼高亮

      4.給文章添加標簽

      5.支持用戶注冊登錄

使用到的技術

前端

      1.Vue.js

      2.vue-cli

      3.vue-router

      4.vue-resource

      5.element-ui

      6.marked

      7.highlight.js

后端

      1.Node.js

      2.Express

      3.Mongoose

基本思路

前端使用 vue-router 操作路由，實現單頁應用的效果。使用 vue-resource 從后臺獲取數據，數據的處理全部都在前端，所以后端要做的事情很簡單——把前端打包好的數據存進數據庫中和從數據庫中取出數據。前后端使用統一的路由命名規則。

項目目錄

| app.js  后端入口| index.html  入口頁面| .babelrc  babel配置| .gitignore  git配置| package.json| webpack.config.js webpack配置||-dist  vue打包生成的文件||-node_modules 模塊||-server  后端 | check.js | db.js  數據庫 __| router.js 路由||-src   前端 |-assets  靜態資源 |-components 組件 | App.vue | main.js

webpack 配置

webpack 大部分是 vue-cli 自動生成的，添加了讓前后端http請求都轉到node的3000端口，而不是前端的8080端口的配置。

devServer: { historyApiFallback: true, noInfo: true, //讓前后端http請求都轉到node的3000端口，而不是前端的8080端口 proxy: { '/': { target: 'http://localhost:3000/' } } }

這里涉及一個新手可能會不明白的問題（我之前就搗鼓了半天）。

開發的時候要先打開數據庫 MongoDB ,使用命令 mongod。

然后打開后端服務器 node app，后端監聽 3000 端口。

最后打開前端開發模式 npm run dev，前端啟動了一個 webpack 服務器，監聽 8080 端口用于熱刷新。通過配置把前端的http請求轉到 3000 端口。