Gin HTML 模板渲染

🕗 发布于 2024-11-16 09:56 gin

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

1 、我们首先在项目根目录新建 templates 文件夹，然后在文件夹中新建 index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1> 这是一个 html 模板 </h1>

<h3>{{.title}}</h3>

</body>

</html>

2、Gin 框架中使用 c.HTML 可以渲染模板，渲染模板前需要使用 LoadHTMLGlob()或者

LoadHTMLFiles() 方法加载模板。

package main

import (

        "net/http"

        "github.com/gin-gonic/gin"

)

func main() {

        router := gin.Default()

        router.LoadHTMLGlob("templates/*")

        //router.LoadHTMLFiles("templates/template1.html", "templates/template2.html")

        router.GET("/", func(c *gin.Context) {

                c.HTML(http.StatusOK, "index.html", gin.H{

                        "title": "Main website",

                })

        })

        router.Run(":8080")

}

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

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

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

templates/admin/index.html

{{ define "admin/index.html" }}

        <!DOCTYPE html>

        <html lang="en">

        <head>

                <meta charset="UTF-8">

                <meta http-equiv="X-UA-Compatible" content="IE=edge">

                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <title>Document</title>

        </head>

        <body>

                <h1>后台模板</h1>

                <h3>{{.title}}</h3>

        </body>

        </html>

{{ end }}

templates/default/index.html

{{ define "default/index.html" }}

        <!DOCTYPE html>

        <html lang="en">

        <head>

                <meta charset="UTF-8">

                <meta http-equiv="X-UA-Compatible" content="IE=edge">

                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <title>Document</title>

        </head>

        <body>

                <h1>前台模板</h1>

                <h3>{{.title}}</h3>

        </body>

        </html>

{{end}}

业务逻辑

package main

import (

        "net/http"

        "github.com/gin-gonic/gin"

)

func main() {

        router := gin.Default()

        router.LoadHTMLGlob("templates/**/*")

        router.GET("/", func(c *gin.Context) {

                c.HTML(http.StatusOK, "default/index.html", gin.H{

                        "title": "前台首页",

                })

        })

        router.GET("/admin", func(c *gin.Context) {

                c.HTML(http.StatusOK, "admin/index.html", gin.H{

                        "title": "后台首页",

                })

        })

        router.Run(":8080")

}

注意：如果模板在多级目录里面的话需要这样配置 r.LoadHTMLGlob("templates/**/**/*") /**

表示目录

3、gin 模板基本语法

1、{{.}} 输出数据

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

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

业务逻辑

package main

import (

        "net/http"

        "github.com/gin-gonic/gin"

)

type UserInfo struct {

        Name string

        Gender string

        Age int

}

func main() {

        router := gin.Default()

        router.LoadHTMLGlob("templates/**/*")

        user := UserInfo{

                Name: "张三 ",

                Gender: "男",

                Age: 18,

        }

        router.GET("/", func(c *gin.Context) {

                c.HTML(http.StatusOK, "default/index.html", map[string]interface{}{

                        "title": "前台首页",

                        "user": user,

                })

        })

        router.Run(":8080")

}

模板

{{ define "default/index.html" }}

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Document</title>

</head>

<body>

        <h1>前台模板 </h1>

        <h3>{{.title}}</h3>

        <h4>{{.user.Name}}</h4>

        <h4>{{.user.Age}}</h4>

</body>

</html>

{{end}}

2.注释

{{/* a comment */}}

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

3、变量

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

如下：

<h4>{{$obj := .title}}</h4>

<h4>{{$obj}}</h4>

4.移除空格

有时候我们在使用模板语法的时候会不可避免的引入一下空格或者换行符，这样模板最终渲

染出来的内容可能就和我们想的不一样，这个时候可以使用 {{- 语法去除模板内容左侧的所有

空白符号，使用 -}} 去除模板内容右侧的所有空白符号。

例如

{{- .Name -}}

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

5.比较函数

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

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

eq 如果 arg1 == arg2 则返回真

ne 如果 arg1 != arg2 则返回真

lt 如果 arg1 < arg2 则返回真

le 如果 arg1 <= arg2 则返回真

gt 如果 arg1 > arg2 则返回真

ge 如果 arg1 >= arg2 则返回真

6.条件判断

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}}

7.range

