mock ｜ 基礎

什麼是mock？（作用）

=>  是一種模擬後端藉口的解決方案。 （可以讓前端提前調用接口，完成前端開發）

 

優點

1、前後端分離：讓前端獨立於後端進行開發

2、增加單元測試的真實性：可模擬多場景的數據

3、開發無侵入：不需要修改現有的代碼，可攔截ajax請求，返回模擬的返回數據

4、用法簡單：適用於大多數接口

5、數據類型豐富：支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等

6、方便擴展：支持自定義函數和正則

 

語法規範（數據模版&數據佔位符）

1、數據模版定義規範

=>  數據模版中的每個屬性由三部分組成（'屬性名｜生成規則' ：屬性值）

'name｜rule'：value

舉個🌰——字符串：

// w隨機出現1-10次，1-10表示重複次數
var data = Mock.mock ({'username|1-10' : 'w'})
// w出現5次
var data = Mock.mock ({'username|5' : 'w'})

舉個🌰——數字：

// 數字中的1-10表示的數字的範圍，1爲初始默認值
var data = Mock.mock ({'age|1-10' : 1})

 

2、數據佔位符定義規範

=>  佔位符只是在屬性值字符串中佔個位置，並不出現在最終屬性值中

@佔位符
@佔位符（參數[,參數]）

舉個🌰：

// 隨機生成一個id  '()'可不寫，寫了是用來傳參
var data = Mock.mock ('@id()')
// 隨機生成一箇中文名稱
var data = Mock.mock ('@cname()')
// 隨機生成一個日期
var data = Mock.mock ("@date('yyyy-mm-dd')")
// 隨機生成一段描述
var data = Mock.mock ('@paragraph()')
// 隨機生成一個郵箱
var data = Mock.mock ('@email()')

 

基本流程

安裝 ->  導入 ->  使用

安裝：

cnpm install mockjs -D

(ps: 安裝時提醒node版本不夠高，需先升級node版本)

// 升級node
sudo npm i -g n
sudo n stable

// 查看node版本
node -v

導入：

var Mock = require('mockjs')

使用：

var data = Mock.mock({...})

 

在項目中使用的流程

1、定義接口路由在接口中返回mock模擬的數據

（見基本流程）

mock/index.js

// 引入
var Mock = require('mockjs')

// 暴露出去
module.exports = function(app){
    if (process.env.MOCK == 'true') {
        // 參數1:藉口地址；參數2:服務器處理函數（req：請求對象；res：響應對象）
        app.use('/api/userinfo', (req, res) => {
            // 隨機生成一個對象
            var data = Mock.mock ({
                id: '@id()',
                username: '@cname()',
                date: '@date(yyyy-mm-dd)',
                description: '@paragraph()',
                email: '@email()',
                'age|1-100': 23
            })
            // 將模擬的數據轉成json格式並返回給瀏覽器
            res.json(data)
            // console.log(data, 'data')
        })
    }
}

2、在vue.config.js中配置devServer,在before屬性中引入接口路由參數

module.exports = {
    devServer: {
    　　// devServer 在發送請求時，回先走到before指定的函數中進行處理，如果before中沒有對應的接口路由，纔會請求外網等。
        before: require('../mock/index.js')
      }
}

3、使用axios調用該接口獲取數據

axios.get('/api/userinfo').then(res => {
      console.log(res.data, 'res')
})

 

控制是否使用mock

=> 新建一個env.development文件

MOCK = true
// MOCK = false

（ps: 判斷語句見在項目中使用的流程的1）