全栈开发博客系统（nodejs+vuejs+mongodb）

本篇文章将会介绍如何使用nodejs+vuejs构建我的博客。

主要分三部份内容：

1. 环境准备
2. 博客后端管理系统（admin）
3. 后端服务（主要提供admin及web端接口）
4. 博客前端展现（web）

环境准备

• nodejs

  直接去官网下载最新的稳定版就好，如下为下载连接：
  https://nodejs.org/en/download/

• vue-cli

  这是一个强大的构建工具，使用它能够很方便的管理一个vue的项目，而且不须要更多的webpack配置。建议全局安装：
  npm install --global vue-cli

• mongodb

  后端要用到的数据库。直接去官网下载对应系统的版本就好，注意要下载server版。下载地址：
  http://downloads.mongodb.com/

博客后端管理系统

项目建立

首先建立一个基本的vue后端项目，可使用如下命令：

vue create admin

对于出现的一些选项，直接选择默认就可。
建立好后的目录结构以下：

router集成

使用vue-cli能够很方便的集成路由：

vue add router

注意，默认会采用history模式，为了之后方便些，这里要选择(n)即用hash模式，而不是浏览器的history模式。

element-ui集成

为了方便，后端的页面咱们采用element-ui提供的一些组件实现，因此要把element-ui集成进来：

vue add element

提示选项，所有选择默认就可。

好了，到目前为止，后端项目的基本结构就算构建完成了。能够经过如下命令启动：

npm run serve

启动后的默认页面以下：

页面基本布局

能够采用element-ui的layout-container，直接把样例代码copy过来放到Home.vue 的template里面就能够。
可是这里有一点要注意，因为在切换左侧菜单的时候，咱们但愿只有右侧是变更的，左侧应该保持不变，因此这里须要用到<router-view>。把右侧变更的部分挂载到<router-view>这里。

新建分类页面

首先新建一个CategoryEdit.vue文件，而后添加路由。
路由这里须要注意，右侧的可变更的页面应该做为Home组件的子路由。
这样，CategoryEdit这个页面的内容就会显示在咱们以前定义的<router-view>的位置。

好了，这样当咱们在浏览器输入"http://localhost:8080/#/categories/create", CategoryEdit页面就会显示出来了。具体的页面内容在这里不介绍了。都是用的element-ui的组件。

因为篇幅有限，其余的页面在这里也不详细一一介绍了，具体源码已开源到GitHub。

最终的项目页面结构会是下面这样：

共分红三部分：分类管理、文章管理及用户管理。

对于页面中使用的接口，会在接下来的server部分介绍。

后端服务

这部分采用nodejs + mongodb实现。

项目构建

1. 首先在根目录（与admin同级的目录）新建文件夹server。
2. 新建一个package.json文件，可使用如下命令初始化一个
   npm init
   所有选择默认便可。
3. 依赖安装。后端主要会用到如下依赖。

"cors": "^2.8.5",       // 容许跨域请求
    "express": "^4.17.1",   // 后端框架
    "mongoose": "^5.6.12",  // 数据库
    "nodemon": "^1.19.2",   // 当文件变动后会自动重启后端服务

1. 以上依赖安装完后新建一个index.js文件。

const express = require('express')
const cors = require('cors')
const app = express()

// 容许跨域
app.use(cors())
app.use(express.json())

app.listen('3000', async(req, res) => {
  console.log("http://localhost:3000")
})

1. 经过如下命令就能够启动后端服务了：

nodemon start index.js

路由定义

新建一个router文件夹，而后新建admin文件夹做为admin端的接口，平级能够再建一个web文件夹做为web端的接口。在admin文件夹下新建index.js文件

module.exports = app => {
  const express = require('express')
  const router = express.Router()

  // 获取资源
  router.get('/getData', async (req, res) => {
    res.send("hello world")
  })
  
  app.use('/admin/api/rest', router)
}

注意这里导出的是一个函数，这样作有个好处就是能够传递参数进来，这里咱们传入了app做为参数。

在根目录的index.js文件中须要引入一下：

require('./routers/admin/index')(app) // 直接执行函数并传入app做为参数

当在浏览器中输入"http://localhost:3000/admin/api/rest/getData" 时，会看到"hello wrold"。

链接数据库

接下来新建一个文件夹db，而后新建db.js文件:

module.exports = app => {
  const mongoose = require('mongoose')

  mongoose.connect('mongodb://localhost:27017/myblog', {
    useNewUrlParser: true
  })
}

mongodb安装完后默认会在27017端口启动，myblog是咱们给数据库的命名。

而后在index.js文件中须要引入db.js。

require('./db/db')(app)

建立模型

新建models文件夹，在文件夹下新建Category.js做为分类的模型。

const mongoose = require('mongoose')

const schema = new mongoose.Schema({
  title: {type: String}
})

module.exports = mongoose.model('Category', schema)

暂时只定义一个分类名称 "title"

数据查询

在routers/admin/index.js中经过如下代码就能够查询categories表中的数据。

// 获取分类列表
  router.get('/categories', async (req, res) => {
    const res = await Category.find()
    res.send(res)
  })

当在浏览器中输入 "http://localhost:3000/admin/api/rest/categories" 便可获得categories表的数据。

好了，经过以上的介绍，咱们应该可以实现一些简单的增删改查操做。

中间件

在开发的过程当中，咱们必定会遇到一个问题。

前面提到，后端admin主要包括三大模块：分类管理、文章管理、用户管理。

每个模块都会涉及增删改查操做。若是咱们为每个模块都定义一套本身的增删改查接口，势必会产生不少重复代码，并且若是是分类比较多的状况，重复代码会更加严重。因此这里能够考虑自定义一个中间件。

首先新建一个文件夹middleware，而后新建resource.js文件（咱们能够把每一个分类都理解为资源），统一对资源进行增删改查操做，惟一的不一样是资源名称。

module.exports = options => {
  return async (req, res, next) => {
    const inflection = require('inflection')
    const modelName = inflection.classify(req.params.resource)
    req.Model = require(`../models/${modelName}`)
  
    next()
  }
}

这里用到了inflection库，须要先安装一下，而后用inflection.classify把传入的参数转为单数形式，做为模型的名称。

而后将routers/admin.index.js改成如下方式

// 获取资源
  router.get('/', async (req, res) => {
    const data = await req.Model.find()
    res.send(data)
  })

  app.use('/admin/api/rest/:resource', resourceMiddleware(), router)

好了，因为篇幅有限，其余的一些内容就暂不介绍了，详细代码能够参考GitHub。

博客前端展现（web）

项目构筑

这部分和admin差很少，新建web项目，须要集成router，但不须要element-ui，具体能够参照上文后端管理系统的项目构筑介绍。

主题选择

主题部分我是直接从Jekyll Themes主题库中选取的一个，因为时间没那么多，再加上是本身作着玩，因此偷个懒。在这里贴出原做者 Liberxue。

访问量统计

访问量统计这里用到了一个免费的开源库不蒜子，很是轻量级，使用起来也很简单。

主页面

结尾

好了，暂时就先介绍这么多吧，还有不少内容就不一一展开了。若是你们有疑问能够留言。

因为本人是前端出身，作了六七年前端了。后端也是刚刚接触不久，因此上文前端部分介绍的可能会少一些，相对后端会多些，若是有哪些错误的地方欢迎指正。

源码已经开源到GitHub, 若是您觉着对本身还有些帮助，但愿能给个Star。