使用 json-server 搭建 Mock Server

什么是 json-server

mock server 搭建工具

轻易搭建拥有完整 REST API 的轻量级后端服务

使用 json-server 方式

• 使用 json-server 命令启动一个服务
• 通过 module 将 json-server 引入到自己的 node 服务

ele-h5-server 架构

middleware

中间件，用来处理所有请求，比如鉴权、静态资源等功能

• json-server 提供的中间件: 静态资源、请求体解析
• 自定义中间件：鉴权

router

带路由 url 的中间件，处理特定路由 url 的请求

• json-server 的路由：一些直接使用 json 数据的api
• 自定义路由：有自定义逻辑的 api

ele-h5-server 文件结构

• data：存放所有数据 json 文件
• public：存放静态资源，比如图片
• src：项目代码

1. app.js 项目入口文件，包括应用创建、中间件使用
2. router.js 处理自定义路由
3. db.js 处理 json-server 的路由
4. controller 存放 controller
5. service 存放 service

初始化项目，并安装 json-server

npm init -y
npm install json-server -S

src\app.js

const path = require('path')
const jsonServer = require('json-server')
const router = require('./router')
const db = require('./db')()

// 创建 json-server 实例
const server = jsonServer.create()

// 中间件：处理静态资源
const middlewares = jsonServer.defaults({
    static: path.join(__dirname, '../public')
})

// 注册中间件
server.use(middlewares)

// json 数据解析
server.use(jsonServer.bodyParser)

// 处理 json-server 路由：传递 json-server 实例
router(server)

// 创建 json-server 路由配置
const jsonRouter = jsonServer.router(db)
server.use('/api', jsonRouter)

// 监听端口
server.listen(8000, () => {
    console.log('JSON Server is running at 80000')
})

data\test.js 测试数据

/**
 * 测试数据
 * @returns 
 */
module.exports = () => {
    return {
        name: 'test',
        desc: 'test 数据'
    }
}

src\router.js

const test = require('./controller/test')

// 处理 json-server 路由
module.exports = (app) => {
    app.use('/api/test', test)
}

src\controller\test.js

处理特定路由逻辑

const test = require('../../data/test')

module.exports = (req, res, next) => {
    const testData = test()
    testData.desc = '我是自定义测试'
    res.json(testData)
}

src\db.js

对json 数据进行加工处理

const test = require('../data/test')
module.exports = ()=>{
    return {
        test: test()
    }
}

安装 nodemon

自动监听文件修改，重启服务

npm i nodemon -D

package.json

dev": "nodemon --delay 1000ms ./src/app.js"