摘要:而則是主要用于接口緩存的一款。初始化完成后,將在當(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
首先下載安裝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接口的。
在當(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
摘要:背景隨著互聯(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)越被重...
摘要:前言最近一直在搗鼓畢設(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è)定加上一些思考...
摘要:前言最近一直在搗鼓畢設(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è)定加上一些思考...
閱讀 2190·2021-09-22 10:56
閱讀 1492·2021-09-07 10:11
閱讀 1813·2019-08-30 15:54
閱讀 2299·2019-08-30 15:44
閱讀 2318·2019-08-29 12:40
閱讀 3040·2019-08-28 18:25
閱讀 1750·2019-08-26 10:24
閱讀 3195·2019-08-23 18:39