Gin框架: HTML模板渲染之配置与语法详解

Gin的HTML模板配置


1 ）单一目录的配置

  • 配置模板目录，在与main.go同级下, 新建目录，下面二选一，仅作举例, 这里选择 tpls

    • templates
    • tpls

  • 在 tpls 目录下新建 news.html

    <!-- 最简单的 -->
<h1>News Page</h1><h3>标题：{{.title}}</h3>
<p>内容：{{.content}}</p>
    • 注意，这里加上define和end头尾也可以
      {{ define "news.html" }}
<h1>News Page</h1><h3>标题：{{.title}}</h3>
<p>内容：{{.content}}</p>
{{ end }}

  • 应用程序示例中配置

    • r.LoadHTMLGlob("tpls/*") 通配设定
    • r.LoadHTMLFiles("tpls/news.html") 逐个指定，多个在字符串中用,分隔

程序示例

package mainimport ("net/http""github.com/gin-gonic/gin"
)var statusOK = http.StatusOKfunc main() {// 创建一个默认的路由引擎r := gin.Default()// 配置模板的文件r.LoadHTMLGlob("tpls/*")// r.LoadHTMLFiles("tpls/news.html") // 逐个指定多个需要使用逗号分隔// 根路由r.GET("/", func(c *gin.Context) {c.String(statusOK, "Welcome to %v", "Home Page")})r.GET("/news", func(c *gin.Context) {c.HTML(statusOK, "news.html", gin.H{"title": "新闻标题","content": "这是详细的新闻内容",})})r.Run()
}

2 ）多目录配置

  • 配置模板目录，在与main.go同级下, 新建目录 tpls, 在内部再创建两个目录: web, admin

    • tpls/web
    • tpls/admin

  • 新建 tpls/admin/news.html

    {{ define "admin/news.html" }}<h1>News Page</h1><h3>标题：{{.title}}</h3>
<p>内容：{{.content}}</p>{{ end }}
    • 这里内容和之前保持一致, 但要注意上下的定义
    • 如果不添加，会出现 Error #01: html/template: "admin/news.html" is undefined 的错误
    • 这里的 define 和 end 非常重要
    • define 配置的路径是匹配c.HTML 中的第二个参数

  • 应用程序示例中配置

    • r.LoadHTMLGlob("tpls/**/*") 通配设定
    • r.LoadHTMLFiles("tpls/admin/news.html") 逐个指定，多个在字符串中用,分隔

程序示例

package mainimport ("net/http""github.com/gin-gonic/gin"
)var statusOK = http.StatusOKfunc main() {// 创建一个默认的路由引擎r := gin.Default()// 配置模板的文件r.LoadHTMLGlob("tpls/**/*")// r.LoadHTMLFiles("tpls/admin/news.html") // 逐个指定多个需要使用逗号分隔// 根路由r.GET("/", func(c *gin.Context) {c.String(statusOK, "Welcome to %v", "Home Page")})r.GET("/admin/news", func(c *gin.Context) {c.HTML(statusOK, "admin/news.html", gin.H{"title": "新闻标题","content": "这是详细的新闻内容",})})r.Run()
}

3 ）多层复杂目录配置

  • 首先看下设定的结构

    yourGinProject/ ·······························  根目录├── go.mod ··································  go mod 文件├── go.sum ··································  go sum 文件├── main.go ·································  main 文件└── tpls ····································· html模板目录├── a│   └── b│  		└── c│  		    └── d│  		        └── e│  		            └── news.html├── admin│   └── news.html│└── news.html

    • tpls/news.html

      {{ define "news.html" }}<h1>News Page</h1><h3>标题：{{.title}}</h3>
<p>内容：{{.content}}</p>{{ end }}

    • tpls/admin/news.html

      {{ define "admin/news.html" }}<h1>News Page</h1><h3>标题：{{.title}}</h3>
<p>内容：{{.content}}</p>{{ end }}

    • tpls/a/b/c/d/e/news.html

      {{ define "a/b/c/d/e/news.html" }}<h1>News Page</h1><h3>标题：{{.title}}</h3>
<p>内容：{{.content}}</p>{{ end }}

    • 注意各个 news.html 的define设定

程序示例

