json-server 接入專案說明

小小冰發表於2018-08-23
JSONServer

接上一篇文件學習，我採用json-server模擬伺服器API的方式在專案中模擬資料，實現前後端分離。此文件是以 json-server 作為 mock 伺服器， mock.js 生成mock 資料，針對自己專案的情況接入json-server的過程總結。

一、安裝配置

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

二、mock檔案

json-server 接入專案說明

mock資料夾包括json.js，mock.js，mock.web.js，routes.js，server.js五個檔案

1、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
            }
        ]
    })
複製程式碼

2、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');
複製程式碼

3、routes.js

mock/routes.js重寫路由表

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

複製程式碼

4、server.js

以 json-server 作為 mock 伺服器

三、啟動

1、按原本開啟執行步驟

2、控制檯輸入node mock/server.js 開啟mock-server的伺服器

json-server 接入專案說明
web端開啟http://localhost:8888/mock/mineData.action 即可在網頁上檢視到我們想要的資料

3、引入mock資料

app入口檔案：js/setup.js 開啟mock資料註釋的條件 web入口檔案：index.web.js開啟mock資料的註釋的條件

eg:

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

4、重新整理

相關文章