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

测试开发囤货

发布于 2021-08-11 15:18:41

6650

发布于 2021-08-11 15:18:41

文章被收录于专栏：测试开发囤货测试开发囤货

回顾

上两篇文章我们介绍了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 端口访问最终的页面）。