package mainimport ("net/http""github.com/gin-gonic/gin"
)var statusOK = http.StatusOKfunc main() {// 创建一个默认的路由引擎r := gin.Default()// 配置模板的文件r.LoadHTMLGlob("tpls/**/**/**/**/**/*")// 根路由r.GET("/", func(c *gin.Context) {c.String(statusOK, "Welcome to %v", "Home Page")})// 这个配置和紧挨着下面的配置一致，只是路由自己设定了一个简洁版的r.GET("/x/news", func(c *gin.Context) {c.HTML(statusOK, "a/b/c/d/e/news.html", gin.H{"title": "新闻标题","content": "这是详细的新闻内容",})})// 多层路由，同上r.GET("/a/b/c/d/e/news", func(c *gin.Context) {c.HTML(statusOK, "a/b/c/d/e/news.html", gin.H{"title": "新闻标题","content": "这是详细的新闻内容",})})// 二级r.GET("/admin/news", func(c *gin.Context) {// r.LoadHTMLGlob("tpls/**/*") // 这里会 panic 报错r.LoadHTMLFiles("tpls/admin/news.html") // 这里正常可以访问，权重会大于顶部的全局配置c.HTML(statusOK, "admin/news.html", gin.H{"title": "新闻标题","content": "这是详细的新闻内容",})})// 一级r.GET("/news", func(c *gin.Context) {// r.LoadHTMLGlob("tpls/*") // 这里会 panic 报错r.LoadHTMLFiles("tpls/news.html") // 这里正常可以访问，权重会大于顶部的全局配置c.HTML(statusOK, "news.html", gin.H{"title": "新闻标题","content": "这是详细的新闻内容",})})r.Run()
}
  • 可以看到，在单个路由中r.LoadHTMLFiles 配置的用处了
  • 所以，以上就比较麻烦，一般而言，在一开始设计模板的时候，就要约定好规则
  • 特殊的设定只能应用于特殊的场景下

Gin的HTML模板语法


1 ）基本渲染

主程序

package mainimport ("net/http""github.com/gin-gonic/gin"
)var statusOK = http.StatusOKtype User struct {Id      intName    stringHobby   string
}func main() {// 创建一个默认的路由引擎r := gin.Default()// 配置模板的文件r.LoadHTMLGlob("tpls/*")// 根路由r.GET("/", func(c *gin.Context) {c.String(statusOK, "Welcome to %v", "Home Page")})r.GET("/user", func(c *gin.Context) {c.HTML(statusOK, "user.html", &User{Id:      1,Name:    " Wang ", // 注意，这里有2个空格Hobby:   "swimming",})})r.Run()
}

html模板

{{ define "user.html" }}<h1>User Page</h1><h3>用户Id：{{.Id}}</h3>
<!-- 下面这种也是注释 -->
{{/* 这里是姓名，本身数据存在空格，但是这个去空格的方式无法去除 */}}
<h3>用户姓名：{{- .Name -}}</h3>
<h3>用户爱好：{{.Hobby}}</h3>{{ $xId := .Id }}<h3>演示变量:  {{- $xId -}} </h3>{{ end }}
  • {{ .x }} x是属性，基于这种方式来输出数据
  • {{/* 这里是注释 */}} 注意 /* 和 */ 紧贴着 {{ 和 }}，可以多行，不可嵌套
  • {{ $xId := .Id }} 单独设定变量, 变量名只能使用一个 $
  • {{- $xId -}} 这种去除空格，只能去除周围的空格，无法去除属性内包含的空格，且-紧贴{{和}}，同时与模板值之间需要使用空格分隔

效果图

2 ) 比较, 判断, range, with

主程序

package mainimport ("net/http""github.com/gin-gonic/gin"
)type Article struct {Title   stringContent string
}var statusOK = http.StatusOKfunc main() {r := gin.Default()//加载模板 放在配置路由上面r.LoadHTMLGlob("tpls/**/*")//前台r.GET("/", func(c *gin.Context) {c.HTML(statusOK, "web/index.html", gin.H{"title": "首页","msg":   " 我是msg","score": 89,"hobby": []string{"吃饭", "睡觉", "写代码"},"newsList": []interface{}{&Article{Title:   "新闻标题1",Content: "新闻详情1",},&Article{Title:   "新闻标题2",Content: "新闻详情2",},},"testSlice": []string{},"news": &Article{Title:   "新闻标题",Content: "新闻内容",},})})r.Run()
}

html模板

