justreq與mock.js組合，快速打造高質量Mock Server

時間 2019-12-05

標籤 justreq mock.js mock 組合快速打造高質量 server 欄目 JavaScript 简体版

原文原文鏈接

概述

搜到這篇文章以前，相信你已對Mock Server及mock.js有必定的瞭解。簡單歸納，Mock Server即模擬服務器，用於模擬後端api服務。mock.js是國內的高雲開發的一款json數據生成器，主要用於模擬後端api數據。而justreq則是主要用於http(s)接口緩存的一款Mock Server。javascript

開發現狀

那麼，咱們要用Mock Server解決什麼呢？在前端開發過程當中，相信你們都有遇到過如下一些問題：html

後端api接口還沒開發完，前端只能無盡的等待...前端
開發過程當中，接口服務器宕機了，也只能無盡的等待...java
網絡奇差，一半時間都在等待接口響應了node
本身模擬數據，但部署時還得逐個去js文件清理git
邏輯太複雜，模擬數據雜亂，沒法管理github
現有Mock Server或多或少都須要往項目裏植入一些代碼npm
並非全部接口都須要mock，後端已完成的接口但願直接調用json
模擬的數據不夠真實、不夠靈活後端

解決方案

只要遇到上面任何一項，那麼接下來的方案或許就是你想要的。

首先，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效果

<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文檔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。