1在vue-cli搭建的项目内通过npm下载mockjs
npm install mockjs --save-dev
在项目目录下的package.json文件的devDependencies:查看mockjs是否下载并添加进依赖。
"mockjs": "^1.0.1-beta3"
有上面这一项说明下载并添加到了依赖
2、书写mockjs代码
//mock.js
//引入mockjs模块
const Mock = require('mockjs')
//定义几个数组
var type = ["苹果",'华为','三星','小米','索尼','诺基亚']
var neicun = ["16G",'32G','64G','128G','256G','521G']
var wangluo = ["联通4G",'移动4G','电信4G','移动/联通双4G','全网通']
Mock.mock('/mock/user', { //'/mock/user'表示当请求路径为该路径时会被拦截
'one|20':[ //one为数组名称,数组成员为对象，20表示生成20个对象，也就是数组成员
{
'type|1':type, //type为属性名，属性值为type数组中随机的1个
'neicun|1':neicun, //neicun为属性名，属性值为neicun数组中随机的1个
'wangluo|1':wangluo //wangluo为属性名，属性值为wangluo数组中随机的1个
}
]
});
3、在需要使用mock数据的组件中引入mock.js文件
require("../mockjs/mock.js")
4、在该组件生命周期函数中发送ajax请求，请求地址与mock.js中拦截路径一致
created:function(){
this.$http.get('/mock/user')
.then((data))=>{
console.log(data)
})
}
控制台输出：
image.png
可以看到，我们真正需要的数据在data中，也就是data.data,是一个数组
4、使用mock数据
data () {
return {
name:"",
age:"",
color:"",
arr:[]
}
},
created:function(){
this.$http.get('/mock/user')
.then(({data})=>{
this.arr= data.one //将mock数据中的数组赋值给该组件的arr数据
})
}
<div v-for='(item,index) in arr' :key=index>
<p>品牌-{{item.type}}</p>
<p>内存-{{item.neicun}}</p>
<p>网络-{{item.wangluo}}</p>
</div>
浏览器效果：
image.png
5、数据模板DTD
上面的写法时mock语法规范中的一种，叫做数据模板，需要我们自己去定义属性规则和属性值
' name | rule':value
name：属性名
rule： 属性规则
value： 属性值
一共有7种规则：
1、‘name|mix-max’:value
2、'name|count':value
3、'name|mix-max.dmix-dmax':value //整数部分大小范围mix-max，小数部分个数
范围dmix-dmax，大小随机
4、'name|min-max.dcount':value //整数部分大小范围mix-max，小数部分个数位
dcount，大小随机
5、'name|count.dmin-dmax':value //整数部分为count,小数部分个数范围dmin-dmax
6、'name|count.dcount':value //整数部分为count,小数部分个数为dcount,大小随机
7、'name|+step':value //以value为初始值，每次+1
属性值是String
var data = Mock.mock({
'name1|1-3':'a', //重复生成1到3个a 1-3表示最少重复1次，最多重复3次
'name2|2':'b' //生成bb 2表示只重复两次
})
属性值是Number
var data = Mock.mock({
'name1|+1':4, //初始值为4，如果循环每次加1
‘name2|1-7':2, //生成一个数字，1到7之间，默认初始值为2
'name3|1-4.5-8':1 //生成一个小数，整数部分1到4，小数部分5到8位
'name3|1-4.5':1 //生成一个小数，整数部分1到4，小数部分5位随机
'name3|10.5-8':1 //生成一个小数，整数部分为10，小数部分5到8位
'name3|3.5':1 //生成一个小数，整数部分为3，小数部分5位随机
})
其实属性值为Number时，value没什么用
属性值是Boolean
var data = Mock.mock({
'name|1':true, //生成一个布尔值，结果为true和false的概率
'name1|1-3':true //生成一个布尔值，1/4概率是true，3/4概率是false
})
属性值是Object
var obj = {
a:1,
b:2,
c:3,
d:4
}
var data = Mock.mock({
'name|1-3':obj, //随机从obj中寻找1到3个属性，组成新对象
'name|2':obj //随机从onj中找到两个属性，组成新对象
})
属性值是Array
var arr = [1,2,3];
var data = Mock.mock({
'name1|1':arr, //从数组里随机取出1个值
'name2|2':arr, //数组重复count次，这里count为2
'name3|1-3':arr, //数组重复1到3次
})
属性值是Function
var fun = function(x){
return x+10;
}
var data = Mock.mock({
'name':fun(10) //返回函数的返回值20
})
属性值为RegExp
根据正则表达式反向生成对应的字符串，用于生成自定义格式的字符串
var data = Mock.mock({
‘name1':/[a-z][A-Z]/, //例如aA、cZ、qW
'name2':/\d{1,3}/ //例如1、23、56
})
网友评论