写在前面:对于前后端分离的项目,前端展示需要调用后台提供的数据,后台将数据封装成接口服务提供给前端。前后端分离的妙处不言而喻,使得前后端开发人员更加专注自己的方向。于是前后端开发人员需要商定好api(应用程序接口)数据接口的表现形式,定义好数据接口之后需要向前端开发人员提供api文档,这样前端人员可以根据api文档调用数据,然后通过前端手段使得数据可视化。因此,如何使得api文档更规范是后端人员一直努力的目标,swagger提供了更好的解决方案。下面介绍swagger-editor以及swagger-ui两种api工具。
l swagger-editor的下载与使用方案
1、 由于下载swagger工具可能会不稳定,下载方式我会留在评论区。
2、 下载成功之后,文件夹中包含两个安装文件压缩包,分别为swagger-editor-3.2.0.zip和swagger-editor-master.zip,笔者亲测swagger-editor-3.2.0.zip解压缩之后安装依赖并且启动之后会出现页面访问不到的问题,在此写出来避免各位同仁们踩坑,如果有兴趣探索的朋友可以按照下面的步骤启动第一个压缩文件哦。在此建议大家解压第二个压缩包哦!笔者亲测可以正常使用哦~
swagger-editor压缩包
3、解压之后得到一个安装文件,我们可以利用dos窗口或者使用VS Code软件打开这个安装文件。
进入dos窗口的方法:进入swagger-editor-master文件夹,然后按住shift键,右键鼠标从菜单栏里选择在此处打开命令窗口即可进入dos。(此处建议使用VS Code软件打开安装文件)下图给出操作截图:
文件夹进入命令窗口
3、 此处建议开发者使用VS Code打开安装文件,此后给出在VS Code中的操作命令
4、 在VS Code软件中打开新终端,命令格式:npm install (如果此安装文件已经安装好了,忽略该步骤),如果npm命令不稳定,可以安装淘宝cnpm镜像
(安装命令:npm install cnpm -g --registry=https://registry.npm.taobao.org)。
5、 安装好依赖之后,需要安装一个轻量http全局服务器。
安装命令:npm(cnpm) install http-server。(如果电脑中有服务器可以忽略该步骤)
6、 服务器安装成功之后,需要退回到安装文件的根目录,然后输入命令:
http-server swagger-editor-master
操作步骤以及结果如下图所示:
服务器启动成功
7、 服务器启动成功之后,就可以在浏览器上输入访问地址,也可以在上图中任意点击进入浏览器看到页面了。下图给出了swagger-editor的编辑页面。
swagger-editor
结尾:swagger-editor的编辑页面网上的资料其实很少,笔者在编写时也是一项一项进行研究才勉强写成了文档,不过大部分条目都是正确的,以后还会将这个编写说明整理成文档发出来,有错误的地方还需大家批评指正,相互学习~
领取专属 10元无门槛券
私享最新 技术干货