Go 的模板语法中使用 range 关键字进行遍历，有以下两种写法，其中 pipeline 的值必须是数

组、切片、字典或者通道。

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

{{$value}}

{{end}}

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

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

{{$value}}

{{else}}

pipeline 的值其长度为 0

{{end}}

如果 pipeline 的值其长度为 0，则会执行 T0

router.GET("/", func(c *gin.Context) {

        c.HTML(http.StatusOK, "default/index.html", map[string]interface{}{

                "hobby": []string{"吃饭", " 睡觉 ", " 写代码 "},

        })

})

{{range $key,$value := .hobby}}

        <p>{{$value}}</p>

{{end}}

8.With

user := UserInfo{

        Name:

        "张三 ",

        Gender: "男 ",

        Age: 18,

}

router.GET("/", func(c *gin.Context) {

        c.HTML(http.StatusOK, "default/index.html", map[string]interface{}{

                "user": user,

        })

})

不适应with输出数据：

<h4>{{.user.Name}}</h4>

<h4>{{.user.Gender}}</h4>

<h4>{{.user.Age}}</h4>

使用with输出数据：

{{with .user}}

        <h4>姓名： {{.Name}}</h4>

        <h4>性别： {{.user.Gender}}</h4>

        <h4>年龄： {{.Age}}</h4>

{{end}}

简单理解：相当于 var .=.user

9.预定义函数（了解）

执行模板时，函数从两个函数字典中查找：首先是模板函数字典，然后是全局函数字典。一

般不在模板内定义函数，而是使用 Funcs 方法添加函数到模板里。

预定义的全局函数如下：

and

函数返回它的第一个 empty 参数或者最后一个参数；

就是说"and x y" 等价于 "if x then y else x" ；所有参数都会执行；

返回第一个非 empty 参数或者最后一个参数；

亦即"or x y" 等价于 "if x then x else y" ；所有参数都会执行；

not

返回它的单个参数的布尔值的否定

len

返回它的参数的整数类型长度

index

执行结果为第一个参数以剩下的参数为索引/ 键指向的值；

如"index x 1 2 3" 返回 x[1][2][3] 的值；每个被索引的主体必须是数组、切片或者字典。

即 fmt.Sprint

printf

即 fmt.Sprintf

println

即 fmt.Sprintln

html

返回与其参数的文本表示形式等效的转义 HTML 。

这个函数在 html/template 中不可用。

urlquery

以适合嵌入到网址查询中的形式返回其参数的文本表示的转义值。

这个函数在 html/template 中不可用。

返回与其参数的文本表示形式等效的转义 JavaScript 。

call

执行结果是调用第一个参数的返回值，该参数必须是函数类型，其余参数作为调用该函

数的参数；

如"call .X.Y 1 2" 等价于 go 语言里的 dot.X.Y(1, 2) ；

其中 Y 是函数类型的字段或者字典的值，或者其他类似情况；

call 的第一个参数的执行结果必须是函数类型的值（和预定义函数如 print 明显不同）；

该函数类型值必须有 1 到 2 个返回值，如果有 2 个则后一个必须是 error 接口类型；

如果有 2 个返回值的方法返回的 error 非 nil ，模板执行会中断并返回给调用模板执行者

该错误；

{{len .title}}

{{index .hobby 2}}

10.自定义模板函数

router.SetFuncMap(template.FuncMap{

"formatDate": formatAsDate,

})

package main

import (

        "fmt"

        "html/template"

        "net/http"

        "time"

        "github.com/gin-gonic/gin"

)

func formatAsDate(t time.Time) string {

        year, month, day := t.Date()

        return fmt.Sprintf("%d/%02d/%02d", year, month, day)

}

func main() {

        router := gin.Default()

        //注册全局模板函数注意顺序，注册模板函数需要在加载模板上面

        router.SetFuncMap(template.FuncMap{

                "formatDate": formatAsDate,

        })

        //加载模板

        router.LoadHTMLGlob("templates/**/*")

        router.GET("/", func(c *gin.Context) {

                c.HTML(http.StatusOK, "default/index.html", map[string]interface{}{

                         "title": "前台首页",

                        "now": time.Now(),

                })

        })

        router.Run(":8080")

}

模板里面的用法

{{.now | formatDate}}

或者

{{formatDate .now }}

4.嵌套 template

