Vue.js实践：一个Node.js+mongoDB+Vue.js的博客内容管理系统

摘要：项目来源以前曾用过搭建自己的博客网站，但感觉很是臃肿。所以一直想自己写一个博客内容管理器。正好近日看完了各个插件的文档，就用着尝试写了这个简约的博客内容管理器。关于后端后端是用作为服务器的，使用了框架。

以前曾用过WordPress搭建自己的博客网站，但感觉WordPress很是臃肿。所以一直想自己写一个博客内容管理器。

正好近日看完了Vue各个插件的文档，就用着Vue尝试写了这个简约的博客内容管理器（CMS）。

一个基本的博客内容管理器功能，如后台登陆，发布并管理文章等

支持markdown语法实时编辑

支持代码高亮

管理博客页面的链接

博客页面对移动端适配优化

账户管理(修改密码)

登陆后台按钮在页面最下方“站长登陆”，可以以游客身份登入后台系统。

Vue.js

Vue-Cli

Vue-Resource

Vue-Router

Vuex

Node.js

mongoDB (mongoose)

Express

Webpack

ES6

SASS

Node服务端不做路由切换，这部分交给Vue-Router完成

Node服务端只用来接收请求，查询数据库并用来返回值

所以这样做前后端几乎完全解耦，只要约定好restful数据接口，和数据存取格式就OK啦。

后端我用了mongoDB做数据库，并在Express中通过mongoose操作mongoDB，省去了复杂的命令行，通过Javascript操作无疑方便了很多。

vue-cli:官方的脚手架，用来初始化项目

vue-resource：可以看作一个Ajax库，通过在跟组件引入，可以方便的注入子组件。子组件以this.$http调用

vue-router：官方的路由工具，用来切换子组件，是用来做SPA应用的关键

vuex：规范组件中数据流动，主要用于异步的http请求后数据的刷新。通过官方的vue-devtools可以无缝对接

│  .babelrc           babel配置
│  .editorconfig
│  .eslintignore  
│  .eslintrc.js       eslintrc配置
│  .gitignore
│  index.html         入口页面
│  package.json
│  README.md
│  setup.html         初始化账户页面
│  webpack.config.js  webpack配置
│
├─dist                打包生成
│     
├─server              服务端
│      api.js         Restful接口
│      db.js          数据库
│      index.js
│      init.json      初始数据
│
└─src
    │  main.js        项目入口
    │  setup.js       初始化账户
    │
    ├─assets          外部引用文件
    │  ├─css
    │  ├─fonts
    │  ├─img
    │  └─js         
    │
    ├─components      vue组件
    │  ├─back         博客控制台组件
    │  ├─front        博客页面组件
    │  └─share        公共组件
    │
    ├─router          路由
    │
    ├─store           vuex文件
    │
    └─style           全局样式

前端的文件统一放到了src目录下，有两个入口文件，分别是main.js和setup.js，有过WordPress经验应该知道，第一次进入博客是需要设置用户名密码和数据库的，这里的setup.js就是第一次登入时的页面脚本，而main.js则是剩余所有文件的入口

import Vue          from "vue"
import VueResource  from "vue-resource"
import {mapState}   from "vuex"

//三个顶级组件，博客主页和控制台共享
import Spinner      from "./components/share/Spinner.vue"
import Toast        from "./components/share/Toast.vue"
import MyCanvas     from "./components/share/MyCanvas.vue"

import store        from "./store"
import router       from "./router"

import "./style/index.scss"

Vue.use(VueResource)

new Vue({
  router,
  store,
  components: {Spinner, Toast, MyCanvas},
  computed: mapState(["isLoading", "isToasting"])
}).$mount("#CMS2")

而后所有页面分割成一个单一的vue组件，放在components中，通过入口文件main.js，由webpack打包生成，生成的文件放在dist文件夹下。

后端文件放在server文件夹内，这就是基于Express的node服务器，在server文件夹内执行

node index

就可以启动Node服务器，默认侦听3000端口。

Webpack的配置文件主体是有vue-cli生成的，但为了配合后端自动刷新、支持Sass和生成独立的css文件，稍微修改了一下：

const path = require("path")
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin")
//萃取css文件，在此命名
const extractCSSFromVue = new ExtractTextPlugin("styles.css")
const extractCSSFromSASS = new ExtractTextPlugin("index.css")

