Spring Boot项目中前后端协作流程如何规范组织？

1. 约定Thymeleaf标签嵌入规则 #

• 前端交付HTML时，提前在需要动态处理的位置预留模板占位注释，比如<!-- th:replace="fragments/header :: header" -->，后端直接将注释替换为真实Thymeleaf标签，不改动原有HTML的结构、class及样式关联代码。
• 动态数据绑定（如th:text、th:each）仅添加到前端已标记的元素上，比如前端给出<span class="username">用户名</span>，后端仅修改为<span class="username" th:text="${user.name}">用户名</span>，不触碰样式相关属性。

2. 采用Thymeleaf片段化拆分 #

• 把页眉、页脚、导航栏等公共组件抽成独立的Thymeleaf片段文件，前端无需修改这些公共部分，仅专注页面主体的HTML结构与样式。
• 页面主体区域，后端仅在需要动态渲染的容器上添加标签，比如前端写好的列表容器，后端仅给<ul>加上th:each="item : ${list}"，内部<li>的结构完全保留前端代码，仅给<li>内的元素添加动态绑定。

3. 利用Thymeleaf原生HTML兼容性 #

• Thymeleaf支持原生HTML直接预览，前端无需删除Thymeleaf标签，直接打开本地HTML文件就能查看静态布局效果；若需调整布局，直接在已添加Thymeleaf标签的文件上修改即可。
• 后端启动本地服务后，前端也可直接访问查看动态渲染效果，无需额外环境配置。

4. 制定Git协作流程 #

• 前端和后端共用代码仓库，在功能分支上协作：前端修改布局后提交，后端拉取代码仅维护动态标签部分，不覆盖前端的样式与结构代码。
• 约定提交规范：前端提交用feat: 调整XX页面布局，后端提交用fix: 绑定XX页面动态数据，便于冲突时快速分辨代码归属。

5. 明确样式与逻辑的职责边界 #

• 禁止后端用Thymeleaf修改布局类属性，样式完全由前端控制；若需动态切换样式，前端提前定义好状态class，后端仅通过th:classappend添加对应class，比如<div class="card" th:classappend="${isActive} ? 'active' : ''">。

内容的提问来源于stack exchange，提问作者Skelorc