一文读懂前端数据模型MockJS
原创
https://mockjs.com/
Mock.js
生成随机数据，拦截 Ajax 请求。
前后端分离
让前端攻城师独立于后端进行开发。
增加单元测试的真实性
通过随机数据，模拟各种场景。
开发无侵入
不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
用法简单
符合直觉的接口。
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
方便扩展
支持支持扩展更多数据类型，支持自定义函数和正则。
安装mockjs.
npm install mockjs
Mock.mock('/product/get',{
"ret":0,
"data":{
"time": "@datetime",//随机生成时间
"score|1-800": 800, //随机生成1-800
"rank|1-100": 100,//随机生成1-100
"name": "@cname"//随机生成中文名
}
});
Mock核心方法
Mock.mock(rul?,rtype?,template|function(options))
rurl，表示需要来接的URL,可以是字符串或者URL正则
rtype, 表示需要三姐的Ajax请求类型，get ，post 、put等
template ,表示数据模板，可以是对象或字符串
function, 表示用于生成响应数据的函数
设置延时请求到数据
Mock.setup({
timeout: 400
})
Mock.setup({
?????? timeout: ‘200-600’
})
数据生成规则：数据模板、数据占位符
数据模板中的每个属性由3部分构成：属性名name、生成规则rule、属性值value：
‘name|rule’:value
若配置有Axios默认路径先注释，以免MockJS拦截的路径不生效
main.js导入
import './mock/index'
发送get请求
mounted: function () {
axios.get("/product/get").then(response => {
console.log(response.data.data.img);
this.image = response.data.data.img;
this.Data =response.data.data;
})
}
data() {
return {
Data: [],
image:""
}
},
效果
生成规则 是可选的。
生成规则的 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
MockJS生成案例
属性值字符串 String
'name|min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
'name|count': string
通过重复 string 生成一个字符串，重复次数等于 count。
属性值数字 Number
'name|+1': number
属性值自动加 1，初始值为 number。
'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
属性值布尔型 Boolean
'name|1': boolean
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
'name|min-max': value
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
属性值对象 Object
'name|count': object
从属性值 object 中随机选取 count 个属性。
'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性。
属性值数组 Array
'name|1': array
从属性值 array 中随机选取 1 个元素，作为最终值。
'name|+1': array
从属性值 array 中顺序选取 1 个元素，作为最终值。
'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|count': array
通过重复属性值 array 生成一个新数组，重复次数为 count。
属性值是函数 Function
'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
属性值是正则表达式 RegExp
'name': regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。