自从有了json-server和mockJS，再也不用手写json啦...

一、前言

在进行web网站开发时，需要使用的数据接口通常由后端的同志提供，但是后端同志准备接口也是需要时间的，那在此期间，前端同志一般会使用假数据进行模拟，最简单的办法就是手写json数据啦，可谓是满满的泪…通过使用json-server+mockJS编写的数据模拟器，可以解决数据接口模拟的痛点，可谓是真舒服…

二、准备工作

step1：目录规划
   |- mock
   		 |- config.js ---- 配置信息
   		 |- routes.js ---- 路由信息配置
         |- server.js ---- 负责服务器搭建、逻辑验证及输出数据的模板指定
         |- db.js     ---- 负责批量模拟数据
step2：第三方依赖安装 (npm、yarn、bower都可)
   npm install json-server mockjs --save

三、config.js文件

// 定义配置信息
module.exports = {
  HOST: "localhost", // 定义ip地址
  PORT: "3000", // 定义端口号
  DB_FILE: "./db.js" // 定义批量模拟数据文件
};

四、routes.js文件

const mock = '/mock';//创建根api名 这里的 /mock 如同 后端真实/api
// 自定义路由匹配规则
module.exports = {
  [mock + "/*"] : "/$1", // 路由请求由/mock/*接管
};

五、server.js文件

const jsonServer = require("json-server"); // 引入json-server服务
const {HOST, PORT, DB_FILE} = require("./config.js"); // 引入配置信息
const rules = require("./routes"); // 引入自定义路由匹配规则
const data = require(DB_FILE)(); // 获取到mockJS模拟的数据
const middleWares = jsonServer.defaults(); // 使用json-server默认的中间件
// 服务器搭建
const server = jsonServer.create(); // 创建http服务
const router = jsonServer.router(data); // 将路由配置和生成的数据以对象的形式传递给jsonServer.router()方法
server.use(jsonServer.bodyParser); // 安装json-server自带的body-parser，用于获取非地址栏传递的数据
server.use(middleWares); // 安装中间件
// 响应/mock/req请求,进行注册操作
// 注意： 自定义路由响应需要在安装json-server的router之前
server.post('/mock/reg', ({body:{username="",password=""}}, res) => {
  // console.log(username,password);
  (username !== 'admin' && password) ?
    res.jsonp({
      "err": 0,
      "msg": "注册成功",
      "data": {
        username,
        password
      }
    }) :
    res.jsonp({
      "err": 1,
      "msg": "注册失败"
    })
});
// 响应/mock/login,进行登录验证操作
server.post('/mock/login', ({body:{username="",password=""}}, res) => {
  (username === 'user' && password === 'user123456') ?
    res.jsonp({
      "err": 0,
      "msg": "登录成功",
      "userInfo": {
        "address": "打破",
        "email": "louis.lyr@outlook.com",
        "tel": "15185724613"
      }
    }) :
    res.jsonp({
      "err": 1,
      "msg": "登录失败",
    })
});
// 自定义返回内容
router.render = (req, res) => {
  let status;
  let len = Object.keys(res.locals.data).length; // 判断是否获取到mockJS模拟的数据
  if (res.req.originalMethod === "DELETE") {
    status = len === 0;
  } else {
    status = !!len;
  }
  ;
  setTimeout(() => {  // 由于本地请求速度较快，不方便loading动效显示利用延时器，模拟真实服务器请求速度
    res.jsonp({  // 使用res.jsonp()方法将mockJS模拟生成的数据进行自定义包装后输出
      err: status ? 0 : 1,
      msg: "操作" + (status ? "成功" : "失败"),
      data: res.locals.data
    })
  }, 1000);
};
server.use(jsonServer.rewriter(rules)); // 根据需要重写路由匹配规则
server.use(router); // 安装路由
// 监听http服务
server.listen({
  host: HOST,
  port: PORT
}, () => {
  console.log(`The server is running on http://${HOST}:${PORT}`);
});

六、db.js文件

const Mock = require("mockjs"); // 引入mockJS
const MR = Mock.Random; // 提mock的随机对象
// 由于jsonServer接收的是一个对象或者是函数，所以此文件需要对外导出一个对象或者函数
// 注意：在使用mockJS的api生成随机数据时，会产生相同数据，如果需要修复这一bug，可自行将id进行随机操作
function mapData(n){
  let data = [];
  for(let i = 0; i < n; i++){
    data.push({
      id: i,
      "imgURL": MR.image('750X200',MR.color(),MR.cword(4,10))
    })
  };
  return data;
};
module.exports = () => {
  let data = Mock.mock({
    "home|5": [
      {
        // 属性“id”是一个自增长数，初始值为1,可以在|后面指定增长量,mockJS语法可参照MockJS官方文档：http://mockjs.com/
        "id|+1": 1,
        "name": "@cname",
        "imgURL": MR.image('750X200',MR.color(),MR.cword(4,10)) // 产生相同的数据
      },
    ],
    "homee": mapData(10),
      // 如果需要添加其它接口可在此文件内添加...
  });
  return data;
};

七、请求方式

请求姿势	接口实例	作用	参数携带
get	获取数据	/mock/home	/mock/home/id
post	新增数据	/mock/home	{key:value,…}
delete	删除一条数据,默认删除第一条	/mock/home/id	-
put	修改数据	/mock/home/id	{key:value}

** tips ** ：使用json-server+mockJS模拟的数据接口支持RESTFUL风格的绝大多数请求方式，可自行尝试，能够探索出教程上没有的东西，这才是开发者应有的状态

八、End

故事到了这里，就要说再见啦！文中所给出的解决方案存在许多不足，希望大家多多提出意见，我会虚心采纳的哦~~~！