【笔记】Gin的模版渲染

发表于 更新于 分类于 阅读次数：

前言

Gin的模版渲染学习笔记

单层级的模板渲染

目录结构

1
2
3
- main.go
+ templates
  - index.html

创建HTML模板

templates/index.html
1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

响应时返回一个HTML模板

1
2
3
4
// 通过引擎加载HTML文件
engine.LoadHTMLGlob("templates/*.html")
// 响应
context.HTML(http.StatusOK, "templates/index.html")

多层级的模板渲染

目录结构

1
2
3
4
5
6
- main.go
+ templates
  + admin
    - index.html
  + default
    - index.html

创建HTML模板

  • 通过在文件首部定义{{ define "" }} ... {{ end }}来指定当前页面的路径名
templates/admin/index.html
1
2
3
4
5
6
7
8
9
10
11
12
{{ define "admin/index.html" }}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
{{ end }}
templates/default/index.html
1
2
3
4
5
6
7
8
9
10
11
12
{{ define "default/index.html" }}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
{{ end }}

响应时返回一个HTML模板

**：匹配一个层级

1
2
3
4
// 通过引擎加载HTML文件
engine.LoadHTMLGlob("templates/**/*.html")
// 响应
context.HTML(http.StatusOK, "templates/admin/index.html")

加载静态资源

  • 将静态资源不进行解析而直接路由

例如访问http://127.0.0.1:8080/static/img.png时直接返回图片文件

目录结构

1
2
3
- main.go
+ static
  - img.png

加载静态资源

  • 将静态资源访问路径和与静态资源文件实际存储路径映射

/static：请求路径
./static：实际静态资源文件存储路径

1
engine.Static("/static", "./static")

在模板中使用参数

目录结构

1
2
3
- main.go
+ templates
  - index.html

创建HTML模板

  • 通过{{.}}语法渲染数据
templates/index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

{{.key}}

</body>
</html>

响应返回HTML模板时传递参数

1
context.HTML(http.StatusOK, "./index.html", gin.H{"key": "value"})

模板中对参数的操作

将参数的值渲染到页面上

1
{{.key}}

将参数赋值给变量

1
{{$k := .key}}

比较函数

eq：判断两侧的值是否相等
ne：判断两侧的值是否不相等
lt：判断左侧的值是否小于右侧的值
le：判断左侧的值是否小于等于右侧的值
gt：判断左侧的值是否大于右侧的值
ge：判断左侧的值是否大于等于右侧的值

分支语句

单分支

1
2
3
4
5
{{if gt .key 60}}
    ...
{{else}}
    ...
{{end}}

多分支

1
2
3
4
5
6
7
{{if gt .key 80}}
    ...
{{else if gt .key 60}}
    ...
{{else}}
    ...
{{end}}

循环语句

  • 循环遍历切片
1
context.HTML(http.StatusOK, "./index.html", gin.H{"key": []string{"", ""}})
1
2
3
{{range $index, $value := .arr}}
    ...
{{end}}

没有值

  • 当被遍历的数据没有值的时候，会走{{else}}...{{end}}代码块
1
context.HTML(http.StatusOK, "./index.html", gin.H{"key": []string{}})
1
2
3
4
5
{{range $index, $value := .arr}}
    ...
{{else}}
    ...
{{end}}

解构结构体

1
2
3
type User struct {
    Username string
}
1
context.HTML(http.StatusOK, "./index.html", gin.H{"user": User{Username: "value"}})
1
2
3
{{with .user}}
    {{.Username}}
{{end}}

相当于把.user赋值给.

模版中的预定义函数（内置模板函数）

获取字符串长度

  • 1个中文字符在UTF-8字符集中占3个字节长度，所以当计算中文字符的长度时1个中文的长度为3
1
{{len .key}}

自定义模板函数

定义模板函数

  • 在加载HTML模板之前定义自定义模板函数
  • 自定义模板函数可以定义多个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

func 自定义函数名1(形参) { ... }
engine.SetFuncMap(template.FuncMap{
    "模板函数名1": 自定义函数名1(形参)
})

func 自定义函数名2(形参) { ... }
engine.SetFuncMap(template.FuncMap{
    "模板函数名2": 自定义函数名2(形参)
})

// 通过引擎加载HTML文件
engine.LoadHTMLGlob("templates/*.html")
// 响应
context.HTML(http.StatusOK, "templates/index.html")

使用自定义模板函数

1
{{模板函数名1 .key}}

模板中加载其他模板

  • 模板中将公共的部分抽离为模板，在模板中加载其他模板
1
{{template "default/index.html" .}}

完成

参考文献

哔哩哔哩——筱筱知晓