notes/git-example.md

Git 实际案例：开发一个简单的待办事项应用

场景描述

假设您正在开发一个待办事项Web应用，需要添加新功能、修复bug，并与团队协作。

案例步骤演示

1. 项目初始化

# 创建项目目录
mkdir todo-app
cd todo-app

# 初始化Git仓库
git init

# 创建初始文件
echo "# 待办事项应用" > README.md
echo "console.log('Hello Todo App!');" > app.js
echo "body { font-family: Arial; }" > style.css

# 查看状态
git status
# 输出：
# On branch main
# Untracked files:
#   README.md
#   app.js
#   style.css

# 添加所有文件到暂存区
git add .

# 提交初始版本
git commit -m "初始化项目：添加基础文件"

2. 开发新功能 - 添加待办事项

# 创建功能分支
git checkout -b feature/add-todo

# 修改app.js添加功能
cat > app.js << 'EOF'
// 待办事项数组
let todos = [];

// 添加待办事项
function addTodo(text) {
    const todo = {
        id: Date.now(),
        text: text,
        completed: false
    };
    todos.push(todo);
    console.log('添加待办事项:', text);
}

// 显示所有待办事项
function showTodos() {
    console.log('当前待办事项:');
    todos.forEach(todo => {
        console.log(`${todo.id}: ${todo.text} [${todo.completed ? '完成' : '未完成'}]`);
    });
}

// 测试
addTodo('学习Git');
addTodo('完成项目');
showTodos();
EOF

# 查看变更
git diff
# 显示详细的文件变更差异

# 添加并提交变更
git add app.js
git commit -m "功能：添加待办事项的增加和显示功能"

3. 继续开发 - 添加完成功能

# 继续在同一分支开发
cat >> app.js << 'EOF'

// 标记待办事项为完成
function completeTodo(id) {
    const todo = todos.find(t => t.id === id);
    if (todo) {
        todo.completed = true;
        console.log('已完成:', todo.text);
    }
}

// 删除待办事项
function deleteTodo(id) {
    const index = todos.findIndex(t => t.id === id);
    if (index > -1) {
        const deleted = todos.splice(index, 1)[0];
        console.log('已删除:', deleted.text);
    }
}
EOF

# 提交新功能
git add app.js
git commit -m "功能：添加完成和删除待办事项功能"

# 查看提交历史
git log --oneline
# 输出类似：
# a1b2c3d 功能：添加完成和删除待办事项功能
# e4f5g6h 功能：添加待办事项的增加和显示功能
# i7j8k9l 初始化项目：添加基础文件

4. 发现并修复bug

# 在开发过程中发现一个bug，创建修复分支
git checkout main
git checkout -b bugfix/empty-todo-validation

# 修复：不允许添加空的待办事项
sed -i '4i\\n// 验证输入不为空\nif (!text || text.trim() === "") {\n    console.log("错误：待办事项不能为空");\n    return;\n}' app.js

# 查看修改
git diff

# 提交修复
git add app.js
git commit -m "修复：防止添加空的待办事项"

5. 合并功能分支

# 切换到主分支
git checkout main

# 合并功能分支
git merge feature/add-todo
# 输出：
# Updating i7j8k9l..a1b2c3d
# Fast-forward
#  app.js | 30 ++++++++++++++++++++++++++++++
#  1 file changed, 30 insertions(+)

# 合并bug修复分支
git merge bugfix/empty-todo-validation

# 如果有冲突，需要手动解决
# 查看状态
git status

# 手动编辑冲突文件后
git add app.js
git commit -m "合并：解决合并冲突"

6. 处理合并冲突示例

# 假设出现冲突，文件内容会显示：
# <<<<<<< HEAD
# function addTodo(text) {
#     const todo = {
# =======
# function addTodo(text) {
#     // 验证输入不为空
#     if (!text || text.trim() === "") {
#         console.log("错误：待办事项不能为空");
#         return;
#     }
#     const todo = {
# >>>>>>> bugfix/empty-todo-validation

# 手动解决冲突，保留所需的代码
# 删除冲突标记，保留完整功能

# 解决后添加文件
git add app.js
git commit -m "解决合并冲突：保留输入验证功能"

7. 与远程仓库同步

# 添加远程仓库（假设已在GitHub创建）
git remote add origin https://github.com/username/todo-app.git

# 推送主分支
git push -u origin main

# 推送所有分支
git push origin --all

# 查看远程仓库
git remote -v

8. 团队协作场景

# 拉取其他开发者的更新
git fetch origin

# 查看远程分支
git branch -r

# 拉取并合并远程变更
git pull origin main

# 如果有冲突，解决后继续
git add .
git commit -m "合并远程变更"

9. 版本标记

# 创建版本标签
git tag -a v1.0 -m "第一个稳定版本"

# 查看标签
git tag

# 推送标签到远程
git push origin v1.0

10. 紧急修复场景

# 在生产环境发现紧急bug
git checkout main
git checkout -b hotfix/urgent-fix

# 快速修复
echo "// 紧急修复：修复显示问题" >> app.js

# 提交修复
git add app.js
git commit -m "紧急修复：解决生产环境显示问题"

# 合并到主分支
git checkout main
git merge hotfix/urgent-fix

# 立即部署
git push origin main

# 也合并到开发分支（如果存在）
git checkout develop
git merge hotfix/urgent-fix

11. 历史记录管理

# 查看详细历史
git log --graph --pretty=format:'%h -%d %s (%cr) <%an>' --abbrev-commit

# 查看文件变更历史
git log -p app.js

# 查看特定时间的提交
git log --since="2 weeks ago"

# 查找特定内容的提交
git log --grep="修复"

# 查看某个文件的责任人
git blame app.js

12. 撤销操作示例

# 撤销工作区变更
git checkout -- app.js

# 撤销暂存的变更
git reset HEAD app.js

# 撤销最后一次提交（保留变更）
git reset --soft HEAD~1

# 修改最后一次提交信息
git commit --amend -m "新的提交信息"

# 创建反向提交来撤销某个提交
git revert a1b2c3d

13. 清理和维护

# 删除已合并的分支
git branch -d feature/add-todo
git branch -d bugfix/empty-todo-validation

# 清理远程跟踪分支
git remote prune origin

# 查看分支合并状态
git branch --merged
git branch --no-merged

完整的工作流程总结

1. 开始新功能: git checkout -b feature/功能名
2. 开发和提交: git add → git commit
3. 切换到主分支: git checkout main
4. 合并功能: git merge feature/功能名
5. 推送更新: git push origin main
6. 清理分支: git branch -d feature/功能名

实际项目文件结构

todo-app/
├── .git/                 # Git仓库数据
├── README.md            # 项目说明
├── app.js               # 主要逻辑
├── style.css            # 样式文件
└── index.html           # HTML文件（后续添加）

这个案例展示了Git在实际开发中的完整使用流程，包括功能开发、bug修复、团队协作和版本管理。