justreq与mock.js组合，快速打造高质量Mock Server

Awbeci 发布于2019-08-20 14:45 / 1921人阅读

摘要：而则是主要用于接口缓存的一款。初始化完成后，将在当前目录生成文件。其它未在规则中的请求，将直接代理并缓存下来，而不进行转发。每条记录包含和两个属性，并且也是随机自动生成的。

概述

搜到这篇文章之前，相信你已对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 - 配置

运行以下命令初始化justreq

justreq 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效果

保存为mock-demo.html，并双击打开，然后点击“Reload User List”按钮，将看到如下图的结果。

可多点几次查看效果^_^

最后的絮叨

对于大多数的前端开发情况，以上这些已经足够应付了。但也许你还会需要定制更高级、仿真度更高的模拟接口，又或许你仅仅只需要调用一些固定格式的文件等等等等。这些需求，justreq都有考虑到。你也可以把justreq共享到局域网，让其它前端小伙伴跟你一道共用一套mock脚本。甚至用justreq来做一些简单的站点服务，也是可以的。

更多高级玩法可查看justreq文档

专线服务私有云 mock.js 数据统计与质量管理 justreq WebRTC的传输质量监测与评估

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81884.html

基于webpack的前后端分离开发环境实战

摘要：背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重视，前端负责展现交互逻辑，后端负责业务数据接口，基本上也成为了我们日常项目分工中的标配，但是前后端分离背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准web应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重...

soasme 2019-08-22 11:03 评论0 收藏0
从零开始打造 Mock 平台 - 核心篇

摘要：前言最近一直在捣鼓毕设，准备做的是一个基于前后端开发的平台，前期花了很多时间完成了功能模块的交互。核心代码就是这么一句。经过各种猜想和测试，发现是模拟有问题。其实用的最终核心思路还是一样的。前言最近一直在捣鼓毕设，准备做的是一个基于前后端开发的Mock平台，前期花了很多时间完成了功能模块的交互。现在进度推到如何设计核心功能，也就是Mock数据的解析。根据之前的需求设定加上一些思考...

he_xd 2019-08-30 13:53 评论0 收藏0
从零开始打造 Mock 平台 - 核心篇

摘要：前言最近一直在捣鼓毕设，准备做的是一个基于前后端开发的平台，前期花了很多时间完成了功能模块的交互。核心代码就是这么一句。经过各种猜想和测试，发现是模拟有问题。其实用的最终核心思路还是一样的。前言最近一直在捣鼓毕设，准备做的是一个基于前后端开发的Mock平台，前期花了很多时间完成了功能模块的交互。现在进度推到如何设计核心功能，也就是Mock数据的解析。根据之前的需求设定加上一些思考...

kidsamong 2019-08-26 11:35 评论0 收藏0