在vue項目中mock數據
阿新 • • 發佈:2019-04-03
install 延時 方式 命令行 cat 名稱 urn clas adr for (let i = 0; i < 20; i += 1) {
const o = { //mockjs模擬隨機生成數據,生成20條
recipeId: Random.guid(),
billId: Random.string(10),
orgId: Random.string(‘number‘, 8, 10),
Date:Random.date(‘yyyy-MM-dd‘),
time:Random.time(‘A HH:mm:ss‘),
adress:Random.county(),
viewName: Random.cword(4, 16), // 隨機生成任意名稱
personName: Random.cname(),
reason: Random.csentence(10, 32),
}
datalist.push(o)
}
return{
data:datalist
}
}
//調用模擬數據方法 const data = Mock.mock(‘/user‘, /post|get/i,getdata) const data1 = Mock.mock(‘/user2‘, /post|get/i,getdata2) export { data, data1 }
第一步:安裝:
在命令行中執行: npm install mockjs;
第二步:定義index.js文件
我們新建一個mock文件夾,此文件夾中建一個index.js文件:
在index.js中輸入以下內容:
import Mock from ‘mockjs‘ //引入mockjs,npm已安裝
import { Random } from ‘mockjs‘ // 引入random對象,隨機生成數據的對象,(與占位符@一樣)
Mock.setup({
timeout:1000 //設置請求延時時間
})
const getdata = function(option){ //定義請求數據方法
let datalist = []
const o = { //mockjs模擬隨機生成數據,生成20條
recipeId: Random.guid(),
billId: Random.string(10),
orgId: Random.string(‘number‘, 8, 10),
Date:Random.date(‘yyyy-MM-dd‘),
time:Random.time(‘A HH:mm:ss‘),
adress:Random.county(),
viewName: Random.cword(4, 16), // 隨機生成任意名稱
reason: Random.csentence(10, 32),
}
datalist.push(o)
}
return{
data:datalist
}
}
//調用模擬數據方法 const data = Mock.mock(‘/user‘, /post|get/i,getdata) const data1 = Mock.mock(‘/user2‘, /post|get/i,getdata2) export { data, data1 }
---------------------
方式二:
const LoginUsers = [
{
id: 1,
username: ‘zhangl‘,
password: ‘qwe123123‘,
avatar: ‘‘,
name: ‘zhangl‘
}
];
const Users = [];
for (let i = 0; i < 50; i++) {
Users.push(Mock.mock({
id: Mock.Random.guid(),
name: Mock.Random.cname(),
addr: Mock.mock(‘@county(true)‘),
‘age|18-60‘: 1, // 屬性名和屬性規則通過|分開
}));
}
export { LoginUsers, Users };
-----------------------
第三步:在main.js中引入index.js文件:
import ‘./mock/index‘ // mock 方式,正式發布時,註釋掉該處即可
第四步:請求數據:
showdata(){
this.$http.get(‘/user‘) //全局引入使用vue原型中的方法this.$http,已經把axios添加到原型中
.then((res)=>{
console.log(res.data.data)
this.datalist = res.data.data
})
.catch((err)=>{
console.log(‘調用失敗‘,err)
})
}
---------------------
在vue項目中mock數據