目的
为了便于前后端分离开发,前端在本地启动mock服务进行开发,后续对接联调时只需将接口地址改成真实地址即可。
一个优秀的mock server应具备以下功能:
随机数据生成,避免手动创建数据;
真实接口体验,内存CRUD,header字段指定等;
自动扫描json目录(文件)生成API访问路径;
服务热启动,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中
总结
在json文件中配置静态数据或mock.js语法动态数据,使用mockjs解析后传入json server;
express为Node Web框架,可编写任意服务代码,json-server内置Express,实现了内存CRUD等功能;
使用glob扫描json文件;
使用cross-dev、nodemon --watch对node进程提供跨平台、热更新等特性。