前端mock数据使用yApi构建本地接口文档

原文链接:https://dsx2016.com/?p=1114

公众号:大师兄2016

yApi

前端mock数据使用yApi构建本地接口文档_第1张图片

官方文档地址

https://hellosean1025.github.io/yapi/devops/index.html

yApi的特点:

  • 免费开源

  • 可视化本地部署和管理

  • 数据mock

  • 自动化接口测试

  • 权限管理

前端在后端开发完API前往往,需要mock数据,来校对样式和交互.

但是后端的开发时间节点和数据内容往往不可控,无法有效并行开发.

数据mock

参考地址:

http://mockjs.com/

前端mock数据使用yApi构建本地接口文档_第2张图片

一种简单的数据mock,是在代码里写假数据,和业务代码放在一些.

需要的时候调用,不需要的时候注释,方便,可控,但是无法覆盖真实的api场景,如慢网和报错等.

如果上线前忘了还原和注释掉,就是一场未知级别的灾难.

其他常见的方案是mock.js第三方库,在api层拦截.

在项目构建一份数据文件,把api返回的数据给替换按指定内容返回.

依然需要添加一些业务代码,增大了项目体积,稍有提升,但是仍然不太符合实际场景,仍然是侵入式mock.

部署流程

下载mongodb

参考地址:

https://www.mongodb.com/download-center/community

前端mock数据使用yApi构建本地接口文档_第3张图片

启动mongodb

mongodb的安装目录下,点击mongod.exe,启动

前端mock数据使用yApi构建本地接口文档_第4张图片

可视化部署

npm install -g yapi-cli --registry https://registry.npm.taobao.org
yapi server

 

前端mock数据使用yApi构建本地接口文档_第5张图片

确认账户

前端mock数据使用yApi构建本地接口文档_第6张图片

部署细节

 

部署成功

成功之后会提示如何启动本地服务和当前的账户密码

前端mock数据使用yApi构建本地接口文档_第7张图片

启动服务

按照部署成功后的提示,启动服务

前端mock数据使用yApi构建本地接口文档_第8张图片

登录后台

打开启动的服务地址,输入账户登录

前端mock数据使用yApi构建本地接口文档_第9张图片

编辑API

按官方文档操作即可

前端mock数据使用yApi构建本地接口文档_第10张图片

内网穿透

要想开发微信公众号和其他需要域名的场景,需要内网穿透到代理域名,并且支持https

natapp官网:https://natapp.cn/

前端mock数据使用yApi构建本地接口文档_第11张图片

END.

你可能感兴趣的:(mock,yapi,javascript,node.js,es6)