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

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

————————————————
版权声明：本文为CSDN博主「Mega Qi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zyueqi1987/article/details/126551134

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
2
3

3. 复制密钥, 根据生成路径找到 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 484
Receiving objects: 100% (553/553), 586.73 KiB | 780.00 KiB/s, done.
Resolving deltas: 100% (209/209), done.

% ls
TestProjectManagement
1
2
3
4
5
6
7
8
9
10
11
12
13

代码提交

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

2.ArcoPro前端项目搭建

2.1 简单模版脚手架初始化

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

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

如上篇正常初始化脚手架项目后会自动安装依赖，不过这次出现了个错误提示（笔者本地环境依赖包冲突问题），不过尝试进入项目尝试运行 npm run dev 和 npm 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
1
2
3
4

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

api 网络请求

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

import axios from 'axios';

export interface UserToken {
 token: string;
}

export interface UserStateTypes {
 name: string;
 location: string;
}
export function getUserInfo(data: UserToken) {
 // 通过传递泛型，以获得完整的类型提示。
 return axios.post<UserStateTypes>('/api/user/info', data);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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实现前端
1
2
3
4
5
6

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

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