Git工作流程实战：开发用户登录功能全记录

Git工作流程实战：开发用户登录功能全记录

本实战将模拟团队开发场景，演示从功能开发到代码合并的全过程。我们将以「用户登录页面开发」为例，完整走通Git标准工作流程。

---

场景设定

• 项目仓库：https://github.com/team-project/auth-system
• 任务目标：在main分支基础上开发登录页面
• 开发周期：1天

---

完整操作流程

步骤1：克隆仓库

git clone https://github.com/team-project/auth-system.git
cd auth-system

步骤2：创建功能分支

git checkout -b feature-login-page  # 创建并切换分支
git branch  # 确认当前分支显示为* feature-login-page

步骤3：开发功能

# 创建登录页面文件
touch login.html login.css  

# 编辑文件（模拟开发）
echo '


  


  
...

' > login.html

echo '.login-box { 
  width: 300px; 
  margin: auto; 
}' > login.css

步骤4：提交代码

git add .  # 暂存所有新文件
git commit -m "feat: 创建登录页面基础结构"  # 语义化提交信息

# 继续开发后二次提交
echo '// 新增表单验证逻辑' >> login.js  
git add login.js
git commit -m "feat: 添加表单验证功能"

步骤5：处理远程更新

# 假设此时同事已更新main分支
git fetch origin  # 获取远程变更
git merge origin/main  # 合并最新代码

# 若出现冲突，解决后执行：
git add .
git commit -m "fix: 解决与main分支的CSS冲突"

步骤6：推送分支

git push -u origin feature-login-page  # 首次推送需设置上游分支

步骤7：创建Pull Request

1. 访问GitHub仓库页面
2. 点击 “Compare & pull request”
3. 填写PR描述：

   ## 变更内容  
   - 新增登录页面HTML/CSS结构  
   - 实现前端表单验证  
   ## 测试说明  
   已通过Chrome/Firefox兼容性测试

4. @团队成员进行Code Review

步骤8：处理评审意见

# 根据反馈修改代码
echo '/* 修复移动端布局问题 */' >> login.css  

# 提交修改
git add login.css
git commit --amend  # 合并到上次提交
git push -f  # 强制更新远程分支

步骤9：合并到主分支

git checkout main
git pull origin main  # 确保本地最新
git merge feature-login-page  # 合并功能
git push origin main  # 部署到生产环境

步骤10：清理分支

git branch -d feature-login-page  # 删除本地分支
git push origin --delete feature-login-page  # 删除远程分支

---

常见问题处理指南

问题1：误提交大文件

# 从历史记录中彻底删除文件
git filter-branch --tree-filter 'rm -f bigfile.zip' HEAD  

# 强制推送到远程
git push origin main --force

问题2：代码回退

# 查看提交历史
git log --oneline  

# 回退到指定版本
git reset --hard a1b2c3d  
git push -f  # 仅限个人分支使用！

问题3：紧急修复生产问题

git checkout main  
git pull origin main  
git checkout -b hotfix-login-error  # 创建热修复分支
# 进行修复并提交...
git push origin hotfix-login-error

---

可视化操作辅助

使用git log查看提交图谱：

git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

输出示例：

*   fe45dc0 - (HEAD -> main) Merge pull request #32 (2 hours ago) 
|\  
| * 82ab1fe - feat: 添加表单验证功能 (3 hours ago) 
| * bc23d41 - feat: 创建登录页面基础结构 (5 hours ago) 
|/  
* e9f2a3d - init: 项目初始化 (1 day ago) 

---

通过这个完整案例，您已经掌握了：

1. 功能分支开发的标准流程
2. 多分支协同工作模式
3. 代码冲突的预防与解决
4. PR评审与代码优化技巧
5. 生产环境紧急修复方法

建议在本地搭建测试仓库实操练习，后续可结合CI/CD工具实现自动化测试与部署，进一步提升开发效率。