测试需求平台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 项目结构,为接下来的正式开发打好基础。

目录
相关文章
|
3天前
|
人工智能 文字识别 异构计算
关于github开源ocr项目的疑问
小白尝试Python OCR学习,遇到报错。尝试Paddle OCR部署失败,Tesseract OCR在Colab误操作后恢复失败。EasyOCR在Colab和阿里天池Notebook成功,但GPU资源不足。其他平台部署不顺,决定使用WebUI或阿里云轻应用。求教OCR项目部署到本地及简单OCR项目推荐。
31 2
|
1天前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
1天前
|
SQL Oracle 前端开发
Oracle效率分析,Github标星25K+超火的前端实战项目
Oracle效率分析,Github标星25K+超火的前端实战项目
|
1天前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
3天前
|
前端开发 测试技术 数据安全/隐私保护
图书馆信息管理系统(项目测试)
图书馆信息管理系统(项目测试)
13 2
|
3天前
|
XML Java 测试技术
Maven 构建 & 项目测试
本文介绍了如何使用Maven构建和测试Java应用。在`C:/MVN/consumerBanking`项目中,`pom.xml`配置了JUnit作为测试框架。执行`mvn clean package`命令进行构建,Maven会清理目标目录,编译源码和测试代码,运行测试用例,最后生成`consumerBanking-1.0-SNAPSHOT.jar`。测试报告位于`surefire-reports`文件夹。添加新Java类`Util.java`到项目后,更新`App.java`以使用`Util`类。
|
3天前
|
开发工具 git
Git项目如何配置,如何上传至GitHub。其详细步骤
Git项目如何配置,如何上传至GitHub。其详细步骤
11 0
|
3天前
|
测试技术
使用CLion创建Cmake项目,使用GoogleTest和GoogleMock对代码进行测试
使用CLion创建Cmake项目,使用GoogleTest和GoogleMock对代码进行测试
25 3
|
3天前
|
XML Java 测试技术
Maven 构建 & 项目测试
该文介绍了如何使用Maven进行Java应用的构建与测试。在`C:/MVN/consumerBanking`项目中,`pom.xml`配置了JUnit依赖。Maven默认创建了源码和测试文件,通过命令`mvn clean package`进行构建,生成`consumerBanking-1.0-SNAPSHOT.jar`。测试报告在`surefire-reports`文件夹。新增`Util`类并更新`App`后,执行`mvn clean compile`编译,然后运行`java -cp . com.companyname.bank.App`显示&quot;Hello World!&quot;。
|
3天前
|
机器学习/深度学习 算法 UED
【Python 机器学习专栏】A/B 测试在机器学习项目中的应用
【4月更文挑战第30天】A/B测试在数据驱动的机器学习项目中扮演关键角色,用于评估模型性能、算法改进和特征选择。通过定义目标、划分群组、实施处理、收集数据和分析结果,A/B测试能帮助优化模型和用户体验。Python提供工具如pandas和scipy.stats支持实验实施与分析。注意样本量、随机性、时间因素和多变量分析,确保测试有效性。A/B测试助力于持续改进机器学习项目,实现更好的成果。

热门文章

最新文章