Mock.js的使用方法

React.js学习, 简书项目 本文总阅读量次

Mock.js

  • 作用：生成随机数据，拦截 Ajax 请求 （并返回数据）
  • 当后端还没开发好某个接口时，前端可以借助 Mock.js 拦截 Ajax 请求 并返回设置好的随机数据。当后端接口开发完成后，只需要改变 Ajax 请求 的接口路径即可。
  • 我们写AJAX请求的时候，正常写，Mock.js会自动拦截的。
  • 官方网站

作用

安装Mock.js

语法规范

具体可参考官方文档，我只记录使用到的部分。

数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

1
2
3
4
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
  • 属性名 和 生成规则 之间用竖线 | 分隔。
  • 生成规则 是可选的。
  • 生成规则 有 7 种格式：
    • 'name|min-max': value
    • 'name|count': value
    • 'name|min-max.dmin-dmax': value
    • 'name|min-max.dcount': value
    • 'name|count.dmin-dmax': value
    • 'name|count.dcount': value
    • 'name|+step': value
  • 生成规则 的 含义 需要依赖 属性值的类型 才能确定。(具体的含义可以回到官方文档中进行查看)
  • 属性值 中可以含有 @占位符。
  • 属性值 还指定了最终值的初始值和类型。

数据占位符定义规范

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符 的格式为：

1
2
@占位符
@占位符(参数 [, 参数])
  • 用 @ 来标识其后的字符串是 占位符。
  • 占位符 引用的是 Mock.Random 中的方法。
  • 通过 Mock.Random.extend() 来扩展自定义占位符。
  • 占位符 也可以引用 数据模板 中的属性。
  • 占位符 会优先引用 数据模板 中的属性。
  • 占位符 支持 相对路径 和 绝对路径。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

Mock.Random

  • 具体可参考官方文档
  • Mock.Random 是一个工具类，用于生成各种随机数据。
  • Mock.Random 的方法在数据模板中称为**『占位符』，书写格式为 @占位符(参数 [, 参数])**。
  • 注意：Mock.Random的方法 直接使用表示的是 JS变量 ，想要将其放入 属性值 中表示一个字符串则需要加上占位符

Mock.Random的方法（占位符）

  • 各个方法（占位符）的具体含义可参考官方文档
  • 注意： Mock.Random的方法表示的是一个JS变量，想要将其放在属性值中则需要加上**占位符@**将其转换为字符串。（例子在下面）
Type Method
Basic boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image image, dataImage
Color color
Text paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name first, last, name, cfirst, clast, cname
Web url, domain, email, ip, tld
Address area, region
Helper capitalize, upper, lower, pick, shuffle
Miscellaneous guid, id

方法表示JS变量，加占位符表字符串

Random.cname()随机生成一个常见的中文姓名：

1
2
Random.cname()
// => "袁军"

但是**Mock.Random.cname()表示的是一个JS变量，如果你想要用到属性值中，则需要加上一个占位符@使其表示一个字符串**（@cname）。

Mock.mock()

  • Mock.mock( template ):根据 数据模板template 生成 模拟数据。
  • Mock.mock( rurl, template ):记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
    • rurl(可选)表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
    • template(可选)表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
  • 更多使用方法可参考官方文档

例子

通过BootCDN引入mock.js

BootCDN:
引入mock.js

生成一个随机对象

1
2
3
4
5
6
7
8
9
10
11
<body>
  <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
  <script>
    var data = Mock.mock({
      "id": "@id",
      "name": "@cname",
      "age": "@integer(20,30)"
    })
    console.log(data);
  </script>
</body>

可以看到刷新页面之后得到的数据是不同的：
可以看到刷新页面之后得到的数据是不同的

生成一个随机对象组成的数组

但是只得到一个随机对象还不够方便，我们可以借助**数据模板定义规范中“属性值是数组 Array”时的 规则**('name|count': array:通过重复属性值 array 生成一个新数组，重复次数为 count)来构成一个随机对象组成的数组：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
  <script>
    var data = Mock.mock({
      "userList|20": [
        {
          "id": "@id",
          "name": "@cname",
          "age": "@integer(20,30)"
        }
      ]
    })
    console.log(data);
  </script>
</body>

可以看到刷新页面之后得到的数据是20个随机对象组成的数组的：
20个随机对象组成的数组

@id是随机生成的18位身份证号码，我们可以让属性id从1开始递增：

1
"id|+1": 1,

id是从1开始递增的

拦截AJAX请求，返回mock数据

在这之前我们已经明白如何生成mock数据了，那么我们接下来
我们可以使用jquery来发送一个AJAX请求，首先到BootCDN中引入jquery。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
  <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    //如果拦截到"/userList"的请求，就返回对应的mock数据
    Mock.mock("/userList", {
      "userList|20": [
        {
          "id|+1": 1,
          "name": "@cname",
          "age": "@integer(20,30)"
        }
      ]
    })
    //发送AJAX请求，获取"/userList"下的数据
    $.get("/userList", data => {
      //直接拿到的data是字符串，我们需要将其转换为JS对象
      console.log(JSON.parse(data));
    })
  </script>
</body>

直接拿到的mock数据是字符串，为了方便后续操作，需要通过JSON.parse()将其转换为 JS对象。
原因：
上面这个例子，如果我们想循环这个数组，得到数组中的某一项放在页面上，此时我们就需要对数组进行操作，如果我们拿到的数据是 字符串 ，那就很麻烦了。

项目中实际运用

在项目中新建一个mock文件夹，在该文件夹下放专属的js文件用于 规定拦截到某个AJAX请求时传回相应的模拟数据。
在需要用到这个接口下的数据的文件中，引入mock.js（通过BootCDN查找引入链接），再引入这个mock文件夹下的js文件，即可发出AJAX请求。

在react中使用mock.js

注意：但在react中，我们通过axios发起 AJAX请求 拿到的数据直接就是对象，不需要进行转换：
使用axios时打印的res

使用流程：

  1. 在项目中安装mock.js：yarn add mockjs
  2. 在 src目录 下创建 mock文件夹 用于存放我们的 定义mock数据 的js文件，在TodoListMock.js中引入mockjs并写入我们的模拟数据。
    1. import Mock from "mockjs"//引入Mock
    2. export default//记得输出mock组件
  3. 在需要发出 AJAX请求 的文件中引入我们写好的mock组件，那么接下来只要正常书写AJAX请求（通过axios）即可，一旦对应的请求发出，Mock就会拦截并返回数据。
    1. import "./mock/TodoListMock";//引入自定义的mock组件
    2. 正常发出 AJAX请求
React.js学习, 简书项目