iview admin 使用mock.js模擬數據

最近在使用ivew admin做項目，爲了前後端分離使用mock模擬數據，記錄步驟：

1.文件結構：

2.打開src / mock，新建文件glbr.js：

3.編寫需要模擬的數據結構：

import Mock from 'mockjs'
import {
  doCustomTimes
} from '@/libs/util';
export const getHospital = (req) => {
  let hosList = [];
  doCustomTimes(5, () => {
    hosList.push(Mock.mock({
      id: "@id",
      value: "@name"
    }))
  })
  return hosList;
}

1. 引入Mock
2. 引入iview admin編寫好的api，用來重複執行數據模擬的過程
3. 編寫一個Mock模擬函數
4. 定義一個空數組用來存放數據
5. doCustomTime(times,callback)的作用是重複執行times次callback，相當於一個while循環
6. 使用Mock.mock()函數模擬數據並push進數組
7. 返回模擬完數據的數組

4.將這個API寫入index.js用來攔截請求返回數據

Mock.mock(/\/get_hos/,getHospital)

5.將它扔到公用請求數據api文件(src/api/data.js)中，進行模擬請求(axios)

export const getHospital =()=>{
  return axios.request({
    url:'get_hos',
    method:"get"
  })
}

6.在需要的頁面引入這個方法並調用

import {getHospital} from '@/api/data';
export default {
  methods: {
    info(){
     getHospital().then(res=>{
          console.log(res)    
      });
    }
  },
}

res即爲請求Mock後返回的模擬數據：

{data: Array(5), status: 200}
data: Array(5)
0:
id: "450000201605254957"
value: "Larry Harris"
__proto__: Object
1:
id: "500000197701282523"
value: "Larry Johnson"
__proto__: Object
2:
id: "45000020150226444X"
value: "Nancy Harris"
__proto__: Object
3:
id: "220000201612141886"
value: "Larry Perez"
__proto__: Object
4:
id: "430000201712193834"
value: "Donald Thompson"
__proto__: Object
length: 5
__proto__: Array(0)
status: 200
__proto__: Object

完...