编程马·菜鸟教程

Appearance

第9章：基础实战项目 ​

实战 1：个人项目版本控制 ​

9.1 项目初始化 ​

操作步骤：

  1. 创建项目目录

    bash
    mkdir personal-project
cd personal-project

  2. 初始化 Git 仓库

    bash
    git init

  3. 配置 .gitignore 文件

    bash
    # 创建 .gitignore 文件
touch .gitignore

# 编辑 .gitignore 文件，添加以下内容
echo "# 依赖目录" >> .gitignore
echo "node_modules/" >> .gitignore
echo "" >> .gitignore
echo "# 构建产物" >> .gitignore
echo "build/" >> .gitignore
echo "dist/" >> .gitignore
echo "" >> .gitignore
echo "# 环境变量文件" >> .gitignore
echo ".env" >> .gitignore
echo ".env.local" >> .gitignore
echo "" >> .gitignore
echo "# 编辑器配置文件" >> .gitignore
echo ".vscode/" >> .gitignore
echo ".idea/" >> .gitignore
echo "*.swp" >> .gitignore
echo "*.swo" >> .gitignore
echo "" >> .gitignore
echo "# 操作系统文件" >> .gitignore
echo ".DS_Store" >> .gitignore
echo "Thumbs.db" >> .gitignore

  4. 创建初始文件

    bash
    # 创建 README.md 文件
echo "# 个人项目" > README.md

# 创建 index.html 文件
echo "<!DOCTYPE html>" > index.html
echo "<html>" >> index.html
echo "<head>" >> index.html
echo "  <title>个人项目</title>" >> index.html
echo "</head>" >> index.html
echo "<body>" >> index.html
echo "  <h1>Hello, Git!</h1>" >> index.html
echo "</body>" >> index.html
echo "</html>" >> index.html

  5. 首次提交

    bash
    git add .
git commit -m "Initial commit"

9.2 代码开发与提交 ​

操作步骤：

  1. 修改 index.html 文件

    bash
    # 编辑 index.html 文件，添加一些内容
echo "<!DOCTYPE html>" > index.html
echo "<html>" >> index.html
echo "<head>" >> index.html
echo "  <title>个人项目</title>" >> index.html
echo "  <style>" >> index.html
echo "    body { font-family: Arial, sans-serif; margin: 40px; }" >> index.html
echo "    h1 { color: #333; }" >> index.html
echo "    p { color: #666; }" >> index.html
echo "  </style>" >> index.html
echo "</head>" >> index.html
echo "<body>" >> index.html
echo "  <h1>Hello, Git!</h1>" >> index.html
echo "  <p>这是一个使用 Git 管理的个人项目。</p>" >> index.html
echo "</body>" >> index.html
echo "</html>" >> index.html

  2. 提交修改

    bash
    git add index.html
git commit -m "Add styles and content to index.html"

  3. 创建新文件

    bash
    # 创建 script.js 文件
echo "// JavaScript 代码" > script.js
echo "console.log('Hello, Git!');" >> script.js
echo "" >> script.js
echo "function greet() {" >> script.js
echo "  alert('Welcome to Git!');" >> script.js
echo "}" >> script.js

  4. 提交新文件

    bash
    git add script.js
git commit -m "Add script.js file"

  5. 更新 index.html 文件，引入 script.js

    bash
    # 编辑 index.html 文件
echo "<!DOCTYPE html>" > index.html
echo "<html>" >> index.html
echo "<head>" >> index.html
echo "  <title>个人项目</title>" >> index.html
echo "  <style>" >> index.html
echo "    body { font-family: Arial, sans-serif; margin: 40px; }" >> index.html
echo "    h1 { color: #333; }" >> index.html
echo "    p { color: #666; }" >> index.html
echo "    button { padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; }" >> index.html
echo "    button:hover { background-color: #2980b9; }" >> index.html
echo "  </style>" >> index.html
echo "</head>" >> index.html
echo "<body>" >> index.html
echo "  <h1>Hello, Git!</h1>" >> index.html
echo "  <p>这是一个使用 Git 管理的个人项目。</p>" >> index.html
echo "  <button onclick='greet()'>点击问候</button>" >> index.html
echo "  <script src='script.js'></script>" >> index.html
echo "</body>" >> index.html
echo "</html>" >> index.html

  6. 提交修改

    bash
    git add index.html
git commit -m "Add button and integrate script.js"

  7. 查看提交记录

    bash
    git log --oneline

9.3 版本回溯与撤销操作 ​

操作步骤：

  1. 查看提交记录

    bash
    git log --oneline

  2. 回退到上一个版本

    bash
    git reset --hard HEAD~

  3. 查看文件内容

    bash
    cat index.html
cat script.js

  4. 回到最新版本

    bash
    # 查看所有提交记录（包括被回退的）