1 、新建 templates/deafult/page_header.html

{{ define "default/page_header.html" }}

<h1>这是一个头部 </h1>

{{end}}

2、外部引入

注意：

1 、引入的名字为 page_header.html 中定义的名字

2 、引入的时候注意最后的点（ . ）

{{template "default/page_header.html" .}}

{{ define "default/index.html" }}

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Document</title>

</head>

<body>

        {{template "default/page_header.html" .}}

</body>

</html>

{{end}}

5.静态文件服务

当我们渲染的 HTML 文件中引用了静态文件时 , 我们需要配置静态 web 服务

r.Static("/static", "./static")

前面的 /static 表示路由

后面的 ./static 表示路径

func main() {

        r := gin.Default()

        r.Static("/static", "./static")

        r.LoadHTMLGlob("templates/**/*")

        // ...

        r.Run(":8080")

}

<link rel="stylesheet" href="/static/css/base.css" />

原文地址：https://blog.csdn.net/qq_30895747/article/details/143804831

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：IntelliJ IDEA新建项目或导入未识别为maven解决
下一篇：Mybatis快速入门 ResultMap 分页的实现

[CUDA] cuda kernel开发记录
包括kernel的一些使用注意事项， launch_bound, __device__, debug排查技巧
阅读更多2024-11-16
【python】掌握 Flask：轻量级 Web 开发框架解析
路由是 Web 开发的基础，负责管理 URL 到视图函数的映射。在 Flask 中，路由定义非常简单，只需使用装饰器即可。这个代码段定义了一个路由，访问该路径时会返回 “Hello, Flask!通过
阅读更多2024-11-16
AI图片分析接口LiteAIServer摄像机实时接入分析平台未戴安全帽检测算法
随着人工智能技术的飞速发展，摄像机实时接入分析平台LiteAIServer工地未佩戴安全帽检测算法应运而生，为工地安全管理带来了革命性的变革。
阅读更多2024-11-16
2024新版pycharm如何切换anaconda虚拟环境
回归正题，导入项目后点击文件=>设置，找到解释器。不得不说这界面改的真不错，看着很舒服。另外在终端用指令切换也是可以的。添加解释器=>添加本地解释器。
阅读更多2024-11-16
计算机提示mfc140u.dll丢失的五种解决方法，了解mfc140u.dll错误的几种修复方法
当你尝试打开某些程序时，突然出现错误提示，告知你系统缺少 mfc140u.dll 文件，这可能让你感到困惑和无助。mfc140u.dll 是 Microsoft Foundation Class (M
阅读更多2024-11-16
k8s 中传递参数给docker容器
在 Kubernetes 中，可以通过多种方式将参数传递给 Dockerfile 或其运行的容器，常见的方式包括使用环境变量、命令行参数、配置文件等。
阅读更多2024-11-16
设计模式之工厂模式，但是宝可梦
作为一个细分了三个种类的设计模式，到底该如何取舍？比起直接new一个对象，使用对应模式的好处到底在哪？简单工厂模式：根据传入的参数决定产出的对象，可以隐藏一些创建的细节适用于需要根据条件创建不同对象的
阅读更多2024-11-16
【深度学习】wsl-ubuntu深度学习基本配置
这里注意一点，你换了源之后就最好不要开代理了，要不然搞不好下载失败，pip和conda都是。
阅读更多2024-11-16
nodejs和npm在gitbash中提示Not Found情况的解决办法
很多小伙伴学习了node以后，在cmd命令行中可以正常的获取node版本和npm版本，但是我们经常使用gitbash来管理git，这时候下载完gitbash后，在gitbash中输入node -v和n
阅读更多2024-11-16
判断子序列
给定一个长度为 n的整数序列 a1,a2,…,an以及一个长度为 m的整数序列 b1,b2,…,bm。请你判断 a序列是否为 b序列的子序列。子序列指序列的一部分项按原有次序排列而得的序列，例如序列
阅读更多2024-11-16

Gin HTML 模板渲染

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

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

3、gin 模板基本语法

1、{{.}} 输出数据

2.注释

3、变量

4.移除空格

5.比较函数

6.条件判断

7.range

8.With

9.预定义函数 （了解）

10.自定义模板函数

4.嵌套 template

5.静态文件服务

相关文章

9.预定义函数（了解）