测试需求平台2-搭建前后端分离github托管项目

简介: 从 0-1手把手实现简单的测试平台开发教程,内容将囊括基础、扩展和实战,由浅入深带你实现测试开发岗位中平台工具技术能力入门和提升

✍ 此系列为整理分享已完结入门搭建《TPM提测平台》系列的迭代版,拥抱Vue3.0将前端框架替换成字节最新开源的arco.design,其中约60%重构和20%新增内容,定位为从 0-1手把手实现简单的测试平台开发教程,内容将囊括基础、扩展和实战,由浅入深带你实现测试开发岗位中平台工具技术能力入门和提升。


1.如何托管代码

项目代码托管笔者放在了github了,你有账号可以直接Fork或者自己创建一个项目进行托管,本系列拟定的名为 TestProjectManagement ,如果你只是打算本地开发练习用则可忽略此内容。

本项目源码: https://github.com/mrzcode/TestProjectManagement


1.1 代码仓库创建

官方 https://github.com首页右上角+按钮,点击Create a new Repository 即可在自己的目录下创建新仓库,注意选择公开还是私有,后者是仅自己可见。

由于海外网站有些网络不稳或限制无法稳定使用github的可以考虑使用gitee个人免费版


1.2 SSH管理代码

为了比较愉快的进行代码克隆和提交,将使用SSH的方式进行代码管理,如果本地还没有配置密钥,则需要先按照如下步骤进行生成和配置:

SSH文档:https://docs.github.com/cn/authentication/connecting-to-github-with-ssh


生成密钥

  1. 打开 Terminal(终端);
  2. 粘贴下边命令行,并将邮箱替换为自己账号邮箱执行,一路默认最后会生成公钥和私钥;

$ ssh-keygen -t ed25519 -C "your_email@example.com"

# 提示:如果系统不支持Ed25519请使用如下生成方式替换

# ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

  1. 复制密钥, 根据生成路径找到 id_rsa.pub 复制到剪贴板,我这里mac默认在:cat .ssh/id_rsa.pub


配置密钥

切换到github上,依次点击“个人头像 -> Settings -> SSH and GPG keys -> New SSH Key”粘贴完成添加

密钥配置:https://github.com/settings/keys


仓库克隆

进入TestProjectManagement,切换成SSH模式,复制地址

本地打开终端进入代码开发根目录下,执行如下命令进行代码项目下载和查看

$ cd QiDir
$ git clone git@github.com:mrzcode/TestProjectManagement.git
Cloning into 'TestProjectManagement'...
remote: Enumerating objects: 553, done.
remote: Counting objects: 100% (69/69), done.
remote: Compressing objects: 100% (59/59), done.
remote: Total 553 (delta 24), reused 26 (delta 9), pack-reused 484Receiving objects: 100% (553/553), 586.73 KiB | 780.00 KiB/s, done.
Resolving deltas: 100% (209/209), done.
% lsTestProjectManagement


代码提交

进入TestProjectManagement目录,我们稍微改 READNE.md 文件(如果你是新项目且不存在此文件需自行创建并增加些内容),通过几个关键的一git命令测试下代码提交是否也正常,笔者的测试如图:


2.ArcoPro前端项目搭建

2.1 简单模版脚手架初始化

参考第一篇分享来完成此测试平台前端模版代码初始化,详细过程不在赘述,这里看图中标记的两个重点

  • 项目名称:正式名将作为新的前端服务
  • Pro模版:选择简单版本方便集成开发


如上篇正常初始化脚手架项目后会自动安装依赖,不过这次出现了个错误提示(笔者本地环境依赖包冲突问题),不过尝试进入项目尝试运行 npm run devnpm run build 可以正常编译的,如果你本身就没有错误或者跟作者一样正常编译就可以先不用理会了,不过笔者尝试将项目创建在其他空目录下正常,或者按照官方常见问题解决办法操作,尝试手动安装解决。

常见问题 https://arco.design/vue/docs/pro/faq

# 依赖安装失败的问题,进入到初始化项目的目录,重新执行执行npm install 或 yarn install安装操作即可。TPMArco % rm-rf node_modules 
TPMArco % rm-r package-lock.json 
TPMArco % npm install --legacy-peer-deps


2.2 了解项目结构

想要使用脚手架项目,那么初始化代码项目的结构目录了解是必不可少的,这里直接贴出来官方的描述,大家对照阅读,这篇要重点关注api和views

