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

Posted on by

前言

當下采用前後端分離模式開發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安裝使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：