vue項目中使用mockjs模擬接口返回數據
阿新 • • 發佈：2018-05-15
要約 datetime 數據 options eight 10個 pan 並且 inspect Mock.js 是一個模擬數據生成器，利用它，可以攔截ajax請求，直接模擬返回數據，這樣前後端只要約定好數據格式，前端就不需要依賴後端的接口，可以直接使用模擬的數據了。
網上介紹mock的教程也較多，不過大多數看的比較模糊。其實使用起來非常簡單，這裏介紹在Vue工程中使用Mockjs，並且實現開發和生產配置化。
一、安裝
cnpm install --save-dev mockjs
二、引入
為了只在開發環境使用mock，而打包到生產環境時自動不使用mock，我們可以在env中做一個配置
//dev.env
module.exports = merge(prodEnv, {
NODE_ENV:
然後再main.js裏面引入mockjs
process.env.MOCK && require(‘@/mock‘)
//表示配置MOCK為true的時候，才引入mock，所以生產環境的時候就不引入mock了
三、目錄和文件創建
在src目錄下創建mock目錄，添加index.js文件，這裏建議給每類api使用單獨的mock文件。例如下面一個api文件對應一個mock文件
mock/index.js
//將所有的mock文件導入
require(‘./inspection‘)
// 在這裏可以做一些通用的配置
const Mock = require("mockjs")
// 設置所有ajax請求的超時時間，模擬網絡傳輸耗時
Mock.setup({
timeout: 0-300
})
四、攔截ajax請求，配置mock的數據
const Mock = require("mockjs")
const Random = Mock.Random;
Mock.mock(‘/api/load‘,‘get‘,{
‘xData|100‘:[‘@datetime‘],
攔截ajax請求主要可以使用Mock中的兩個方法：
Mock.mock( rurl, rtype, template )
Mock.mock( rurl, rtype, function( options ) )
rurl：表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。（在vue 工程中，建議將api的url全部放在apipath中統一管理，然後在Mock中使用與發請求的時候使用的同一個引用）
rtype：表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
template：表示數據模板，可以是對象或字符串。如果需要要把數據寫死，可以直接寫一個普通的對象。如果要讓Mock隨機生成，可以根據Mock模板的規則自定義。例如：
{ ‘data|1-10‘:[{}] } 表示生成生成包含 1到10個空對象的數據
‘@EMAIL‘ 表示隨機生成一個email地址
‘@CNAME‘ 表示隨機生成一個中文人名
再就是函數，比如下面這樣
Mock.mock(‘/api/redo‘,‘get‘,function(options){
let series=[];
for(let n=1;n<18;n++){
let _obj={};
_obj.name = ‘05-‘ + (n <= 9 ? ‘0‘ + n : n);
_obj.type = ‘line‘;
_obj.data=[];
for(let i=0;i<24;i++){
let _d = Random.integer(1,10) * (i%2 == 0 ? 10 : 90);
_obj.data.push(_d);
}
series.push(_obj);
}
return series;
})
到此基本應用就可以了，更詳細的使用，請看官方文檔。
vue項目中使用mockjs模擬接口返回數據