nodejs web版 mock-server 让你更好的管理你的模拟数据

mock-server:一个基于NODEJS的WEB版的数据模拟系统



部分功能及优化未在此文章中同步,最新功能以仓库为准:

https://github.com/flftfqwxf/mockserver


 demo

demo只作演示作用,并会定期清除数据

更新:

2017-7-16

修改项目ID为随机hash,并以此ID为接口路径的前缀,并删除原设置API前缀功能

优化代码,及提供POST,PUT,DELETE等method type的接口预览功能

添加功能(2017-5-4):

添加自动导入数据库

添加中英文切换


添加功能(2017-4-11):

支持跨域调用项目接口

添加header 代理白名单和黑名单

允许自定义项目接口前缀

优化交互体验及BUG

功能包含:

支持可视化编辑JSON接口数据及接口文档

支持GET、POST、PUT、DELETE等所有HTTP请求类型

支持指定返回状态码,默认200

支持延时返回数据

支持mockjs

支持模拟接口与真实接口切换,在切换到真实接口时,并能够自动接收POST,GET,COOKIE等在http header请求的参数

先放出系统地址:

https://github.com/flftfqwxf/mock-server

欢迎star,并提出改进意见


更新日志(2017-2-15):

优化交互及文档完善

添加返回状态码

添加延迟返回数据

优化部分验证



以下正文:

随着最近几年前端技术的发展,ReactJs,Angular,VueJS等框架的盛行,前后分离开发的系统越来越多,而前后端的分离,必然需要大量的AJAX接口来实现。而由于前后端开发经常是并行的,所以前端必须经常需要模拟AJAX数据接口,以方便在后端还未准备好接口时的开发及调试,故此就需要mock-server服务(数据模拟服务)。

刚开始,我准备找一些开源的工具来作为mock-server,而目前基于nodejs的mock-server也有不少,早期就尝试过 puer,imitator等开源系统,基本满足了个人开发的需求。

但随着其他开发人员的加入,特别是后端的同学加入,上面的系统便靠成了一个困扰。

第一:不方便共享和不够简便,这些系统都还是基于NODEJS的,新加入的同学都需要在自己本地安装一次相应的包和环境,比较麻烦,而且每个人的MOCK-SERVER都是独立的,不方便共享,有时需要后端开发同学先定义后接口结构,由于他们并没有安装,也不是很方便,后期接口有改变时,也不方便同步。

第二:接口切换不方便。以上工具,只能全局不使用mock-server与全局使用mock-server中切换,单个接口的切换,需要依赖其他配置,比如nginx为每个接口作配置。

第二:功能不健全,且不方便非前端人员使用,且以上工具只是简单的模拟数据,对接口的文档参数说明,接口分类管理等,也不够直观。

因此,自己就开始自己开发一个基于NODEJS的,WEB版 mock-server系统。

https://github.com/flftfqwxf/mock-server

此系统基于thinkjs+mysql5.7.14开发,主要用于方便可视化的管理数据接口的数据模拟,接口文档管理。

下面简单说明一下相应功能:


添加/编辑接口(截图只展示部分功能):


添加接口截图


如图所示,大致包含了以下功能:

基本信息:



2.0后允许设置项目接口前缀

匹配方式:分为全地址匹配和部分匹配

有些时候,你的请求地址的参数是动态的,比如分页【http:192.168.0.2/a?page=1】,这个时候的路径匹配就不能全路径匹配,而是只需要匹配【?】前部分

请求参数及请求参数说明:

JSON web编辑器

添加了可视化的JSON编辑器,方便查看,也可验证数据格式正确性

二次代理设置:

二次代理设置

在实际开发中,我们常常会遇到这种情况,在开发的前期,数据接口的数据是模拟的,但是开发到了中后期,部分真实的接口已经开发好,就需要以真实的数据来测试,在以前只能将整个mock-server服务切换到真实的接口服务上,但是这样存在一个问题,就是如果在项目中期,部分接口完成了,部分接口没完成,就比较麻烦,此功能就是指定某个接口去访问真实的接口的方法。

二次代理是指将本来代理到mock-server系统的接口,再次代理到其他的服务上

二次代理前缀:是指将此接口的域名指向到你想指向的地址

举例说明

开发中:

1)某个AJAX服务,需要模拟,通过NGINX或其他方法将 [http://127.0.0.1/api]下所有请求,全部指向到本系统,

并假定本系统启动后的地址为【http://127.0.0.1:8083】.

2)当访问[http://127.0.0.1/api/a.json]时,实际会代理到【http://127.0.0.1:8083/api/a.json】

3)当访问时,系统会在数据库查询到该接口,并返回模拟数据

某个接口的真实完成后:

同样是第三步,可以通过开启二次代理,将请求再次代理到真实的接口上,以此达到更灵活在模拟数据和真实数据切换目的

如:

原本被代理到【http://127.0.0.1:8083/api/a.json】返回的数据,

通过设置二次代理为【http://192.168.0.1:8083】,则会返回

【http://192.168.0.1:8083/api/a.json】

而为了更灵活的设置二次代理:

分别开发了,全站级二次代理、项目级二次代理、单个接口的二次代理

权重为全站级二次代理 <项目级二次代理 <单个接口的二次代理


注意:如果开启了二次代理,在返回接口的最后一个字段将为[proxyDataSource],值为你实际请求的接口完整地址,以方便实际使用中,知道自己是访问的模拟数据,还是真实数据

接口返回值及参数说明:

参数说明
返回数据

你可以通过点击从【从二次代理中获取数据,并填充,保存后生效】从你设置的二次代理中获取到真实数据,达到类似postman验证数据接口正确性的功能

开启mockjs:

同时,为了更好的模拟数据,整合了mockjs,mockjs官网

header头信息返回数据:


除了返回json外,有些时候还需要返回一些特定的header信息,如登录的token验证

如此一个模拟数据基本成型.

接口列表:

接品列表管理

提供搜索、复制、快速开启关闭二次代理功能,点击接口可以直接查看接口返回内容

其他的功能:


全局设置:

全局二次代理

全局二次代理前缀:

前面已讲过作用,此处是设置一个全局二次代理,当你在项目或添加接口时没有二次代理时,就会使用此二次代理(强烈建议设置,因为当你访问一个在本系统中根本没有定义的接口时,如果设置了此项,系统依然会将你访问的接口代理到此处设置的服务上,这对于一些老接口非常有用,不用在此系统上,将老接口在此系统上再定义一遍,当然从文档记录上讲,再定义一遍,作为接口的文档记录是可取的

header头信息设置:

当二次代理开启时,有些时候,我们需要将我们请求的header信息传递给二次代理的服务上,比如:用户登录后,需要将登录的COOKIE传递给后端以方便后端验证登录权限。

故需求一个功能来设置哪些header信息传递给后端,默认情况下,启用黑名单项,将除了host 和 accept-encoding的其他header信息传递给后端。

项目管理:


添加/修改项目



就目前的使用来看,已基本满足了我 前后端分离开发时的数据模拟需求,如果各种有好的建议或意义欢迎给我指问。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容