mockjs + json-server 搭建mock服务

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()
}

bash

// 启动
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())
    });
  })

mockjs + json-server 搭建mock服务

一、安装 ​

二、使用 ​

一、安装

二、使用