vue項目引入mock.js 簡單使用

解決的痛點

1、開發時，后端還沒完成數據輸出，前端只好寫靜態模擬數據。
2、在頁面js上寫模擬json數據，數據太長了，將數據寫在js文件里，完成后挨個改url。某些邏輯復雜的代碼，加入或去除模擬數據時得小心翼翼。
3、想要盡可能還原真實的數據，要么編寫更多代碼，要么手動修改模擬數據。
4、特殊的格式，例如IP,隨機數，圖片，地址，需要去收集

優點

1、前后端分離
　　讓前端工程師獨立於后端進行開發。
2、增加測試的真實性
　　通過隨機數據，模擬各種場景。
3、 方便單測開發
通過模擬隨機數據，增加單元測試的可靠性。
4、用法簡單 方便擴展
　　符合直覺的接口，支持支持擴展更多數據類型，支持自定義函數和正則。
5、數據類型豐富
　　支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
6、項目的轉接上更加方便 幾乎不用修改現有代碼
在已有接口文檔的情況下，我們可以直接按照接口文檔來開發，將相應的字段寫好，在接口完成 之后，只需要改變url地址即可。
7、 不涉及跨域問題，

使用

項目背景: vue+webpack +axios 構建
1.安裝 mockjs 依賴

npm install mockjs

2.在原有的項目下創建 mock文件夾 最好不要創建到src里面，不參與項目打包構建

mock/index.js

import Mock from 'mockjs'
import '@/mock/user/login'


// 設置全局延時
Mock.setup({
  timeout: '300-600'
})

mock/user/login 登錄接口的mock數據封裝

import Mock from 'mockjs'
import '@/mock/extend'

const user = Mock.mock({
  name: '@ADMIN',
  avatar: '@AVATAR',
  address: '@CITY',
  welcome: '@WELCOME',
  timefix: '@TIMEFIX',
  position: '@POSITION'
})

Mock.mock('/login', 'post', ({body}) => {
  let result = {}
  const {name, password} = JSON.parse(body)

  if (name !== 'admin' || password !== '888888') {
    result.code = -1
    result.message = '賬戶名或密碼錯誤（admin/888888）'
  } else {
    result.code = 0
    result.message = Mock.mock('@TIMEFIX') + '，歡迎回來'
    result.data = {}
    result.data.user = user
  }
  return result
})

在 項目的入口文件main.js 進行項目的引入

//開發環境使用mock
if (process.env.NODE_ENV === 'production') {
  require('../mock')
}
//import '@/mock'  //引入

mock的文件位置沒有較為死板的寫法 比較靈活 可參考 antdv-vue-admin 或 element-vue-admin

單獨的mock模塊使用，要使用的話要在mian.js里面進行引用 mock模塊的統一暴露的index.js文件即可較為簡單直接，mock會攔截相對應的 axios請求

mock api

mock語法可參考
https://github.com/nuysoft/Mock/wiki/Mock.mock()
http://mockjs.com/0.1/#Web

Mock.mock( rurl?, rtype?, template ) )
// 或者
Mock.mock( rurl, rtype, function( options ) )
/**
*@rurl 可選 表示要攔截的url，可以使字符串，也可以是正則
*@rtype 可選 表示要攔截的ajax請求方式，如get、post
*@template 可選 數據模板，可以是對象也可以是字符串
*@function 可選 表示用於生成響應數據的函數
*/

關於mock模塊的封裝
可參考
https://www.jianshu.com/p/c5568910e946
https://www.cnblogs.com/-wenli/p/13828521.html
antdv-vue-admin
element-vue-admin

---

補充項目截圖.
mock模塊搭建 源碼地址：https://gitee.com/sink_zjx/vue-mock-demo

mock注入到項目里 注意項目要有 axios

在頁面上發送axios請求
賬號密碼正確

密碼錯誤

---