Gin之渲染HTML模板

已于 2022-05-28 18:58:33 修改
阅读量1.5k 收藏 7
点赞数 2
分类专栏： Gin 文章标签： golang 开发语言 后端
于 2022-05-28 18:57:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52690231/article/details/125021658
版权

文章目录

渲染HTML模板

注：本文基于github.com/gin-gonic/gin v1.7.7依赖进行讲解

1.LoadHTMLFiles方法渲染1个HTML模板

Gin框架中使用LoadHTMLGlob()或者LoadHTMLFiles()方法进行HTML模板渲染

LoadHTMLGlob()方法是加载一坨模板文件;

LoadHTMLFiles()方法是加载指定名字的模板文件；

模板通常都放在templates文件夹下的

package main

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

func main() {
	r := gin.Default()
	r.LoadHTMLFiles("templates/index.tmpl") //模板解析
	r.GET("/index", func(c *gin.Context) {

		//HTML是*Context的一个方法,需要传入3个参数(code int, name string, obj interface{});无返回值
		//code是http响应的状态码，比如写200;name 是模板的名称(当模板没有通过define命名的时候，默认模板名字就是文件名),
		//可以把H理解成一个json格式的
		//返回的是渲染好的模板文件 ； 模板渲染
		c.HTML(http.StatusOK, "index.tmpl", gin.H{
			"title": "liwnezhou",
		})
	})
	r.Run()
}


<!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>posts/index</title>
</head>
<body>
{{.title}}
</body>
</html>

image-20220128214838392

image-20220128214659443

2.define定义模板名字LoadHTMLFiles渲染多个HTML模板

通过define给不同的模板定义不同的名字

package main

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

func main() {
	r := gin.Default()
	r.LoadHTMLFiles("templates/posts/index.tmpl", "templates/users/index.tmpl") //模板解析
	r.GET("/p", func(c *gin.Context) {
		c.HTML(http.StatusOK, "posts/index.tmpl", gin.H{
			"title": "liwnezhou",
		})
	})
	r.GET("/u", func(c *gin.Context) {
		c.HTML(http.StatusOK, "users/index.tmpl", gin.H{
			"title": "lln",
		})
	})

	r.Run()
}


{{define "posts/index.tmpl"}}
<!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>posts/index</title>
</head>
<body>
{{.title}}
</body>
</html>
{{end}}


{{define "users/index.tmpl"}}
    <!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>users/index</title>
    </head>
    <body>
    {{.title}}
    </body>
    </html>
{{end}}

image-20220128220700376

image-20220128220422589

image-20220129160424665

3.define定义模板名字LoadHTMLGlob渲染多个HTML模板

package main

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

func main() {
	r := gin.Default()
	r.LoadHTMLGlob("templates/**/*") //这个**代表的是所有目录, *代表的是所有文件 ;假如templates文件夹下面没有posts文件夹与users文件夹，模板文件都是直接放在templates文件夹下，则写成templates/* 即可
	r.GET("/p", func(c *gin.Context) {
		c.HTML(http.StatusOK, "posts/index.tmpl", gin.H{
			"title": "liwnezhou",
		})
	})
	r.GET("/u", func(c *gin.Context) {
		c.HTML(http.StatusOK, "users/index.tmpl", gin.H{
			"title": "lln",
		})
	})

	r.Run()
}


{{define "posts/index.tmpl"}}
<!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>posts/index</title>
</head>
<body>
{{.title}}
</body>
</html>
{{end}}


{{define "users/index.tmpl"}}
    <!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>users/index</title>
    </head>
    <body>
    {{.title}}
    </body>
    </html>
{{end}}

image-20220128220700376

image-20220128220422589

image-20220129160419078

4.LoadHTMLFiles方法不会脚本注入

package main

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

func main() {
	r := gin.Default()
	r.LoadHTMLFiles("index.tmpl")//也可以写成	r.LoadHTMLFiles("./index.tmpl")
	r.GET("/u", func(c *gin.Context) {
		c.HTML(http.StatusOK, "posts/index.tmpl", gin.H{
			"bj": "<a href='https://liwenzhou.com'>李文周的博客</a>",
		})
	})

	r.Run()
}


{{define "posts/index.tmpl"}}
<!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>posts/index</title>
</head>
<body>
{{.bj}}
</body>
</html>
{{end}}

image-20220129160045842

5.html\template\FuncMap类型及html\template\HTML类型及SetFuncMap方法及来脚本注入

即相信用户不会脚本注入

package main

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

func main() {
	r := gin.Default()
	//gin框架中给模板添加自定义模板函数
	//必须放在解析模板之前,SetFuncMapo是 *Engine的一个方法，传入一个参数(funcMap template.FuncMap)，无返回值
	r.SetFuncMap(template.FuncMap{
		"safe": func(str string) template.HTML {
			return template.HTML(str)
		},
	})
	r.LoadHTMLFiles("index.tmpl")
	r.GET("/u", func(c *gin.Context) {
		c.HTML(http.StatusOK, "posts/index.tmpl", gin.H{
			"bj": "<a href='https://liwenzhou.com'>李文周的博客</a>",
		})
	})

	r.Run()
}


