Golang留言板实现：留言提交与显示教程

本文深入剖析了使用 Go 语言开发前后端分离式留言板的核心实践，聚焦于留言提交与显示这一关键闭环：后端通过 net/http 构建带严格校验（非空、长度限制、HTML 转义防 XSS）的 JSON API，并强调 ParseForm 的必要性与响应头设置；前端借助 fetch 实现无刷新提交与动态渲染，配合 html/template 安全渲染列表，清晰划分转义责任（后端存储前转义 + 模板默认转义）、时间格式控制（模板内灵活截取）和错误处理边界；文章直击初学者常见误区——如混淆转义时机、硬拼 HTML 引发安全风险、忽略重复提交防护等，倡导“先跑通再迭代”的务实路径，为后续接入数据库、鉴权与分页打下坚实、安全、可扩展的基础。

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 节点插入到

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 = `${data.created} ${data.content}`;
		document.getElementById('msg-list').prepend(item);
		input.value = '';
	}
	btn.disabled = false;
});

惊蛰无声购票攻略：云闪付工行建行立减

上一篇

惊蛰无声购票攻略：云闪付工行建行立减

下一篇

JavaMap.replace使用技巧与示例