当前位置：网站首页>Swagger UI教程 API 文档神器

Swagger UI教程 API 文档神器

2022-07-06 12:45:00 【51CTO】

前言

在一些接口项目中，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
      
1.

然后进入文件

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

执行

       
       ./node
      
1.

设置node全局

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

设置npm全局

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

检测nodejs和npm是否安装成功

       
       node -v
       
npm -v
      
1.
2.

可以看到版本号，什么安装成功

express下载部署####

安装好NodeJS和NPM之后，我们就可以安装express了

       
       npm install express --save
      
1.

以下几个重要的模块是需要与 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
      
1.
2.
3.

检测是否安装成功

       
       npm list express
      
1.

NodeJS开机启动####

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

       
       npm install forever -g
      
1.

设置

       
       forever start test.js
       
forever stop test.js
       
forever restart test.js
      
1.
2.
3.

Swagger UI安装部署##

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

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

       
       mkdir node_app
      
1.

进入node_app

       
       cd node_app
      
1.

环境配置

       
       npm init
      
1.

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

       
       name: (node_app) node_app
       
version: (1.0.0)
       
description:
       
entry point: (index.js)
       
test command:
       
git repository:
       
keywords:
       
author:
       
license: (ISC)
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

VI编辑器使用：

       
       vim index.js
      
1.

加入代码

       
       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)
       
})
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

启用服务器

       
       node index.js
      
1.

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

       
       mkdir public
       
cd public
      
1.
2.

然后将下载到的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)
       
})
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

然后输入 http://ip:3000/swapper，是可以看到类似page

Swagger UI教程 API 文档神器_github

这里写图片描述

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
      
1.

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

       
       http-server –p 2017 swagger-editor
      
1.

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

参考教程
http://www.linuxidc.com/Linux/2014-07/104489.htm

http://www.linuxidc.com/Linux/2014-06/103372.htm

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://blog.51cto.com/u_15704340/5447148