Golang留言板开发：留言提交与显示教程

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《Golang开发留言板教程：留言提交与显示实现》，这篇文章主要讲到等等知识，如果你对Golang相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

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

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;
});