Linux系列之安装Swagger UI教程

ゝ一世哀愁。 2021-09-12 05:40 619阅读 0赞

### 目录 ###

### 文章目录 ###

*   *   *  目录
     *  前言
     *  服务器环境安装
     *  Swagger UI安装部署
     *  Swagger Editor使用

## 前言 ##

在一些接口项目中，API的使用很频繁，所以一款API在线文档生成和测试工具非常有必要。而Swagger UI就是这么一款很实用的在线工具  
本博客介绍如何在公司或者自己的电脑上按照Swagger UI，注意因为公司的测试服务器是Linux系统的，所以本博客也只介绍基于Linux系统的Swagger环境搭建过程

## 服务器环境安装 ##

\#\#\#NodeJS下载部署\#\#\#  
首先需要下载NodeJS，到nodejs官网http://nodejs.org/dist/v0.10.26，下载node-v0.10.26-linux-x64.tar.gz，因为这个是已经编译好的，所以我们先使用软件将文件上传到Linux服务器，可以使用WinSCP  
然后用Linux的cd命令进入到你nodejs压缩文件的位置  
解压命令如下：

tar xvf node-v0.10.26-linux-x64.tar.gz

然后进入文件

cd node-v0.10.26-linux-x64/bin

执行

./node

设置node全局

ln -s /root/Swagger/node-v0.10.26-linux-x64/bin/node /usr/local/bin/node

设置npm全局

ln -s /root/Swagger/node-v0.10.26-linux-x64/bin/npm /usr/local/bin/npm

检测nodejs和npm是否安装成功

node -v
    npm -v

可以看到版本号，什么安装成功  
\#\#\#express下载部署\#\#\#\#  
安装好NodeJS和NPM之后，我们就可以安装express了

npm install express --save

以下几个重要的模块是需要与 express 框架一起安装的：  
body-parser - node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。  
cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。  
multer - node.js 中间件，用于处理 enctype=“multipart/form-data”（设置表单的MIME编码）的表单数据。

npm install body-parser --save
    npm install cookie-parser --save
    npm install multer --save

检测是否安装成功

npm list express

\#\#\#NodeJS开机启动\#\#\#\#  
然后设置NodeJS开机启动  
安装forever

npm install forever -g

设置

forever start test.js
    forever stop test.js
    forever restart test.js

## Swagger UI安装部署 ##

github上clone：https://github.com/swagger-api/swagger-ui  
如果有下载Git，就是用git下载，获取访问github，直接下载

之后可以根据公司需要，在Linux上mkdir，我是先在root路径，创建一个node\_app文件

mkdir node_app

进入node\_app

cd node_app

环境配置

npm init

下面的提示可以根据自己需要填写

name: (node_app) node_app
    version: (1.0.0)
    description:
    entry point: (index.js)
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)

VI编辑器使用：

vim index.js

加入代码

var express = require('express');
    var app = express();
     
    app.get('/', function (req, res) {
       res.send('Hello World');
    })
     
    var server = app.listen(3000, function () {
     
      var host = server.address().address
      var port = server.address().port
     
      console.log("应用实例，访问地址为 http://%s:%s", host, port)
     
    })

启用服务器

node index.js

访问，输入http://公司服务器IP:3000  
可以看到Helloworld，当然我们是要部署Swagger  
在node\_app下面创建一个public文件夹

mkdir public
    cd public

然后将下载到的swagger ui里的dist文件夹里的文件复制到public文件夹里

修改index.js

var express = require('express');
    var app = express();
     
    app.use('/swagger',express.static('public'));
     
    app.get('/', function (req, res) {
       res.send('Hello World');
    })
     
    var server = app.listen(3000, function () {
     
      var host = server.address().address
      var port = server.address().port
     
      console.log("swagger start", host, port)
     
    })

然后输入http://ip:3000/swapper，是可以看到类似page  
![这里写图片描述][format_png]

## Swagger Editor使用 ##

Swagger Editor是Swagger UI的在线编辑器，我们可以自己搭建一个，也可以使用官方的，下面给出官方的URL:http://editor.swagger.io/\#/

github上Clone：https://github.com/swagger-api/swagger-editor  
之后将swagger editor文件放在公司Linux服务器上

\#\#\#Http server安装\#\#\#

npm install -g http-server

启动该项目http-server swagger-editor，默认为8080端口  
设置port并启动swagger editor

http-server –p 2017 swagger-editor

输入http://ip:2017/\#/可以访问到自己搭建的Swagger Editor编辑器

参考教程  
http://www.linuxidc.com/Linux/2014-07/104489.htm  
http://www.linuxidc.com/Linux/2014-06/103372.htm  
http://blog.csdn.net/ron03129596/article/details/53559803  
http://www.open-open.com/lib/view/open1453452052745.html

[format_png]: /images/20210813/4e04d109db3f44b697c16fa38a2f3664.png