在vue專案中mock資料

發表於2019-04-02
VueMock

第一步：安裝：

在命令列中執行： 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 = []
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 }


---------------------

 

方式二：

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)
})
}

---------------------

相關文章