7-了解模版渲染

发表于 | 更新于 | 分类于
本文字数： 9.6k | 阅读时长 ≈ 9 分钟

思考并回答以下问题：

实验介绍

本次实验的主题是Gin框架模版引擎。在Web应用程序中，模板渲染是一项非常重要的任务，它允许我们通过将动态数据注入到预定义的HTML模板中来生成动态的Web页面。Gin是一个快速而灵活的Web框架，支持多种模板引擎。在本章中，我们将学习如何使用Gin的模板渲染引擎来呈现动态Web页面。

知识点

  • 模版引擎
  • 模版参数

模版引擎

对于传统的Web应用开发者来说，应该会比较熟悉MVC（Model View Controller），一种Web页面开发框架。而其中的视图（View）就是将背后的模型（Model）数据通过一定方式注入到HTML页面中，最后再返回给浏览器展示。在Web应用中，这样注入数据并传输HTML给浏览器最后展现页面的方式就是模版引擎。而对于Gin框架来说，同样支持模版引擎，而且可以通过配置使用多种模版引擎。

下面是一个Gin HTML模版。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>{{.title}}</title>
    </head>
    <body>
        <h1>{{.message}}</h1>
    </body>
</html>

这其实是一段非常简单的HTML代码，包括了<head>、<body>等内置标签。跟普通HTML不一样的是，它还有双花括号括起来的变量。其中，{{.title}}表示的是title这个参数，{{.message}}表示的是message这个参数。因此，如果我们在模版引擎中传入title为Gin，在message中传入你好，Gin，最终HTML会生成如下。
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>Gin</title>
    </head>
    <body>
        <h1>你好，Gin</h1>
    </body>
</html>

实战练习

下面我们将通过实际实验来学习如何在Gin框架中使用模版渲染。

打开VS Code，在main.go加载模版，内容如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package main

import (
    "gin-course/middlewares"
    "gin-course/routes"
    "github.com/gin-gonic/gin"
)

func main() {
    // 创建 Gin 引擎
    app := gin.New()

    // 加载 templates 目录下的所有模板文件
    app.LoadHTMLGlob("templates/*")

    // 注册路由 users
    routes.RegisterUsers(app)

    // 运行 Gin 引擎
    app.Run(":8080")
}

然后，编辑routes/users.go文件，将之前我们创建的getMe获取自己用户信息的API修改为模版渲染的逻辑。代码如下。
1
2
3
4
5
6
func getMe(c *gin.Context) {
    data := map[string]interface{}{
        "username": "zhangsan",
    }
    c.HTML(http.StatusOK, "user.html", data)
}

其中，data是传给模版的变量数据。

最后，需要创建用户模版user.html文件，创建templates文件夹，在user.html中输入如下内容。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>用户 {{.username}}</title>
    </head>
    <body>
        <h1>Hello, {{.username}}</h1>
    </body>
</html>

现在在终端中运行go run main.go启动程序，然后打开Web服务，浏览器中路径输入/me，可以看到如下内容。

模版参数

在上个实验中，我们用到了{{.username}}这样的双花括号的参数，这就是Gin框架中的模版参数。

HTML模板渲染

实验总结

通过本次实验，我们掌握了如何在Gin框架中使用模版渲染、模版参数。当我们需要编写简单的前端页面时，这是非常有帮助的。

0%