全部教程· Go语言· Gin框架 · gin框架模板渲染

gin框架 HTML模板渲染

gin 支持加载 HTML 模板, 然后根据模板参数进行配置并返回相应的数据，本质上就是字符串替换 LoadHTMLGlob() 方法可以加载模板文件。

1. 正常模式 HTML 模板渲染

例如：main.go 文件如下：

package main

import (
    "net/http"
    "github.com/gin-gonic/gin"
)

func main() {
    engine := gin.Default()
    engine.LoadHTMLGlob("tem/*")
    engine.GET("/index", func(c *gin.Context) {
        c.HTML(http.StatusOK, "index.html", gin.H{"title": "我是测试", "ce": "123456"})
    })
    engine.Run()
}

index.html 模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{.title}}</title>
</head>
    <body>
        fgkjdskjdsh{{.ce}}
    </body>
</html>

文件目录结构如下：

    test
    ├── go.mod
    ├── go.sum
    ├── main.go
    └── tem
        └── index.html

2. 多层目录 HTML 模板渲染

如果你的目录结构是下面的情况：

    test
    ├── go.mod
    ├── go.sum
    ├── main.go
    └── tem
        └── user
            └── index.html

go 文件代码如下：

package main

import (
    "net/http"
    "github.com/gin-gonic/gin"
)

func main() {
    engine := gin.Default()
    engine.LoadHTMLGlob("tem/**/*")
    engine.GET("/index", func(c *gin.Context) {
        c.HTML(http.StatusOK, "user/index.html", gin.H{"title": "我是测试", "address": "www.5lmh.com"})
    })
    engine.Run()
}

html 文件代码如下：

{{ define "user/index.html" }}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{.title}}</title>
</head>

<body>
    fgkjdskjdsh{{.address}}
</body>

</html>
{{ end }}

3. 头尾分离模式 HTML 模板渲染

如果你想进行头尾分离就是下面这种写法：

go 文件代码如下：

package main

import (
    "net/http"
    "github.com/gin-gonic/gin"
)

func main() {
    engine := gin.Default()
    engine.LoadHTMLGlob("tem/**/*")
    engine.GET("/index", func(c *gin.Context) {
        c.HTML(http.StatusOK, "user/index.html", gin.H{"title": "我是测试", "address": "www.5lmh.com"})
    })
    engine.Run()
}

user/index.html文件代码如下：

{{ define "user/index.html" }}
{{template "public/header" .}}
fgkjdskjdsh{{.address}}
{{template "public/footer" .}}
{{ end }}

public/header.html文件代码：

{{define "public/header"}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{.title}}</title>
</head>

<body>

{{end}}

public/footer.html文件代码：

    {{define "public/footer"}}
    </body>
    </html>
{{ end }}

4. 引入静态文件

如果你需要引入静态文件需要定义一个静态文件目录

engine.Static("/assets", "./assets")

下一章：gin框架 cookie

HTTP 是无状态协议，服务器不能记录浏览器的访问状态，也就是说服务器不能区分两次请求是否由同一个客户端发出。cookie 就是解决 HTTP 协议无状态的方案之一。cookie 实际上就是服务器保存在客户端浏览器的一段信息。浏览器有了 cookie 之后，每次向服务器发送请求时都会同时将该信息发送给服务器，服务器收到请求后，就可以根据该信息处理请求。gin 框架提供了 cookie 操作的支持。

上一章：gin框架响应格式

下一章：gin框架 cookie