6.git项目实现变更拉取与上传

git项目实现变更拉取与上传

• 写在前面
• 效果预览
• 需求明晰
• 技术实现
• • 前端样式实现
  • • Edit.vue
    • 运行效果
  • git项目标识
  • • 运行效果
  • 功能实现
  • • urls.py
    • views.py
    • Edit.vue
    • 运行效果
    • • push功能测试
      • pull功能测试
• 总结

欢迎加入Gerapy二次开发教程专栏！

本专栏专为新手开发者精心策划了一系列内容，旨在引领你深入探索Gerapy框架的二次迭代之旅。

本专栏将全面剖析Gerapy与Vue的源码架构，让你从内部了解它们的运作机制。

我们将分享实用的技巧，教你如何有效修复Gerapy中的异常问题，如何在现有基础上添加多样化的功能，以及如何对已有功能进行重构优化。

写在前面

读本篇博客前需要你掌握的知识：

• 注册一个gitee账号
• 配置好git本地开发环境：Git教程
• 了解git开发命令的使用
• 了解GitPython开发命令的使用：GitPython库快速应用入门

读完本篇博客你可以学习到的知识：

• Vue前端界面如何增加按钮与点击事件
• GitPython库使用介绍
• git变更拉取与上传功能实现业务理解与技术实现过程

效果预览

需求明晰

我们想在项目管理 > 编辑进入项目编辑界面时，增加两个按钮拉取、上传来实现项目变更记录快速同步到git，而不是还要使用命令行单独提交。

拉取就是使用python执行git pull命令；
上传就是使用python执行git add <file> git commit -m "common" git push origin master这三个命令；

这里我们使用GitPython库来快速实现此需求

技术实现

前端样式实现

下图是我们想要添加功能的位置，也就是项目编辑界面

所以我们要找的对应的代码代码文件是：

大家点击Edit.vue文件进去后会发现没有文字，这是因为代码使用了映射，它把这些按钮文本聚集到了lang/zh.js中，这个前面我们有说过。

也就是说，我们直接在Edit.vue参考前面按钮的实现方式复制两个即可。

Edit.vue

直接在最前面新增两个el-button

<el-button
	v-if="activeFile && from_git"
	size="mini"
	type="primary"
	@click="onPullFile"
>
	<i class="fa fa-cloud-download"></i>
	拉取
</el-button>
<el-button
	v-if="activeFile && from_git"
	size="mini"
	type="primary"
	@click="onPushFile"
>
	<i class="fa fa-cloud-upload"></i>
	上传
</el-button>

按照下图操作，新增from_git参数，用来控制只有git项目才展示操作按钮

定义两个按钮的触发事件，这里先用测试代码

onPullFile() {
	this.$message.success('正在执行代码拉取！');
},
onPushFile() {
	this.$message.success('正在执行代码上传！');
},

运行效果

处理好后，打包Vue代码，刷新浏览器界面看看效果

git项目标识

上面我们打算使用from_git参数来控制只有git项目才展示操作按钮，那我们怎么知道项目是不是来源于git呢？

看了一下project数据库并没有字段存储项目来源方式，那么这里可以判断项目下有没有.git目录。

这里前端是没法处理的，只能在后端实现传参，这种没必要单独开一个接口，我们看看项目编辑界面调用了哪些接口

老样子，在urls.py搜索project/(\S+)/tree，然后跳转进去views中对应的方法

project_tree方法代码理解起来很简单，它就是拿到项目的结构树，那我们可以在它拿到的结构树判断有没有存在.git目录，然后修改返回数据。修改如下：

@log_exception()
@api_view(['GET'])
@permission_classes([IsAuthenticated])
def project_tree(request, project_name):
    """
    get file tree of project
    :param request: request object
    :param project_name: project name
    :return: json of tree
    """
    if request.method == 'GET':
        path = os.path.abspath(join(os.getcwd(), PROJECTS_FOLDER))
        project_path = join(path, project_name)
        from_git = True if '.git' in os.listdir(project_path) else False
        # get tree data
        tree = get_tree(join(path, project_name))
        return JsonResponse({'from_git': from_git, 'tree': tree})

然后对应的Edit.vue需要修改结果获取方式

getProjectTree(name) {
	// 获取目录树
	this.$http
		.get(
			this.formatString(this.$store.state.url.project.tree, {
				name: name,
			})
		)
		.then(({data: data}) => {
			this.tree = data['tree'];
			this.from_git = data['from_git'];
			if (this.tree.length > 0) {
				let lastNode = this.tree[this.tree.length - 1];
				this.onNodeClick(lastNode);
			}
		})
		.catch(() => {
			this.$message.error(this.$store.getters.$lang.messages.errorLoad);
		});
},

