成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

justreq與mock.js組合,快速打造高質(zhì)量Mock Server

Awbeci / 2033人閱讀

摘要:而則是主要用于接口緩存的一款。初始化完成后,將在當(dāng)前目錄生成文件。其它未在規(guī)則中的請(qǐng)求,將直接代理并緩存下來(lái),而不進(jìn)行轉(zhuǎn)發(fā)。每條記錄包含和兩個(gè)屬性,并且也是隨機(jī)自動(dòng)生成的。

概述

搜到這篇文章之前,相信你已對(duì)Mock Server及mock.js有一定的了解。簡(jiǎn)單概括,Mock Server即模擬服務(wù)器,用于模擬后端api服務(wù)。mock.js是國(guó)內(nèi)的高云開(kāi)發(fā)的一款json數(shù)據(jù)生成器,主要用于模擬后端api數(shù)據(jù)。而justreq則是主要用于http(s)接口緩存的一款Mock Server。

開(kāi)發(fā)現(xiàn)狀

那么,我們要用Mock Server解決什么呢?在前端開(kāi)發(fā)過(guò)程中,相信大家都有遇到過(guò)以下一些問(wèn)題:

后端api接口還沒(méi)開(kāi)發(fā)完,前端只能無(wú)盡的等待...

開(kāi)發(fā)過(guò)程中,接口服務(wù)器宕機(jī)了,也只能無(wú)盡的等待...

網(wǎng)絡(luò)奇差,一半時(shí)間都在等待接口響應(yīng)了

自己模擬數(shù)據(jù),但部署時(shí)還得逐個(gè)去js文件清理

邏輯太復(fù)雜,模擬數(shù)據(jù)雜亂,無(wú)法管理

現(xiàn)有Mock Server或多或少都需要往項(xiàng)目里植入一些代碼

并不是所有接口都需要mock,后端已完成的接口希望直接調(diào)用

模擬的數(shù)據(jù)不夠真實(shí)、不夠靈活

解決方案

只要遇到上面任何一項(xiàng),那么接下來(lái)的方案或許就是你想要的。

首先,justreq就是為解決以上問(wèn)題而生的,可以參看我上一篇文章《 justreq 永不離線的測(cè)試接口服務(wù),擺脫測(cè)試接口離線之痛》,也可以去github查看最新文檔。它首先解決的就是接口的緩存,定時(shí)更新機(jī)制讓你開(kāi)發(fā)過(guò)程中不至于請(qǐng)求到過(guò)舊數(shù)據(jù),又能不依賴(lài)網(wǎng)絡(luò),實(shí)現(xiàn)即使離線也能毫秒級(jí)響應(yīng)。然后對(duì)于部分后端沒(méi)開(kāi)發(fā)完成的接口,可以自行mock,并且不需要往項(xiàng)目中植入任何代碼。

然后,前兩天無(wú)意中發(fā)現(xiàn)了mock.js這一神器,我又想到,如果把兩者結(jié)合起來(lái),那么問(wèn)題8還可以解決得更優(yōu)雅。幸運(yùn)的是,justreq一開(kāi)始的設(shè)計(jì)理念就是支持調(diào)用一切node模塊,所以我們可以很容易的把justreq和mock.js組合起來(lái)。

好了,廢話完了,接下來(lái)詳細(xì)說(shuō)下組合方法。已迫不及待的話,我這里已經(jīng)為大家準(zhǔn)備好一份樣例,可下載親自運(yùn)行調(diào)試。以下講解的用到的例子也來(lái)自該樣例。
https://github.com/vilien/justreq-demo/releases/download/v0.1.1/justreq-demo-v0.1.1.zip

步驟1 - 安裝

首先下載安裝Node.js,然后運(yùn)行以下命令安裝justreq命令行工具

npm install -g justreq-cli

進(jìn)入自己項(xiàng)目目錄運(yùn)行以下命令安裝justreq主程序(當(dāng)然也可以專(zhuān)門(mén)另設(shè)目錄安裝,看個(gè)人喜好)

npm install justreq

最后,安裝mock.js

npm install mockjs
步驟2 - 配置

運(yùn)行以下命令初始化justreq

justreq init

除了第一個(gè)問(wèn)號(hào)The remote"s hostname of you wanna proxy?必須填入接口服務(wù)器主機(jī)名(如:192.168.50.50),其它問(wèn)號(hào)一路回車(chē)使用默認(rèn)即可。

初始化完成后,將在當(dāng)前目錄生成“.justreq”文件。現(xiàn)在打開(kāi)它,并在rules里添加以下一條規(guī)則:

{
  ...
  "rules": [
    {
      "href": "getUsersList.do",
      "subs": "getUsersList.jrs"
    }
  ]
}

稍微解釋一下,這一條規(guī)則是告訴justreq:當(dāng)請(qǐng)求地址為getUsersList.do的時(shí)候,轉(zhuǎn)發(fā)至getUsersList.jrs。其它未在規(guī)則中的請(qǐng)求,justreq將直接代理并緩存下來(lái),而不進(jìn)行轉(zhuǎn)發(fā)。
而我們的getUsersList.jrs腳本,即是用來(lái)mock接口的。