{{define "posts/index.tmpl"}}
<!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>posts/index</title>
</head>
<body>
{{.bj | safe}}
</body>
</html>
{{end}}

image-20220129155920990

image-20220129155833383

6.自定义模板及Delims方法及pipeline概念

image-20220211205931597

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.Delims("{[{", "}]}") //修改模板的标识符
	router.SetFuncMap(template.FuncMap{
		"formatAsDate": formatAsDate,
	})
	router.LoadHTMLFiles("1.tmpl")

	router.GET("/raw", func(c *gin.Context) {
		c.HTML(http.StatusOK, "1.tmpl", map[string]interface{}{
			"now": time.Date(2017, 07, 01, 0, 0, 0, 0, time.UTC),
		})
	})

	router.Run(":8080")
}


<!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>posts/index</title>
</head>
<body>
{[{.now}]}

Date: {[{.now | formatAsDate}]}
</body>
</html>

image-20220211205243119

image-20220211205444118

image-20220211204955312

GoGo在努力
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Golang Gin 实战（十一）| HTML模板渲染
flysnow_org的博客
01-10 5424
终于又到一个重头戏了。在整个服务端开发中，一个是API，一个就是网页，当前的API大部分都是通过JSON提供了，而网页就是通过HTML提供了。所以对于这么大的需求，Gin当然不会忘记，为...
go语言html模板渲染
07-06
下面是一个简单的例子，展示了如何使用Go语言的`html/template`库渲染HTML模板： ```go package main import ( "html/template" "os" ) type PageData struct { Title string Content string } func main() ...
gin框架 HTML 模板加载，渲染 使用详解和总结
最新发布
06-28 1383
本文从gin框架中html模板的加载，渲染和使用，功能定义等方面详细讲解了gin框架中的html模板渲染工程和使用注意事项等。
gin渲染自己的html页面
m0_68094390的博客
05-12 110
【代码】gin渲染自己的html页面。
gin框架03--html 模板渲染
脚步不能达到的地方，眼光可以达到；眼光不能达到的地方，精神可以飞到
03-18 3047
介绍 gin支持加载HTML模板, 然后根据模板参数进行配置并返回相应的数据，本质上就是字符串替换，既可以使用 LoadHTMLGlob() 或者 LoadHTMLFiles() 方法加载模板文件， 也可以使用自定义模板渲染器。 案例 加载 templates 目录下的文件 加载多个子目录下的文件 自定义模板渲染器 自定义模板功能 说明
Gin——HTML模板渲染
倪灵-ziop
05-05 446
文章目录1. 同一个文件夹下面的HTML模板2. 不同目录下名称相同的模板 1. 同一个文件夹下面的HTML模板 文件结构如下： package main import ( "net/http" "github.com/gin-gonic/gin" ) func main() { router := gin.Default() router.LoadHTMLGlob("temp/*") //解析 router.GET("/index", func(c *gin.Context) {
【Gin】HTML 的模板渲染与静态资源文件的加载
徒挽的博客
03-22 1717
HTML 的模板渲染与静态资源文件的加载
html+golang-gin.zip
08-16
在实际项目中，为了提高用户体验，开发者可能会使用模板引擎（如Gin内置的`html/template`）来渲染HTML，这样可以将动态数据注入到模板中，生成最终的网页。此外，为了确保安全性，还需要考虑如CSRF（跨站请求伪造）...
gin
03-15
6. **模板渲染**：虽然Gin本身并不内置模板引擎，但可以与第三方库如`html/template`或`golang.org/x/text/template`配合使用，方便地渲染HTML模板。 7. **性能优化**：Gin框架采用httprouter作为底层路由器，具有...
gin-demo.zip
12-09
- **模板渲染**：Gin 支持 HTML 模板渲染，可以结合 `render` 包来实现动态页面。 - **测试**：了解如何使用 Go 的内置 `net/http/httptest` 包来测试 Gin API。 - **安全与性能**：探索 Gin 中间件如 `gin....
Go语言中的gin框架之GET/POST请求参数接收传值（五）
06-15
此外，`templates`目录通常用于存放HTML模板文件，用于渲染动态网页。Gin框架内置了对模板引擎的支持，你可以像这样加载并渲染模板： ```go r.LoadHTMLGlob("templates/*") ``` 然后在路由处理函数中使用`c.HTML()`...
[Go] gin框架渲染html字符串
程序员老狼专注开发aigc或客服系统应用
06-17 689
在文档里有直接渲染一个html的文件 , 但是我的需求是渲染html的字符串 , 因为我的html要打包进二进制 , 不能只是外部文件的形式 engine := gin.Default() //登陆界面 engine.GET("/login",controller.PageLogin) engine.Run(":8080") 我的con...
Golang | Web开发之Gin静态资源映射及HTML模板渲染
WeiyiGeek 唯一极客IT知识分享
06-21 1486
1.Gin中静态资源映射实践描述: 此处使用graceful来管理我们的gin服务，能够平滑的停止Gin服务，然后又实践了静态资源映射三种方式的使用。静态资源映射三种方式router.Static 指定某个目录为静态资源目录，可直接访问这个目录下的资源，url 要具体到资源名称。router.StaticFS 比前面一个多了个功能，当目录下不存 index.html 文件时，会列出该目录下的所有文件。router.StaticFile 指定某个具体的文件作为静态资源访问。静态目录常规示例。
Gin框架: HTML模板渲染之配置与语法详解
Wang的专栏
02-19 1392
配置模板目录，在与main.go同级下, 新建目录 tpls, 在内部再创建两个目录: web, admin。配置模板目录，在与main.go同级下, 新建目录，下面二选一，仅作举例, 这里选择 tpls。在 预定义函数 中，执行模板时，函数从两个函数字典中查找。common/page_header.html模板。common/page_footer.html模板。新建 tpls/admin/news.html。在嵌套 template中，注意最后的点（.）在 tpls 目录下新建 news.html。
[Golang] gin框架模板渲染html-不显示转码html实体
程序员老狼专注开发aigc或客服系统应用
02-12 521
默认的gin框架模板中，如果模板变量是html文本 展示模板变量的时候是以html实体的形式出现的，不是以html形式渲染的 这个时候，就需要在传递变量的时候简单处理一下 template.HTML类型转换一下 ...
Gin框架HTML文件的加载与渲染
qq_63644576的博客
05-18 423
作为其内置的模板引擎，允许开发者编写HTML模板文件来生成动态内容。这些模板文件通常包含静态HTML内容以及动态数据占位符，Gin框架在运行时会替换这些占位符并生成最终的HTML页面。Gin模板支持模板继承，允许一个模板包含另一个模板的内容。父模板通常包含共同的布局元素，而子模板则包含特定页面的内容。这个方法接受一个字符串参数，指定模板文件所在的目录。在Gin项目中，模板文件通常放置在项目的某个特定目录中，例如。数据模型是一个键值对的集合，可以在模板中用来替换动态内容。语句，可以在父模板中包含子模板。
go gin LoadHTMLGlob加载html网页模板
学亮编程手记
11-29 2603
go run hello.go package main import ( "github.com/gin-gonic/gin" ) func User(ctx *gin.Context) { ctx.HTML(200,"user.html",nil) } func main() { router := gin.Default() router.LoadHTMLGlob("template/**/*") router.GET("/user",User) router.Run(":808.
【Golang】gin客户端动态加载Html格式文件
比嗨皮兔
11-08 838
router := gin.New() var files []string filepath.Walk("./static", func(path string, info os.FileInfo, err error) error { if strings.HasSuffix(path, ".html") { files = append(files, path) } return nil }) router.LoadHTMLFiles(files...)
gin框架切换到其他html界面
05-31
在Gin框架中，可以使用HTML模板来渲染页面。可以使用`LoadHTMLGlob()`或`LoadHTMLFiles()`方法来加载HTML模板。 假设你有一个`views`文件夹，里面存放了你的HTML模板文件，可以使用以下代码加载HTML模板： ```go router := gin.Default() // 加载HTML模板文件 router.LoadHTMLGlob("views/*") // 定义路由 router.GET("/", func(c *gin.Context) { c.HTML(http.StatusOK, "index.html", gin.H{ "title": "首页", }) }) router.GET("/about", func(c *gin.Context) { c.HTML(http.StatusOK, "about.html", gin.H{ "title": "关于我们", }) }) router.Run(":8080") ``` 在上面的代码中，我们使用了`LoadHTMLGlob()`方法来加载`views`文件夹下的所有HTML模板文件。然后定义了两个路由，分别为`"/"`和`"/about"`。在处理这两个路由的回调函数中，我们使用了`c.HTML()`方法来渲染HTML模板文件，并传递了一个`gin.H`类型的数据，用于在HTML模板中渲染动态数据。 例如，假设`index.html`文件内容如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{{.title}}</title> </head> <body> <h1>{{.title}}</h1> <p>这是首页</p> </body> </html> ``` 其中，我们使用了`{{.title}}`来渲染动态数据。 当用户访问`"/"`路由时，Gin框架会自动渲染`index.html`模板文件，并将`gin.H`类型的数据`{"title": "首页"}`传递给模板文件。渲染后的HTML内容如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <h1>首页</h1> <p>这是首页</p> </body> </html> ``` 同样的，当用户访问`"/about"`路由时，Gin框架会自动渲染`about.html`模板文件，并将`gin.H`类型的数据`{"title": "关于我们"}`传递给模板文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GoGo在努力

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值