【Swagger】node.js+Swagger-Editer+Swagger-ui实现Swagger环境的搭建

一、前言

Swagger是一款强大的API文档编写工具，关于Swagger的使用主要有两种方式：

• 代码中使用引入相关的依赖或者jar包，然后在开发过程中使用即可，关于这种方式可以参考我的另一篇博客【Swagger】Springboot中集成Swagger2.0
• 借助于Swagger-Editer工具来进行在线的编辑

二、安装、配置Swagger-Editer环境

（1）安装node和npm，现在node.js安装以后node和npm都会直接一并安装；下载地址：node.js下载 ；下载以后直接安装即可，与一般的软件安装没什么差别。
（2）测试安装的node和npm，在cmd中输入以下 node -v 和 npm -v ，如果看到下面的内容说明安装成功。

（3）下载Swagger-Editer，Swagger-Editer下载地址Swagger-Editer下载，或者可以在官网进行选择下载，下载后解压文件。

(4) 安装http-server ，执行以下命令进行http-server的安装，‘npm install -g http-server’ ，其中 -g 表示全局安装。
(5) 在Swagger-Editer所在的文件夹下使用http-server启动Swagger-Editer，可以使用默认端口，也可以自定义端口。

http-server -p 8090  # 自定义端口 8090
http-server          # 使用默认端口8080

(6)访问Swagger-Editer，在浏览器中输入http://localhost:8090 ，如果出现以下画面说明搭建成功。

接下来就可以在线对API进行设计了，编辑过程中的代码格式可以选择yaml或者json，一般选用yaml吧，也不复杂。

三、搭建Swagger-UI环境

Swagger-Editer环境搭建完后，我们就可以进行相应的编辑了，但是编辑后的API文档需要使用Swagger-UI来进行渲染，接下来就介绍一下Swagger-UI环境的搭建。
（1）下载Swagger-UI项目，下载地址：Swagger-UI下载 ，下载完以后解压文件。
（2）可以在本地磁盘上新建一个文件夹，我这里命名为swagger，然后在该文件夹中进行初始化node的操作，如下大括号中的信息随便配置即可：

（3）将下载的swagger-ui中的dist文件夹拷贝到swagger下。
（4）安装express，如果出错可以去nodejs安装目录进行安装

（5）在swagger中创建index.js文件，并填上如下内容：

var express = require('express');
var app = express();
app.use('/root', express.static('dist'));
app.get('/', function (req, res) {
  res.send('Hello World!');
});
 
 // 设置端口为3000
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

（5）然后启动，并进行运行，执行如下

（6）在浏览器中访问http://localhost:3000/index.html 即可。
（7）在Swagger-UI中配置自己的文档，可以在Swagger-Editer中将编辑好的API文档生成json文件，然后将该json文件放到上述的Swagger-UI的dist文件夹中，然后打开index.html文件，修改路径即可。


（8）重新启动node服务即可，看到咱们配置的文档内容。