ice-design的MOCK方案，解决前端对后端依赖问题

最新推荐文章于 2022-12-23 18:55:32 发布

Chris__Wang

最新推荐文章于 2022-12-23 18:55:32 发布

阅读量1.1k

点赞数 1

分类专栏：个人总结文章标签： ice-design ice-design解决前端对后端依赖 react mock

本文链接：https://blog.csdn.net/Chris__wang/article/details/82744502

版权

个人总结专栏收录该内容

78 篇文章 1 订阅

订阅专栏

在前后端分离的开发中，Mock 数据是前端开发中很重要的一个环节，前端可以不必强依赖后端接口，只需要约定好对应的数据接口，前端可以通过 Mock 模拟数据先行开发，在后端接口开发完成后，只需要切换对应的接口地址即可，可以保证项目的同步开发。

只需要在项目目录下新建 mock 文件夹，并配置入口文件 index.js 作为路由表的入口，在启动项目服务时工具会同步的启动 Mock 服务。（这里需要注意一下，启动项目的时候一定要看日志，因为当你mock里面代码书写错误的时候是不影响项目启动和运行的，只是请求不到信息，所以当你感觉请求配置书写没问题的时候就去看看运行日志吧，极有可能是mock里面出现了问题）

如图，新建一个mock文件夹，里面新建一个index.js入口文件

index.js文件代码

let envName = require('./env-name.json');//引入环境名称数据

module.exports = {
// 环境名称管理
    // 查询
    '/mock-config/envInfo/getList': function(req,res){
        let pageNumber = req.query.pageNumber;
        let pageSize = req.query.pageSize;
        let searchType = req.query.searchType;
        let searchText = req.query.searchText;
        let envName2 = envName.slice((pageNumber-1)*pageSize,pageSize*pageNumber);
        let total = envName.length;
        if(searchType&&searchText){
            envName2 = [];
            for(let i = 0; i < envName.length; i++){
                if(envName[i][searchType]==searchText){
                    envName2.push(envName[i])
                }
            }
            total = envName2.length;
        }
        let newEnvName = {
            pageNumber:pageNumber,
            pageSize:pageSize,
            rows:envName2,
            total:total
        }
        res.json(newEnvName)
    },
    // 新增
    'POST /mock-config/envInfo/add':function(req,res){
        let addItem = req.query;
        addItem.id = parseInt(10000*Math.random());
        console.log(addItem)
        envName.unshift(addItem)
        res.send({"uid":null,"sid":null,"token":null,"state":"success","content":null,"statedesc":"  请求成功!","timestamp":Date.parse(new Date())})
    },
    // 修改
    'POST /mock-config/envInfo/update':function(req,res){
        let updateItem = req.query;
        for(var i = 0; i < envName.length; i++){
            if(envName[i].id == updateItem.id){
                envName[i] = updateItem;
            }
        }
        res.send({"uid":null,"sid":null,"token":null,"state":"success","content":null,"statedesc":"  请求成功!","timestamp":Date.parse(new Date())})
    },
}

前台调用，只需要调用定义好的接口信息即可，这里我我自己做的一些分页等处理，由于时间关系，删除接口没有写，道理大同小异，附上env-name.json数据

[
    {"id":8,"envCode":"IT","envName":"IT测试环境","accountingDate":"20170921","remark":null,"enable":"1","isdelete":"0"},
    {"id":9,"envCode":"FT","envName":"FT测试环境","accountingDate":"20171013","remark":null,"enable":"1","isdelete":"0"},
    {"id":10,"envCode":"AT","envName":"AT测试环境","accountingDate":"20171018","remark":null,"enable":"1","isdelete":"0"},
    {"id":11,"envCode":"11vd","envName":"11re","accountingDate":"20180101","remark":null,"enable":"1","isdelete":"0"},

]

此方法只要服务不重启，也就是项目不重新编译，新增，修改，删除的数据都会保留，不会还原

【右上角点个赞，谢谢】