前言

當(dāng)下采用前后端分離模式開發(fā)Web應(yīng)用已經(jīng)成為氣候，在開發(fā)階段有一個不成文的規(guī)定則是 項目開發(fā)后端先行 但是作為前端開發(fā)工程師的我們，難道在搭建完頁面后只能等待后端的接口么？這樣的話我們則完全被后端開發(fā)限制住了。

但其實我們只需要同后端同學(xué)商議決定好接口返回的數(shù)據(jù)格式我們就可以并行開發(fā)。很多同學(xué)則在開發(fā)中則會使用定義變量寫好數(shù)據(jù)模擬接口返回的數(shù)據(jù)進行前端渲染工作；完全是可以的，但是有沒有更加專業(yè)的手段或者技術(shù)呢？
當(dāng)然有，那就是我們的 Mock 下面讓我們來看一下前端人最后的倔強吧！

Mock概述

mock：模仿的;虛假的;不誠實的，這是mock作為單詞的翻譯，當(dāng)然他的用途也是如同他的翻譯一樣就是模擬接口、數(shù)據(jù)其實mock的出現(xiàn)就是前后端分離后為前端不受制于后端同學(xué)的束縛而出現(xiàn)的，在實際開發(fā)中后端同學(xué)有自己的開發(fā)節(jié)奏，不能如我們前端所想幾分鐘出一個接口，可能我們索要接口的時候后端同學(xué)還在構(gòu)思如何建表？

而mock則避免了我們對后端同學(xué)催促的尷尬，他就可以完成模擬接口，讓前后端并行開發(fā)，提高我們的開發(fā)效率，不被后端拖節(jié)奏。

mock即mock.js，他的流程就是 前端發(fā)送請求到后端 =》mock.js攔截請求=》并返回模擬數(shù)據(jù)給前端。至于數(shù)據(jù)我們事先只需要與后端同學(xué)定義好格式即可，mock.js會通過法則為我們生成比較貼近真實數(shù)據(jù)的模擬數(shù)據(jù)?？吹竭@里你是不是對mock屬實有點心動了呢？下面就讓我們來看一下mock.js運用到項目中。

mock.js安裝

我們可以看到官網(wǎng)上提供了很多關(guān)于不同前端項目的安裝（有興趣的同學(xué)可以看一下，如果你和博主一樣想在Vue項目中去使用的話那么就跳過下面這張圖片我們看下面步驟）

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

1、創(chuàng)建vue項目

我們利用vue腳手架創(chuàng)建一個項目，不會訪問這篇文章:http://www.dbjr.com.cn/article/259646.htm

2、項目中安裝mock.js和axios

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

npm i mockjs -D
npm i axios

3、安裝成功后我們運行項目

npm run serve

Mock規(guī)范

說明：本小節(jié)依照官網(wǎng)，所以很多規(guī)范大家看不透徹沒有關(guān)系，我們可以跳過此小節(jié)先看下節(jié)的mock的使用

Mock.js 的語法規(guī)范包括兩部分：

1.數(shù)據(jù)模板定義規(guī)范（Data Template Definition，DTD）

數(shù)據(jù)模板中的每個屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值：

// 屬性名   name
// 生成規(guī)則 rule
// 屬性值   value
'name|rule': value

注意：
屬性名 和 生成規(guī)則 之間用豎線 | 分隔。
生成規(guī)則 是可選的。
生成規(guī)則 有 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
生成規(guī)則 的 含義 需要依賴 屬性值的類型 才能確定。
屬性值 中可以含有 @占位符。
屬性值 還指定了最終值的初始值和類型。

2.數(shù)據(jù)占位符定義規(guī)范（Data Placeholder Definition，DPD）

占位符 只是在屬性值字符串中占個位置，并不出現(xiàn)在最終的屬性值中。

占位符 的格式為：

@占位符
@占位符(參數(shù) [, 參數(shù)])

