Go留言板需前后端分离：后端用net/http实现带校验的提交API（含ParseForm、长度限制、html.EscapeString转义、JSON响应），前端用fetch动态渲染，模板用html/template自动转义，核心是明确转义责任、时间格式控制和错误处理边界。
Go 语言本身不直接处理前端渲染，留言提交与显示必须拆解为「后端 API 接口」和「前端页面交互」两部分；强行用 net/http 拼 HTML 模板虽能跑通，但很快会陷入路由混乱、XSS 漏洞、表单重复提交等实际问题。
用 net/http 实现留言提交接口（带基础校验）
核心是接收 POST 表单、验证非空、存入内存切片（开发阶段可接受）、返回 JSON 响应。注意：生产环境必须换数据库，且需加 CSRF 防护。
-
r.ParseForm()必须调用，否则r.FormValue("content")返回空字符串 - 内容长度校验建议限制在
1–500字符，避免恶意长文本拖慢服务 - 务必对用户输入做
html.EscapeString()再存储，否则前端直接innerHTML渲染会触发 XSS - 响应头要显式设置
w.Header().Set("Content-Type", "application/json; charset=utf-8")，否则前端fetch可能解析失败
func submitHandler(w http.ResponseWriter, r *http.Request) {
if r.Method != "POST" {
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
return
}
r.ParseForm()
content := strings.TrimSpace(r.FormValue("content"))
if content == "" || len(content) > 500 {
http.Error(w, "Invalid content", http.StatusBadRequest)
return
}
msg := Message{
ID: len(messages) + 1,
Content: html.EscapeString(content),
Created: time.Now().Format("2006-01-02 15:04"),
}
messages = append(messages, msg)
json.NewEncoder(w).Encode(map[string]interface{}{"ok": true, "id": msg.ID})
}
用 html/template 渲染留言列表（避免手动拼接）
模板文件（如 index.html）里用 {{.}} 或 {{range .}} 渲染数据，Go 后端通过 template.Execute 注入结构体切片。关键点是模板自动转义，比手写 fmt.Sprintf 安全得多。
- 模板中不要写
{{.Content|safe}}除非你 100% 确认内容已过滤——这会绕过默认转义 - 传入模板的数据必须是导出字段（首字母大写），如
Content而非content - 若需时间格式化，在模板中用
{{.Created | printf "%.16s"}}截取，比在 Go 层预格式化更灵活
func indexHandler(w http.ResponseWriter, r *http.Request) {
tmpl, _ := template.ParseFiles("index.html")
tmpl.Execute(w, messages)
}
前端用 fetch 提交并动态追加留言（不刷新页面）
提交成功后，不要重载整个页面，而是用 JavaScript 解析 JSON 响应，生成 DOM 节点插入到 <div id="msg-list"> 底部。重点防重复提交和 UI 反馈。
立即学习“go语言免费学习笔记（深入）”；
- 提交按钮点击后立即
disabled = true，防止连点；响应返回后再恢复 -
fetch的body必须是URLSearchParams或FormData，不能直接传对象字面量 - 服务端返回的
id和created时间必须和后端一致，否则前端时间显示会错乱 - 插入新留言时，用
document.createElement+element.innerHTML是安全的，因为后端已做html.EscapeString
document.getElementById('submit-btn').addEventListener('click', async () => {
const input = document.getElementById('content-input');
const btn = event.target;
btn.disabled = true;
const res = await fetch('/submit', {
method: 'POST',
body: new URLSearchParams({ content: input.value })
});
const data = await res.json();
if (data.ok) {
const item = document.createElement('div');
item.className = 'message';
item.innerHTML = `<span class="time">${data.created}</span> ${data.content}`;
document.getElementById('msg-list').prepend(item);
input.value = '';
}
btn.disabled = false;
});
真正卡住多数人的不是语法，而是没想清楚「谁负责转义」「谁控制时间格式」「错误时前端怎么提示」——这些边界一旦模糊，后续加数据库、分页、登录态就会层层套娃。先用内存存、先跑通端到端流程，再逐个替换组件，比一上来就设计“高可用留言板”实际得多。