{{ define "web/index.html" }}<h2>title变量展示: {{.title}}</h2><!-- 定义变量 -->
{{$t := .title}}<!-- 这里展示 title -->
<h4>这里通过变量，再次展现title: {{$t}}
</h4><!-- 条件判断 -->
<h4>这里基于判断，展示是否及格</h4>
{{if ge .score 60}}<p>及格</p>
{{else}}<p>不及格</p>
{{end}}<h4>这里基于判断，更加细度展示成绩</h4>{{if gt .score 90}}<p>优秀</p>
{{else if gt .score 80}}<p>良好</p>
{{else if gt .score 60}}<p>及格</p>
{{else}}<p>不及格</p>
{{end}}<!-- 循环遍历数据 -->
<h3>下面用range开始遍历 hobby 数组</h3>
<ul>{{range $key,$value:=.hobby}}<li>{{$key}}----{{$value}}</li>{{end}}
</ul><h3>下面用range开始遍历 新闻 数组</h3>
<ul>{{range $key,$value:=.newsList}}<li>{{$key}}----{{$value.Title}}---{{$value.Content}}</li>{{end}}        
</ul><h3>下面用range遍历中，空数组场景的展示</h3>
<ul>{{range $key,$value:=.testSlice}}<li>{{$key}}----{{$value}}</li>{{else}}<li>数组中没有数据</li>{{end}}        
</ul><!-- with 解构结构体 -->
<h3>不使用 with 结构属性</h3>
<p>{{.news.Title}}</p>
<p>{{.news.Content}}</p><h3>使用 with 结构属性</h3>
{{with .news}}<p>{{.Title}}</p><p>{{.Content}}</p>
{{end}}{{ end }}
  • 关于比较函数中的一些注意事项
    • eq 如果 arg1 == arg2 则返回真
    • ne 如果 arg1 != arg2 则返回真
    • lt 如果 arg1 < arg2 则返回真
    • le 如果 arg1 <= arg2 则返回真
    • gt 如果 arg1 > arg2 则返回真
    • ge 如果 arg1 >= arg2 则返回真

效果图

3 ）高阶用法：预定义函数，自定义模板函数，嵌套模板

  • 首先看下设定的结构
    yourGinProject/ ·······························  根目录├── go.mod ··································  go mod 文件├── go.sum ··································  go sum 文件├── main.go ·································  main 文件└── tpls ····································· html模板目录├── web│     └── index.html└── common└── page_header.html└── page_footer.html

主程序

package mainimport ("html/template""net/http""time""github.com/gin-gonic/gin"
)type Article struct {Title   stringContent string
}var statusOK = http.StatusOK//时间戳转换成日期
func UnixToTime(timestamp int) string {t := time.Unix(int64(timestamp), 0)return t.Format("2006-01-02 15:04:05") // 这个是按照这个时间来进行格式化, 必须是这个时间点, 据说是go诞生之日
}func Println(str1 string, str2 string) string {return str1 + "----" + str2
}func main() {// 创建一个默认的路由引擎r := gin.Default()//自定义模板函数, 注意要把这个函数放在加载模板前r.SetFuncMap(template.FuncMap{"UnixToTime": UnixToTime,"Println":    Println,})//加载模板 放在配置路由上面r.LoadHTMLGlob("tpls/**/*")// 前台r.GET("/", func(c *gin.Context) {c.HTML(statusOK, "web/index.html", gin.H{"title": "首页","titleEn": "homePage","msg": "demo","date": 1708344953,})})r.Run()
}

web/index.html模板

{{ define "web/index.html" }}<!-- 这里定义通用头部 -->{{template "common/page_header.html" .}}<h3>下面演示: 预定义函数</h3><!-- 预定义函数 -->{{ len .title }}<br />{{ len .titleEn }}<!-- 自定义模板函数 --><h3>下面演示: 自定义模板函数</h3>{{.date}}<br /><br />{{UnixToTime .date}}<br><br>{{Println .title .msg}}<!-- 这里定义通用尾部 -->{{template "common/page_footer.html" .}}{{ end }}

common/page_header.html模板

{{ define "common/page_header.html" }}<h3>我是一个公共的标题---{{.title}}</h3>
{{end}}

common/page_footer.html模板

