title: mockjs + json-server 搭建mock服务
date: '2021-10-18'
categories:

• JS
  tags:
• mock
  publish: true

:::tip
前后端分离情况下，后端未开发完成，前端使用mock自行模拟数据。
:::

// 目录结构
|-- mockServer
   |-- mock
       |-- db.json
   |-- index.js
   |-- middleware.js
   |-- package.json

一、安装

npm i mockjs json-server nodemon cross-env glob -S

// package.json
"scripts": {
    "mock:server": "cross-env nodemon index.js --watch 'mock' --watch './middleware.js'"
  },

二、使用

// index.js
const path = require('path');
const fs = require('fs');
const jsonServer = require('json-server');
const mockJs = require('mockjs');
const Random = mockJs.Random;
const customMiddleware = require('./middleware');
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.post('/api/upload/image', (req, res) => {
        res.jsonp({
            id: Random.image('300x250', Random.color())
        });
    })

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

    server.use(customMiddleware);

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

// middleware.js
const mockJs = require('mockjs');
const Random = mockJs.Random;

module.exports = (req, res, next) => {
  // 可以对请求进行特殊操作
  console.log(req.body);
  console.log(req._parsedUrl);
  if(req.method === 'POST' && req._parsedUrl.pathname === '/api/dynamics') {
    req.body.imageUrl = Random.image('300x250', Random.color());
    req.body.viewCount = Random.natural(1, 1000);
  }

  next()
}

// 启动
npm run mock:server

• 1、分页列表请求

  • 数据

    // db.json 
    // 一百条数据
    {
      "dynamics|100": [
        {
          "id|+1": 1,
          "title": "@cparagraph()",
          "imageUrl": "@image",
          "viewCount": "@natural(1, 1000)"
        }
      ]
    }
    

  • 请求

    GET: http://localhost:3000/api/dynamics?_page=1&_limit=20
    

• 2、删除一条数据

  • 数据同1

  • 请求

    // 删除第一条
    DELETE: http://localhost:3000/api/dynamics/1
    

• 3、获取一条数据

  • 数据同1
  • 请求

  // 获取第一条
  GET: http://localhost:3000/api/dynamics/1
  

• 4、修改一条数据

  • 数据同1

  • 请求

    // 修改第一条
    PATCH: http://localhost:3000/api/dynamics/1
    data: {
      title: 'xxx'
    }
    

• 5、添加一条数据

  • 数据同1
  • 请求

  // 修改第一条
  POST: http://localhost:3000/api/dynamics
  data: {
    title: 'xxx'
  }
  

• 6、上传图片

自定义路由在 server.use(jsonServer.bodyParser);之前。

// 自定义路由
  server.post('/api/upload/image', (req, res) => {
  //  这里还是不使用真实上传的图片
    res.jsonp({
        id: Random.image('300x250', Random.color())
    });
  })

原文链接