前端必会的三种mock方式

介绍#

官方网站
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。

使用#

• 安装

  1
  npm install mockjs

• 使用

  1
  // 使用
  2
  var Mock = require('mockjs');
  3
  var data = Mock.mock({
  4
      'list|1-10': [{
  5
          'id|+1': 1
  6
      }]
  7
  });
  8
  console.log(JSON.stringify(data, null, 4))

如何在项目中使用#

1. 创建mockData，yarn init初始化

2. 添加app.js，并添加express启动服务

   1
    const express = require("express");
   2
    const bodyParse = require("body-parser");
   3
   
   4
    const app = express();
   5
   
   6
    /*为app添加中间件处理跨域请求*/
   7
    app.use(function(req, res, next) {
   8
      res.header("Access-Control-Allow-Origin", "*");
   9
      res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
   10
      res.header("Access-Control-Allow-Headers", "X-Requested-With");
   11
      res.header('Access-Control-Allow-Headers', 'Content-Type');
   12
      next();
   13
    });
   14
    app.use(bodyParse.json());
   15
    app.use(
   16
      bodyParse.urlencoded({
   17
        extended: false, // 扩展模式
   18
        limit: 2 * 1024 * 1024, // 限制2m
   19
      })
   20
    );
   21
   
   22
   
   23
    const testRouter = require('./router/test')
   24
    app.use('/mockJS/api/testApi', testRouter)
   25
   
   26
    app.listen(8080, () => {
   27
      console.info("服务启动http://localhost:8080");
   28
    });

   展开收起

3. 创建test文件

   1
    const express = require("express");
   2
    const router = express.Router();
   3
    const mock = require("mockjs");
   4
   
   5
    router.get("/demo", (req, res) => {
   6
      res.send({
   7
        ...mock.mock({
   8
          code: 200,
   9
          message: null,
   10
          data: {
   11
            title: "Syntax Demo",
   12
   
   13
            "string1|1-10": "★",
   14
            "string2|3": "value",
   15
   
   16
            "number1|+1": 100,
   17
            "number2|1-100": 100,
   18
            "number3|1-100.1-10": 1,
   19
            "number4|123.1-10": 1,
   20
            "number5|123.3": 1,
   21
            "number6|123.10": 1.123,
   22
   
   23
            "boolean1|1": true,
   24
            "boolean2|1-2": true,
   25
   
   26
            "object1|2-4": {
   27
              110000: "北京市",
   28
              120000: "天津市",
   29
              130000: "河北省",
   30
              140000: "山西省",
   31
            },
   32
            "object2|2": {
   33
              310000: "上海市",
   34
              320000: "江苏省",
   35
              330000: "浙江省",
   36
              340000: "安徽省",
   37
            },
   38
   
   39
            "array1|1": ["AMD", "CMD", "KMD", "UMD"],
   40
            "array2|1-10": ["Mock.js"],
   41
            "array3|3": ["Mock.js"],
   42
   
   43
            function: function () {
   44
              return this.title;
   45
            },
   46
          },
   47
          success: true,
   48
        }),
   49
      });
   50
    });
   51
   
   52
    module.exports = router;

   展开收起

4. 浏览器访问http://localhost:8080/mockJS/api/testApi/demo

5. 配置webpack或vite的proxy，添加mock配置

   1
   ...
   2
   '/mockJS': {
   3
      target: 'http://localhost:8080',
   4
      ws: true,
   5
      changeOrigin: true,
   6
    },

安装#

1. 安装 [chrome扩展]((ttps://chrome.google.com/webstore/detail/ajax-interceptor/nhpjggchkhnlbgdfcbgpdpkifemomkpg?hl=zh-CN)
2. 使用