mockjs 學習筆記

文章目錄

• 問題描述
• 文章參考
• 快速開始
• 安裝Mockjs
• 使用案例
• Mock.mock( rurl, rtype, template ) 函數介紹
• 根據配置文件，異步加載mockjs 配置文件

問題描述

在工做中，想本身根據後臺模擬的數據，保存到本地，在網絡不通的狀況下，一樣的寫ajax請求邏輯代碼，不須要模擬ajax請求，獲取本地的模擬的數據，可以正常測試和開發，若是有開發環境，能夠一鍵切換到開發環境中，而不須要切換代碼

文章參考

1. Mock.mock() 函數
2. mockjs Doc

快速開始

安裝Mockjs

npm install mockjs -D

使用案例

import Mock from "mockjs";

//攔截請求，返回假數據
Mock.mock("http://10.91.7.159:9080/taxloan/productStat?customerId=sdf", {
  message: "調用成功",
  data: [
    { name: "XXXX1", code: "P00003" },
    { name: "XXXX2", code: "P00028" },
    { name: "XXXX3", code: "P00002" },
    { name: "XXXX4", code: "P00003" }
  ],
  rtn: "0"
});

1. 定義的URL 請求，直接放到瀏覽器中運行，其實是沒有響應的，估計是在發送ajax請求的時候，mockjs作了一個攔截處理，將響應的數據變爲模擬的數據了
2. 例子中，能夠使用GET 或者 POST 請求

Mock.mock( rurl, rtype, template ) 函數介紹

1. rurl 可選。
   表示須要攔截的 URL，能夠是 URL 字符串或 URL 正則。例如 //domain/list.json/、’/domian/list.json’。

2. rtype 可選。
   表示須要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。

3. template 可選。
   表示數據模板，能夠是對象或字符串。例如 { ‘data|1-10’:[{}] }、’@EMAIL’。

根據配置文件，異步加載mockjs 配置文件

import Vue from 'vue'
import App from './App.vue'

// 根據Vue的環境變量模式中獲取配置信息，異步加載配置文件
if (process.env.VUE_APP_ISMOCK === "true") {
  import('../mock/mock-data.js').then(_ => {
    console.log("引入mock數據成功")
   })
}

new Vue({
  render: h => h(App),
}).$mount('#app')