前言
这篇文章实现的博客系统使用 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</div>
webpack 配置
webpack 大部分是 vue-cli 自动生成的，添加了让前后端http请求都转到node的3000端口，而不是前端的8080端口的配置。
devServer: {
historyApiFallback: true,
noInfo: true,
//让前后端http请求都转到node的3000端口，而不是前端的8080端口
proxy: {
'/': {
target: 'http://localhost:3000/'
}
}
}
</div>
这里涉及一个新手可能会不明白的问题（我之前就捣鼓了半天）。
开发的时候要先打开数据库 MongoDB ,使用命令 mongod。
然后打开后端服务器 node app，后端监听 3000 端口。
最后打开前端开发模式 npm run dev，前端启动了一个 webpack 服务器，监听 8080 端口用于热刷新。通过配置把前端的http请求转到 3000 端口。
前端部分
命名视图
所有页面都用到的元素可以写在 App.vue 上面，也可以写成公共组件。我在 App.vue 中使用了命名视图，因为 sidebar 这个组件有的页面需要有的不需要，不需要的时候就不用加载。
<!--App.vue--> <template> <div id="app"> <div class="black_line"></div> <div id="main"> <router-view name="sidebar"></router-view> <router-view></router-view> </div> </div> </template></div>
router
路由的配置写在 main.js 中，分为前台展示和后台管理。后台管理统一以 ‘/admin' 开头。注册页和登录页写在一起了，上面有两个按钮“注册”和“登录”（我好懒-_-）。
// main.js
const router = new VueRouter({
routes: [
{path: '/', components: {default: article, sidebar: sidebar}},
{path: '/article', components: {default: article, sidebar: sidebar}},
{path: '/about', components: {default: about, sidebar: sidebar}},
{path: '/articleDetail/:id', components: {default: articleDetail, sidebar: sidebar}},
{path: '/admin/articleList', components: {default: articleList, sidebar: sidebar}},
{path: '/admin/articleEdit', component: articleEdit},
{path: '/admin/articleEdit/:id', component: articleEdit},
{path: '/admin/signin', component: signin}
]
})
</div>
element UI
使用了 element 用于消息提醒和标签分类。并不需要整个引入，而是使用按需引入。
// main.js
// 按需引用element
import { Button, Message, MessageBox, Notification, Popover, Tag, Input } from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
const components = [Button, Message, MessageBox, Notification, Popover, Tag, Input]
components.forEach((item) => {
Vue.component(item.name, item)
})
const MsgBox = MessageBox
Vue.prototype.$msgbox = MsgBox
Vue.prototype.$alert = MsgBox.alert
Vue.prototype.$confirm = MsgBox.confirm
Vue.prototype.$prompt = MsgBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification
</div>
vue-resource
用于向后端发起请求。打通前后端的关键。
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// success callback
}, response => {
// error callback
});
</div>
get 请求
前端发起 get 请求，当请求成功被返回执行第一个回调函数，请求没有被成功返回则执行第二个回调函数。
this.$http.get('/api/articleDetail/' + id).then(
response => this.article = response.body,
response => console.log(response)
)
</div>
后端响应请求并返回结果
// router.js
router.get('/api/articleDetail/:id', function (req, res) {
db.Article.findOne({ _id: req.params.id }, function (err, docs) {
if (err) {
console.error(err)
return
}
res.send(docs)
})
})
</div>
post 请求
前端发起 post 请求，当请求成功被返回执行第一个回调函数，请求没有被成功返回则执行第二个回调函数。
// 新建文章
// 即将被储存的数据 obj
let obj = {
title: this.title,
date: this.date,
content: this.content,
gist: this.gist,
labels: this.labels
}
this.$http.post('/api/admin/saveArticle', {
articleInformation: obj
}).then(
response => {
self.$message({
message: '发表文章成功',
type: 'success'
})
// 保存成功后跳转至文章列表页
self.refreshArticleList()
},
response => console.log(response)
)
</div>
后端存储数据并返回结果
// router.js
// 文章保存
router.post('/api/admin/saveArticle', function (req, res) {
new db.Article(req.body.articleInformation).save(function (err) {
if (err) {
res.status(500).send()
return
}
res.send()
})
})
</div>
后端部分
后端使用 express 构建了一个简单的服务器，几乎只用于操作数据库。
app.js 位于项目根目录，使用 node app 运行服务器。
const express = require('express')
const fs = require('fs')
const path = require('path')
const bodyParse = require('body-parser')
const session = require('express-session')
const MongoStore = require('connect-mongo')(session)
const router = require('./server/router')
const app = express()