一、基本介绍：（） 桌面端工具（一年左右），使用python的wxpython框架编写，使用pyinstaller打包为桌面exe文件；缺点：体积大，不便于分享；
web端应用（10月初至今）：flask+vue实现；优点，通过脚本实现热更新；链接形式便于分享。
二、功能介绍：
三、技术实现
测试平台采用前后端分离的方式实现:
- 后端由flask框架实现； （1）flask项目结构
（2）在项目入口文件中构建接口 Flask：用于创建一个flask应用,app = Flask(name) CORS:解决跨域问题，cors = CORS(app) request:接受请求的参数，request.args.get()；phone = request.json[] jsonify:以json格式返回结果：jsonify({“data”: res}) 接口的基本组成：
构建一个接口的基本步骤： 导包：Flask、CORS、request、jsonify 在app.route()装饰器中定义接口的请求类型、url路径 写一个接口函数 获取入参（可选） get请求 request.args.get() post请求 request.json[] 对得到的参数进行基本校验：如参数类型校验、字段长度、是否空、鉴权等。 根据传参进行逻辑处理，调用对应功能，得到结果 构建响应头（可选，返回类型是文件时必须） 构建结果，使用jsonify将返回结果构建成一个js （可选） return结果 启动flask app.run(ip,port,debug=True),其中debug=True代表以调试模式启动，代码改动后自动重启；debug默认为False。 包的管理 requirements.txt 代码中引入了的包，需要填写在该文件中，格式：“ 包名==版本号”
（3）采用gunnicorn+gevent部署flask项目 介绍： 一个HTTP 服务器，可以增加项目的并发，通常和gevent一起使用。 安装gunicorn和gevent： pip install gunicorn -i https://pypi.tuna.tsinghua.edu.cn/simple pip install gevent-i https://pypi.tuna.tsinghua.edu.cn/simple 配置文件 gunicorn.conf.py workers = 10 定义同时开启的处理请求的进程数量，根据网站流量适当调整 worker_class = “gevent” 采用gevent库，支持异步处理请求，提高吞吐量 bind = “0.0.0.0:80” 监听IP放宽，以便于Docker之间、Docker和宿主机之间的通信,docker部署固定 采用启动服务： gunicorn flask_index:app -c ./gunicorn.conf.py 注意：Gunicorn只能运行在Linux环境中，不支持windows平台，因此在windows调试的时候不要用这个方式启动flask； 2. 前端：vue 、node.js（前端的包管理工具，类似python的pip包管理工具）、vue-cli（vue项目的脚手架）、element-ui、echats提供页面交互;
（1）项目结构
(2) 配置环境 安装node.js，前端包管理工具，直接下载安装即可 全局安装cnpm： npm install cnpm -g，解决npm速度慢的问题 cnpm install vue-cli -g 全局安装脚手架vue-cli 通过脚手架创建项目： vue init webpack my-project 启动项目：npm run serve 打包：npm run build (3)配置本地环境和正式环境：
手动切换：url决定正式环境还是本地测试环境 （4）通过nginx部署：
- 部署：docker（ ）+WebHooks（ ）+脚本的方式实现，合并代码后自动化部署。 构建Dockerfile： flask：
Vue:
打包docker（自动化形式）：
以demo的方式演示实现一个工具： 后端：用flask分别写一个接口demo，实现：根据传参生成新诊所，并绑定到指定账号 安装flask、flask_cors (pip install flask -i https://pypi.tuna.tsinghua.edu.cn/simple) 新建一个flask项目 导包 简单实现一个get类型接口： 写一个post类型接口，调用已有函数： 启动flask
前端：一个单页面的vue+elementui的demo： 准备文件（要引入的插件），将以下文件下载到项目的目录下
、
引入文件，在html的head标签中引入以上文件
（需要先了解下html\css\js） 创建vue应用骨架 html部分 js部分 vue部分只需重点关注：模板语法、事件处理、以及常用指令 在页面中使用element-ui组件，以按钮为例，并给按钮添加事件处理： 使用axios发送请求 js
写一个按钮用于触发POST接口请求、一个文本框用于显示接收的结果。 html部分：
js部分
四、后续方向 继续加入能提升效率的工具、加强提供测试数据的能力 自动化测试项目的可视化、测试用例少代码化
Python from flask import Flask,request,jsonify from opened_new_clinic import opened_new_clinic from flask_cors import CORS @app.route(’/demo’, methods=[‘POST’, ‘GET’]) def get_msg(): msg=request.args.get(“message”) print(f’message, {msg}’) return {“data”:f"来自服务端的回复{msg}"} @app.route(’/create_clinic’, methods=[‘POST’, ‘GET’]) def create_clinic(): phone = request.json[‘phone’] storeid = request.json[‘storeid’] if phone != ’’ and storeid != ‘’: res = opened_new_clinic(phone, storeid) elif phone != ’’ and storeid == ‘’: res = opened_new_clinic(phone=phone) elif phone == ’’ and storeid != ‘’: res = opened_new_clinic(clinic_id=storeid) else: res = opened_new_clinic() return jsonify({“data”: res}) Bash
})
.catch(function (error) {
// 请求失败处理
console.log(error);
});
}
Bash
methods: {
send(){
var _this = this;
axios
.get('http://localhost:5000/demo?message=test')
.then(
function(response) {
_this.info = response.data.data
console.log(info)
})
.catch(function (error) {
// 请求失败处理
console.log(error);
});
},
create_clinic(){
var _this = this;
axios
.post('http://localhost:5000/create_clinic' , {
storeid:_this.form.store_id,
phone:_this.form.phone
})
.then(
function(response) {
_this.form.res = response.data.data
console.log(info)
})
.catch(function (error) {
// 请求失败处理
console.log(error);
});
}
},
})</script>
