Notes
Git & GitHub
git 和 github 使用指南

git 和 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

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

下载Github Desktop

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

创建仓库

:::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 若还有不详细的地方,后续补充。 :::