第25讲 Gin的HTML模板渲染

本讲基于视频实际讲解内容整理

一、本讲概述

前面我们一直用 c.JSON 返回接口数据。但要做网站（比如 BBS），需要返回完整的 HTML 页面。本讲讲解 Gin 如何加载和渲染 HTML 模板：从加载模板文件、在 handler 中渲染页面，到向模板传递数据。

二、加载 HTML 模板

2.1 使用 LoadHTMLGlob

Gin 通过 LoadHTMLGlob 一次性加载一批模板文件（支持通配符）：

func main() {
    r := gin.Default()

    // 加载 templates 目录下所有模板
    r.LoadHTMLGlob("templates/*")

    r.GET("/", controller.Index)
    r.Run(":8080")
}

老师指出：LoadHTMLGlob("templates/*") 会加载 templates 目录下所有文件作为模板。如果模板有子目录，可以用 templates/**/* 递归加载。

2.2 使用 LoadHTMLFiles（逐个指定）

也可以显式列出每个模板文件：

r.LoadHTMLFiles("templates/index.html", "templates/login.html")

两种方式的区别：Glob 用通配符批量加载，适合文件多的情况；Files 精确指定，适合文件少、需要严格控制的情况。

三、在 Handler 中渲染页面

3.1 c.HTML 方法

渲染页面使用 c.HTML(状态码, "模板名", 数据)：

// controller/index.go
func Index(c *gin.Context) {
    c.HTML(200, "index.html", gin.H{
        "title": "BBS首页",
    })
}

关键点：c.HTML 的第二个参数是模板文件名（要和加载时的名字一致），第三个参数是传给模板的数据，通常用 gin.H（本质是 map[string]interface{}）。

3.2 模板中如何接收数据

Gin 使用 Go 标准库 html/template 的语法。在 HTML 中用 {{.字段名}} 取值：

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{.title}}</title>
</head>
<body>
    <h1>欢迎来到 {{.title}}</h1>
</body>
</html>

老师强调：模板里的 {{.title}} 对应 Go 里 gin.H{"title": ...} 的 key。{{.}} 表示整个数据对象，.title 表示取它的 title 字段。

四、传递更复杂的数据

4.1 传递多个字段

func Index(c *gin.Context) {
    c.HTML(200, "index.html", gin.H{
        "title":   "BBS首页",
        "username": "张三",
        "postCount": 128,
    })
}

<p>用户：{{.username}}</p>
<p>帖子数：{{.postCount}}</p>

4.2 传递结构体

除了 gin.H，也可以直接传结构体：

type User struct {
    Name  string
    Age   int
}

func Index(c *gin.Context) {
    u := User{Name: "张三", Age: 20}
    c.HTML(200, "index.html", gin.H{
        "user": u,
    })
}

<p>姓名：{{.user.Name}}</p>
<p>年龄：{{.user.Age}}</p>

注意：结构体字段要大写开头才能被模板访问（可见性规则同样适用）。

4.3 传递切片（列表）

渲染帖子列表、用户列表时常用切片：

func Index(c *gin.Context) {
    posts := []string{"帖子一", "帖子二", "帖子三"}
    c.HTML(200, "index.html", gin.H{
        "posts": posts,
    })
}

<ul>
    {{range .posts}}
        <li>{{.}}</li>
    {{end}}
</ul>

老师说明：{{range .posts}} ... {{end}} 用来遍历切片，循环体内的 . 表示当前元素。

五、模板中的常见语法

老师提醒：模板语法是 Go 标准库的一部分，不只是 Gin 独有。掌握它，后面做嵌套、公共模板都会用到。

六、本讲小结

七、课后练习

1. 在 templates 目录新建 index.html，用 {{.title}} 显示标题
2. 在 controller 中用 c.HTML 渲染该页面并传入 title
3. 定义一个 Post 结构体（含标题、作者），传一个 []Post 到模板，用 {{range}} 渲染帖子列表
4. 尝试用 {{if}} 判断某个字段是否存在，显示不同内容
5. 在模板里输出一个结构体的多个字段，注意字段大小写问题
6. 启动项目访问页面，右键查看网页源代码，确认数据已正确填充