贵州省中海工程建设有限公司网站,在wordpress加入文件管理器,单页营销型网站模板,网络设计与制作专业官方文档地址#xff08;中文#xff09;#xff1a;https://gin-gonic.com/zh-cn/docs/ 注#xff1a;本教程采用工作区机制#xff0c;所以一个项目下载了Gin框架#xff0c;其余项目就无需重复下载#xff0c;想了解的读者可阅读第一节#xff1a;Gin操作指南#…官方文档地址中文https://gin-gonic.com/zh-cn/docs/ 注本教程采用工作区机制所以一个项目下载了Gin框架其余项目就无需重复下载想了解的读者可阅读第一节Gin操作指南开山篇。 本节演示HTML渲染包括简单渲染使用不同目录下名称相同的模板自定义模板渲染器自定义模板函数注意多模板渲染官方没有直接介绍只是给出了参考链接自定义分隔符比较简单有兴趣的读者可自行学习这些。在开始之前我们需要在”01数据渲染“目录下打开命令行执行如下命令来创建子目录
mkdir HTML渲染cd到该目录创建4个目录
mkdir demo01 demo02 demo03 demo04目录 一、简单渲染二、使用不同目录下名称相同的模板三、自定义模板渲染器四、自定义模板函数 一、简单渲染
cd到demo01创建如下目录结构
│ main.go
└─templatesindex.htmlmain.go
package mainimport (net/httpgithub.com/gin-gonic/gin
)func main() {// 创建默认的 Gin 路由器router : gin.Default()// 使用 LoadHTMLGlob 加载 templates 目录下的所有 HTML 模板文件// 这里使用通配符 * 匹配所有文件router.LoadHTMLGlob(templates/*)// 另一种方式是使用 LoadHTMLFiles 加载具体的模板文件// 它可以单独列出需要加载的模板文件// router.LoadHTMLFiles(templates/template1.html, templates/template2.html)// 定义一个 GET 路由当用户访问 /index 时触发此处理函数router.GET(/index, func(c *gin.Context) {// 使用 c.HTML() 方法渲染 HTML 页面// 第一个参数 http.StatusOK 表示 HTTP 状态码 200表示请求成功// 第二个参数是要渲染的模板文件名 index.html// 第三个参数是传递给模板的数据通过 gin.H 创建键值对c.HTML(http.StatusOK, index.html, gin.H{title: Main website, // 这里将传递一个名为 title 的数据其值为 Main website})})// 启动 Gin 服务器监听在 0.0.0.0:8080// 这会让服务器在本地 8080 端口上等待并响应请求router.Run(:8080)
}注意官方文档用的是.tmpl但**.html和.tmpl的效果是一样的**而且IDE对html提供代码高亮和补全所以推荐用.html。
index.html
html
h1{{ .title }} !-- 这里是 Go 模板语法表示将模板中传递的 title 数据渲染到此处 --
/h1/html效果
二、使用不同目录下名称相同的模板
cd到demo02创建如下目录结构
│ main.go
└─templates├─posts│ index.html└─usersindex.htmlmain.go
package mainimport (net/httpgithub.com/gin-gonic/gin
)func main() {// 创建默认的 Gin 路由器router : gin.Default()// 使用 LoadHTMLGlob 加载 templates 目录下的所有 HTML 模板文件// 使用 **/* 通配符表示递归加载所有子目录下的模板文件router.LoadHTMLGlob(templates/**/*)// 定义一个 GET 路由当用户访问 /posts/index 时触发此处理函数router.GET(/posts/index, func(c *gin.Context) {// 使用 c.HTML() 方法渲染 posts/index.html 模板// 第一个参数 http.StatusOK 表示 HTTP 状态码 200表示请求成功// 第二个参数是要渲染的模板文件名 posts/index.html// 第三个参数是传递给模板的数据通过 gin.H 创建键值对c.HTML(http.StatusOK, posts/index.html, gin.H{title: Posts, // 这里将传递一个名为 title 的数据其值为 Posts})})// 定义另一个 GET 路由当用户访问 /users/index 时触发此处理函数router.GET(/users/index, func(c *gin.Context) {// 使用 c.HTML() 方法渲染 users/index.html 模板// 第一个参数 http.StatusOK 表示 HTTP 状态码 200表示请求成功// 第二个参数是要渲染的模板文件名 users/index.html// 第三个参数是传递给模板的数据通过 gin.H 创建键值对c.HTML(http.StatusOK, users/index.html, gin.H{title: Users, // 这里将传递一个名为 title 的数据其值为 Users})})// 启动 Gin 服务器监听在 0.0.0.0:8080// 这会让服务器在本地 8080 端口上等待并响应请求router.Run(:8080)
}posts/index.html
{{ define posts/index.html }} !-- 定义一个名为 posts/index.html 的模板 --
html
h1{{ .title }} !-- 这里是 Go 模板语法表示将模板中传递的 title 数据渲染到此处 --
/h1
pUsing posts/index.html/p !-- 显示此页面的来源 --/html
{{ end }} !-- 结束模板定义 --users/index.html
{{ define users/index.html }} !-- 定义一个名为 users/index.html 的模板 --
html
h1{{ .title }} !-- 这里是 Go 模板语法表示将模板中传递的 title 数据渲染到此处 --
/h1
pUsing users/index.html/p !-- 显示此页面的来源 --/html
{{ end }} !-- 结束模板定义 --效果只展示一个另一个同理
三、自定义模板渲染器
注意这里官方示例是不全的请读者按本文的步骤实验。 cd到demo03创建main.go,file1.html,file2.html填充代码 main.go
package mainimport (html/template // 导入 Go 的 html/template 包用于处理 HTML 模板net/httpgithub.com/gin-gonic/gin // 导入 Gin 框架
)func main() {// 创建默认的 Gin 路由器router : gin.Default()// 使用 template.Must() 方法来解析指定的 HTML 模板文件html : template.Must(template.ParseFiles(file1.html, file2.html))// 设置 HTML 模板router.SetHTMLTemplate(html)// 定义路由以访问 file1.htmlrouter.GET(/file1, func(c *gin.Context) {c.HTML(http.StatusOK, file1.html, nil)})// 定义路由以访问 file2.htmlrouter.GET(/file2, func(c *gin.Context) {c.HTML(http.StatusOK, file2.html, nil)})// 启动 Gin 服务器监听在 0.0.0.0:8080router.Run(:8080)
}file1.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleFile 1/title
/headbodyh1This is file 1/h1pWelcome to the first HTML file./p
/body/htmlfile2.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleFile 2/title
/headbodyh1This is file 2/h1pWelcome to the second HTML file./p
/body/html效果另一个同理
四、自定义模板函数
cd到demo04创建main.go,raw.html填充代码
package mainimport (fmthtml/template // 引入 html/template 包用于模板渲染net/http // 引入 net/http 包用于 HTTP 相关功能time // 引入 time 包用于处理时间github.com/gin-gonic/gin // 引入 Gin 框架
)// formatAsDate 是一个自定义函数接受一个 time.Time 类型的参数
// 返回格式化为 年/月/日 的字符串形式
func formatAsDate(t time.Time) string {// 获取年份、月份和日期year, month, day : t.Date()// 使用 fmt.Sprintf 格式化字符串返回格式为 YYYY/MM/DDreturn fmt.Sprintf(%d/%02d/%02d, year, month, day)
}func main() {// 创建一个默认的 Gin 路由实例router : gin.Default()// 自定义模板的分隔符改变默认的 {{ 和 }} 分隔符// 将其设置为 {[{ 和 }]}以避免与 JavaScript 的冲突router.Delims({[{, }]})// 设置模板函数映射允许在模板中使用自定义函数// 将 formatAsDate 函数添加到模板函数映射中router.SetFuncMap(template.FuncMap{formatAsDate: formatAsDate, // 注册格式化函数})// 加载指定路径下的 HTML 模板文件// 在此示例中加载的模板文件是 raw.tmplrouter.LoadHTMLFiles(raw.html)// 定义处理 GET 请求的路由访问 /raw 时触发该处理函数router.GET(/raw, func(c *gin.Context) {// 渲染 HTML 模板并传递当前时间作为数据// map[string]interface{} 用于传递数据给模板c.HTML(http.StatusOK, raw.html, map[string]interface{}{// 设置 now 字段为特定的时间2017年7月1日now: time.Date(2017, 07, 01, 0, 0, 0, 0, time.UTC),})})// 启动 HTTP 服务器监听在 8080 端口// 该服务器将在接收到请求时调用上面定义的路由router.Run(:8080)
}raw.html
Date: {[{.now | formatAsDate}]}效果
