justreq与mock.js组合,快速打造高质量Mock Server
2017-03-03 15:34
211 查看
概述
搜到这篇文章之前,相信你已对Mock Server及mock.js有一定的了解。简单概括,Mock Server即模拟服务器,用于模拟后端api服务。mock.js是国内的高云开发的一款json数据生成器,主要用于模拟后端api数据。而justreq则是主要用于http(s)接口缓存的一款Mock Server。开发现状
那么,我们要用Mock Server解决什么呢?在前端开发过程中,相信大家都有遇到过以下一些问题:后端api接口还没开发完,前端只能无尽的等待…
开发过程中,接口服务器宕机了,也只能无尽的等待…
网络奇差,一半时间都在等待接口响应了
自己模拟数据,但部署时还得逐个去js文件清理
逻辑太复杂,模拟数据杂乱,无法管理
现有Mock Server或多或少都需要往项目里植入一些代码
并不是所有接口都需要mock,后端已完成的接口希望直接调用
模拟的数据不够真实、不够灵活
解决方案
只要遇到上面任何一项,那么接下来的方案或许就是你想要的。首先,justreq就是为解决以上问题而生的,可以参看我上一篇文章《 justreq 永不离线的测试接口服务,摆脱测试接口离线之痛》,也可以去github查看最新文档。它首先解决的就是接口的缓存,定时更新机制让你开发过程中不至于请求到过旧数据,又能不依赖网络,实现即使离线也能毫秒级响应。然后对于部分后端没开发完成的接口,可以自行mock,并且不需要往项目中植入任何代码。
然后,前两天无意中发现了mock.js这一神器,我又想到,如果把两者结合起来,那么问题8还可以解决得更优雅。幸运的是,justreq一开始的设计理念就是支持调用一切node模块,所以我们可以很容易的把justreq和mock.js组合起来。
好了,废话完了,接下来详细说下组合方法。已迫不及待的话,我这里已经为大家准备好一份样例,可下载亲自运行调试。以下讲解的用到的例子也来自该样例。
https://github.com/vilien/justreq-demo/releases/download/v0.1.1/justreq-demo-v0.1.1.zip
步骤1 - 安装
首先下载安装Node.js,然后运行以下命令安装justreq命令行工具npm install -g justreq-cli
进入自己项目目录运行以下命令安装justreq主程序(当然也可以专门另设目录安装,看个人喜好)
npm install justreq
最后,安装mock.js
npm install mockjs
步骤2 - 配置
运行以下命令初始化justreqjustreq init
除了第一个问号
The remote's hostname of you wanna proxy?必须填入接口服务器主机名(如:192.168.50.50),其它问号一路回车使用默认即可。
初始化完成后,将在当前目录生成“.justreq”文件。现在打开它,并在rules里添加以下一条规则:
{ ... "rules": [ { "href": "getUsersList.do", "subs": "getUsersList.jrs" } ] }
稍微解释一下,这一条规则是告诉justreq:当请求地址为getUsersList.do的时候,转发至getUsersList.jrs。其它未在规则中的请求,justreq将直接代理并缓存下来,而不进行转发。
而我们的getUsersList.jrs脚本,即是用来mock接口的。
步骤3 - 编写mock脚本
在当前目录找到.jr目录,在里面创建并打开getUsersList.jrs(注意,.jr前面有个“.”)。编写以下代码:// .jr/getUsersList.jrs const Mock = require('mockjs'); let data = Mock.mock({ // 属性 list 的值是一个数组,其中含有 6 到 20 个元素 'list|6-20': [{ // 属性 id 是一个自增数,起始值为 80001,每次增 6 'id|+6': 80001, 'name': '@name' }] }); end(data);
至此,我们的第一个mock脚本就完成了。该脚本将会输出一个列表list,这个list随机产生6到20条用户记录。每条记录包含id和name两个属性,并且name也是随机自动生成的。是不是好神奇?
更多的mock.js用法可参看官方示例
至此,我们已经完成了所有的工作,下面一起来体验一下吧。
Mock初体验
首先,我们在当前目录运行以下命令启动justreq:justreq start
接着,我们写一个html文件来测试下mock效果
<body> <input onclick="getUsersList()" type="button" value="Reload Users List"> <ul id="users-list"></ul> <script> function getUsersList() { $.get('http://127.0.0.1:8000/getUsersList.do', function(data){ var list = data.list || []; $('#users-list').empty(); for (var i = 0; i < list.length; i++) { $('#users-list').append('<li><a href="#" data-id="' + list[i].id + '">' + list[i].name + '</a></li>'); } }); } </script> </body>
保存为mock-demo.html,并双击打开,然后点击“Reload User List”按钮,将看到如下图的结果。
可多点几次查看效果^_^
最后的絮叨
对于大多数的前端开发情况,以上这些已经足够应付了。但也许你还会需要定制更高级、仿真度更高的模拟接口,又或许你仅仅只需要调用一些固定格式的文件等等等等。这些需求,justreq都有考虑到。你也可以把justreq共享到局域网,让其它前端小伙伴跟你一道共用一套mock脚本。甚至用justreq来做一些简单的站点服务,也是可以的。更多高级玩法可查看justreq文档
相关文章推荐
- 利用问答平台快速打造高质量外链
- 如何快速高效的打造一套完整的高质量外链
- 【仿微盟源码分享】利用第三方微信营销托管平台快速增加粉丝,形成良好互动,打造精美微信APP
- 使用go的ssh包快速打造一个本地命令行ssh客户端
- 【转】码农如何快速打造一个有设计感的网站
- 快速打造批量DUMP分析工具
- 图形图像处理-之-高质量的快速的图像缩放 中篇 二次线性插值和三次卷积插值
- 码农如何快速打造一个有设计感的网站
- 图形图像处理-之-任意角度的高质量的快速的图像旋转 上篇 纯软件的任意角度的快速旋转
- (转)图形图像处理-之-高质量的快速的图像缩放 上篇 近邻取样插值和其速度优化
- 初创企业如何快速打造产品?
- Android 快速开发系列 打造万能的ListView GridView 适配器
- 高质量的博客该如何来进行打造?
- PS教你快速打造简约时尚的播放器图标
- Android 快速开发系列 打造万能的ListView GridView 适配器
- Photoshop快速打造作逼真的热气球
- Photoshop蒙版快速打造珠帘效果
- 超简单 PS快速打造逼真积雪效果