swagger-ui生成api文档并进行测试

一、Swagger UI简介

Swagger UI是一个API在线文档生成和测试的利器,目前发现最好用的。它的源码也开源在GitHub上,地址:GitHub: https://github.com/swagger-api/swagger-ui

二、Swagger UI环境搭建

下载Swagger UI(也可以直接下载 zip 文件)

git clone https://github.com/swagger-api/swagger-ui.git

解压好的文件

 

主要用到的是dist目录,可以进入dist目录打开index.html看下界面,可以发现基本的模式是有了,但都是静态的文件。下面我们要进行nodejs配置,使其可以进行端口访问,直接使用node命令访问index.js没有反应,英语稍微好点的同学可以看下官网的配置步骤,接下来手动配置ui环境。

下面进行项目的配置

新建node_app文件夹

mkdir node_app

进入node_app目录,初始化node

npm init

根据提示输入好信息后会自动创建package.json文件,如下图:

 

初始化命令npm init,出现如下信息,填的地方可以随便写,也可以不写

将下载的swagger-ui中的dist文件夹拷贝到node_app

安装express

install express

创建index.js,并将如下代码写入该js

var express = require('express');

var app = express();

app.use('/root', express.static('dist'));

app.get('/', function (req, res) {

  res.send('Hello World!');

});

 

app.listen(3000, function () {

  console.log('Example app listening on port 3000!');

});

然后启动,并运行查看,如上代码为3000端口,如有冲突请自行修改

 

node index.js

 

 

访问

 

你可能会疑惑:这个Uber API怎么来的呢?下面我再给您解释下这个Uber API的来路,编辑index.html

文件你会发现有一段url引用了swagger官网的jsonApi文件

 

这里我们将这个json文件下载下来放到和index.html平级的目录,这里我直接访问我已经安装好的swagger-edtior进行文件的下载

 

然后存放到如下目录,并修改index.html

 

把index.html里的url换成swagger.json(注意这回写的是相对路径啦)

三、如何在tomcat里运行?

node_app文件夹(已共享到QQ群文件:301343109)整个拷到tomcatwebapp目录下,然后启动tomcat,访问http://localhost:8070/node_app/dist/index.html,注意8070是我的tomcat的端口,因为我的8080端口已经运行了Swagger Editor

 

可以看到和在express里访问的一样。

 

 

转载于:https://www.cnblogs.com/shamo89/p/7681085.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Swagger UI是一款RESTFUL接口的文档在线自动生成 功能测试功能软件。       现在多数的项目开发中,网站和移动端都需要进行数据交互和对接,这少不了使用REST编写API接口这种场景。例如有些团队,移动端交由了另一团队开发,不同开发小组之间就需要以规范和文档作为标准和协作基础。良好的文档可以让开发事半功倍,而作为又懒又要效率又能交代的码农,当然最希望一 切自动化,或用小聪明来找到最适合的工具。       Swagger-UI简单而一目了然。它能够纯碎的基于html javascript实现,只要稍微整合一下便能成为方便的API在线测试工具。       项目的设计架构中一直提倡使用TDD(测试驱动)原则来开发,swagger-ui在这方面更是能提供很大帮助。 Swagger-UI更倾向于在线测试接口和数据,但其核心是一个javascript插件,只要稍作修改,便能按需求定制出不同格式的说明文档,在github上更是基于它集成到各种语言环境,分支众多。        其官方提供了一个离线版本,它的使用方法十分简单:直接在js格式的资源文件中录入REST APIjson信息,便能容易地生成不同模块下的API列表,每个API接口描述和参数、请求方法都能在每个json数组中定制。下面是目前项目中使用到的部分预览图:  Swagger-UI 的官方地址: http://swagger.wordnik.com Github上的项目地址: https://github.com/wordnik/swagger-ui 官方提供的demo地址 http://petstore.swagger.wordnik.com/ 标签:api
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值