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/ 
版權所有，歡迎轉載，轉載請注明原文作者及出處。