321 lines
6.8 KiB
Markdown
321 lines
6.8 KiB
Markdown
# 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修复、团队协作和版本管理。 |