前端开发过程中可能存在这样的场景,后端接口不稳定,Mock又无法模拟真实的操作结果。每次修改了后台接口的配置地址,我们的单页应用例如VUE和React都需要重启才会生效。这里提供一种同时使用Mock数据和真实数据调试的方法。 环境准备:node,nodemon,nginx
环境搭建(使用Mock数据)
-
配置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
-
-
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
-
环境搭建(使用真实数据)
-
转发配置
- 配置启动域名,通过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
- 配置启动域名,通过vim命令查看/etc/hosts文件内容,添加一行
-
环境测试 这时可以通过浏览器分别访问 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
- 博客: @蓝色札记
所有评论(0)