json-server 接入項目說明

接上一篇文檔學習，我採用json-server模擬服務器API的方式在項目中模擬數據，實現先後端分離。此文檔是以 json-server 做爲 mock 服務器， mock.js 生成mock 數據，針對本身項目的狀況接入json-server的過程總結。

1、安裝配置

1. npm install mockjs
2. npm install --save-dev fetch-mock
3. npm install --save-dev json-server mockjs

2、mock文件

mock文件夾包括json.js，mock.js，mock.web.js，routes.js，server.js五個文件

一、json.js

mock數據源

list: Mock.mock({
        "error": 0,
        "message": "success",
        'capitalDetails|30': [
            {
                "amount|1-100.1-5": 1.04,
                "balance|100-1000.1-5": 246.16,
                "entityId|1000-100000": 58391,
                "freeze|1-100.1-5": 34.53,
                "id|+1": 1,
                "name|1": "扣除逾期費",
                "operation|100-10000": 317,
                "order_amount|1-5": 1,
                "persistent": true,
                "recieve_amount|1-5": 1,
                "summary": "@ctitle",
                "time": "@datetime",
                "total_amount": 228.9,
                "type": 2,
                "user_balance": 0,
                "user_id": 417445,
                "way_amount": 51.79,
                "id+1": 1,
                "status": 1
            }
        ]
    })
複製代碼

二、mock.js/mock.web.js

• mock思路：

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

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

• app端進行接口過濾：

global.fetchMock.mock('*', (url, options) => {
//opt最終會合併到dataString中，所以使用的時候，須要解析獲取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
        }
    }
    
    const realFetch = global.fetchMock.realFetch
        
    if(opt==='9'){
        // 進行轉發請求
        return realFetch('http://1**.16.11.**:8888/mock/mineData.action');
        
    }
    if(opt==='155'){
        ...
    }
    else {
        // 走正常請求
        rturn realFetch(url, options);
    }
})

複製代碼

注：app端進行須要mock的接口判斷,進行轉發請求時，須要修改本機IP地址，如100.16.11.00:8888

return realFetch('http://100.16.11.00:8888/mock/mineData.action');
複製代碼

• web端進行接口過濾：

window.fetchMock.mock('*', (url, options) => {
    //opt最終會合併到dataString中，所以使用的時候，須要解析獲取opt
    
    const realFetch = window.fetchMock.realFetch
    
    if(opt==='9'){
    // 進行轉發請求
        return realFetch('http://localhost:8888/mock/mineData.action');
        
    }
    if(opt==='155'){
        ... 
    }
    else {
        // 走正常請求
        return realFetch(url, options);
    }
    
})

複製代碼

注：web端進行轉發請求時，localhost:8888 便可

return realFetch('http://localhost:8888/mock/mineData.action');
複製代碼

三、routes.js

mock/routes.js重寫路由表

module.exports = {
    "/mock/mineData.action": "/mineData",
    "/mock/list.action": "/list"
}

複製代碼

四、server.js

以 json-server 做爲 mock 服務器

3、啓動

一、按本來開啓運行步驟

二、控制檯輸入node mock/server.js 開啓mock-server的服務器

web端打開 http://localhost:8888/mock/mineData.action 便可在網頁上查看到咱們想要的數據

三、引入mock數據

app入口文件：js/setup.js 打開mock數據註釋的條件 web入口文件：index.web.js打開mock數據的註釋的條件

eg:

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

四、刷新