在前端开发中mock后端数据

Posted 2023-05-08

参考技术A ​ 在使用RestfulAPI方式进行项目开发的初期，通常由后端同学事先设计出API接口文档。而在开发阶段，往往前后端的开发是并行的，意味着在前端开发过程中，后端并不能提供相应API接口的server。在这种情况下，我们可以自行mock一个server来辅助我们的前端开发。

​ 一个完美的本地模拟后端接口应该满足以下几个方面（暂时只想到这些）：

​ json-server的官方是这样介绍项目的：

​ 假设想要请求 http://localhost:3000/allcompanies 的资源，可以在db.json中编写前端希望接收到的响应，如下：

​ 启动 json-server mock/db.json --port 2999 ，即可在2999端口上请求到如上的json信息。

​ 考虑复杂一点的情况，假设我们请求的资源使用 http://localhost:3000/management/query/allcompanies ，但在db.json中是不支持直接写：

​ 这种情况下可以编写一个配置文件 routes.json 来指定一些路由规则，匹配规则有多种，详细信息参考 add-custom-routes

​ 执行 json-server mock/db.json --port 2999 在2999端口启动json-server，当然最佳的方式将该命令写在 package.json 中，将命令进行统一的管理：

​ 这样在开发阶段，通过执行 npm run dev 启动webpack的开发模式，执行 npm run mock 启动json-server来提供mock数据。

​ 在开发阶段，假设我们在webpack的配置文件 webpack.dev.config.js 中设置了webpack-dev-server的启动端口是3000，那么自然而然的，前端所有的ajax请求都会从3000端口去请求数据。而json-server跑在2999端口上，如何将两个server连接起来？

​ webpack-dev-server提供了强大的代理功能，我们可以手动在webpack的配置文件中指定相应的api请求代理到2999端口上，配置方式如下：

vue本地开发mock数据.md

目录

• 一、为什么要mock数据？
• 二、如何mock数据？
• 三、webpack本地代理配置
• 四、mockjs使用
• 五、easymock使用

一、为什么要mock数据？

VUE项目开发过程中，前后端是完全分离，后端负责提供数据，前端负责数据展示，因此就会存在这种情况：前端需要用到数据接口的时候，后端还没开发出来，此时前端就要挂起吗？当然不是了，我们要解决的就是如何给前端模拟数据？从而实现前后端完全独立开发。

二、如何mock数据？

在团队协作过程中，在人员角色分工明确的情况下，我们可以先根据产品功能文档，定义好一份前后端交互的api文档，开发人员可根据api文档独立编码；后端比较简单，按api文档实现相应的接口，并为接口编写单元测试，mock前端请求参数即可；而前端可以引入第三者，mock接口返回结果。

如何搭建Mock API:

• 本地json文件
  这是最原始的方法了，直接将接口返回的结果，写死在本地文本文件中，如user.json，这种方式也是可以，只是会污染到我们的代码，到了项目上线的，需要修改代码请求接口；
• 本地mock api或远程mock api
  本地用mockjs，远程用easymock，这两种都可以，可以非常灵活的模拟真实api请求交互，如：http://mockapi/user模拟http://restapi/user，前后端开发完成后，可以通过修改api host一键切换至我们的api。

三、webpack本地代理配置

我们在本地开发的时候，调用远程api，存在ajax跨域请求的问题，此时可通过webpack proxy配置，实现本地请求转发至远程，解决跨域问题。
找到config/index.js修改proxyTable，如下：

    proxyTable: {
      ‘/refundApi‘: {
        target: ‘https://easy-mock.com/mock/5af0f80305d45458a763bc65‘, // 接口的域名
        // secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          ‘^/refundApi‘: ‘‘
        }
      }
    },

假如vue的启动端口是8081，即http://localhost:8081，此时请求http://localhost:8081/refundApi/user会转发至https://easy-mock.com/mock/5af0f80305d45458a763bc65/user。

四、mockjs使用

Mock.js is a simulation data generator to help the front-end to develop and prototype separate from the back-end progress and reduce some monotony particularly while writing automated tests.
The official site: http://mockjs.com

• vue安装mockjs

npm install mockjs

• vue中使用mockjs
  示例：http://mockjs.com/examples.html

数据模板格式:

‘name|rule‘: value
属性名|生成规则: 属性值

定义mock api：

// mock/user.js
import Mock from ‘mockjs‘;//es6语法引入mock模块
Mock.mock(‘/test/‘, {
    // 属性 list 的值是一个数组，其中含有5个元素
    ‘list|5‘: [{
        ‘url‘: ‘@url‘
    }]
});

调用mock api：

// use in test.vue
import axios from ‘axios‘
import data from ‘../mock/user.js‘

axios.get(‘/test/‘).then(function(res){
   var data = res.data;
   console.log(JSON.stringify(data));
}).catch(function(err){
  console.log(err);
});

请求成功，输出结果：

{
    "list": [
        {
            "url": "http://pqibpj.gt/tqreffku"
        },
        {
            "url": "tn3270://huqptk.tv/wejcc"
        },
        {
            "url": "mid://kncn.bt/hpjutggpn"
        }
    ]
}

五、easymock使用

mockjs确实可以满足我的需求，不过在无意间发现了easymock，就喜欢上这个工具了，easymock其实就是一个在线的mockjs，提供可视化管理界面，能快速配置api地址，生成模拟数据，而其实接触mockjs那会我就有想基于mockjs自己搭建一个专门的mock api服务，没想到早就有人这么干了。

并且easymock还基于GPL3.0开放了源码，企业或个人可下载源码进行私有化部署。
github地址：https://github.com/easy-mock/easy-mock
在线服务：https://easy-mock.com