1. Installation
npm install mockjs --save-dev
2. Create a mock folder, and create mocke.js and data files (here, take data.json as an example)
/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 introduces mack.js
import "@/mock/mock.js"
4. Test
Here I use axios as an example.
/在组件模块中使用/
import axios from 'axios'
export default {
created(){
axios.get('http://www.weichuang.com/getList')
.then(res=>{
console.log(res)
})
}
}
success.
Other: random generation of 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)'
}
]
})
Specific wording
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)