module.exports = {
  entry: {
    main: "./src/main.js",
    setup: "./src/setup.js"
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "[name].js"
  },
  resolveLoader: {
    moduleExtensions: ["-loader"]
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue",
        //使用postcss处理加工后的scss文件
        options: {
          preserveWhitespace: false,
          postcss: [
            require("autoprefixer")({
              browsers: ["last 3 versions"]
            })
          ],
          loaders: {
            sass: extractCSSFromVue.extract({
              loader: "css!sass!",
              fallbackLoader: "vue-style-loader"
            })
          }
        }
      },
      {
        test: /.scss$/,
        loader: extractCSSFromSASS.extract(["css", "sass"])
      },
      {
        test: /.js$/,
        loader: "babel",
        exclude: /node_modules/
      },
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: "file",
        options: {
          name: "[name].[ext]?[hash]"
        }
      },
      //字体文件
      {
        test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
        loader: "file-loader"
      }
    ]
  },
  plugins: [
      //取出css生成独立文件
    extractCSSFromVue,
    extractCSSFromSASS,
    new CopyWebpackPlugin([
      {from: "./src/assets/img", to: "./"}
    ])
  ],
  resolve: {
    alias: {
      "vue$": "vue/dist/vue"
    }
  },
  //服务器代理，便于开发时所有http请求转到node的3000端口，而不是前端的8080端口
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    proxy: {
      "/": {
        target: "http://localhost:3000/"
      }
    }
  },
  devtool: "#eval-source-map"
}

if (process.env.NODE_ENV === "production") {
  module.exports.devtool = "#source-map"
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: ""production""
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

运行

npm start

后，node端开启了3000端口，接着运行

npm run dev

打开webpack在8080端口服务器，具有动态加载的功能，并且所有的http请求会代理到3000端口

因为写的是但也应用（SPA），服务器不负责路由，所以路由方面交给Vue-Router来控制。

import Vue      from "vue"
import Router   from "vue-router"
//博客页面
import Archive  from "../components/front/Archive.vue"
import Article  from "../components/front/Article.vue"
//控制台页面
import Console  from "../components/back/Console.vue"
import Login    from "../components/back/Login.vue"
import Articles from "../components/back/Articles.vue"
import Editor   from "../components/back/Editor.vue"
import Links    from "../components/back/Links.vue"
import Account  from "../components/back/Account.vue"

Vue.use(Router)

export default new Router({
  mode: "history",
  routes: [
    {path: "/archive", name: "archive", component: Archive},
    {path: "/article", name: "article", component: Article},
    {path: "/", component: Login},
    {
      path: "/console",
      component: Console,
      children: [
        {path: "", component: Articles},
        {path: "articles", name: "articles", component: Articles},
        {path: "editor", name: "editor", component: Editor},
        {path: "links", name: "links", component: Links},
        {path: "account", name: "account", component: Account}
      ]
    }
  ]
})

可以看到路由控制在body元素下的router-view中。前面的spinner，toast元素分别是等待效果（转圈圈）的弹出层和信息的弹出层，和背景样式的切换。

后端是用node.js作为服务器的，使用了express框架。

其中代码非常简单:

const fs = require("fs")
const path = require("path")
const express = require("express")
const favicon = require("serve-favicon")
const bodyParser = require("body-parser")
const cookieParser = require("cookie-parser")
const db = require("./db")
const resolve = file => path.resolve(__dirname, file)
const api = require("./api")
const app = express()

// const createBundleRenderer = require("vue-server-renderer").createBundleRenderer

app.set("port", (process.env.port || 3000))
app.use(favicon(resolve("../dist/favicon.ico")))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))
app.use(cookieParser())
app.use("/dist", express.static(resolve("../dist")))
app.use(api)

app.post("/api/setup", function (req, res) {
  new db.User(req.body)
    .save()
    .then(() => {
      res.status(200).end()
      db.initialized = true
    })
    .catch(() => res.status(500).end())
})

app.get("*", function (req, res) {
  const fileName = db.initialized ? "index.html" : "setup.html"
  const html = fs.readFileSync(resolve("../" + fileName), "utf-8")
  res.send(html)
})

app.listen(app.get("port"), function () {
  console.log("Visit http://localhost:" + app.get("port"))
})

服务器做的事情很简单，毕竟路由在前端。在接受请求的时候判断一下数据库是否初始化，如果初始化就转向主页，否则转向setup.html，之所以没有直接sendfile是因为考虑到之后添加服务端渲染（虽然主页并没有啥值得渲染的，因为很简单）

express框架中使用了mongoose来连接mongoDB数据库，在接收请求时做对应的curd操作，比如这就是在接收保存文章时对应的操作：

router.post("/api/saveArticle", (req, res) => {
  const id = req.body._id
  const article = {
    title: req.body.title,
    date: req.body.date,
    content: req.body.content
  }
  if (id) {
    db.Article.findByIdAndUpdate(id, article, fn)
  } else {
    new db.Article(article).save()
  }
  res.status(200).end()
})

当然还有很多没提及的地方，最早写这个博客管理器的时候用的还是vue 1.x，后来用2.0改写后文档一直没改，所以最近更新了一下，避免误解。

其实整个管理器最复杂的地方时vuex异步数据视图的部分，不过这一部能讲的太多，就不在这里展开了，可以看官方文档后，参考源代码的注释。