Vue項目中使用Mockjs造假數據

需求場景：要get請求接口'/api/userInfo/list'

 

項目准備：

首先，安裝項目中mockjs包、axios

npm install mockjs axios

 

然后，src根 目錄下新建mock文件夾和mock.js、urls.js

 

（目錄結構不強求，主要還是看你項目的划分。也可以單獨出一個request文件，放axios.js、mock.js、和專門整理接口用的url.js）

user.vue文件中，接口請求代碼(以axios為例)：

<template>
  <div class="api-element">
    <div class="area">
      <el-table :data="userTableData" >
        <el-table-column fixed label="日期" prop="date" width="150"></el-table-column>
        <el-table-column label="姓名" prop="name" width="120"></el-table-column>
        <el-table-column label="省份" prop="province" width="120"></el-table-column>
        <el-table-column label="市區" prop="city" width="120"></el-table-column>
        <el-table-column label="地址" prop="address" width="300"></el-table-column>
        <el-table-column label="郵編" prop="zip" width="120"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import axios from 'axios' // 引入axios
import urls from '@/mock/urls'  // 引入實現准備好的接口請求相關配置
export default {
  name: 'MockTest',
  data() {
    return {
      userTableData: [] // 定義需要的數據
    }
  },
  mounted() {
    // 數據mock、請求攔截
    axios[urls.userTableData.type](urls.userTableData.url)
      .then((response) => {
        this.userTableData = response && response.data
        log(this.userTableData);
      })
      .catch(function (error) {
        log(error);
      });
  },
}
</script>

 

接口相關配置文件urls.js：

主要記錄每條接口需要請求的地址（加過代理的）、請求的方式（get等，方便管理）

export default {
    userTableData: {
        url: '/api/userInfo/list',
        type: 'get'
    }
}

 

 

mock.js文件內部：

首先，引入mockjs和需要的變量值urls.js

import Mock, { Random } from 'mockjs'
import urls from './urls'

然后，定義第一個假數據userTableData，是一個長度為10的數組，數組每一項都是對象，對象鍵根據vue中表格需要進行配置。

let params = Mock.mock({ // 數據池
    'userTableData|10': [{ // 圖表過濾所需數據
        'name': '@cname',
        'date': '@date',
        'province': '@province',
        'city': '@city',
        'address': '@county(true) @ctitle() @natural(1000,9999) 號',
        'zip': '@zip'
    }]
})
// 設置請求時長200-600毫秒，模擬真實接口請求場景
Mock.setup({
    timeout: '200-600'
})
// 攔截urls.userTableData.url對應地址的請求，方式urls.userTableData.type，返回值為params.userTableData
Mock.mock(urls.userTableData.url, urls.userTableData.type, params.userTableData) // 請求該接口時，攔截請求並返回對應數據

 

最后，觀察vue文件中的ajax請求，返回的response.data的數據就是我們mock的params.userTableData假數據。大功告成，可以專心寫邏輯了。

 

 

源碼地址

 

相關代碼提交記錄