Mock.js的安裝與使用教學(擺脫後端同學的束縛)

2022-08-17 14:00:53

前言

當下採用前後端分離模式開發Web應用已經成為氣候，在開發階段有一個不成文的規定則是專案開發後端先行但是作為前端開發工程師的我們，難道在搭建完頁面後只能等待後端的介面麼？這樣的話我們則完全被後端開發限制住了。

但其實我們只需要同後端同學商議決定好介面返回的資料格式我們就可以並行開發。很多同學則在開發中則會使用定義變數寫好資料模擬介面返回的資料進行前端渲染工作；完全是可以的，但是有沒有更加專業的手段或者技術呢？
當然有，那就是我們的 Mock 下面讓我們來看一下前端人最後的倔強吧！

Mock概述

mock：模仿的;虛假的;不誠實的，這是mock作為單詞的翻譯，當然他的用途也是如同他的翻譯一樣就是模擬介面、資料其實mock的出現就是前後端分離後為前端不受制於後端同學的束縛而出現的，在實際開發中後端同學有自己的開發節奏，不能如我們前端所想幾分鐘出一個介面，可能我們索要介面的時候後端同學還在構思如何建表？

而mock則避免了我們對後端同學催促的尷尬，他就可以完成模擬介面，讓前後端並行開發，提高我們的開發效率，不被後端拖節奏。

mock即mock.js，他的流程就是前端傳送請求到後端 =》mock.js攔截請求=》並返回模擬資料給前端。至於資料我們事先只需要與後端同學定義好格式即可，mock.js會通過法則為我們生成比較貼近真實資料的模擬資料。看到這裡你是不是對mock屬實有點心動了呢？下面就讓我們來看一下mock.js運用到專案中。

mock.js安裝

我們可以看到官網上提供了很多關於不同前端專案的安裝（有興趣的同學可以看一下，如果你和博主一樣想在Vue專案中去使用的話那麼就跳過下面這張圖片我們看下面步驟）

下面就以Vue為例子來為大家演示

1、建立vue專案

我們利用vue腳手架建立一個專案，不會存取這篇文章:https://www.jb51.net/article/259646.htm

2、專案中安裝mock.js和axios

因為我們的mock是攔截請求，所以我們需要安裝axios進行請求，當然使用原生的ajax也是可以的！

npm i mockjs -D
npm i axios

3、安裝成功後我們執行專案

npm run serve

Mock規範

說明：本小節依照官網，所以很多規範大家看不透徹沒有關係，我們可以跳過此小節先看下節的mock的使用

Mock.js 的語法規範包括兩部分：

1.資料模板定義規範（Data Template Definition，DTD）

資料模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值：

// 屬性名   name
// 生成規則 rule
// 屬性值   value
'name|rule': value

注意：
屬性名和生成規則之間用豎線 | 分隔。
生成規則是可選的。
生成規則有 7 種格式：
‘name|min-max’: value
‘name|count’: value
‘name|min-max.dmin-dmax’: value
‘name|min-max.dcount’: value
‘name|count.dmin-dmax’: value
‘name|count.dcount’: value
‘name|+step’: value
生成規則的含義需要依賴屬性值的型別才能確定。
屬性值中可以含有 @預留位置。
屬性值還指定了最終值的初始值和型別。

2.資料預留位置定義規範（Data Placeholder Definition，DPD）

預留位置只是在屬性值字串中佔個位置，並不出現在最終的屬性值中。

預留位置的格式為：

@預留位置
@預留位置(引數 [, 引數])

注意：
用 @ 來標識其後的字串是預留位置。
預留位置參照的是 Mock.Random 中的方法。
通過 Mock.Random.extend() 來擴充套件自定義預留位置。
預留位置也可以參照資料模板中的屬性。
預留位置會優先參照資料模板中的屬性。
預留位置支援相對路徑和絕對路徑。

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

上面這些呢只是簡單的介紹了一下mock的規範，但其實他是有很多法則的我們可以到官方來去看看，掌握這些法則後我們能夠模擬的資料就會更加真實更加繁瑣的資料都可以輕鬆生成！

https://github.com/nuysoft/Mock/wiki/Syntax-Specification

Mock的使用

1、建立mock檔案

在src資料夾下面建立mock資料夾
在mock資料夾中建立json資料夾
在mock資料夾中建立index.js檔案

2、在mock下面的index.js中引入mock並建立mock響應內容

// 引入 mock.js
const Mock = require('mockjs')
//Mock.mock  介面，請求方式，返回資料（資料就是json資料夾中的檔案自行新增）
Mock.mock('/user/list', 'get', require('./json/userList'))

說明：Mock.mock()

此方法就是匹配我們的請求進行攔截然後返回模擬資料，有如下幾種形式

Mock.mock( rurl, template )

記錄資料模板。當攔截到匹配 rurl 的 Ajax 請求時，將根據資料模板 template 生成模擬資料，並作為響應資料返回。

Mock.mock( rurl, function( options ) )

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

Mock.mock( rurl, rtype, template )

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

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

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

當然我們的Mock還有好幾種方法，更多方法可以去官網瞭解一下哦！

3、我們在mock資料夾下面的json資料夾下建立我們參照的userList.json

{
    "status": 0,
    "data|10": [
        {
            "id|+1": 1001,
            "company": "10001",
            "username": "ceshi1",
            "age": 25
        }
    ],
    "msg": ""
}

4、接著我們就去我們的頁面中測試請求

找到我們頁面，因為我們是新建的專案所以我們刪除頁面中的東西換成清爽的內容

然後我們引入axios並註冊事件就可以傳送請求了

<template>
  <div>
      <div @click="btnClick" class="btn">
          這是測試
      </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {};
  },

  methods: {
    async btnClick() {
      const res = await axios.get("/user/list");
      console.log(res.data.data);
    },
  },
};
</script>

<style>
</style>

然後我們點選發現還是請求了介面這是為什麼呢？原來是我們前面少了一個步驟，那就是我們需要在main中去參照我們的mock

再次嘗試成功

總結

通過上面的使用可以看到，我們前端傳送的請求只要被我們的 Mock.mock 方法中的url匹配上就會被mock攔截，我們可以自行驗證當我們使用mock並匹配上url後我們的network中是沒有請求了，mock會根據我們定義的此條url的法則去返回對應的資料，在實際開發中其實前端很多後期工作都是在偵錯通介面後根據返回的資料進行的，通過mock我們前端就不會過多的依賴後端介面，只要知道後端返回資料的格式我們自己就可以通過mock.js自己生成資料進行模擬介面，從而在介面調通前我們也可以自己進行資料渲染和偵錯工作；

到此這篇關於Mock.js安裝與使用的文章就介紹到這了,更多相關Mock.js安裝使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！