4.Gin HTML 模板渲染

Gin HTML 模板渲染

1. 全部模板放在一个目录里面的配置方法

创建用于渲染的模板html

templates/index.html

"en">
    "UTF-8">
    
    
index
    
渲染的内容: {{.title}}

templates/goods.html

"en">
    "UTF-8">
    
    
商品页面
    
渲染的内容: {{.title}}

路由加载模板文件

// 加载模板文件
r.LoadHTMLGlob("templates/*")

渲染模板

// c.HTML 渲染模板
r.GET("/index", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.html", gin.H{"title": "前台首页"})
})
r.GET("/goods", func(c *gin.Context) {
    c.HTML(http.StatusOK, "goods.html", gin.H{"title": "商品页面"})
})

测试如下

访问 http://localhost:8000/index

访问 http://localhost:8000/goods

2. 模板放在不同目录里面的配置方法

Gin 框架中如果不同目录下面有同名模板的话, 我们需要使用下面方法加载模板

创建模板文件

注意：定义模板的时候需要通过 define 定义名称

templates/admin/index.html

{{ define "admin/index.html" }}
    
    "en">
    
        "UTF-8">
        
    
    
    
index
    
admin 渲染的内容: {{.title}}
    
    
{{end}}

templates/default/index.html

{{ define "default/index.html" }}
    
    "en">
    
        "UTF-8">
        
    
    
    
index
    
default 渲染的内容: {{.title}}
    
    
{{ end }}

路由加载模板文件

// 加载模板文件
r.LoadHTMLGlob("templates/**/*")

“

**表示为文件夹路径， **/* 表示为所有文件夹下的所有文件

”

渲染模板

// c.HTML 渲染模板
r.GET("default/index", func(c *gin.Context) {
    c.HTML(http.StatusOK, "default/index.html", gin.H{"title": "default前台首页"})
})
r.GET("admin/index", func(c *gin.Context) {
    c.HTML(http.StatusOK, "admin/index.html", gin.H{"title": "admin前台首页"})
})
r.GET("admin/goods", func(c *gin.Context) {
    c.HTML(http.StatusOK, "admin/goods.html", gin.H{"title": "商品页面"})
})

测试如下

访问 http://localhost:8000/default/index

访问 http://localhost:8000/admin/index

3. gin 模板基本语法

{{.}} 输出数据

模板语法都包含在{{和}}中间，其中{{.}}中的点表示当前对象。

当我们传入一个结构体对象时，我们可以根据.来访问结构体的对应字段。例如：

编写结构体、以及渲染模板

package main
 
import (
    "fmt"
    "github.com/gin-gonic/gin"
    "net/http"
)
 
// 定义结构体
type UserInfo struct {
    Name   string
    Age    int
    Gender string
}
 
func main() {
    // 1.创建路由
    r := gin.Default()
    // 加载模板文件
    r.LoadHTMLGlob("templates/**/*")
 
    // 2.绑定路由规则，执行的函数
    // gin.Context，封装了request和response
    // c.HTML 渲染模板
    r.GET("default/index", func(c *gin.Context) {
       // 创建对象
       userInfo := UserInfo{
          Name:   "李白",
          Age:    30,
          Gender: "male",
       }
       // 渲染模板
       c.HTML(http.StatusOK, "default/index.html", gin.H{
          "title":    "default前台首页",
          "userInfo": userInfo,
       })
    })
 
    // 3.监听端口，默认在8080
    // 监听并在 0.0.0.0:8080 上启动服务
    // Run("里面不指定端口号默认为8080")
    r.Run(":8000")
}

编写模板，使用渲染的参数

{{ define "default/index.html" }}
    
    "en">
    
        "UTF-8">
        
    
    
    
index
    
default 渲染的内容: {{.title}}
 
    
渲染用户信息：{{.userInfo}}
    {{.userInfo.Name}}
    {{.userInfo.Age}}
    {{.userInfo.Gender}}
    
    
{{ end }}

测试如下：

访问 http://localhost:8000/default/index

模板的注释

{{/* 模板的注释  */}}

注释，执行时会忽略。可以多行。注释不能嵌套，并且必须紧贴分界符始止。

变量

我们还可以在模板中声明变量，用来保存传入模板的数据或其他语句生成的结果。具体语法

如下：

{{/* 保存传入模板的数据   */}}
{{$obj := .title}}
模板的变量title={{$obj}}

刷新页面，测试如下：

移除空格

有时候我们在使用模板语法的时候会不可避免的引入一下空格或者换行符，这样模板最终渲染出来的内容可能就和我们想的不一样，这个时候可以使用{{-语法去除模板内容左侧的所有空白符号， 使用-}}去除模板内容右侧的所空白符号。

例如：

{{-        .userInfo.Name     -}}

测试效果如下：

注意：-要紧挨{{和}}，同时与模板值之间需要使用空格分隔。

比较函数

布尔函数会将任何类型的零值视为假，其余视为真。

下面是定义为函数的二元比较运算的集合：

eq 如果 arg1 == arg2 则返回真

ne 如果 arg1 != arg2 则返回真

lt 如果 arg1 < arg2 则返回真

le 如果 arg1 <= arg2 则返回真

gt 如果 arg1 > arg2 则返回真

ge 如果 arg1 >= arg2 则返回真

示例如下：

{{/*  比较函数  */}}
{{ if eq .score 60}}
    
score=60分
{{end}}

测试如下：

条件判断

Go 模板语法中的条件判断有以下几种:

{{if pipeline}} T1 {{end}}
{{if pipeline}} T1 {{else}} T0 {{end}}
{{if pipeline}} T1 {{else if pipeline}} T0 {{end}}

示例如下：

{{if gt .score 60}}
    及格
{{else}}
    不及格
{{end}}

{{if gt .score 90}}
    优秀
{{else if gt .score 60}}
    及格
{{else}}
    不及格
{{end}}

range

Go 的模板语法中使用 range 关键字进行遍历，有以下两种写法，其中 传递 的值必须是数组、切片、字典或者通道。

语法：

{{range $key,$value := .obj}}
 {{$value}}
{{end}}

如果 传递 的值其长度为 0，不会有任何输出

{{range $key,$value := .obj}}
 {{$value}}
{{else}}
 pipeline 的值其长度为 0
{{end}}

如果 pipeline 的值其长度为 0，则会执行 else 分支。

示例如下：

首先往模板传递一个数组：

// c.HTML 渲染模板
r.GET("default/index", func(c *gin.Context) {
    // 创建对象
    userInfo := UserInfo{
       Name:   "李白",
       Age:    30,
       Gender: "male",
    }
    // 渲染模板
    c.HTML(http.StatusOK, "default/index.html", gin.H{
       "title":    "default前台首页",
       "userInfo": userInfo,
       "score":    60,
       "hobby":    []string{"吃饭", "睡觉", "写代码"},
    })
})

在模板使用 range 渲染 hobby 参数：

{{/* 使用 range 关键字进行遍历   */}}
hobby={{.hobby}}
    {{range $key,$value := .hobby}}
        
{{$value}}