├── README.md
├── package.json
├── index.html
├── src
│   ├── api  # 请求接口│   ├── assets  # 静态资源│          └── style 全局样式
│   ├── components  # 通用业务组件│   ├── config  # 全局配置(包含echarts主题)│          └── settings.json  # 配置文件│   ├── directives # 指令集(如需,可自行补充)│   ├── filters # 过滤器(如需,可自行补充)│   ├── hooks # 全局hooks│   ├── layout  # 布局│   ├── locale  # 国际化语言包│   ├── mock  # 模拟数据│   ├── views  # 页面模板│   ├── router # 路由配置│   ├── store  # 状态管理中心│   ├── types  # Typescript 类型│   └── utils  # 工具库│   └── App.vue  # 视图入口│   └── main.ts  # 入口文件└── tsconfig.json


api 网络请求

使用axios进行远程接口请求,建议完善返回及请求数据的类型定义,以下为官方举例(TypeScript):

importaxiosfrom'axios';
exportinterfaceUserToken {
token: string;
}
exportinterfaceUserStateTypes {
name: string;
location: string;
}
exportfunctiongetUserInfo(data: UserToken) {
// 通过传递泛型,以获得完整的类型提示。returnaxios.post<UserStateTypes>('/api/user/info', data);

views页面的布局

HTML、JavaScript、CSS三分区域实现页面的地方,一般一个vue代表一个功能页面,具体根据自身项目逻辑划分就可以。


3.Flask接口服务

后端服务我们借助 IDE(Pycharm)工具进行创建,如果你有其他开发工具,参照类似进行创建即可。

创建一个flask项目: Create New Project -> Flask -> 路径可以选择到刚才克隆的项目下,起名为Service服务,并建议创建Virtual env和勾选上 Inherit ,版本选择python3.x 版本,这主要是为了使其环境独立,以免跟你本地其他项目冲突,尤其是有2.x的项目。


IDE初始化项目后默认会有app.py运行主入口、static静态资源、templates模版,另外后续开发还需要结构规范化,所以这里先添加文件夹 apis接口集、configs存放配置文件、utils工具包,最终后端服务有了如下结构。



由于这个系列是纯享再编辑版本,所以除了TPMArco其他源代码都是已经在了的,这里通过Tree -L 2查看下最终的托管项目的代码目录结构:

├── TestProjectManagement
│   ├── README.md          # 说明文档│   ├── SQL                # 数据表创建语句│   ├── TPMArco            # 新增的Acro pro前端项目│   ├── TPMService         # 后端服务│   └── TPMWeb             # Element vue实现前端


其中需要而外说明下,TPMService的重新整理几乎和之前发布的不会有太多变化和改动,只会全新使用Arco完全重写下前端服务,但仍然会是做有效性校验和前后端测试,至于TPMWeb 是已实现的 Element vue admin 前端,你依然可以正常使用,这部分使用教程可以参考历史公众号发布,不在做任何重发,博客只发布最新Acro Vue + Flask版本的系列内容。


本篇还是准备工作,主要完成托管代码库的创建,下载和上传,以及创建好了真正要开发的前后端项目,重点要掌握的是新项目如何初始化,熟悉 AcroProFlask 项目结构,为接下来的正式开发打好基础。

目录
相关文章
|
28天前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法。本文介绍 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,同时提供 Python 实现示例,强调其在确保项目性能和用户体验方面的关键作用。
31 6
|
1月前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段。本文介绍了 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,强调了样本量、随机性和时间因素的重要性,并展示了 Python 在 A/B 测试中的具体应用实例。
30 1
|
1月前
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
30 4
|
1月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
1月前
|
网络协议 关系型数据库 应用服务中间件
【项目场景】请求数据时测试环境比生产环境多花了1秒是怎么回事?
这是一位粉丝(谢同学)给V哥的留言,描述了他在优化系统查询时遇到的问题:测试环境优化达标,但生产环境响应时间多出1秒。通过抓包分析,发现MySQL请求和响应之间存在500毫秒的延迟,怀疑是网络传输开销。V哥给出了以下优化建议:
|
1月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
136 1
|
2月前
|
测试技术
自动化测试项目学习笔记(五):Pytest结合allure生成测试报告以及重构项目
本文介绍了如何使用Pytest和Allure生成自动化测试报告。通过安装allure-pytest和配置环境,可以生成包含用例描述、步骤、等级等详细信息的美观报告。文章还提供了代码示例和运行指南,以及重构项目时的注意事项。
277 1
自动化测试项目学习笔记(五):Pytest结合allure生成测试报告以及重构项目
|
2月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
78 2
|
2月前
|
测试技术 Python
自动化测试项目学习笔记(四):Pytest介绍和使用
本文是关于自动化测试框架Pytest的介绍和使用。Pytest是一个功能丰富的Python测试工具,支持参数化、多种测试类型,并拥有众多第三方插件。文章讲解了Pytest的编写规则、命令行参数、执行测试、参数化处理以及如何使用fixture实现测试用例间的调用。此外,还提供了pytest.ini配置文件示例。
56 2
|
1月前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
65 0