文档章节

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

 蓝色札记
发布于 2018/04/27 11:37
字数 587
阅读 1317
收藏 0

前端开发过程中可能存在这样的场景,后端接口不稳定,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:3000http://www.test.com 查看效果。

总结:

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

有问题反馈:

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

© 著作权归作者所有

粉丝 1
博文 2
码字总数 1230
作品 0
成都
私信 提问
前端驱动的接口数据检查、文档生成、mock 以及接口自动化测试

我们项目开发时,时常面临这样的问题,在接口对接时,前后端脱钩,并行开发时相互限制拖慢开发效率。以往,这件事常常是后端主导的,后端同学输出的接口不能满足前端需求,这也是为什么 grag...

否子戈
10/18
0
0
vue菜鸟从业记:公司项目里如何进行前后端接口联调

最近我的朋友王小闰进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是王小闰非常熟悉的vue全家桶,后端用的是Java语言。 在前后端开发人员碰面之后,协商确定好了前端需要的数...

闰土大叔
2018/07/05
0
0
Vue CLI 2.0/3.0脚手架如何在本地配置mock数据

前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。 我们在开发的过程中,由...

不负好时光
01/31
132
0
深入解析Vue CLI 3.0脚手架如何mock数据

前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。 我们在开发的过程中,由...

peakedness丶
2018/12/21
0
0
ZanApi 让前后端协调更高效

一、当我们在说前后端协作的时候,我们在说什么 目前前后端分离已成为主流,前后端开发环境互相独立的情况下,如何提高前后端协作效率已然成为每个公司不得不考虑的问题。 以一个项目开发周期...

有赞技术
2018/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
5
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0
栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
今天
43
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
今天
5
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部