1.为什么要搭建mock-server?

为了更好的分工合作,让前端能在不依赖后端环境的情况下进行开发,其中一种手段就是为前端开发者提供一个 web 容器,这个本地环境就是 mock-server。

目前很多前端 mock 数据的方案的基本流程都是使用 node.js 来模拟 http 请求,配置 router 返回 mock 数据。

一个比较好的 mock-server 该有的能力:

1.与线上环境一致的接口地址,每次构建前端代码时不需要修改调用接口的代码

2.所改即所得,具有热更新的能力,每次增加 /修改 mock 接口时不需要重启 mock 服务,更不用重启前端构建服务

3.能配合 Webpack

4.mock 数据可以由工具生成不需要自己手动写

5.能模拟 POST、GET 请求

6.简单(包括:文件结构简单、编写代码简单)

2.我们mock server 服务器

1.就是一个基于Node的 Express web 搭建的一个本地server。

2.数据mock的思路就是在这个本地server端进行,Promise 发出http请求,通过 router 返回mock数据。

3.与线上环境一致,前端代码构建和接口服务是分开独立的

app.listen(3001, () => {

debug(`The fake API server is listening on ${'3001'.rainbow}.`)

}) //启动一个服务并监听从 3001 端口进入的所有API连接请求

在webpack 配置中, 比较简单:

proxy: {

'/api/*': {

target: `http://${host}:3001`,

secure: false,

},

将匹配 ‘/api/*’ 这种格式的API的域名重定向为 http://${host}:3001

4.具有热更新的能力,每次增加 /修改 mock 接口(入口api/index.js)时自动重启 mock 服务

nodemon 自动重启的工具 启动 mock server

5.mock 数据可以由工具生成不需要自己手动写,还能模拟 POST、GET 请求

用到LowDB,LowDB 基于Lo-Dash 中间件, 基于Node的纯Json文件数据库,LowDB支持 JSON Server 和 JSONPlaceholder.

dbs[entry] = low(`${entries[i]}/data.json`)

返回或者创建一个Lo-Dash包裹数组。然后,您可以使用这些方法: where, find, filter, sortBy, groupBy, ...和来自Underscore.db的方法

目录结构,根据大模块划分了mock数据目录结构,

每一个模块下,都有个schemas/*.js  Object类型 default 数据定义,然后JSON.stringify(data)转为JSON 字符串,同步写入data.json文件中。用到Faker.js 的一些API。 (mock一些不变的数据)

每一个模块下,都有routes/*.js , 每个模块都对应创建了 express.Router() 实例,在具体app.get(‘/’, (req, res)) 对应的URL 或 路由 来模拟POST 或者GET 请求 以及PUT和DELETE请求,固定的status code 对应了不同的error。

6.简单(包括:文件结构简单、编写代码简单)

如何在src (业务代码) 中调用mock server呢?

在src 下modules/*.js 中定义Promise 请求

export const myFun = () => ({

  type: MYFUN,

  promise: (dispatch, getStore, api) => api.get(URL.myFun)

})

URL 对应配置了不同环境的url 请求, 生产环境(真实),开发环境 (mock server 路由),测试环境(unit test)

搭建Mock Server的更多相关文章

  1. mock server搭建及接口测试简单实例

    一.搭建mock server mock工具很多,这里我们选择用简单易操作的moco服务器 使用前必须先安装java,去相关网站下载Standalone Moco Runner 二.使用mock se ...

  2. 1分钟搭建极简mock server

    1.无聊的背景.起源: 如今的业务系统越来越复杂庞大,各个功能直接的调用也是多如牛毛,但如果在联调的时候,恰好被调的接口正在开发,怎么办?傻傻的等么,不存在的!这时会搭建一些server来进行mock ...

  3. Mock Server的搭建

    一.概述 我们系统与第三方开票系统有交互,场景是我们系统请求第三方开票系统,第三方开票系统根据我们的请求数据,生成开票信息然后返回发票号或异常信息,我们根据返回的信息做对应的处理.因为配合上存在一些障 ...

  4. mock server 前后端分离小结(转)

    1.前台开发受限于后台开发的速度 2.后台提供给前台的接口缺字段,时常需要联调 基于Mock Server开发的好处: 对于前端来讲,可以独立于后端进行开发. 对于后端来讲,根据前端定义的接口进行开发 ...

  5. Python+Flask搭建mock api server

    Python+Flask搭建mock api server 前言: 近期由于工作需要,需要一个Mock Server调用接口直接返回API结果: 假如可以先通过接口文档的定义,自己模拟出服务器返回结果 ...

  6. 搭建一个低配版的Mock Server

    mock翻译过来是模仿的意思,Server是服务器.粗暴点直译就是模仿服务器. 写在前面 通过阅读本文,你将对Mock的使用有一定的了解,对前后端分离的概念有了更深一步的认识,对Koa的使用有一定的了 ...

  7. 使用RAP搭建前端Mock Server

    转载自:<前后端分离--构建前端Mock Server--windows部署rap>http://www.cnblogs.com/dothin/p/5361883.html mock:模拟 ...

  8. Mock Server 入门

    Mock Server介绍 什么是mock ? 我在去年的时候介绍一篇幅 python mock的基本使用,http://www.cnblogs.com/fnng/p/5648247.html 主要是 ...

  9. Mock Server 入门(一)

    Mock Server 使用场景 1.开发过程中依赖一些接口,而这些接口可能有一下情况: 1)接口搭建环境比较困难:例如支付宝的支付接口,需要授权等等准备好才能进行调试 2)接口暂时还未实现时:可以便 ...

随机推荐

  1. redis概述(一)

    什么是NoSql? 为了解决高并发.高可用.高可扩展,大数据存储等一系列问题而产生的数据库解决方案,就是NoSql. NoSql,叫非关系型数据库,它的全名Not only sql.它不能替代关系型数 ...

  2. 【linux基础】linux不能进入系统

    博主遇到的这个问题其实主要原因是系统内核和NVIDIA的GPU版本不匹配. 主要是系统内核自动更新,而GPU驱动没有对应的更新造成的. 又要涉及NVIDIA驱动的安装,这个安装真的很鸡肋... 需要注 ...

  3. 用matlab画漂亮的sin曲线

    Technorati 标记: matlab,plot 相信大部分用过matlab的人都画过sin曲线,直接plot就可以了,不过呢,plot出来的曲线自然不那么好看,本着绳命在于折腾的原则,小弟学习了 ...

  4. vue.js 精学记录

    v-bind:class使用的方式: 1.对象与法::class="{'active':isActive}" 此时当isActive为true时,会拥有active 2.数组语法: ...

  5. Python全栈之路----常用模块----xml处理模块

    xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融行业的很多系统的 ...

  6. jmeter插件安装

    一.下载插件 访问网址http://jmeter-plugins.org/downloads/all/,下载三个文件.其中JMeterPlugins-Standard和JMeterPlugins-Ex ...

  7. Springboot,SSM框架比较,区别

    百度搜 Springboot,SSM框架区别,大多说的都是 1.springboot一个应用是一个可执行jar 2.将原有的xml配置,简化为java配置 他们说的确实没错,可是根本没有说到本质,百度 ...

  8. Django_web框架的理解

    web框架的本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 80)) sk.listen() while T ...

  9. PA教材提纲 TAW12-2

    Unit1 Adjustment of SAP Standard Software(SAP标准软件修改) 1.1 Adjusting SAP Standard Software(如何修改SAP标准软件 ...

  10. 认识Ajax

    1.简介 AJAX 相当于异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网 ...