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开发,主要用于方便可视化的管理数据接口的数据模拟,接口文档管理。
下面简单说明一下相应功能:
添加/编辑接口(截图只展示部分功能):
如图所示,大致包含了以下功能:
基本信息:
匹配方式:分为全地址匹配和部分匹配
有些时候,你的请求地址的参数是动态的,比如分页【http:192.168.0.2/a?page=1】,这个时候的路径匹配就不能全路径匹配,而是只需要匹配【?】前部分
请求参数及请求参数说明:
添加了可视化的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信息传递给后端。
项目管理:
添加/修改项目
就目前的使用来看,已基本满足了我 前后端分离开发时的数据模拟需求,如果各种有好的建议或意义欢迎给我指问。