前言

整个6月份都在忙着毕业相关的事项,一直没有时间静下来写一下Mock的笔记,终于在所有的杂七杂八的事情都处理完之后可以开始继续写(guan)作(shui)了。

废话不多说,进入主题。

进入官网,映入眼帘的是这么几个大字,简洁明了、突出主题

image-20210706205749745

通过随机数据,模拟各种场景;不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则

他的特性也在官网标注出来了

前后端分离、增加单元测试的真实性、开发无侵入、用法简单、方便扩展、数据类型丰富……

使用方法

我们先来看使用方法,下一节再看语法。使用Mockjs的时候可以有两种方式,页面直接引入、node环境使用,node中可以在文件中运行也可以跑一个nodeServer来提供数据。

页面

使用script标签引入mockjs

<script src="http://mockjs.com/dist/mock.js"></script>

然后就可以使用Mockjs进行数据模拟了,语法不要关心,后面会讲

<body>
  <script src="http://mockjs.com/dist/mock.js"></script>
  <script>
    let data = Mock.mock({
        "userInfo|4": [{
          "id|+1": 1,
          "name": "@cname",
          "ago|18-28": 25,
          "sex|1": ["男", "女"],
          "job|1": ["web", "UI", "python", "php"]
        }]
      })

      console.log(data);
  </script>
</body>

在浏览器打开控制台就可以看见模拟的数据了