前端工程化-Mock Server：使用Node+json-server+mock.js搭建Mock Server

目的

为了便于前后端分离开发，前端在本地启动mock服务进行开发，后续对接联调时只需将接口地址改成真实地址即可。

一个优秀的mock server应具备以下功能：

1. 随机数据生成，避免手动创建数据；
2. 真实接口体验，内存CRUD，header字段指定等；
3. 自动扫描json目录（文件）生成API访问路径；
4. 服务热启动，json配置更新mock server自动重启；

搭建

1. 依赖npm包安装

• glob 文件扫描
• mock.js 随机数据生成
• json-server express服务，内存数据CRUD
• cross-dev 跨平台支持
• nodemon node进程自动重启，监听文件

2. 创建如下目录结构

其中mock目录下json文件会被mock server扫描注册

3. 核心代码编写

index.js

const path = require('path')
const fs = require('fs')
const jsonServer = require('json-server')
const mockJs = require('mockjs')
const glob = require('glob')
const server = jsonServer.create()
const middlewares = jsonServer.defaults()
// mock数据，常驻内存
let data = {}
/**
 * mock解析json文件
 * @param file
 * @returns {*}
 */
function parsingToMockJs(file) {
    const json = fs.readFileSync(file, 'utf-8')
    return mockJs.mock(JSON.parse(json))
}

/**
 * 合并json数据
 * @param path
 */
function mergeJsonData(path) {
    Object.assign(data, parsingToMockJs(path))
}

/**
 * 扫描mock目录，生成mock数据
 */
glob(path.join(__dirname, `/mock/**/*.json`), {}, (err, files) => {
    files.forEach(item => {
        mergeJsonData(item)
    })
   
    const router = jsonServer.router(data)

    server.use(jsonServer.bodyParser)
    server.use(middlewares)
    // 添加响应头
    server.use((req, res, next) => {
        res.header('author', 'tangrui')
        next()
    })

    // 数据统一封装
    router.render = (req, res) => {
        res.jsonp({
            flag: true,
            code: '2000',
            msg: 'success',
            data: res.locals.data
        })
    }
    server.use('/mock', router)
    server.listen(3000, () => {
        console.log('Mock server is running......')
    })
})

4. json数据编写

json有两种：

• json静态数据，标准json格式
• json动态数据，mockjs语法

5. 启动mock server

跨环境支持、热加载

cross-env nodemon index.js --watch 'mock'

也可将启动命令配置到package script中

总结

1. 在json文件中配置静态数据或mock.js语法动态数据，使用mockjs解析后传入json server；
2. express为Node Web框架，可编写任意服务代码，json-server内置Express，实现了内存CRUD等功能；
3. 使用glob扫描json文件；
4. 使用cross-dev、nodemon --watch对node进程提供跨平台、热更新等特性。