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

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

公众号：大师兄2016

yApi

官方文档地址

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

yApi的特点:

• 免费开源

• 可视化本地部署和管理

• 数据mock

• 自动化接口测试

• 权限管理

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

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

数据mock

参考地址:

http://mockjs.com/

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

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

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

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

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

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

部署流程

下载mongodb

参考地址:

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

启动mongodb

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

可视化部署

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

 

确认账户

部署细节

 

部署成功

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

启动服务

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

登录后台

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

编辑API

按官方文档操作即可

内网穿透

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

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

END.