1.安装
npm install mockjs --save-dev
2.创建mock文件夹,并创建mocke.js以及数据文件(这里以data.json为例)
/data.json中的数据/
{
"list":[
{
"name":"微创",
"age":15,
"height":180
},{
"name":"王五",
"age":20,
"height":190
}
]
}
/mock.js/
import Mock from 'mockjs'
import data from './data.json'
//注意第一个参数是url地址,这要与ajax请求中的地址一致
Mock.mock('http://www.weichuang.com/getList',{data:data.list})
3.main.js引入mack.js
import "@/mock/mock.js"
4.测试
这里我用axios为例。
/在组件模块中使用/
import axios from 'axios'
export default {
created(){
axios.get('http://www.weichuang.com/getList')
.then(res=>{
console.log(res)
})
}
}
成功。
其他:mockjs的随机生成
Mock.mock('http://www.weichuang.com/getUser',{
//重复两次
'name|2':'weichuang',
//18-35之间的数, 后面的20起到数据类型的作用
"age|18-35":20
})
Mock.mock('http://www.weichuang.com/regxp',{
//使用正则表达式
'regexp':/[a-z][A-Z][0-9]/,
'regexp2':/\d{5,10}/
})
Mock.mock('http://www.weichuang.com/list',{
//生成10-20个数
'info|10-20':[
{
//从1开始自增1
'index|+1':1,
//生成随机名字
'name':'@first @last',
//生成随机id
'id':'@integer(10000,99999)',
//生成随机时间
'date':'@datetime',
//生成200*200的图片
'img':'@image("200*200")',
//生成6到22字符的文本
"text":'@sentence(6,22)'
}
]
})
具体写法
let Random =Mock.Random;
let productData = () =>{
let productList=[];//存放信息的数组
for(let i=0;i<100;i++){
let product = {
name:Random.ctitle(5,20),
img:Random.dataImage('100x100','猫猫'+Random.integer(1,100)),
price:Random.integer(1000,10000),
owner:Random.cname()
}
productList.push(product)
}
return productList
}
Mock.mock('http://www.weichuang.com/getVarietyItem',productData)