Vue筆記：使用 mock.js 模擬數據

在咱們的項目實際開發過程當中，後端的接口每每是較晚纔會提供出來，而且還要寫接口文檔，若是前端的開發都要等到接口開發完成纔開始就很是影響項目總體開發進度了，mock.js 的出現使先後端分離並行開發成爲可能。使用 mock.js，前端調試能夠模擬後臺接口調用，返回咱們定義的數據，解放了先後端開發的屏障。使用 mock.js 的過程以下：

1. 安裝 mock.js 到項目。

npm intsall mockjs --save-dev

2. 在src目錄下創建文件夾mock，mock文件夾下創建mock.js文件，代碼以下：

import Mock from 'mockjs'; // es6語法引入mock模塊

export default Mock.mock('http://localhost/user', { // 輸出數據

  'name': '@name', // 隨機生成姓名

  'age|1-10': 5

  // 其餘數據
});

3. 在 vue 組件中引入。

import mock from './mock/mock.js';

4. 請求接口, 如使用axios發送請求。

computed:{
    created(){
      Vue.prototype.$http.get('http://localhost/user')
        .then(res => {
          console.log(res.data);
          this.msg=res.data.name;
          console.log(this.msg)
        })
    }
}

這樣在發送請求的時候，mock 就會攔截對應的請求，並返回咱們定義的數據了。

---

做者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/ 
版權全部，歡迎轉載，轉載請註明原文做者及出處。