mockjs
引入
-
mockjs有什么用
mock是在前端模拟后台数据的一种方式，因此它需要url、请求方式和返回的数据等参数。
其功能正如其首页所言： “生成随机数据，拦截 Ajax 请求”
- 下载以及配置：
- 下载
npm install mock -D
使用
在vue项目中，于main.js中导入mock路由规则定义文件，就可以实现路由拦截了。
1. 定义数据： 生成规则
Mock.js 的语法规范包括两部分：
-
数据模板定义规范（Data Template Definition，DTD）
'name|rule': value -
数据占位符定义规范（Data Placeholder Definition，DPD）
name: @Radom'是使用Mock.Random是实现的。
const Random = Mock.Random;
Random.email() => 随机email
Random.Date() =>随机日期
2. 定义路由：Mock.mock
1. Mock.mock( template )
根据数据模板生成模拟数据，无路由功能
2. Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
3. Mock.mock( rurl, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
4. Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
5. Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
6. rurl
可选。
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。
7. rtype
可选。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
8. template
可选。
表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
9. function(options)
可选。
表示用于生成响应数据的函数。
10. options
指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。
从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。
3. 拦截配置：Mock.setup
配置拦截 Ajax 请求时的行为。支持的配置项有：
timeout。
timeout
可选。
指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})
