04 提效工具之swagger&yapi转换可视化部署

简介: 04 提效工具之swagger&yapi转换可视化部署

回顾




上两篇文章我们介绍了swagger&yapi接口文档转换jmeter使用的方式,第三篇文章实现了yapi接口登录,已经可以覆盖大多数公司的接口文档转换,可以帮助我们的测试攻城狮解放双手,节省很多时间!


但是问题又来了,使用此工具需要一定的python基础,还需要本地有python环境才能使用,我们总结反思,看起来这样不太友好,我们要把我们的工具服务化,可视化,随时随地都可以接入使用,带给你丝滑般的接口测试脚本编写体验!!


愿景

一键自动生成接口测试脚本,解放双手,降低纯手力劳动占比,进而给自己提供更多的时间去思考、理解产品和设计更多“聪明”的用例


实现效果

今天我们将我们的工具包装成一个网页工具,让我们的测试同学随时随地的使用。

  • 可视化界面展示

准备

python 环境搭建就不仔细说明,直接进入到 Flask 使用和服务器搭建。

先说一下,为什么使用 Flask,有两点,一是几种框架中比较轻量级,二是不会封装得太厉害。具体 Flask 使用目前接触的也只是能将项目运行起来并未前端提供接口服务。

「使用 Flask Web框架」

1)安装步骤

  • 安装 flask 库:pip3 install flask;
  • 安装之后在项目中 import flask 后才能真正找到 flask module。

2)运行项目

  • 在哪个文件中使用了 flask,运行对应的 xxx.py,会提示在 http://localhost:5000 监听;
  • 打开浏览器,输入 http://localhost:5000,如果使用了 flask ,可以使用 Jinja 2 写前端模板文件(这里其实整个系统可以直接通过 flask 实现)。Tips:这种情况类似在本地使用 npm run dev 查看build后的 vue 页面一样,只能本终端访问,并没有部署到服务器中。

代码举例【非本项目代码】

  • 前端
<template>
    <div>
      <span>{{ serverResponse }} </span>
      <button @click="getData">GET DATA</button>
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
      name: "my-first-vue",
      data: function() {
          return {
            serverResponse: 'resp'
          }
      },
      methods: {
        getData() {
          var that = this;
          // 对应 Python 提供的接口,这里的地址填写下面服务器运行的地址,本地则为127.0.0.1,外网则为 your_ip_address
          const path = 'http://127.0.0.1:5000/getMsg';
          axios.get(path).then(function (response) {
            // 这里服务器返回的 response 为一个 json object,可通过如下方法需要转成 json 字符串
            // 可以直接通过 response.data 取key-value
            // 坑一:这里不能直接使用 this 指针,不然找不到对象
            var msg = response.data.msg;
            // 坑二:这里直接按类型解析,若再通过 JSON.stringify(msg) 转,会得到带双引号的字串
            that.serverResponse = msg;
            alert('Success ' + response.status + ', ' + response.data + ', ' + msg);
          }).catch(function (error) {
            alert('Error ' + error);
          })
        }
        }
      }
    }
</script>
  • 后端
from flask import Flask
from flask import jsonify
from flask_cors import CORS
app = Flask(__name__)
cors = CORS(app, resources={r"/getMsg": {"origins": "*"}})
@app.route('/')
def hello_world():
    return 'Hello World!'
@app.route('/getMsg', methods=['GET', 'POST'])
def home():
    response = {
        'msg': 'Hello, Python !'
    }
    return jsonify(response)
# 启动运行
if __name__ == '__main__':
    app.run()   # 这样子会直接运行在本地服务器,也即是 localhost:5000
   # app.run(host='your_ip_address') # 这里可通过 host 指定在公网IP上运行

注意事项

「使用 Flask + Vue 实现一个应用,简单来说主要是以下几个步骤:」

  • Vue.js 实现前端页面 & 通过 axios 库请求后台接口获取数据后重新渲染页面;
  • Flask & Flask-CORS 提供接口 & 实现跨域服务。
  • 打包 Vue.js 文件 & 部署到服务器,通过 index 页面进行访问。

「如果需要最终可以在公网访问最终打包好的 Vue 前端界面,则执行以下操作:」

  • 在服务器实现文件 get_msg.py 文件中配置 app.run(host=’your_ip_address’);
  • 配置 Vue axios请求接口的 base_url 为 your_ip_address;
  • 通过 npm run build 打包得到最终 dist 文件并部署到服务器中(部署可通过 python -m http.server 进行简单部署,然后通过 http://your_ip_address:8000 端口访问最终的页面)。

总结+反问

「大家觉得方便高效有没有质和量的区别?」

  • 用java+TestNG编写接口自动化脚本方不方便?也挺方便!
  • 用python+pytest编写接口自动化脚本方不方便?也挺方便!
  • 用我们一键生成接口测试脚本的工具方不方便?好像也挺方便!

就经常问人,如果这三种方式能给够同样给你带来方便,也就是说这三 种方式你都欣赏过都使用过,你都觉得还不错对吧!

相关文章
|
6月前
|
Oracle 关系型数据库 Java
程序员必备推荐一款与Swagger媲美的数据库文档生成工具
程序员必备推荐一款与Swagger媲美的数据库文档生成工具
74 0
|
5月前
|
前端开发 Java 程序员
Spring Boot (十五): 优雅的使用 API 文档工具 Swagger2
Spring Boot (十五): 优雅的使用 API 文档工具 Swagger2
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
|
6月前
|
前端开发 IDE Java
比Swagger更好用的工具
比Swagger更好用的工具
230 2
比Swagger更好用的工具
|
6月前
|
数据可视化 测试技术 API
Swagger--API表达工具
Swagger--API表达工具
72 2
|
6月前
|
NoSQL JavaScript Linux
一篇文章带你完成内网部署YApi以及踩坑过程
一篇文章带你完成内网部署YApi以及踩坑过程
380 0
|
搜索推荐 Java 测试技术
Swagger与knife4j接口测试工具
Swagger与knife4j接口测试工具
174 0
|
4月前
|
数据可视化 Java API
Spring Boot与Swagger的集成
Spring Boot与Swagger的集成
|
4月前
|
Java API 开发者
在Spring Boot中集成Swagger API文档
在Spring Boot中集成Swagger API文档
|
29天前
|
SQL JSON Java
mybatis使用三:springboot整合mybatis,使用PageHelper 进行分页操作,并整合swagger2。使用正规的开发模式:定义统一的数据返回格式和请求模块
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和PageHelper进行分页操作,并且集成Swagger2来生成API文档,同时定义了统一的数据返回格式和请求模块。
49 1
mybatis使用三:springboot整合mybatis,使用PageHelper 进行分页操作,并整合swagger2。使用正规的开发模式:定义统一的数据返回格式和请求模块
下一篇
无影云桌面