Skip to main content

使用github进行项目协同

前言​

协作原理​

我们经常会遇到多人合作开发的项目，但是问题是，当我们多个人共同开发一个项目时，怎么把大家的合起来呢？

是这样吗？

串行工作：每个人负责一个模块，在这个人书写自己的模块时，其他人闲着，在这个人写好代码后，把代码打包，压缩包发送给下一个人。
并行工作：多人同时进行编码，写好之后进行合并。

你平时是怎么操作的呢？实际上，显然是并行工作的效率高，但是怎么达到这个目的呢？答案就是，代码托管。我们将代码放在某个平台的仓库里上，每个协作者在仓库中创建一个属于自己的分支（branch），并将代码拷贝一份副本在本地，在本地进行自己部分的编码和测试工作，在编码完成后，把这个工程推送（Push）到仓库中自己的分支里，并向主分支（main）发起合并请求（pull request），在管理员审核过后，就可以自动比较二者不一样的地方，进行合并（Merge）。

举个栗子

比如，老师新出了一张试卷，但是老师不想自己得到答案，因此她安排A、B、C三位学霸来做这套试卷。分别将这三个同学的试卷记为a、b、c。假设老师那里有一张空白试卷m。那么老师就是一个仓库。这张试卷m就是主分支（branch main），试卷a、b、c就是另外三个子分支。老师安排A同学做选择题，B同学做填空题，C做大题，在A做完选择题后，他将卷子交给老师（这叫提交合并请求），老师看了之后觉得没问题，就把A的答案誊抄到空白卷m上（这叫合并），B做完填空题后，手比较痒，就另外做了选择题，他也把卷子交给老师，老师看了之后，发现B的选择题答案和A的不一样（这叫产生了冲突），老师经过仔细判断之后发现A写的是对的，就保留A的选择题答案，忽略B的选择题答案（这叫解决冲突），然后将B的填空题合并上去。C做完大题之后交给老师，老师经过审核发现没有冲突的地方，因此也把C的试卷合并到m中。

我们可以得出以下结论：

  1. 总有人来扮演老师的角色，负责审核和解决冲突。
  2. 做题时A、B、C三位协作者可以同时做试卷，不受其他人影响。

常见的协作平台​

平台名称说明网址
Github代码托管、版本控制界老大哥，千万以上开发者活跃的开源平台，很多知名框架和软件如react、vue、vscode都在上面开发维护。但是由于一些不可描述的原因，处于“半墙”状态。github.com
Gitee国内的代码托管平台，和Github功能很像，但是目前越来越收紧开源政策了。gitee.com
开源中国在国内程序员圈子里名气最大的开源技术社区，程序员社区，提供了技术、学习、开发、甚至职业发展的各种互动，收录超过两万款开源软件。http://oschina.net
微信代码管理微信开发者的工程托管平台，配套微信开发工具，对小程序之类的工程很友好。https://git.weixin.qq.com/

了解了上面的，那我们就开始吧！本文将结合Github讲解协作部署的全过程。

注册Github​

首先，Github处于“半墙”状态，看它主页你就知道为什么了...因此你很可能无法访问，那么你需要一个boost或者ladder。
搞定ladder之后，进入Github，选择注册，按照流程来就可以。
注册Github详细操作

下载Github Desktop​

我个人更加倾向于使用图形界面而不是一个黑色的字很小的命令窗口。因此这里会用Github Desktop作为版本控制工具。当然，Git也是程序员必备的技能之一，建议学一学。可参考git教程
在上面注册完毕之后，访问Github Desktop并安装到桌面。

创建仓库​

tip

工程管理者需要建立仓库

在Github中，点击右上角的“+”，选择“New repository”。
1654389739458.png 取一个名字，并将仓库设为public，勾选生成README.md文件。
1654389808112.png 点击“Create repository”。其他不用管。
1654389869019.png 如下，就建好了。
image.png

添加协作成员​

tip

工程管理者需要添加协作成员

打开仓库界面，选择settings。
1656413883660.png
点击“Add People”。
image.png
按照提示输入对方相关信息，发送请求即可。
image.png
成功添加如图所示：
image.png

接受协作请求​

tip

协作者需要接受请求

打开Github主页，在头像下拉栏找到消息通知。
1656414252719.png 点击Join，即可加入。
1656414334382.png
加入成功如图所示：
1656414500841.png

克隆仓库​

打开下载好的Github Desktop，点击选择File-clone。
1656415054414.png
选择URL，填写仓库的地址。
image.png
在仓库的主页进行获取。
1656415176555.png
创建本地的空文件夹。
1656415235319.png
image.png
image.png
然后点击克隆。
克隆过程：
image.png
克隆成功后在相应的文件夹可以找到源代码了。
image.png
用vscode打开这个文件夹就可以开始修改了。
image.png
image.png
打开之后如图。
image.png

添加分支​

在管理员的仓库中，新建自己的分支。如下：
1656417137267.png
创建成功：
1656417227576.png

安装依赖​

caution

这要求你的电脑必须安装了nodejs。计算机网络课程设计中已经安装了它。

在上传时，由于依赖往往较大，所以都会被忽略掉，gitignore就记录了这些需要忽略的文件。
image.png
那么在下面打开终端。
image.png
输入安装依赖指令。 

npm install

1656415849790.png

caution

注意，npm安装时可能也需要打开ladder。

安装过程：
image.png

测试​

完成上面的操作之后即可进行代码测试了。这里以vue的工程为例，在终端中输入： 

npm run dev

如后在本地的环回地址在浏览器中打开。 

localhost:8081

image.png

Push代码​

先进行代码Pull，先切换为main分支进行Pull。
image.png

caution

在每次你要开始写代码之前先进行Pull！不然冲突等着你呢！
先Pull再Push！
先Pull再Push！
先Pull再Push！

进行Pull：
1656417485616.png
在完成源代码编写之后，即可上传代码了。
打开Github Desktop，即可看到修改后的文件。
1656416948782.png
中间是前后对比。
在左下角添加提交评论。
1656417345022.png
推送到你自己的分支：
image.png
点击Push。
1656417643177.png
Push完成后到管理员仓库自己的分支下，查看Push结果。如果这里的评论和你填写的评论一致，说明已经推送成功了。
1656417778838.png

请求合并​

image.png
仓库主页会提示你进行合并，点击合并即可。
image.png
写一下评论，点击提交。
image.png
下面即代表提交成功。
image.png
提交完合成后，你可以告诉你的管理员。

审核并合并​

在管理员这边即可审核并合并：
image.png

info

若还有不详细的地方，后续补充。