前端开发如何同时使用Mock和后台真实数据

前端开发过程中可能存在这样的场景，后端接口不稳定，Mock又无法模拟真实的操作结果。每次修改了后台接口的配置地址，我们的单页应用例如VUE和React都需要重启才会生效。这里提供一种同时使用Mock数据和真实数据调试的方法。 环境准备：node，nodemon，nginx

环境搭建（使用Mock数据）

1. 配置Mock环境：

   • 在工程中建立mock文件夹，并创建server.js

     'use strict';
     const Koa = require('koa');
     var Mock = require('mockjs')
     const KoaRouter = require('koa-router');
     
     const app = new Koa();
     const router = new KoaRouter();
     app.use(router['routes']());
     
     这里是你的Mock代码。。。
     
     app.listen(8000);
     console.log('mock is start at port 8000');
     

   • 安装nodemon，nodemon能够监测文件的修改并自动加载，相对suppervisor而言更加轻量化

     npm install nodemon --save-dev
     

   • 配置到package.json中

     "scripts": {
         "start": "node scripts/start.js ",
         "build": "node scripts/build.js ",
         "mock": "./node_modules/.bin/nodemon  ./mock/server.js",
         "test": "node scripts/test.js --env=jsdom"
       }
     

   • 启动Mock服务器

     npm run mock
     

2. Mock测试环境配置

   • 修改webpack代理地址，由于各工程差异，配置文件地址可能不一致，本工程在config/webpackDevServer.config.js

     proxy:{
         '/api': {
              // target: 'http://pc.dev61.idanlu.com',
              target: 'http://127.0.0.1:8000/',
              changeOrigin: true,
              pathRewrite: {                
                '^/api': ''
              },
               colors: true, //终端中输出结果为彩色
               historyApiFallback: true, //不跳转
               inline: true, //实时刷新
               hot: true  // 使用热加载插件 HotModuleReplacementPlugin
            } 
     }
     

   • 启动服务，这时可以修改/mock/server.js的数据查看页面效果。本机路径为 http://127.0.0.1:3000

     npm run start
     

环境搭建（使用真实数据）

1. 转发配置

   • 配置启动域名，通过vim命令查看/etc/hosts文件内容，添加一行

     127.0.0.1 www.test.com
     

   • 配置nginx，nginx的安装请自行百度，在nginx.conf文件中修改

     location /api {
         proxy_pass http://pc.dev61.idanlu.com ; #你真实后台服务器地址
     }
     location / {
         proxy_pass http://127.0.0.1:3000;
     }
     

   • 重新加载nginx配置

     nginx -s reload
     

2. 环境测试 这时可以通过浏览器分别访问 http://127.0.0.1:3000 和 http://www.test.com 查看效果。

总结：

其实整个过程就是将127.0.0.1访问来源的数据使用webpackServer 的代理转发到了自己的mock文件，通过www.test.com访问来源的数据由nginx代理转发到了后端服务。

有问题反馈：

有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

• 邮件：594341275@qq.com
• QQ：594341275
• 博客： @蓝色札记

转载于:https://my.oschina.net/u/1583290/blog/1802092