先後端分離——數據mock

Mock的方式

• 在client端處數據mock
• 在server端mock（json-server與faker.js）

1. 第一種方式攔截了請求的發出，直接返回mock的數據，而第二種方式請求則真實地發出，只是在server端進行route攔截
2. 先後端分離的方式，就是在傳統開發模式中加了一個node層，這樣數據mock徹底能夠在node server端完成

client mock

1. 攔截全部請求
2. 進行url規則匹配
3. 匹配對的，返回mock數據
4. 匹配不對的，走本來流程

mock.js

1.概念

mock.js是一個模擬數據生成器，幫助先後端分離。它能夠根據數據模版生成模擬數據，模擬Ajax請求，生成隨機數據返回。

2.使用語法

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

• 數據模板定義規範
• 數據佔位符定義規範

詳細請看：mock.js文檔連接

// 記錄數據模板。當攔截到匹配 rurl 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並做爲響應數據返回。
Mock.mock( rurl, rtype, function( options ) ) rurl 可選。 表示須要攔截的 URL，能夠是 URL 字符串或 URL 正則。例如 /\/domain\/list\.json/、'/domian/list.json'。 rtype 可選。 表示須要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。 template 可選。 表示數據模板，能夠是對象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

function(options) 可選。 表示用於生成響應數據的函數。 options 指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性，參見 XMLHttpRequest 規範。 複製代碼

示例

Mock.mock('/api/getName', { name: 'Jack', 'age|10-20': 10 });
複製代碼

3. 模板語法

1）數據模板定義規範（例舉）

'name|min-max': string

Mock.mock({
  "string|1-10": "★"
})

// result
{
  "string": "★★★"
}
複製代碼

'name|count': string

Mock.mock({
  "string|3": "★★★"
})

// result
{
  "string": "★★★★★★★★★"
}
複製代碼

2）Mock.Random Mock.Random 是一個工具類，用於生成各類隨機數據。

Mock.Random 的方法在數據模板中稱爲『佔位符』，書寫格式爲 @佔位符(參數 [, 參數]) 。

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

複製代碼

// Random.datetime()
Random.datetime()
Mock.mock('@datetime')
Mock.mock('@datetime()')

// Random.datetime( format )
Random.datetime('yyyy-MM-dd A HH:mm:ss')
Random.datetime('yy-MM-dd a HH:mm:ss')
Random.datetime('y-MM-dd HH:mm:ss')
Random.datetime('y-M-d H:m:s')

Mock.mock('@datetime("yyyy-MM-dd A HH:mm:ss")')
Mock.mock('@datetime("yy-MM-dd a HH:mm:ss")')
Mock.mock('@datetime("y-MM-dd HH:mm:ss")')
Mock.mock('@datetime("y-M-d H:m:s")')

Mock.mock('@datetime("yyyy yy y MM M dd d HH H hh h mm m ss s SS S A a T")')

//result
// Random.datetime()
"1984-03-11 21:34:12"
"2011-07-11 01:17:12"
"2007-03-25 16:31:51"

// Random.datetime( format )
"2018-01-27 AM 01:57:13"
"98-09-12 pm 21:34:08"
"71-06-03 07:13:40"
"15-1-20 11:58:41"

"1991-09-17 PM 15:41:03"
"99-09-11 am 01:00:15"
"71-03-21 10:16:52"
"14-12-10 16:32:53"

"1976 76 76 09 9 29 29 06 6 06 6 12 12 33 33 184 184 AM am 212796753184"

複製代碼

4. 缺點

沒法攔截fecth請求

fetch-mock

1. 概念

攔截fecth請求，進行mock數據返回

2. 模板語法

fetchMock.mock(matcher, response)
複製代碼

經常使用：

fetchMock.once() //限制了只被調用一次
fetchMock.restore()  //恢復其unstubbed fetch()狀態和清除全部數據記錄
複製代碼

fetch-mock文檔及對應api

3. 用法

1. 安裝npm install mockjs
2. 須要安裝fetch-mock包--yarn add fetch-mock，這個包主要用來包裝fetch
3. 註冊mock 攔截信息的，應該是在App入口的位置

if(process.env.__DEV__) {
    require('./mock/todolist')
}
複製代碼

3. 主要增長了mock文件夾，todolist.js是模擬數據

import FetchMock from 'fetch-mock';
FetchMock.mock('*', (url, options) => {
    //解析獲取opt
    if(opt==='9'){
        return {
           // mock數據
        };
    }
    if(opt==='155'){
        return {
           // mock數據
                    };
    }
    else {
        //恢復其unstubbed fetch()狀態和清除全部數據記錄
        FetchMock.restore();
        return fetch(url, options);
    }
    // FetchMock.restore();
    // return fetch(url, options);
});
複製代碼

