json-server 接入项目说明

接上一篇文档学习，我采用json-server模拟服务器API的方式在项目中模拟数据，实现前后端分离。此文档是以 json-server 作为 mock 服务器， mock.js 生成mock 数据，针对自己项目的情况接入json-server的过程总结。

一、安装配置

npm install mockjs

npm install --save-dev fetch-mock

npm install --save-dev json-server mockjs

二、mock文件

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思路：

拦截所有请求
进行url规则匹配
匹配对的，返回mock数据
匹配不对的，走原本流程

项目目前情况：同一个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的服务器

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、刷新