基于express和mock.js搭建自己的前后端分离Mock服

适合人群：初学者

1. 运行$ npx express-generator api-server创建一个express项目
2. $ cd api-server进入项目目录
3. $npm i安装项目需要的依赖包
4. $npm i nodemon -D安装nodemon
5. $npm i mockjs -S安装mockjs包
6. 打开项目目录下的package.json, 更改scripts:

      改前 "start": "node ./bin/www"
      改后 "start": "nodemon ./bin/www"
   

7. 根据需要配置路由
8. 比如，有一个叫users的路由挂载在/api/v1/users下，就可以这么来写这个mock数据

       // 引入express
      const express = require('express');
      // 只使用router
      const router = express.Router();
      // 引入Mock对象
      const Mock = require('mockjs')
     // 定义生成数据列表的方法
   
     ---这里是方法代码块---
             方法 一
             方法 二
             方法 三
     module.exports = router;
   

一：定义生成数据 普通 列表的方法

  const generateData = () => {
  // 使用Mock.mock方法来生成mock数据
    return Mock.mock({
      "code": 200,
      "data|12": [
        {
          "id": "@id",
          "title": "@ctitle(15, 25)",
          "author": "@cname",
          "volume": "@int(100, 300)",
          "createAt": "@int(10000000000000, 1554363040517)"
        }
      ]
    })
  }
 /* 获取用户列表方式 */
 router.get('/', function(req, res, next) {
  res.json(generateData())
  });

二：定义生成数据 携带id 请求单条数据的方法

// 定义另外一个方法，用于生成单个数据
   const generateDataById = (id) => {
     return Mock.mock({
       "code": 200,
       data: {
         id, //请求ID
         "title": "@ctitle(15, 25)",
         "author": "@cname",
         "volume": "@int(100, 300)",
         "createAt": "@int(10000000000000, 1554363040517)"
       }
     })
   }
/* 获取单个用户，根据用户的id, 这里有一个express通配符路由(动态路由) */
  //这里  '/:id'中 ‘：’是通配符的意思
   router.get('/:id', function(req, res, next) {
     const  { id } = req.params
     res.json(generateDataById(id))
   });   

三：定义生成数据 限定页数条数 列表的方法

//生成限定第几页数据
const generateDataPage=(limited=10 , offset=0)=>{
  return Mock.mock({
    code: 200,      
    data:{
      currentPage: (offset / limited) + 1 , //计算第几页公式
      isLastPage:false,//是否最后一页，否
      total:1000, //这里写多少可以，实际开发中以后端为主
    //特别注意这里 [`list|${limited}`]模板字符串，变量key用括号包起来
        [`list|${limited}`]: [
          {
            "id": "@id",
            "img": "@img(262x262,@color)",
            "title": "@ctitle(8,12)",
            "price|1-1000": 20,
            "status": "@ctitle(2)"
          }
        ]   
    }
  }) 
 }

//生成指定的第几页数据
router.get('/pages', function(req, res, next) {
  //解构
  const {limited=5, offset=0} = req.query
  //请求的参数，一次limited条
  res.json(generateDataPage(limited,offset))
});

以上代码为完整代码，只是拆开解析，方便理解，主要放进相应位置即可。写的不足的地方，还请指教！