Mock模擬後臺接口數據的簡單使用

在項目開發的過程中，有時候會出現後端數據還沒出來，而前端需要數據的情況。這時候，如果等着後端人員開發完再進行測試，聯調則會拖慢開發進度。這時候，Mock就顯示出它的魅力。它可以進行生成隨機數據，模擬後端接口數據，從而實現開發時，前後端分離，提高效率。

在使用Mock之前，應該先和後端人員討論接口文檔的基本結構，確認接口文檔的內容。在根據確認好的接口文檔，使用Mock模擬數據。

最近在vue-cli搭建的項目靜態頁面已逐漸完善，此時若能有數據模擬渲染，那作爲前端新手更能熟悉開發流程。查閱文檔和其他小夥伴的文章，開始了模擬數據之旅。

Mock的簡單使用

1、安裝

npm i mockjs -S

2、引入

在src文件目錄下，新建mock.js文件並引入：

const Mock = require('mockjs')

之後，在main.js文件中加載mock.js

require(./mock.js)

3、簡單使用

格式： Mock.mock("請求的URL地址",{"數據對象"})

自己的代碼：

const Mock = require('mockjs');
const Random = Mock.Random;  // 當需要生成隨機數據時使用，更多的隨機數據的生成使用參照官網示例

// 示例1
Mock.mock("http://localhost:8080/getData",{
  "code": 1,
  "msg": "請求接口成功",
  "data": [
    {
      "id": 1,
      "name": "英語",
      "createTime": "2019-01-01T21:18:02.000+0000",
      "updateTime": "2019-01-01T21:18:07.000+0000",
      "ordinal": 1
    },
    {
      "id": 2,
      "name": "趣味",
      "createTime": "2019-01-01T21:18:24.000+0000",
      "updateTime": "2019-01-01T21:18:28.000+0000",
      "ordinal": 2
    }
  ]
});

// 示例2
Mock.mock("http://localhost:8080/getBanner",{
    "name":"learn",
    "title": Random.ctitle(),   // 隨機生成中文標題
    "describe": "learnEnglish",
    "imgs": [
      "https://m.360buyimg.com/babel/jfs/t1/29191/26/4235/95551/5c2f2996Eba0b025d/c6a2aa923a67f952.jpg",
      "https://img1.360buyimg.com/da/jfs/t1/28807/10/4306/85260/5c30484cE8f828f42/3b36d2a6b80d10eb.jpg",
      "https://img10.360buyimg.com/da/jfs/t18487/241/1444742474/110119/f5bc9082/5acb3af6N2af11d1c.jpg",
      "https://m.360buyimg.com/babel/jfs/t1/22710/5/3081/75342/5c244f9eE54c2699a/74f8c021c36b6366.jpg"
    ]
});

4、進一步使用

參照官方文檔，在mock.js文件中引入Mock之後，根據數據模板生成模擬數據：Mock.mock( rurl?, rtype?, template|function( options ))

rurl：可選。表示需要攔截的 URL，可以是 URL 字符串或 URL 正則，如/index.js => /^/index.js$/
rtype：可選。表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
template：可選。表示數據模板，可以是對象或字符串。例如 { 'id|1-10':[{}] }。
function(options)：可選。表示用於生成響應數據的函數。options 指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性。

① 記錄數據模板。當攔截到匹配 url 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並作爲響應數據返回。第三點的簡單使用採用的就是這種形式。

Mock.mock( rurl, template )

② 記錄用於生成響應數據的函數。當攔截到匹配 rurl 的 Ajax 請求時，函數 function(options) 將被執行，並把執行結果作爲響應數據返回。

Mock.mock( rurl, function( options ) )

Mock.mock("http://localhost:8080/getNewslist", function(options){
  return options.type
});

③ 記錄數據模板。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並作爲響應數據返回。

Mock.mock( rurl, rtype, template )

Mock.mock("http://localhost:8080/geNewsinfo", "get", {
  "code": 1,
  "msg": "請求接口成功",
  "data": [
    {
      "id": 1,
      "name": "英語",
      "createTime": "2019-01-01T21:18:02.000+0000",
      "updateTime": "2019-01-01T21:18:07.000+0000",
      "ordinal": 1
    }
  ]
});

④ 記錄用於生成響應數據的函數。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函數 function(options) 將被執行，並把執行結果作爲響應數據返回。

Mock.mock( rurl, rtype, function( options ) )

Mock.mock("http://localhost:8080/getImage", "get", function(options){
  return options.type
});