回顾
上两篇文章我们介绍了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编写接口自动化脚本方不方便？也挺方便！
- 用我们一键生成接口测试脚本的工具方不方便？好像也挺方便！
就经常问人，如果这三种方式能给够同样给你带来方便，也就是说这三 种方式你都欣赏过都使用过，你都觉得还不错对吧！
