YApi 可视化接口管理平台 内网部署小计
# 2022-09-22更新 yapi应该是不维护了
偶然回想起这个yapi,然后去github里面看看他的动态,却发现最后一次提交就来是2021年10月,感觉是作者没精力维护了,应该是放弃了,issue也是一千多没解决,感觉凉凉了,还爆出了安全问题,哈哈,果然为爱发点不长远
# 希望你可以活过来把😭😭😭
# 替换方案
我还特意发了个邮件去问了大佬,有幸大佬也回复了我,并推荐了新的替换方案:
- 推荐用runapi 和showdoc组合使用,可以替代yapi runapi/30291 (opens new window)
- 虽然yapi不维护了,但是还是感谢他为我们提供了一个很好用的工具,祝他越来越好~
# 前言
以前还是根据后台的swagger手写mock数据,被自己蠢哭~,最近有点时间了, 就研究了下能不能动态的去弄这些mock数据,之后就找到了yapi,感觉大佬就是牛逼哈
官网说有docker部署的方式,我试了, 一直不行,所以就用了比较蠢的方法,手动安装各种环境 😃
差不多就这样了,日常bb结束
感谢去哪儿前端团队的开源,大佬
# 大纲
内网部署
yapi 和swagger 的结合使用
内网部署
Windows 手动安装 MongoDB
- 环境要求
- 环境要求
安装步骤
打开安装包开搞😃
选择安装位置
耐心等待,中途会要个权限,给他就是了
安装完毕
创建数据库和账户,创建一个新的数据库给yapi部署使用(其实可以不用做这一步,我在linux部署的时候就没搞,照样跑得起来 哈哈)
点开这个文件
查看所有的数据库
- show dbs
- show dbs
use [数据库名称] 有就直接切换,没有就给你创建一个
查看当前数据库
- db
删除某个数据库
use [要删除的数据库]
db.dropDatabase()
创建一个数据库管理员账户
- db.createUser({user: "admin",pwd: "123456",roles: [ { role: "userAdminAnyDatabase", db: "admin"}]})
数据库工具:
Linux环境搭建
环境准备
查看系统命令:cat /proc/version
我本机的版本:Linux version 2.6.32-696.el6.x86_64 (mockbuild@c1bm.rdu2.centos.org (opens new window)) (gcc version 4.4.7 20120313 (Red Hat 4.4.7-18) (GCC) ) #1 SMP Tue Mar 21 19:29:05 UTC 2017
操作系统:centos 7
nodejs>7.6
mongodb>2.6
git
安装nodejs
1. 获取资源(部署nodejs尽可能选择偶数版本,因为偶数版本官方有较长的维护时间,故这次选择8.x。)随便装, 我装的是10的版本
- curl -sL https://rpm.nodesource.com/setup_8.x (opens new window) | bash -
- 安装
- yum install -y nodejs
- 查看版本
- node -v
- 查看npm版本
- npm -v
安装mongodb
- 更新yum源,非必须但是更新一下无害
- yum -y update
- 添加mongodb源文件,在/etc/yum.repos.d 创建一个 mongodb-org.repo 文件
- touch /etc/yum.repos.d/mongodb-org.repo
- 编辑mongodb-org.repo文件
- vim /etc/yum.repos.d/mongodb-org.repo
- 添加文件内容
要这种形式的,幕布不支持Markdown 恶心哦
[mongodb-org]
name=MongoDB Repository
baseurl=http://mirrors.aliyun.com/mongodb/yum/redhat/7Server/mongodb-org/3.2/x86_64/ (opens new window)
gpgcheck=0
enabled=1
如果你也是在第四步卡了,无法继续安装,可以参考 (opens new window)
https://stackoverflow.com/questions/34725574/yum-install-mongodb-3-2-fails (opens new window) 我用了下图的方式 搞定
1. 更改源
[mongodb-org-3.6]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.6/x86_64/ (opens new window)
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.6.asc (opens new window)
2. 重新安装
- sudo yum install -y mongodb-org
Error starting mongod. /var/run/mongodb/mongod.pid exists解决方案. (opens new window)
- 安装mongodb
- yum install -y mongodb-org
- 启动mongodb
- service mongod start
- 设置开机启动
- chkconfig mongod on
- 查找mongod.conf文件
ps -ax | grep mongod
- 配置远程访问
主要是为了方便直接使用数据库工具连接数据库
vim/etc/mongod.conf
重启mongod
- service mongod restart
安装git
- 官方推荐,在内网部署的时候安装git,可以根据自己所需安装
- yum -y install git
- 官方推荐,在内网部署的时候安装git,可以根据自己所需安装
搭建YApi环境
- 准备环境搭建完成后,开始搭建YApi,安装命令
npm install -g yapi-cli --registry https://registry.npm.taobao.org (opens new window)
yapi server
实例截图:
- 执行 yapi server 启动可视化部署程序,浏览器打开提示窗口上的地址,非本地服务器,将0.0.0.0 (opens new window)替换指定的域名或IP,进入部署页面。例如:http://127.0.0.1:9090/ (opens new window)
- 执行 yapi server 启动可视化部署程序,浏览器打开提示窗口上的地址,非本地服务器,将0.0.0.0 (opens new window)替换指定的域名或IP,进入部署页面。例如:http://127.0.0.1:9090/ (opens new window)
看到这个提示说明已经部署成功了, 9090端口可以关闭了
提示说让我们切换到部署路径,执行相关命令~
执行相关命令,就可以用了
node vendors/server/app.js
终于出来了, 美滋滋~
yapi服务管理
利用pm2方便服务管理维护
npm install pm2 -g //安装pm2
cd {项目目录}
pm2 start "vendors/server/app.js" --name yapi //pm2管理yapi服务
pm2 info yapi //查看服务信息
pm2 stop yapi //停止服务
pm2 restart yapi //重启服务
yapi 升级管理
升级
升级项目版本是非常容易的,并且不会影响已有的项目数据,只会同步 vendors 目录下的源码文件
cd {项目目录}
yapi ls //查看版本号列表
yapi update //更新到最新版本
yapi update -v {Version} //更新到指定版本
yapi 和swagger 的结合使用
官网的说明,记得看看哈
创建一个项目项目
注册一个帐号
创建一个项目
swagger的设置
切换到swagger的同步设置
找到后台的地址: 输入上面,然后点保存,之后就耐心等待2分钟之后,yapi会自动同步
如果出现这种错误,不用理会,多点两下 他就会好了
成功触发yapi的同步任务
成功同步过来,如果同步的不理想, 就把swagger的同步设置改成全部覆盖就好了
集成到业务系统
设置请求上下文
找到上下文,配置mock数据, 把这个地址,放到反向代理的设置里面去,就会有数据了
这些值就都是yapi 帮我们mock的数据了,开心~~再也不用写mock数据了,以前自己好蠢 😃
接口页面相关说明
请求配置,自定义请求头和返回值
官方的说明
你可以在这里设置1.请求头 2.根据不同状态,返回不同的数据格式等
设置请求头
- context.requestHeader.ergouzi=66666
- context.requestHeader.ergouzi=66666
设置返回值
官网说明
实际使用:默认所有接口都是ok的,我们和后台约定返回的数据格式是 {data:xxx,resultCode:xxx} 所有的数据都放在data 里面,resultCode 为1 表示请求成功
mockJson.resultCode=1
设置生效, 之前的随机数变成了1 搞定收摊
接口 --- 编辑页面介绍
例子1:我们发现我们的年龄字段默认随机是一个负数,其实和真实数据相差还是很大的,我们真实的世界里面能活到100岁就很牛逼了,看看怎么设置
可以直接点预览看效果,如下想再业务系统里面看效果,记得点保存按钮,不然不生效!
例子2: auditStatus 表示审核状态,审核状态会有很多个, 我们想看多个审核状态怎么搞呢
设置
效果
他会在我们刚才的枚举里面,随机取一个
接口 --- 运行页面介绍
cross-request 插件
添加环境
添加你需要的环境并保存,之后就随便调用了, cross-request 会帮你处理跨域,作者说只有https的在network才看不到请求, 我http的也看不到,不知道什么鬼
结束语
本文如有错误,欢迎指正,非常感谢
觉得有用的老铁,点个双击,小红心走一波
欢迎灌水,来呀,互相伤害哈 o(∩_∩)o 哈哈
参考资料
- 01
- 若依3.8.5版本vue-cli升级到 5.0.8碰到的一些问题10-08
- 02
- vuepress添加sitemap05-17
- 03
- vscode Live Server 插件使用教程05-16