vue項目中使用mockjs模擬接口返回數據

　　Mock.js 是一個模擬數據生成器，利用它，能夠攔截ajax請求，直接模擬返回數據，這樣先後端只要約定好數據格式，前端就不須要依賴後端的接口，能夠直接使用模擬的數據了。

　　網上介紹mock的教程也較多，不過大多數看的比較模糊。其實使用起來很是簡單，這裏介紹在Vue工程中使用Mockjs，而且實現開發和生產配置化。

1、安裝

cnpm install --save-dev mockjs

2、引入

　　爲了只在開發環境使用mock，而打包到生產環境時自動不使用mock，咱們能夠在env中作一個配置

//dev.env
module.exports = merge(prodEnv, { NODE_ENV: '"development"', MOCK: 'true', }) //prod.env
module.exports = { NODE_ENV: '"production"', MOCK: 'false', }

　　而後再main.js裏面引入mockjs

process.env.MOCK && require('@/mock') //表示配置MOCK爲true的時候，才引入mock，因此生產環境的時候就不引入mock了

3、目錄和文件建立

　　在src目錄下建立mock目錄，添加index.js文件，這裏建議給每類api使用單獨的mock文件。例以下面一個api文件對應一個mock文件

　　mock/index.js

//將全部的mock文件導入
require('./inspection') // 在這裏能夠作一些通用的配置
const Mock = require("mockjs") // 設置全部ajax請求的超時時間，模擬網絡傳輸耗時
Mock.setup({ timeout: 0-300 })

4、攔截ajax請求，配置mock的數據

const Mock = require("mockjs") const Random = Mock.Random; Mock.mock('/api/load','get',{ 'xData|100':['@datetime'], 'series|2':[{ 'name':'@NAME', 'type':'line', 'smooth':true, 'data|100':['@integer(1,600)'] }] })

　　攔截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; })

　　到此基本應用就能夠了，更詳細的使用，請看官方文檔。

5、Mock 沒法攔截 帶參數的 GET 請求

　　解決：後來將路徑改爲正則就好

//api //獲取健康模型數據 export const getRadarDataApi = (id) => ajax({url:BASEURL + 'radar/' + id}) //mock Mock.mock(/\/api\/radar/,'get',{ 'radar|5':['@integer(0, 100)'] })