语言前端模板开发指南

Go 语言前端模板开发指南

Go 写前端模板**确实还是用 HTML 和 CSS**，但 Go 有自己的一套**模板语法**，用来把后端数据"填"进 HTML 里。

---

一、Go 写前端模板的核心思路

HTML + CSS 负责结构和样式，Go 模板负责"动态数据"

Go 标准库自带两个模板包：

• text/template：纯文本模板

• html/template ✅（**写前端必用**，自动防 XSS）

---

二、最简单的 Go 模板示例

1️⃣ 目录结构

text

project/

├── main.go

└── templates/

└── index.html

---

2️⃣ HTML 模板（templates/index.html）

html

Hello {{ .Name }}

• {{ range .Items }}
• {{ . }}
• {{ end }}

---

3️⃣ Go 后端代码（main.go）

go

package main

import (

"html/template"

"net/http"

)

type PageData struct {

Title string

Name string

Items []string

}

func index(w http.ResponseWriter, r *http.Request) {

data := PageData{

Title: "Go 模板示例",

Name: "张三",

Items: []string{"Go", "HTML", "CSS"},

}

t, _ := template.ParseFiles("templates/index.html")

t.Execute(w, data)

}

func main() {

http.HandleFunc("/", index)

http.ListenAndServe(":8080", nil)

}

运行：---

三、Go 模板常用语法速查

| 功能 | 写法 |

|------|------|

| 输出变量 | {{ .Name }} |

| 条件判断 | {{ if .Show }}...{{ end }} |

| 循环 | {{ range .List }}...{{ end }} |

| 引入子模板 | {{ template "header" }} |

| 防 XSS | ✅ html/template 自动处理 |

---

四、Go 模板 ≠ 前端框架

| 对比 | Go 模板 | Vue / React |

|------|---------|-------------|

| 渲染位置 | 后端 | 浏览器 |

| 交互能力 | 弱 | 强 |

| SEO | ✅ 好 | ❌ 需要 SSR |

| 适合场景 | 后台 / 官网 | 单页应用 |

👉 Go 模板适合：

• 后台管理系统

• 官网

• 博客

• 管理后台

👉 不适合：

• 强交互 SPA（那就用 Vue / React）

---

五、常见搭配方案

✅ 传统后端渲染（你问的这种）