运行效果

处理好后，打包Vue代码，重新启动后端服务，刷新浏览器界面看看效果

功能实现

前面我们是把git变更记录拉取和上传前端样式开发好了，接下来就要开发后端接口以及前后端交互实现了。

urls.py

老样子，urls.py新增两个接口映射，并定义好方法名

views.py

这里就是开发两个方法的业务代码，具体理解可以看注释

@log_exception()
@api_view(['POST'])
@permission_classes([IsAuthenticated])
def project_file_pull(request):
    """
    pull project file
    :param request: request object
    :return: result of delete
    """
    if request.method == 'POST':
        # 接收请求body，body里面包含项目名（project_name），毕竟需要知道哪个项目要拉取代码
        data = json.loads(request.body)
        # 根据项目名定位到项目的路径
        project_path = join(PROJECTS_FOLDER, data['project_name'])
        # git打开本地仓库，得到实例repo
        repo = git.Repo(project_path)
        # 绑定远程
        origin = repo.remote(name='origin')
        # 拉取代码
        origin.pull()
        # 由于前面我们删除了requirements.txt，每次pull都会恢复它，所以这里还是要做删除处理
        for path_type, filenames in {'f': ['requirements.txt'], 'd': []}.items():
            for filename in filenames:
                rq = join(project_path, filename)
                optimize_rmtree(rq, path_type=path_type)
        return JsonResponse({'result': '1'})


@log_exception()
@api_view(['POST'])
@permission_classes([IsAuthenticated])
def project_file_push(request):
    """
    push project file
    :param request: request object
    :return: result of delete
    """
    if request.method == 'POST':
        # 接收请求body，body里面包含项目名（project_name），毕竟需要知道哪个项目要拉取代码
        data = json.loads(request.body)
        # 根据项目名定位到项目的路径
        project_path = join(PROJECTS_FOLDER, data['project_name'])
        # 打印日志，便于调试判断
        logger.debug('push git %s', project_path)
        # git打开本地仓库，得到实例repo
        repo = git.Repo(project_path)
        # 添加所有新增的文件
        repo.index.add(repo.untracked_files)
        # 添加所有更新的文件
        repo.git.add(update=True)

        # 由于前面我们删除了requirements.txt，但是我们不想将其同步到git上，所以需要在最后抛弃同步
        for file_list in {'f': ['requirements.txt'], 'd': []}.values():
            for file_name in file_list:
                if not file_name:
                    continue
                repo.git.restore('--staged', file_name)

        # 定义commit内容
        commit_message = "add gerapy update"
        # 提交commit
        repo.index.commit(commit_message)
        # 绑定远程
        origin = repo.remote(name='origin')
        # 提交push
        origin.push(refspec='master')
        return JsonResponse({'result': '1'})

Edit.vue

需要实现原先定义的两个按钮点击事件，它们就是传入项目名调用接口：

onPullFile() {
	this.$confirm(
		this.$store.getters.$lang.messages.confirm,
		this.$store.getters.$lang.buttons.confirm,
		{
			confirmButtonText: this.$store.getters.$lang.buttons.yes,
			cancelButtonText: this.$store.getters.$lang.buttons.no,
			type: "warning",
		}
	).then(() => {
		this.$http
			.post("/api/project/file/pull", {
				project_name: this.projectName,
			})
			.then(() => {
				this.$message.success("拉取成功");
				this.getProjectTree(this.projectName);
			})
			.catch(() => {
				this.$message.error("拉取失败");
			});
	});
},
onPushFile() {
	this.$confirm(
		this.$store.getters.$lang.messages.confirm,
		this.$store.getters.$lang.buttons.confirm,
		{
			confirmButtonText: this.$store.getters.$lang.buttons.yes,
			cancelButtonText: this.$store.getters.$lang.buttons.no,
			type: "warning",
		}
	).then(() => {
		this.$http
			.post("/api/project/file/push", {
				project_name: this.projectName,
			})
			.then(() => {
				this.$message.success("上传成功");
				this.getProjectTree(this.projectName);
			})
			.catch(() => {
				this.$message.error("上传失败");
			});
	});
},

运行效果

处理好后，打包Vue代码，重新启动后端服务，刷新浏览器

push功能测试

对README.md增加些内容，然后点击上传按钮

看看gitee该项目的提交日志，确实是同步变更了。

pull功能测试

我们在gitee直接把前面对README.md增加的内容删掉，保存后点击拉取按钮。

总结

通过本篇文章讲解后，我们对前后端交互开发的理解更加深刻了，同时加深了我们对Gerapy项目的了解，后续我们将进一步开发新功能。