一.介绍
Mock.js是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据。
1. 安装
npm install mockjs -D
2. 新建mockjs文件
新建mock文件夹,在index.js中定义userData数据
index.js
// 引用 Mock
const Mock = require('mockjs')
export const userData = Mock.mock("/data/list", "get", {
// 属性 list 的值是一个数组,随机生成 1 到 10 个元素
"list|1-10": [
{
// 随机生成1-10个★
"string|1-10": "★",
// 随机生成1-100之间的任意整数
"number|1-100": 1,
// 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 10 位。
"floatNumber|1-100.1-10": 1,
// 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
"boolean|1": true,
// 随机生成一个布尔值,值为 false 的概率是 2 / (2 + 5),值为 true 的概率是 5 / (2 + 5)。
'bool|2-5': false,
// 从属性值 object 中随机选取 2-4 个属性
"object|2-4": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
// 通过重复属性值 array 生成一个新数组,重复次数为 2
"array|2": [
"AMD",
"CMD",
"UMD"
],
// 执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。
'foo': '哇哈哈哈哈',
'name': function () {
return this.foo
},
// 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
'regexp': /\d{5,10}/,
},
],
code: 200,
message: 'ok',
});
3. 使用mockjs虚拟数据
如果需要使用虚拟数据,就在main.js入口文件中导入mockjs文件。
// 导入mockjs
import './mock/index.js'
使用getData方法获取数据
getData() {
axios.get("/data/list").then(res => {
console.log("res",res);
}).catch(error => {
console.log(error);
})
},
控制台打印数据:
二、建立虚拟数据(mockjs文件)
1、导入mockjs
import Mock from "mockjs";
2、设置请求延迟时间
Mock.setup( settings ):配置拦截 Ajax 请求时的行为。
3、生成随机数据
下面介绍Mock.js中常用的 API。
生成随机数据
● Mock.Random对象包含了Mock.js中的所有随机数据生成方法。下面是一些常用的方法:
● Mock.Random.boolean():生成一个随机的布尔值。
● Mock.Random.integer(min, max):生成一个随机的整数,可以指定范围。
● Mock.Random.float(min, max, dmin, dmax):生成一个随机的浮点数,可以指定范围和精度。
● Mock.Random.string(length):生成一个随机的字符串,可以指定长度。
● Mock.Random.name(middle?):生成一个随机的常见英文姓名。
● Mock.Random.cname():生成一个随机的常见中文姓名。
● Mock.Random.date():生成一个随机的日期。
● Mock.Random.time():生成一个随机的时间。
● Mock.Random.datetime():生成一个随机的日期时间。
● Mock.Random.image(size, background, foreground, format, text):生成一个随机的图片,可以指定大小、背景色、前景色、格式和文字。
生成数据模板指定的数据
Mock.mock(template) 根据数据模板生成模拟数据。
Mock.mock( template ):根据数据模板生成模拟数据. template表示数据模板,可以是对象或字符串。数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值。
● ‘name|rule’: value :属性名 name、生成规则 rule、属性值 value。属性名 和 生成规则 之间用竖线 | 分隔。
● ‘name|min-max’: array:当属性值是数组 Array。通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。
● ‘name|+1’: number:当属性值是数字 Number。属性值自动加 1,初始值为 number。
● 占位符:用 @ 来标识其后的字符串是 占位符。占位符 引用的是 Mock.Random 中的方法。
● @cname:随机生成一个常见的中文姓名。
● @ctitle( min, max ):随机生成一句中文标题。默认值为 3 到 7 之间的随机数。
● @integer( min, max ):返回一个随机的整数。min是最小值,max是最大值。
常用语法
● “id”:“@id”
● “star|1-2”:“★” 字符串重复一道2次
● “price|100-200.2-3” 小数点2-3位
● “data|10”:[{name:“名称”}] 数组的内容重复10遍
● “live|1”:true,随机返回true,false
● “tel”:/13 \d{9}/,
● “des”:function(){ return this.start+this.price}
● “name”:“@cname” 表示中文名称
● “address”:“@country(true)” 地址
● “ip”:“@ip”,
● “description”:“@cparagraph(1, 3)” 随机段落2-3行
● “pic”:@dataImage(‘200x100’,‘色块图片’)`
数据模版可以生成复杂的数据结构。下面是一个示例:
const data = Mock.mock({ 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ }) console.log(data)
运行上面的代码,可能会得到如下的输出结果:
{ name: '杜浩', age: 15, email: 'xianq@163.com', phone: '13940684653' }
4、模拟接口请求
Mock.mock(url, template)和Mock.mock(method, url, template)用于根据接口地址和数据模板模拟接口请求,支持GET、POST、PUT、DELETE等请求方法。示例如下:
Mock.mock('/user', 'get', { 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ }) Mock.mock('/user', 'post', { 'result': 'success' })
设置Ajax请求响应时间
Mock.setup({timeout: 400}) 指定被拦截的Ajax请求的响应时间,表示400毫秒后才会返回响应内容。示例如下:
Mock.setup({timeout: '200-600'}) Mock.mock('/user', { 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ })
上面的代码表示,响应时间介于200到600毫秒之间。
5.总结
本文介绍了Mock.js的基础用法,包括随机生成用户信息、随机生成用户信息数组、Mock.js API的常用方法、生成数据模板和模拟接口请求。Mock.js是一个非常实用的数据模拟和接口测试工具,能够大大提高前端开发效率。小伙伴快去试试看吧~