Swagger UI安装与使用教程

前言

查看这文章前,请先阅读Swagger Edit 安装和使用教程
继Swagger Edit上一篇文章写如何编辑导出接口文档。这篇文章就是负责教导大家如何用Swagger UI来查看和接口测试。Swagger UI是通过读取Swagger Edit的导出的YAML/JSON文件,来进行接口测试。下图就是Swagger UI的界面:

这里写图片描述

ps:Swgger UI的站点域名要和发送请求的域名一样。不然浏览器会报跨域错误。
CORS跨域这里附上解决跨域问题方法。

安装

1.下载并且安装node.js
2. npm install -g http-server
3. 下载项目https://github.com/swagger-api/swagger-ui 并且解压。
4. 进入swagger-ui文件夹。运行http-server命令。
5. 进入http://127.0.0.1:8080/dist/index.html就可以看到swagger页面了

使用

一.导入swagger.json文件

把之前Swagger Edit导出的swagger.json文件复制到dist文件夹里面,修改index.html的url路径,改成指向swagger.json。就可以读取json文件的内容了。

二.测试接口

  1. 选择接口点击“try it out”。
    这里写图片描述

  2. 修改“Example Value Model”里面参数,点击“Execute”发送请求。
    这里写图片描述

  3. 点击发送后会出现下面视图,不管发送成功/失败。你可以通过下面视图来查看请求数据。
    这里写图片描述

    字段用途
    Curl为发送的请求参数信息。
    Request URL就是发送的域名
    Code请求的状态码。
    Response body返回的参数。
    Response headers服务器返回header头。

结语

Swagger UI好处支持多种接口格式、测试方便、支持get/post/jsonp等多种发送方式,功能都很使用开发人员和测试都用得上。
且在开放中,使用swagger进行契约测试能有效地增加开发效率。前后端用swagger定好全部接口,前端人员按照接口发送和返回进行页面制作。后端通过swagger就能自行调试接口。测试人员用swagger进行接口测试,把ui测试和接口测试区分开来。这样整个前端,后端和测试流程都提升了开发效率。

  • 4
    点赞
  • 61
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Swagger是一个用于设计、构建和文档化RESTful Web服务的开源工具集。下面是一个简单的Swagger使用教程: 1. 安装Swagger:可以通过npm、pip等包管理工具安装Swagger相关的库和工具。例如,对于Node.js项目,可以使用以下命令安装swagger-jsdoc和swagger-ui-express: ```bash npm install swagger-jsdoc swagger-ui-express ``` 2. 编写Swagger注解:在你的API代码中,使用Swagger注解来描述API的信息、请求和响应参数等。以下是一个示例: ```javascript /** * @swagger * /api/users: * get: * summary: 获取所有用户 * description: 获取所有用户列表 * responses: * 200: * description: 成功获取用户列表 * schema: * type: array * items: * $ref: '#/definitions/User' */ ``` 在这个示例中,我们使用了Swagger注解来描述一个GET请求,它可以获取所有用户的列表。 3. 生成Swagger文档:使用Swagger注解编写完API代码后,可以使用相应的工具将这些注解转换为Swagger文档。例如,对于Node.js项目,我们可以使用swagger-jsdoc库生成Swagger文档。在项目的入口文件中添加以下代码: ```javascript const swaggerJSDoc = require('swagger-jsdoc'); const swaggerUi = require('swagger-ui-express'); const options = { definition: { openapi: '3.0.0', info: { title: 'API文档', version: '1.0.0', }, }, apis: ['./path/to/api/controllers/*.js'], // API代码文件的路径 }; const swaggerSpec = swaggerJSDoc(options); app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec)); ``` 这段代码将会在`/api-docs`路径下提供Swagger文档。 4. 查看Swagger文档:运行项目并访问`/api-docs`路径,你将会看到生成的Swagger文档。Swagger提供了一个交互式的UI界面,可以方便地查看API的信息、请求和响应参数等。 这只是一个简单的Swagger使用教程,你可以根据自己的项目需求进一步深入学习和使用Swagger

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值