Vue+Flask测试平台,分享源码+详细搭建教程,良心项目实战

提测管理平台

背景源于多年前的团队的一个需求,这里重新利用最新开箱即用的前后端框架重新实现出来,并配有系列0-1的入门级别的开发分享文章,宗旨是为做想学测试开发技术或想自己实现小工具平台的同学,提供一个实实在在的练手实战项目,作为一份参考资料,希望对需要的人有些许帮助。

前后端服务

代码全部放在一个Git项目上了,但服务分为独立的前端和后端服务,同时也给出了对应SQL数据库创表语句。

SQL

数据使用的Mysql,版本5.7+,本项目中使用的是8.0版本,SQL文件夹中分别提供的提测平台用到的几张表

  • products.sql 产品/项目表
  • apps.sql 应用表
  • request.sql 提测需求和报告信息表

TPMService

后端服务,使用的是 Python Flask框架,Pyton版本是3.x,同样本项目讲解的是需求应用的部分,至于更多内容建议学习官网 英文 中文,英文好的强力推荐阅读英文官方版本,中文的翻译可能是老版本,相关内容有些滞后。

如何运行

# 克隆项目
git clone https://github.com/mrzcode/TestProjectManagement.git

# 进入项目目录 或 用WebStorm等IDE工具导入前端项目
cd TPMService

# 安装依赖
pip3 install -r requirements.txt

# 启动服务 或者 PyCharm等IDE配置运行
python3 app.py

TPMWeb

前端服务,使用的是开箱即用的 Vue-element-admin基础template版本,它还有个amdin版本有很多综合页面可以进行参考,基础组件应用上使用的 Element ui,这里需要注意的是你代码中使用的是Vue2.x版本,如果你是刚刚开始跟学这个项目,可以尝试将这些都升级到3.x进行练习开发。

关于前端的Vue开发,本项目只是讲了如何快速的应用,而不是深入的讲解vue前端开发的技能,在分享文章里也讲过,我们并不是要做前端开发,所以对于全栈的测试开发只要掌握如何应用到实际需求中就行,如果想进一步深入学习,可以参考Vue-element-admin、Vue等技术官网或者相关专业课程。

如何运行

# 克隆项目
git clone https://github.com/mrzcode/TestProjectManagement.git

# 进入项目目录 或 用WebStorm等IDE工具导入前端项目
cd TPMWeb

# 安装依赖
npm install

# 启动服务
npm run dev

# 如果npm install安装较慢可切换依赖源
npm install --registry=https://registry.npm.taobao.org

浏览器访问 http://localhost:9528

配套教程

公众号:程序员一凡 独家版本
我这边把源码资源释放出来,加入软件测试交流群,欢迎大家下载使用

基础内容篇

  • 前端Vue&后端Flask框架介绍
  • 前后端分离服务打通联调
  • 项目初始化与项目托管

原型和需求

  • TPM产品原型和需求说明

需求实现篇

  • 数据库绑定&实现产品线展示功能
  • 实现产品线的添加需求功能
  • 实现产品线修改功能
  • 完成产品线删除功能
  • 实现产品搜索&时间优化显示
  • Python Flask API实现方法
  • Element Vue开箱即用框架使用
  • DBUntils优化数据连接&实现应用搜索和分页功能
  • Element UI抽屉和表单校验&增改接口合并实现应用管理
  • Python邮件发送方法&落地有邮件工具类
  • 时间控件使用&Python联合表查询&实现提测搜索展示
  • 远程搜索和路由$route使用实现新建提测需求
  • 图标Icon几种用法并利用其一优化菜单
  • 实现提测单修改和邮件标记
  • 状态流转和提测详情展示
  • 测试报告管理功能实现
  • Flask&Vue文件上传实现实践
  • 阶段小结:开发回顾和内容梳理

数据报表篇

  • Echarts图表在项目的应用
  • G2Plot如何使用简化报表开发

项目部署篇

  • TPM提测平台服务部署方案实践

最新纯享版系列

因为此Element vue + Python Flask系列在公众号更新跨度很长,也断断续续并且刚开始也不怎么会总结分享,所以有不少不合适的地方,对此目前正在进行整理和再验证的工作,大约有20多篇等全部梳理完,系列后续将会连续更新发布,因此也说这个系列也将成为历史绝版。

最后如果觉得博主的分享对你有些价值,记得多多一键三连支持,让更多伙伴看到(^∀^)


http://www.niftyadmin.cn/n/1325732.html

相关文章

如何快速定位BUG?BUG定位技巧及测试人员定位的N板斧

很多测试人员可能会说,我的职责就是找到bug,至于找原因并修复,那是开发的事情,关我什么事? 好,我的回答是,如果您只想做一个测试人员最基本最本分的事情,那么可以这么想。但是&#…

使用Chrome DevTools的F12进行前端页面性能测试(手把手教你,非常全,建议收藏)

前言 普通用户如何评价一个网站的体验好不好呢? 除了满足他的功能需求以外,用得爽不爽可能是最大的评估因素。这个爽不爽可以简单理解为快不快,好不好看,是不是符合他的操作习惯等等。而这里的快不快就是我们说的性能。 有数据…

《羊了个羊》测试工程师通关解密到游戏测试常见Bug汇总

前言 几乎是一夜之间,微信小游戏《羊了个羊》火出圈了。​两天以来上了不下五次热搜,其话题总览量已经高达17亿,讨论次数也超过了15万次。 全办公室的都在找第二关的攻略,本来我以为这是00后玩的游戏,我都不爱搭理这…

用了这款docker监控平台,再也不用记一大堆命令了,真香~

导读 随着云计算、容器化技术的发展,越来越多的企业选择使用docker来部署应用。基于docker轻量级、占用资源少等特点,我们可以很轻松在一台物理机上部署几十个docker容器。 在我们日常测试工作中,很多时候需要自己去搭建测试环境&#xff0…

行业寒冬下,对于软件测试工程师的一些建议

前言 国内的互联网行业发展较快,所以造成了技术研发类员工工作强度比较大,同时技术的快速更新又需要员工不断的学习新的技术。因此淘汰率也比较高,超过35岁的基层研发类员工,往往因为家庭原因、身体原因,比较难以跟得…

【C#】并行编程实战:实现数据并行(3)

本章继续学习实现数据并行,本文主要介绍取消循环。 本教程对应学习工程:魔术师Dix / HandsOnParallelProgramming GitCode 4、取消循环 在顺序循环中,可以使用 break 来跳出循环,而在并行循环的情况下,由于他…

中文命名实体识别数据集_针对医疗数据进行命名实体识别

向AI转型的程序员都关注了这个号???机器学习AI算法工程 公众号:datayx该项目用双向长短时记忆神经网络和条件随机场(Bi-LSTM-CRF)的命名实体识别本项目是针对医疗数据,进行命名实体识别。项目中有600份标注好的电子病历文本,共需识别含解…

2022,经历裁员之后的感受

序言 第一次经历裁员(已经提前知道的情况下,毕竟信息都共享),说实话老大之前找我 1V1 聊天 老大: “ 你最近感觉怎么样 ” 我: “ 没什么意思,问题和改进意见和具体的调研都做完了,…