Vue中如何使用mock

自從有了mockjs，我們前端工程師再也不用等後端人員開發好之後再測數據了，因爲mockjs可以攔截ajax請求，有了mockjs我們可以模擬後臺返回數據，以方便的進行一系列的操作。接下來就介紹一下在項目中如何使用mockjs。

1、首先安裝mock.js

npm install mockjs

2、在我們的vue項目中創建一個mock 的目錄

3、在mock的文件夾下創建index.js文件，這裏就是我們註冊所有mock服務的地方,index.js的內容如下:

// 首先引入Mock
const Mock = require('mockjs');

// 設置攔截ajax請求的相應時間
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍歷所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 註冊所有的mock服務
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

4、服務註冊好之後，在main.js中引入

import mock from "../mock/index";
Vue.use(mock)

5、在mock文件夾下隨便創建一個文件jobList.js
在該文件中，我們可以按照index註冊服務的格式來寫我們的mock

let jobList = [{
  id: 1,
  professionId: '230000',
  job: '教師'
},{
  id: 2,
  professionId: '240000',
  job: '醫生'
},{
  id: 3,
  professionId: '250000',
  job: '公務員'
}]


export default {
  'get|/api/parameter/query':  option => {
    return {
      status: 200,
      message: 'success',
      data: jobList
    };
  },
  }

6、當我們在頁面發起了ajax請求，路徑是’/parameter/query’，並且請求方式是get時，就會返回我們寫好的mock數據。

//mock數據
export function mocktest(params) {
  return $http({type: "get",url: "/parameter/query",data: params});
}

methods: {
        //mock測試數據
        mocktest(val) {
          this.loading = true;
          this.titleData = '職業'
          this.dropType = val
          //禁止軟鍵盤彈出
          document.activeElement.blur();
        
          api.mocktest(val).then(res => {
            this.loading = false;
            this.jobData = []
            this.genderData1 = []

            res.data.data.forEach( val => {
              this.jobData.push(val.job);
            })
            console.log(this.jobData);
            this.genderPop = true;
          }).catch((err) => {
            console.log(err)
          })
        },
        }

以上，就是我們在vue項目中如何使用mock,如有什麼問題,或者需要源碼請關注下方公衆號索取: