本文探讨了使用HTMX构建多步表单时的基础挑战,并逐步解决这些问题。
主要内容概述
作者以构建一个“原声带上传器”多步表单为例,展示了在HTMX中实现基本功能时遇到的两个核心问题及其解决方案。
问题一:高亮当前步骤
最初实现只替换了表单本身,导致左侧的步骤指示器无法高亮当前步骤。
解决方案:需要替换整个父容器(Stepper组件),而不仅是表单。让后端返回整个新的Stepper组件,而非单独的表单。
问题二:跨步骤传递数据
需要将在第一步填写的数据(如乐器名称)传递到后续步骤。
解决方案:采用服务器端会话管理。
- 用户访问初始页面时,创建唯一的
FormSession并生成ID。
- 每个步骤的表单包含一个隐藏的
input字段,用于传递sessionId。
- 每个步骤的后端处理器读取
sessionId,更新对应的会话数据,然后返回下一个步骤的表单(包含相同的sessionId)。
- 在第四步(审阅步骤)中,可以从会话中获取并显示所有收集的数据。
实现细节
- 技术栈:Go后端 + HTMX前端 + templ模板语言。
- 数据流:
- 初始请求创建
FormSession,ID通过隐藏字段传递。
- 每个表单提交时,后端验证数据、更新会话,并返回下一步的表单。
- 后续步骤可通过会话访问之前步骤的数据。
- 示例:在第二步中显示第一步输入的名称,只需将数据从后端传递给模板并渲染。
文章定位
作者强调,本文旨在展示HTMX在某些场景下比传统框架更复杂,并非批评HTMX。本文建立了基础架构,后续文章将探讨更复杂的挑战(如S3预签名上传、分块上传、加速上传等)。