{{ define "common/page_footer.html" }}<h3>我是一个公共的底部</h3>
{{end}}

  • 在 预定义函数 中，执行模板时，函数从两个函数字典中查找

    • 首先是模板函数字典，然后是全局函数字典。
    • 一般不在模板内定义函数，而是使用 Funcs 方法添加函数到模板里

  • 预定义的全局函数如下

    • and
      • 函数返回它的第一个 empty 参数或者最后一个参数
      • 就是说"and x y"等价于"if x then y else x"；所有参数都会执行
    • or
      • 返回第一个非 empty 参数或者最后一个参数
      • 亦即"or x y"等价于"if x then x else y"；所有参数都会执行
    • not
      • 返回它的单个参数的布尔值的否定
    • len
      • 返回它的参数的整数类型长度
    • index
      • 执行结果为第一个参数以剩下的参数为索引/键指向的值
      • 如"index x 1 2 3"返回 x[1][2][3]的值；每个被索引的主体必须是数组、切片或者字典
    • print
      • 即 fmt.Sprint
    • printf
      • 即 fmt.Sprintf
    • println
      • 即 fmt.Sprintln
    • html
      • 返回与其参数的文本表示形式等效的转义 HTML
      • 这个函数在 html/template 中不可用
    • urlquery
      • 以适合嵌入到网址查询中的形式返回其参数的文本表示的转义值
      • 这个函数在 html/template 中不可用
    • js
      • 返回与其参数的文本表示形式等效的转义 JavaScript
    • call
      • 执行结果是调用第一个参数的返回值，该参数必须是函数类型，其余参数作为调用该函
        数的参数
      • 如"call .X.Y 1 2"等价于 go 语言里的 dot.X.Y(1, 2)
      • 其中 Y 是函数类型的字段或者字典的值，或者其他类似情况
      • call 的第一个参数的执行结果必须是函数类型的值（和预定义函数如 print 明显不同）
      • 该函数类型值必须有 1 到 2 个返回值，如果有 2 个则后一个必须是 error 接口类型
      • 如果有 2 个返回值的方法返回的 error 非 nil，模板执行会中断并返回给调用模板执行者该错误

  • 在自定义模板函数中，比如定义了 formatDate 方法，有两种用法

    • {{.now | formatDate}} 或
    • {{formatDate .now }}

  • 在嵌套 template中，注意最后的点（.）

效果图

静态文件服务器的配置


这块比较简单

主程序

package mainimport ("net/http""github.com/gin-gonic/gin"
)var statusOK = http.StatusOKfunc main() {// 创建一个默认的路由引擎r := gin.Default()//配置静态web目录 第一个参数表示路由, 第二个参数表示映射的目录r.Static("/static", "./static")// 前台r.GET("/", func(c *gin.Context) {c.String(statusOK, "Welcome to %v", "Home Page")})r.Run()
}
  • 这样就设定好了，在与 main.go 同级新建 static/images 目录，添加 mysql-logo.svg 图片
  • 访问该图片: http://localhost:8080/static/images/mysql-logo.svg
  • 其他的，如：css, js 这类也同样适用
  • 这时候，静态文件服务器就搭建好了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/478095.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

matplotlib图例使用案例1.1:在不同行或列的图例上添加title

matplotlib图例使用案例1.1:在不同行或列的图例上添加title

我们将图例进行行显示或者列显示后&#xff0c;只能想继续赋予不同行或者列不同的title来进行分类。比较简单的方式&#xff0c;就是通过ax.annotate方法添加标签&#xff0c;这样方法复用率比较低&#xff0c;每次使用都要微调ax.annotate的显示位置。比较方便的方法是在案例1…
阅读更多...
Python Flask高级编程之RESTFul API前后端分离（学习笔记）

Python Flask高级编程之RESTFul API前后端分离（学习笔记）

Flask-RESTful是一个强大的Python库&#xff0c;用于构建RESTful APIs。它建立在Flask框架之上&#xff0c;提供了一套简单易用的工具&#xff0c;可以帮助你快速地创建API接口。Flask-RESTful遵循REST原则&#xff0c;支持常见的HTTP请求方法&#xff0c;如GET、POST、PUT和DE…
阅读更多...
C# CAD2016 多边形顶点按方向重新排序

C# CAD2016 多边形顶点按方向重新排序

多边形顶点按方向重新排序 初始化多边形顶点集合 outerPoints 创建一个名为 outerPoints 的 List<Point2d>&#xff0c;用于存储多边形的所有顶点坐标。 计算多边形顶点集合的边界框&#xff08;BoundingBox&#xff09; 使用LINQ的Aggregate方法遍历整个outerPoints列表…
阅读更多...
金融云行业研究：预计2029年将达到626亿美元

