# Git 实际案例:开发一个简单的待办事项应用 ## 场景描述 假设您正在开发一个待办事项Web应用,需要添加新功能、修复bug,并与团队协作。 ## 案例步骤演示 ### 1. 项目初始化 ```bash # 创建项目目录 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. 开发新功能 - 添加待办事项 ```bash # 创建功能分支 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. 继续开发 - 添加完成功能 ```bash # 继续在同一分支开发 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 ```bash # 在开发过程中发现一个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. 合并功能分支 ```bash # 切换到主分支 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. 处理合并冲突示例 ```bash # 假设出现冲突,文件内容会显示: # <<<<<<< 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. 与远程仓库同步 ```bash # 添加远程仓库(假设已在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. 团队协作场景 ```bash # 拉取其他开发者的更新 git fetch origin # 查看远程分支 git branch -r # 拉取并合并远程变更 git pull origin main # 如果有冲突,解决后继续 git add . git commit -m "合并远程变更" ``` ### 9. 版本标记 ```bash # 创建版本标签 git tag -a v1.0 -m "第一个稳定版本" # 查看标签 git tag # 推送标签到远程 git push origin v1.0 ``` ### 10. 紧急修复场景 ```bash # 在生产环境发现紧急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. 历史记录管理 ```bash # 查看详细历史 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. 撤销操作示例 ```bash # 撤销工作区变更 git checkout -- app.js # 撤销暂存的变更 git reset HEAD app.js # 撤销最后一次提交(保留变更) git reset --soft HEAD~1 # 修改最后一次提交信息 git commit --amend -m "新的提交信息" # 创建反向提交来撤销某个提交 git revert a1b2c3d ``` ### 13. 清理和维护 ```bash # 删除已合并的分支 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修复、团队协作和版本管理。