git reflog

# 回到最新版本
git reset --hard <最新版本的哈希值>

  5. 撤销工作区修改

    bash
    # 修改 index.html 文件
echo "<!DOCTYPE html>" > index.html
echo "<html>" >> index.html
echo "<head>" >> index.html
echo "  <title>个人项目</title>" >> index.html
echo "</head>" >> index.html
echo "<body>" >> index.html
echo "  <h1>Hello, Git!</h1>" >> index.html
echo "</body>" >> index.html
echo "</html>" >> index.html

# 查看状态
git status

# 撤销修改
git checkout -- index.html

# 查看文件内容
cat index.html

9.4 分支开发 ​

操作步骤：

  1. 创建功能分支

    bash
    git checkout -b feature/contact-form

  2. 开发新功能

    bash
    # 创建 contact.html 文件
echo "<!DOCTYPE html>" > contact.html
echo "<html>" >> contact.html
echo "<head>" >> contact.html
echo "  <title>联系我们</title>" >> contact.html
echo "  <style>" >> contact.html
echo "    body { font-family: Arial, sans-serif; margin: 40px; }" >> contact.html
echo "    h1 { color: #333; }" >> contact.html
echo "    form { max-width: 400px; }" >> contact.html
echo "    input, textarea { width: 100%; padding: 10px; margin: 5px 0; }" >> contact.html
echo "    button { padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; }" >> contact.html
echo "  </style>" >> contact.html
echo "</head>" >> contact.html
echo "<body>" >> contact.html
echo "  <h1>联系我们</h1>" >> contact.html
echo "  <form>" >> contact.html
echo "    <input type='text' placeholder='姓名' required>" >> contact.html
echo "    <input type='email' placeholder='邮箱' required>" >> contact.html
echo "    <textarea placeholder='留言' rows='4' required></textarea>" >> contact.html
echo "    <button type='submit'>提交</button>" >> contact.html
echo "  </form>" >> contact.html
echo "</body>" >> contact.html
echo "</html>" >> contact.html

  3. 更新 index.html 文件，添加链接到联系页面

    bash
    # 编辑 index.html 文件
echo "<!DOCTYPE html>" > index.html
echo "<html>" >> index.html
echo "<head>" >> index.html
echo "  <title>个人项目</title>" >> index.html
echo "  <style>" >> index.html
echo "    body { font-family: Arial, sans-serif; margin: 40px; }" >> index.html
echo "    h1 { color: #333; }" >> index.html
echo "    p { color: #666; }" >> index.html
echo "    button { padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; }" >> index.html
echo "    button:hover { background-color: #2980b9; }" >> index.html
echo "    a { color: #3498db; text-decoration: none; }" >> index.html
echo "    a:hover { text-decoration: underline; }" >> index.html
echo "  </style>" >> index.html
echo "</head>" >> index.html
echo "<body>" >> index.html
echo "  <h1>Hello, Git!</h1>" >> index.html
echo "  <p>这是一个使用 Git 管理的个人项目。</p>" >> index.html
echo "  <button onclick='greet()'>点击问候</button>" >> index.html
echo "  <p><a href='contact.html'>联系我们</a></p>" >> index.html
echo "  <script src='script.js'></script>" >> index.html
echo "</body>" >> index.html
echo "</html>" >> index.html

  4. 提交修改

    bash
    git add .
git commit -m "Add contact form and link"

  5. 切换回 main 分支

    bash
    git checkout main

  6. 合并功能分支

    bash
    git merge feature/contact-form

  7. 删除功能分支

    bash
    git branch -d feature/contact-form

9.5 推送至远程仓库 ​

操作步骤：

  1. 在 GitHub/Gitee 上创建远程仓库

    • 登录 GitHub/Gitee
    • 创建一个名为 "personal-project" 的仓库

  2. 关联本地仓库与远程仓库

    bash
    git remote add origin https://github.com/username/personal-project.git

  3. 推送代码到远程仓库

    bash
    git push -u origin main

  4. 验证推送结果

    • 登录 GitHub/Gitee，查看仓库页面，确认代码已推送

实战 2：双人协作项目 ​

9.6 远程仓库创建与权限分配 ​

操作步骤：

  1. 创建远程仓库

    • 登录 GitHub/Gitee
    • 创建一个名为 "collaborative-project" 的仓库
    • 勾选 "Initialize this repository with a README"

  2. 添加协作者

    • 进入仓库页面
    • 点击 "Settings" 标签（GitHub）或 "管理" 标签（Gitee）
    • 点击 "Manage access"（GitHub）或 "仓库成员管理"（Gitee）
    • 点击 "Invite a collaborator"（GitHub）或 "添加成员"（Gitee）
    • 输入协作者的 GitHub/Gitee 用户名或邮箱
    • 选择权限级别（Read、Write、Admin）
    • 点击 "Add" 按钮

  3. 协作者接受邀请

    • 协作者登录 GitHub/Gitee
    • 查看邮箱或通知
    • 接受邀请