金融云行业研究：预计2029年将达到626亿美元

金融云是指金融机构利用云计算模型构成原理&#xff0c;将自身数据、客户、流程及价值通过数据中心、客户端等技术手段分散到“云”中&#xff0c;以提高金融机构迅速发现并解决问题的能力&#xff0c;提升整体工作效率&#xff0c;改善流程&#xff0c;降低运营成本&#xff0…
阅读更多...
代码随想录算法训练营29期|day54 任务以及具体安排

代码随想录算法训练营29期|day54 任务以及具体安排

第九章 动态规划part11 123.买卖股票的最佳时机III // 版本一 class Solution {public int maxProfit(int[] prices) {int len prices.length;// 边界判断, 题目中 length > 1, 所以可省去if (prices.length 0) return 0;/** 定义 5 种状态:* 0: 没有操作, 1: 第一次买入…
阅读更多...
VUE3 中导入Visio 图形

VUE3 中导入Visio 图形

微软的Visio是一个功能强大的图形设计工具&#xff0c;它能够绘制流程图&#xff0c;P&ID&#xff0c;UML 类图等工程设计中常用的图形。它要比其它图形设计软件要简单许多。以后我的博文中将更多地使用VISO 来绘制图形。之前我一直使用的是corelDraw。 Visio 已经在工程设…
阅读更多...
grid新建主从一对多

grid新建主从一对多

目录 总结一、步骤前端1.第一步-编写tabs的modelBody2.第二步编辑表扩展js 后端--重写表的add和Update方法1.第一步 总结 编写tabs的modelBody后编辑表扩展js在重写后端partial的Service 一、步骤 前端 1.第一步-编写tabs的modelBody 复制下面代码该改的改 <template&…
阅读更多...
白话微机：5.解释串行接口以及一些考研面试问题

白话微机：5.解释串行接口以及一些考研面试问题

一. 前言&#xff08;回顾世界观&#xff09; 很久很久以前&#xff0c;有这样一个世界&#xff0c;这个世界有着现实世界一样的元素&#xff1a;那里的人又有一个别的名字叫做“数据”&#xff0c;人有0有1&#xff1b;人们也有住房&#xff0c;这些住房在这个世界叫做“存储器…
阅读更多...
IO进程线程作业day2

IO进程线程作业day2

使用fread和fwrite完成两个图片文件的拷贝 #include <myhead.h> #define high 541 #define wide 541 int main(int argc, const char *argv[]) {//以只读的方式打开图片文件1.bmpFILE *fp NULL;if((fp fopen("./1.bmp", "r")) NULL){perror(&qu…
阅读更多...
【C语言】位操作符与移位操作符练习

【C语言】位操作符与移位操作符练习

目录 前言&#xff1a; 1.一道变态的面试题 2.输入一个整数 n &#xff0c;输出该数32位二进制表示中1的个数。其中负数用补码表示。 方法一&#xff1a; 方法二&#xff1a; 方法三&#xff1a; 3.打印整数二进制的奇数位和偶数位 前言&#xff1a; 前篇我们学习过C语言…
阅读更多...
【漏洞复现-通达OA】通达OA WHERE_STR 存在前台SQL注入漏洞

【漏洞复现-通达OA】通达OA WHERE_STR 存在前台SQL注入漏洞

一、漏洞简介 通达OA（Office Anywhere网络智能办公系统）是由北京通达信科科技有限公司自主研发的协同办公自动化软件，是与中国企业管理实践相结合形成的综合管理办公平台。通达OA WHERE_STR存在前台SQL注入漏洞，攻击者可通过该漏洞获取数据库敏感信息。 二、影响版本 ●…
阅读更多...
《白话C++》第10章 STL和boost，Page85 std::shared_ptr常用功能

《白话C++》第10章 STL和boost，Page85 std::shared_ptr常用功能

std::shared_ptr基本用法包括&#xff1a; &#xff08;1&#xff09;取裸指针 //get()成员取回裸指针 std::shared_ptr <int> pa(new int(5)); int* p pa.get(); /**< 取回裸指针 */ &#xff08;2&#xff09;判断是否为空 肯定可以这样写&#xff1a; std::s…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023