写在前面：对于前后端分离的项目，前端展示需要调用后台提供的数据，后台将数据封装成接口服务提供给前端。前后端分离的妙处不言而喻，使得前后端开发人员更加专注自己的方向。于是前后端开发人员需要商定好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软件打开安装文件）下图给出操作截图：

文件夹打开dos窗口

3、 此处建议开发者使用VS Code打开安装文件，此后给出在VS Code中的操作命令

4、 在VS Code软件中打开新终端，命令格式:npm install （如果此安装文件已经安装好了，忽略该步骤），如果npm命令不稳定，可以安装淘宝cnpm镜像

（安装命令：npm install cnpm -g --registry=）。

5、 安装好依赖之后，需要安装一个轻量http全局服务器。

安装命令：npm(cnpm) install http-server。（如果电脑中有服务器可以忽略该步骤）

6、 服务器安装成功之后，需要退回到安装文件的根目录，然后输入命令：

http-server swagger-editor-master

操作步骤以及结果如下图所示：

服务器启动成功

7、 服务器启动成功之后，就可以在浏览器上输入访问地址，也可以在上图中任意点击进入浏览器看到页面了。下图给出了swagger-editor的编辑页面。

swagger-editor

结尾：swagger-editor的编辑页面网上的资料其实很少，笔者在编写时也是一项一项进行研究才勉强写成了文档，不过大部分条目都是正确的，以后还会将这个编写说明整理成文档发出来，有错误的地方还需大家批评指正，相互学习~