3. 項目的業務規則

項目目前狀況：同一個url請求，經過opt進行判斷調用哪一個業務接口，所以沒法直接使用url進行區分匹配，須要更詳細的判斷

實際請求代碼

params.opt = opt

let dataString = ''
let index = 0

const keys = Object.keys(params)
keys.forEach((key) => {
    if (index != 0) {
        dataString += '&'
    }
    index++
    const data = params[key]
    const encodeData = encodeURIComponent(data)
    dataString += `${key}=${encodeData}`
})

// opt最終會合併到dataString中，所以使用的時候，須要解析


let fetchPromise = fetch(url, {
            method: 'post',
            body: dataString,
            headers: header,
        }).then((response) => {
            if (response.ok) {
                return response.json()
            } else {
                throw new Error('網絡錯誤')
            }
        })
複製代碼

fetch-mock中

FetchMock.mock('*', (url, options) => {

	var dataString = options.body;
	var array = dataString.split("&")

	var opt;
	for (var temp of array) {
        	var temps = temp.split("=")
        	var key = temps[0]
        	var value = decodeURIComponent(temps[1])
	
        	if (key === "opt") {
        	    opt = value;
        	}
        	
    }

	if (opt === 195) {
		// 進行轉發請求
	} else {
	    FetchMock.restore();
		// 走正常請求
	}
})
複製代碼

server mock

1. 簡單構建一套mock-server

爲了更好的分工合做，讓前端能在不依賴後端環境的狀況下進行開發，其中一種手段就是爲前端開發者提供一個 web 容器，這個本地環境就是 mock-server

2. 一個比較好的 mock-server 該有的能力

• 與線上環境一致的接口地址，每次構建前端代碼時不須要修改調用接口的代碼
• 所改即所得，具備熱更新的能力，每次增長修改 mock 接口時不須要重啓 mock 服務，更不用重啓前端構建服務
• 能配合 Webpack
• mock 數據能夠由工具生成不須要本身手動寫
• 能模擬 POST、GET 請求

3. 使用json-server模擬服務器API

以 json-server 做爲 mock 服務器， mock.js 生成mock 數據，json-server支持各類GET/POST/PUT/DELETE的請求

json-server文檔

簡單使用

1）安裝json-server npm install -g json-server 2）發起fecth請求

import FetchMock from 'fetch-mock';

//其餘路由使用原生fetch
FetchMock.mock('*', (url, options) => {
    //opt解析
    var array = options.body.split("&")
    var opt;
    for (var temp of array) {
        var temps = temp.split("=")
        var key = temps[0]
        var  value = temps[1]
        if(key==='opt'){
            opt = value
        }
    }
    
    //opt匹配，發出fecth請求，進行mock數據返回
    if(opt==='9'){
        FetchMock.restore();
        return fetch('http://localhost:53000/data');
        
    }
    if(opt==='155'){
        FetchMock.restore();
        return fetch('http://localhost:53000/list');
        
    }
    else {
        FetchMock.restore();
        return fetch(url, options);
    }
    // FetchMock.restore();
    // return fetch(url, options);
});

複製代碼

3）生成一個json.js文件,結合mock.js動態生成模擬數據

var Mock = require('mockjs');

module.exports = () => {
    // 使用 Mock
    var datas = Mock.mock({
        data:
            {
                //mock數據
            }
        ,
        list:{
                //mock數據
                "error": 0,
                "message": "success",
                'capitalDetails|30': [
                    {
                        //mock.js動態生成模擬數據
                        "summary": "@ctitle",
                        "time": "@datetime",
                    }
                ]
              }
    });
    // 返回的data會做爲json-server的數據
    return datas;
};

複製代碼

4）啓動json-server ,把一個js文件返回的數據託管成web服務 json-server --watch --port 53000 json.js

成功時控制檯輸出：

shubing-mac:mock admin$ json-server --watch --port 53000 json.js

  \{^_^}/ hi!

  Loading json.js
  Done

  Resources
  http://localhost:53000/data
  http://localhost:53000/list

  Home
  http://localhost:53000

  Type s + enter at any time to create a snapshot of the database
  Watching...

複製代碼

缺點

每次修改數據模版時，必須從新啓動mock服務器

4.使用Faker.js

自動生成大量fake的json數據，做爲後端數據

參考：github.com/marak/Faker…