9.7 两人分别克隆仓库、创建分支开发 ​

操作步骤：

开发者 A：

  1. 克隆远程仓库

    bash
    git clone https://github.com/username/collaborative-project.git
cd collaborative-project

  2. 创建功能分支

    bash
    git checkout -b feature/developer-a

  3. 开发代码

    bash
    # 修改 README.md 文件
echo "# 协作项目" > README.md
echo "" >> README.md
echo "这是一个双人协作的 Git 项目。" >> README.md
echo "" >> README.md
echo "## 开发者 A 的贡献" >> README.md
echo "- 添加了项目介绍" >> README.md

  4. 提交修改

    bash
    git add README.md
git commit -m "Add project introduction"

  5. 推送到远程仓库

    bash
    git push -u origin feature/developer-a

开发者 B：

  1. 克隆远程仓库

    bash
    git clone https://github.com/username/collaborative-project.git
cd collaborative-project

  2. 创建功能分支

    bash
    git checkout -b feature/developer-b

  3. 开发代码

    bash
    # 创建 index.html 文件
echo "<!DOCTYPE html>" > index.html
echo "<html>" >> index.html
echo "<head>" >> index.html
echo "  <title>协作项目</title>" >> index.html
echo "</head>" >> index.html
echo "<body>" >> index.html
echo "  <h1>协作项目</h1>" >> index.html
echo "  <p>这是一个双人协作的 Git 项目。</p>" >> index.html
echo "  <p>开发者 B 负责前端页面。</p>" >> index.html
echo "</body>" >> index.html
echo "</html>" >> index.html

  4. 提交修改

    bash
    git add index.html
git commit -m "Add index.html file"

  5. 推送到远程仓库

    bash
    git push -u origin feature/developer-b

9.8 推送代码、拉取代码，解决合并冲突 ​

操作步骤：

开发者 A：

  1. 拉取远程仓库的最新代码

    bash
    git checkout main
git pull

  2. 合并开发者 B 的分支

    bash
    git merge feature/developer-b

  3. 解决合并冲突（如果有）

    • 编辑冲突文件
    • 标记冲突已解决
    • 提交解决方案

  4. 推送合并结果

    bash
    git push origin main

开发者 B：

  1. 拉取远程仓库的最新代码

    bash
    git checkout main
git pull

  2. 合并开发者 A 的分支

    bash
    git merge feature/developer-a

  3. 解决合并冲突（如果有）

    • 编辑冲突文件
    • 标记冲突已解决
    • 提交解决方案

  4. 推送合并结果

    bash
    git push origin main

9.9 提交合并请求、审核并合并代码 ​

操作步骤：

开发者 A：

  1. 创建 Pull Request
    • 登录 GitHub/Gitee
    • 进入仓库页面
    • 点击 "Pull requests" 标签
    • 点击 "New pull request" 按钮
    • 选择 base 分支为 main，compare 分支为 feature/developer-a
    • 填写 PR 标题和描述
    • 点击 "Create pull request" 按钮

开发者 B：

  1. 审查 Pull Request
    • 登录 GitHub/Gitee
    • 进入仓库页面
    • 点击 "Pull requests" 标签
    • 点击开发者 A 创建的 Pull Request
    • 审查代码
    • 提出修改意见（如果有）
    • 点击 "Merge pull request" 按钮（如果代码通过审查）

开发者 B：

  1. 创建 Pull Request
    • 登录 GitHub/Gitee
    • 进入仓库页面
    • 点击 "Pull requests" 标签
    • 点击 "New pull request" 按钮
    • 选择 base 分支为 main，compare 分支为 feature/developer-b
    • 填写 PR 标题和描述
    • 点击 "Create pull request" 按钮

开发者 A：

  1. 审查 Pull Request

    • 登录 GitHub/Gitee
    • 进入仓库页面
    • 点击 "Pull requests" 标签
    • 点击开发者 B 创建的 Pull Request
    • 审查代码
    • 提出修改意见（如果有）
    • 点击 "Merge pull request" 按钮（如果代码通过审查）

  2. 删除已合并的分支

    bash
    git branch -d feature/developer-a feature/developer-b
git push origin --delete feature/developer-a feature/developer-b

通过本章的学习，你已经完成了个人项目和双人协作项目的实战练习。这些实战案例帮助你巩固了 Git 的核心操作，包括项目初始化、代码提交、版本回溯、分支管理、远程仓库操作和团队协作流程。接下来，我们将学习企业级实战项目。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建