测试需求平台 2- 搭建前后端分离 github 托管项目
此分享将会是一个系列分享,将使用最新的 Acro Vue 前端框架,和 Python Flask 服务从 0-1 手把手实现一个测试需求平台,内容将囊括基础、扩展和实战,由浅入深带你实现测试开发岗位中平台工具技术能力入门和提升。
1.如何托管代码
项目代码托管笔者放在了 github 了,你有账号可以直接 Fork 或者自己创建一个项目进行托管,本系列拟定的名为 TestProjectManagement
,如果你只是打算本地开发练习用则可忽略此内容。
1.1 代码仓库创建
官方 https://github.com
首页右上角+按钮,点击 Create a new Repository 即可在自己的目录下创建新仓库,注意选择公开还是私有,后者是仅自己可见。
由于海外网站有些网络不稳或限制无法稳定使用
github
的可以考虑使用gitee
个人免费版
![](https://static001.geekbang.org/infoq/b5/b5a8555646c5b87cd14558ca126b7a59.png)
1.2 SSH 管理代码
为了比较愉快的进行代码克隆和提交,将使用 SSH 的方式进行代码管理,如果本地还没有配置密钥,则需要先按照如下步骤进行生成和配置:
SSH 文档:https://docs.github.com/cn/authentication/connecting-to-github-with-ssh
生成密钥
打开 Terminal(终端);
粘贴下边命令行,并将邮箱替换为自己账号邮箱执行,一路默认最后会生成公钥和私钥;
复制密钥, 根据生成路径找到 id_rsa.pub 复制到剪贴板,我这里 mac 默认在:
cat .ssh/id_rsa.pub
配置密钥
切换到 github 上,依次点击“个人头像 -> Settings -> SSH and GPG keys -> New SSH Key”粘贴完成添加
![](https://static001.geekbang.org/infoq/de/dec7ce113c8b3c925f62414a398f215d.png)
仓库克隆
进入TestProjectManagement
,切换成 SSH 模式,复制地址<br />
![](https://static001.geekbang.org/infoq/8b/8b1e84a5172517cce00a1ce375c4a6b0.png)
本地打开终端进入代码开发根目录下,执行如下命令进行代码项目下载和查看
代码提交
进入TestProjectManagement
目录,我们稍微改 READNE.md
文件(如果你是新项目且不存在此文件需自行创建并增加些内容),通过几个关键的一 git 命令测试下代码提交是否也正常,笔者的测试如图:<br />
![](https://static001.geekbang.org/infoq/00/00844a8addd4b022b999a03853f1dc89.png)
2.ArcoPro 前端项目搭建
2.1 简单模版脚手架初始化
参考第一篇分享来完成此测试平台前端模版代码初始化,详细过程不在赘述,这里看图中标记的两个重点
项目名称:正式名将作为新的前端服务
Pro 模版:选择简单版本方便集成开发
![](https://static001.geekbang.org/infoq/1d/1d372a0a96dd9d79dc9e042e86b4b05c.png)
如上篇正常初始化脚手架项目后会自动安装依赖,不过这次出现了个错误提示(笔者本地环境依赖包冲突问题),不过尝试进入项目尝试运行 npm run dev
和 npm run build
可以正常编译的,如果你本身就没有错误或者跟作者一样正常编译就可以先不用理会了,不过笔者尝试将项目创建在其他空目录下正常,或者按照官方常见问题解决办法操作,尝试手动安装解决。
2.2 了解项目结构
想要使用脚手架项目,那么初始化代码项目的结构目录了解是必不可少的,这里直接贴出来官方的描述,大家对照阅读,这篇要重点关注 api 和 views
api 网络请求
使用 axios 进行远程接口请求,建议完善返回及请求数据的类型定义,以下为官方举例(TypeScript):
views 页面的布局
HTML、JavaScript、CSS 三分区域实现页面的地方,一般一个 vue 代表一个功能页面,具体根据自身项目逻辑划分就可以。
3.Flask 接口服务
后端服务我们借助 IDE(Pycharm)工具进行创建,如果你有其他开发工具,参照类似进行创建即可。<br />创建一个 flask 项目: Create New Project -> Flask -> 路径可以选择到刚才克隆的项目下,起名为 Service 服务,并建议创建 Virtual env 和勾选上 Inherit ,版本选择 python3.x 版本,这主要是为了使其环境独立,以免跟你本地其他项目冲突,尤其是有 2.x 的项目。<br />
![](https://static001.geekbang.org/infoq/d6/d65abda95cb192f34243e4a9d8f07e8b.png)
IDE 初始化项目后默认会有app.py
运行主入口、static
静态资源、templates
模版,另外后续开发还需要结构规范化,所以这里先添加文件夹 apis
接口集、configs
存放配置文件、utils
工具包,最终后端服务有了如下结构。
![](https://static001.geekbang.org/infoq/8a/8a2f52eb9c0a0b29e1f91d348959986c.png)
由于这个系列是纯享再编辑版本,所以除了 TPMArco 其他源代码都是已经在了的,这里通过Tree -L 2
查看下最终的托管项目的代码目录结构:
其中需要而外说明下,
TPMService
的重新整理几乎和之前发布的不会有太多变化和改动,只会全新使用 Arco 完全重写下前端服务,但仍然会是做有效性校验和前后端测试,至于 TPMWeb 是已实现的 Element vue admin 前端,你依然可以正常使用,这部分使用教程可以参考历史公众号发布,不在做任何重发,博客只发布最新 Acro Vue + Flask 版本的系列内容。
本篇还是准备工作,主要完成托管代码库的创建,下载和上传,以及创建好了真正要开发的前后端项目,重点要掌握的是新项目如何初始化,熟悉 AcroPro
和 Flask
项目结构,为接下来的正式开发打好基础。
版权声明: 本文为 InfoQ 作者【MegaQi】的原创文章。
原文链接:【http://xie.infoq.cn/article/48ea9d83f378ceab1579cbbaf】。文章转载请联系作者。
评论