Centos6安装swagger-ui和swagger-edit

前言

在一些接口项目开发中,API文档一直是开发人员头疼的事情,如果没有一个好的接口文档,前后端的接口开发工作无法进行,swagger是一款不错的Api编写工具,随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染、前后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远。

前端和后端的唯一联系,变成了API接口;API文档变成了前后端开发人员联系的纽带,变得越来越重要,swagger就是一款让你更好的书写API文档的框架。

没有API文档工具之前,大家都是手写API文档的,在什么地方书写的都有,有在confluence上写的,有在对应的项目目录下readme.md上写的,每个公司都有每个公司的玩法,无所谓好坏。

书写API文档的工具有很多,但是能称之为“框架”的,估计也只有swagger了。

swagger-ui

  • 这玩意儿从名字就能看出来,用来显示API文档的。

swagger-editor

  • 就是一个在线编辑文档说明文件(swagger.json或swagger.yaml文件)的工具,以方便生态中的其他小工具(swagger-ui)等使用。
左边编辑,右边立马就显示出编辑内容来。

PBpOKS.png

一、安装nodejs

1、官网下载nodejs
1
2
Nodejs官网:[https://nodejs.org](https://nodejs.org)
Nodejs中文网:[http://nodejs.cn/](http://nodejs.cn/)
2、安装
1
2
3
4
5
6
yum -y install xz
tar -xvf node-v10.6.0-linux-x64.tar.xz
mv node-v10.6.0-linux-x64 /usr/local/nodejs
ln -s /usr/local/nodejs/bin/node /usr/local/bin/
ln -s /usr/local/nodejs/bin/node /usr/bin/
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/
3、验证
1
2
3
4
[root@test6 ~]# npm -v
6.1.0
[root@test6 ~]# node -v
v10.6.0

二、下载swagger-ui和swagger-edit

1
2
https://github.com/swagger-api/swagger-ui/archive/v3.17.4.tar.gz
https://github.com/swagger-api/swagger-editor/archive/v3.6.3.tar.gz

三、安装swagger-edit

1
2
3
4
tar -zxvf swagger-editor-3.6.3.tar.gz
mv swagger-editor-3.6.3 /usr/local/swagger-editor
npm install -g http-server
ln -s /usr/local/nodejs/bin/http-server /usr/local/bin/

四、启动

1
2
cd /usr/local/
http-server -p 8080 swagger-editor/

PBpXDg.png

五、浏览器访问8080端口

PBpzUs.png

注意:swagger-editor主要是编写api接口文档,但需要配合swagger-ui来查看

六、安装swagger-ui

1
2
tar -zxvf swagger-ui-3.17.4.tar.gz
mv swagger-ui-3.17.4 /usr/local/swagger-ui

七、项目配置

1
2
3
4
cd /usr/local/swagger-ui/
mkdir node_app
cd node_app/
npm init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (node_app)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /usr/local/swagger-ui/node_app/package.json:

{
"name": "node_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}


Is this OK? (yes) yes

八、安装express

1
2
3
4
cp -r /usr/local/swagger-ui/dist/ /usr/local/swagger-ui/node_app/
cd /usr/local/swagger-ui/node_app/
npm install express
vim index.js

1
2
3
4
5
6
7
8
9
10
var express = require('express');
var app = express();
app.use('/', express.static('dist')); ##此处有url路径,如果写/test,则浏览器访问时,也需要port:/test/
app.get('/', function (req, res) {
res.send('Hello World!');
});

app.listen(3000, function () { ##访问端口为3000,如果冲突,可自行更改
console.log('Example app listening on port 3000!');
});

九、启动

1
node index.js

PBpbgf.png

十、浏览器访问3000端口

PBpjbQ.png

十一、自定义

  • 通过以上几步,已经完成了index.html通过http的访问,且样式也是swagger的样式了。
    但是,我们还有最后一步,就是把我们在swagger-editor中编写好的API文档,放到UI中去预览,目前我们看到的3000端口的UI预览是swagger的,现在需要换成我们在editor中写的

1. 先把我们写的api文档下载下来

PBpxEj.png

2. 把下载下来的json文件上传到node_app下的dist目录
3. 修改该目录下的index.html文件
1
2
cd /usr/local/swagger-ui/node_app/dist
vim index.html

1
2
3
4
5
6
7
8
9
10
……
// Build a system
const ui = SwaggerUIBundle({
url: "/swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
……
4. 刷新一下3000端口的网页

PBpqv8.png

十二、开机自启

  • 把两个服务的启动和关闭都写在一块
1
vim /etc/init.d/swagger

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#!/bin/bash
#chkconfig:35 99 20
#Start up the swagger-editor server daemon

#source function library


. /etc/rc.d/init.d/functions
CMD=/usr/local/bin/http-server
CMD2=/usr/local/bin/node
PORT=8080
INITFILE=/usr/local/swagger-editor/
INITFILE2=index.js
WORD=/usr/local/swagger-ui/node_app/

start()
{
$CMD -p $PORT $INITFILE >>/dev/null &
cd $WORD
$CMD2 $INITFILE2 >>/dev/null &
echo "swagger ui and editor is running background..."
}

stop()
{
pkill node
echo "swagger ui and editor is stopped."
}

case "$1" in
start)
start
;;
stop)
stop
;;
*)
echo $"Usage: $0 {start|stop}"
esac


chmod +x /etc/init.d/swagger
chkconfig --add swagger
chkconfig swagger on
service swagger start
ps aux | grep node

PB9BM8.png

  • 到此,全部部署完成,reboot检查服务是否开机自启即可
博主QQ:1012405802
技术交流QQ群:830339411
版权声明:网站内容有原创和转载,如有侵权,请联系删除,谢谢!!
感谢打赏,93bok因你们而精彩!!(支付宝支持花呗)
0%