注意：
用 @ 來標識其后的字符串是 占位符。
占位符 引用的是 Mock.Random 中的方法。
通過 Mock.Random.extend() 來擴展自定義占位符。
占位符 也可以引用 數(shù)據(jù)模板 中的屬性。
占位符 會優(yōu)先引用 數(shù)據(jù)模板 中的屬性。
占位符 支持 相對路徑 和 絕對路徑。

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的規(guī)范，但其實他是有很多法則的我們可以到官方來去看看，掌握這些法則后我們能夠模擬的數(shù)據(jù)就會更加真實更加繁瑣的數(shù)據(jù)都可以輕松生成！

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

Mock的使用

1、創(chuàng)建mock文件

• 在src文件夾下面創(chuàng)建mock文件夾
• 在mock文件夾中創(chuàng)建json文件夾
• 在mock文件夾中創(chuàng)建index.js文件

2、在mock下面的index.js中引入mock并創(chuàng)建mock響應(yīng)內(nèi)容

// 引入 mock.js
const Mock = require('mockjs')
//Mock.mock  接口，請求方式，返回數(shù)據(jù)（數(shù)據(jù)就是json文件夾中的文件自行添加）
Mock.mock('/user/list', 'get', require('./json/userList'))

說明：Mock.mock()

此方法就是匹配我們的請求進行攔截然后返回模擬數(shù)據(jù)，有如下幾種形式

Mock.mock( rurl, template )

記錄數(shù)據(jù)模板。當(dāng)攔截到匹配 rurl 的 Ajax 請求時，將根據(jù)數(shù)據(jù)模板 template 生成模擬數(shù)據(jù)，并作為響應(yīng)數(shù)據(jù)返回。

Mock.mock( rurl, function( options ) )

記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)。當(dāng)攔截到匹配 rurl 的 Ajax 請求時，函數(shù) function(options) 將被執(zhí)行，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回。

Mock.mock( rurl, rtype, template )

記錄數(shù)據(jù)模板。當(dāng)攔截到匹配 rurl 和 rtype 的 Ajax 請求時，將根據(jù)數(shù)據(jù)模板 template 生成模擬數(shù)據(jù)，并作為響應(yīng)數(shù)據(jù)返回。

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

記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)。當(dāng)攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函數(shù) function(options) 將被執(zhí)行，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回。

當(dāng)然我們的Mock還有好幾種方法，更多方法可以去官網(wǎng)了解一下哦！

3、我們在mock文件夾下面的json文件夾下創(chuàng)建我們引用的userList.json

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

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

找到我們頁面，因為我們是新建的項目 所以我們刪除頁面中的東西 換成清爽的內(nèi)容

然后我們引入axios并注冊事件就可以發(fā)送請求了

<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>

然后我們點擊發(fā)現(xiàn)還是請求了接口這是為什么呢？原來是我們前面少了一個步驟，那就是我們需要在main中去引用我們的mock

再次嘗試成功

總結(jié)

通過上面的使用可以看到，我們前端發(fā)送的請求只要被我們的 Mock.mock 方法中的url匹配上就會被mock攔截，我們可以自行驗證當(dāng)我們使用mock并匹配上url后我們的network中是沒有請求了，mock會根據(jù)我們定義的此條url的法則去返回對應(yīng)的數(shù)據(jù)，在實際開發(fā)中其實前端很多后期工作都是在調(diào)試通接口后根據(jù)返回的數(shù)據(jù)進行的，通過mock我們前端就不會過多的依賴后端接口，只要知道后端返回數(shù)據(jù)的格式我們自己就可以通過mock.js自己生成數(shù)據(jù)進行模擬接口，從而在接口調(diào)通前我們也可以自己進行數(shù)據(jù)渲染和調(diào)試工作；

到此這篇關(guān)于Mock.js安裝與使用的文章就介紹到這了,更多相關(guān)Mock.js安裝使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論