步驟3 - 編寫(xiě)mock腳本

在當(dāng)前目錄找到.jr目錄,在里面創(chuàng)建并打開(kāi)getUsersList.jrs(注意,.jr前面有個(gè)“.”)。編寫(xiě)以下代碼:

// .jr/getUsersList.jrs
const Mock = require("mockjs");

let data = Mock.mock({
  // 屬性 list 的值是一個(gè)數(shù)組,其中含有 6 到 20 個(gè)元素
  "list|6-20": [{
      // 屬性 id 是一個(gè)自增數(shù),起始值為 80001,每次增 6
      "id|+6": 80001,
      "name": "@name"
  }]
});

end(data);

至此,我們的第一個(gè)mock腳本就完成了。該腳本將會(huì)輸出一個(gè)列表list,這個(gè)list隨機(jī)產(chǎn)生6到20條用戶(hù)記錄。每條記錄包含id和name兩個(gè)屬性,并且name也是隨機(jī)自動(dòng)生成的。是不是好神奇?

更多的mock.js用法可參看官方示例

至此,我們已經(jīng)完成了所有的工作,下面一起來(lái)體驗(yàn)一下吧。

Mock初體驗(yàn)

首先,我們?cè)诋?dāng)前目錄運(yùn)行以下命令啟動(dòng)justreq:

justreq start

接著,我們寫(xiě)一個(gè)html文件來(lái)測(cè)試下mock效果


  
  

    保存為mock-demo.html,并雙擊打開(kāi),然后點(diǎn)擊“Reload User List”按鈕,將看到如下圖的結(jié)果。

    可多點(diǎn)幾次查看效果^_^

    最后的絮叨

    對(duì)于大多數(shù)的前端開(kāi)發(fā)情況,以上這些已經(jīng)足夠應(yīng)付了。但也許你還會(huì)需要定制更高級(jí)、仿真度更高的模擬接口,又或許你僅僅只需要調(diào)用一些固定格式的文件等等等等。這些需求,justreq都有考慮到。你也可以把justreq共享到局域網(wǎng),讓其它前端小伙伴跟你一道共用一套mock腳本。甚至用justreq來(lái)做一些簡(jiǎn)單的站點(diǎn)服務(wù),也是可以的。

    更多高級(jí)玩法可查看justreq文檔

    文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/81884.html

    相關(guān)文章

    • 基于webpack的前后端分離開(kāi)發(fā)環(huán)境實(shí)戰(zhàn)

      摘要:背景隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化,我們?cè)陂_(kāi)發(fā)一個(gè)標(biāo)準(zhǔn)應(yīng)用的早已開(kāi)始告別單干模式,為了提升開(kāi)發(fā)效率,前后端分離的需求越來(lái)越被重視,前端負(fù)責(zé)展現(xiàn)交互邏輯,后端負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)接口,基本上也成為了我們?nèi)粘m?xiàng)目分工中的標(biāo)配,但是前后端分離 背景 隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化,我們?cè)陂_(kāi)發(fā)一個(gè)標(biāo)準(zhǔn)web應(yīng)用的早已開(kāi)始告別單干模式,為了提升開(kāi)發(fā)效率,前后端分離的需求越來(lái)越被重...

      soasme 評(píng)論0 收藏0
    • 從零開(kāi)始打造 Mock 平臺(tái) - 核心篇

      摘要:前言最近一直在搗鼓畢設(shè),準(zhǔn)備做的是一個(gè)基于前后端開(kāi)發(fā)的平臺(tái),前期花了很多時(shí)間完成了功能模塊的交互。核心代碼就是這么一句。經(jīng)過(guò)各種猜想和測(cè)試,發(fā)現(xiàn)是模擬有問(wèn)題。其實(shí)用的最終核心思路還是一樣的。 前言 最近一直在搗鼓畢設(shè),準(zhǔn)備做的是一個(gè)基于前后端開(kāi)發(fā)的Mock平臺(tái),前期花了很多時(shí)間完成了功能模塊的交互?,F(xiàn)在進(jìn)度推到如何設(shè)計(jì)核心功能,也就是Mock數(shù)據(jù)的解析。 根據(jù)之前的需求設(shè)定加上一些思考...

      he_xd 評(píng)論0 收藏0
    • 從零開(kāi)始打造 Mock 平臺(tái) - 核心篇

      摘要:前言最近一直在搗鼓畢設(shè),準(zhǔn)備做的是一個(gè)基于前后端開(kāi)發(fā)的平臺(tái),前期花了很多時(shí)間完成了功能模塊的交互。核心代碼就是這么一句。經(jīng)過(guò)各種猜想和測(cè)試,發(fā)現(xiàn)是模擬有問(wèn)題。其實(shí)用的最終核心思路還是一樣的。 前言 最近一直在搗鼓畢設(shè),準(zhǔn)備做的是一個(gè)基于前后端開(kāi)發(fā)的Mock平臺(tái),前期花了很多時(shí)間完成了功能模塊的交互。現(xiàn)在進(jìn)度推到如何設(shè)計(jì)核心功能,也就是Mock數(shù)據(jù)的解析。 根據(jù)之前的需求設(shè)定加上一些思考...

      kidsamong 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <