网站建设的建议,lol做任务领头像网站,邢台网公众号,做网站公司北京一.Gin HTML 模板渲染全部模板放在一个目录里面的配置方法首先在项目根目录新建 templates 文件夹#xff0c;然后在文件夹中新建 对应的index.html!DOCTYPE html
html langen
head
meta charsetUTF-8
meta http…一.Gin HTML 模板渲染全部模板放在一个目录里面的配置方法首先在项目根目录新建 templates 文件夹然后在文件夹中新建 对应的index.html!DOCTYPE html
html langen
head
meta charsetUTF-8
meta http-equivX-UA-Compatible contentIEedge
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDocument/title
/head
body
h1这是一个 html 模板/h1
h3{{.title}}/h3
/body
/html2.Gin 框架中使用 c.HTML 可以渲染模板渲染模板前需要使用 LoadHTMLGlob()或者LoadHTMLFiles()方法加载模板package main
import ( net/httpgithub.com/gin-gonic/gin
)func main() {//初始化路由router : gin.Default()//加载templates中所有模板文件, 使用不同目录下名称相同的模板,注意:一定要放在配置路由之前才得行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: 首页, })})router.GET(/, func(c *gin.Context) {c.HTML(http.StatusOK, index.html, map[string]interface{}{ title: 前台首页})})router.Run(:8080)
}模板放在不同目录里面的配置方法目录如下Gin 框架中如果不同目录下面有同名模板的话我们需要使用下面方法加载模板注意定义模板的时候需要通过 define 定义名称//templates/admin/index.html
!-- 相当于给模板定义一个名字 define end 成对出现--{{ define admin/index.html }}
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta http-equivX-UA-Compatible contentIEedge
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDocument/title
/head
body
h1后台模板/h1
h3{{.title}}/h3
/body
/html
{{ end }}templates/default/index.html
!-- 相当于给模板定义一个名字 define end 成对出现--{{ define default/index.html }}
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta http-equivX-UA-Compatible contentIEedge
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDocument/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 mainimport ( net/httpgithub.com/gin-gonic/gin
)type UserInfo struct {Name stringGender stringAge 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 end 成对出现--{{ define default/index.html }}
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta http-equivX-UA-Compatible contentIEedge
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDocument/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}}(6).rangeGo 的模板语法中使用 range 关键字进行遍历有以下两种写法其中 pipeline 的值必须是数组、切片、字典或者通道{{range $key,$value : .obj}}{{$value}}
{{end}}如果 pipeline 的值其长度为 0不会有任何输出{{$key,$value : .obj}}{{$value}}
{{else}}pipeline 的值其长度为 0
{{end}}如果 pipeline 的值其长度为 0则会执行 T0router.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}}(7).withuser : UserInfo{Name: 张三, Gender: 男, Age: 18,
}
router.GET(/, func(c *gin.Context) {c.HTML(http.StatusOK, default/index.html, map[string]interface{}{ user: user, })
})以前要输出数据:h4{{.user.Name}}/h4
h4{{.user.Gender}}/h4
h4{{.user.Age}}/h4现在要输出数据:{{with .user}}h4姓名{{.Name}}/h4h4性别{{.Gender}}/h4h4年龄{{.Age}}/h4
{{end}}相当于 var ..user(8).预定义函数执行模板时函数从两个函数字典中查找首先是模板函数字典然后是全局函数字典,一般不在模板内定义函数而是使用 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.Sprintprintf即 fmt.Sprintfprintln即 fmt.Sprintlnhtml返回与其参数的文本表示形式等效的转义 HTML。这个函数在 html/template 中不可用urlquery以适合嵌入到网址查询中的形式返回其参数的文本表示的转义值。这个函数在 html/template 中不可用js返回与其参数的文本表示形式等效的转义 JavaScriptcall执行结果是调用第一个参数的返回值该参数必须是函数类型其余参数作为调用该函数的参数如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}}(9).自定义模板函数package mainimport ( fmthtml/templatenet/httptimegithub.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 end 成对出现--
{{ define default/index.html }}
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta http-equivX-UA-Compatible contentIEedge
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDocument/title
/head
body
{{template default/page_header.html .}}
/body
/html
{{end}}二.静态文件服务当渲染的HTML 文件中引用了静态文件时,需要配置静态 web 服务r.Static(/static, ./static),前面的/static 表示路由,后面的./static 表示路径func main() {r : gin.Default()r.Static(/static, ./static)r.LoadHTMLGlob(templates/**/*)// ... r.Run(:8080)
}link relstylesheet href/static/css/base.css /案例目录如下:代码如下:main.gopackage mainimport (github.com/gin-gonic/ginhtml/templatenet/httptime
)type Article struct {Title string json:titleContent string json:}//时间戳转换成日期函数
func UnixToTime(timestamp int) string {t : time.Unix(int64(timestamp), 0)return t.Format(2006-01-02 15:04:05)
}func Println(str1 string, str2 string) string {return str1 str2
}func main() {//初始化路由r : gin.Default()//自定义模板函数,必须在r.LoadHTMLGlob前面r.SetFuncMap(template.FuncMap{UnixToTime:UnixToTime, //注册模板函数Println: Println,})//加载templates中所有模板文件, 使用不同目录下名称相同的模板,注意:一定要放在配置路由之前才得行r.LoadHTMLGlob(templates/**/*)//配置静态web目录 第一个参数表示路由,第二个参数表示映射的目录r.Static(/static, ./static)//配置路由//前台路由r.GET(/, func(c *gin.Context) {//渲染模板文件c.HTML(http.StatusOK, default/index.html, gin.H{title: 首页,score: 88,hobby: []string{吃饭, 睡觉, 打豆豆}, // 切片newList:[]interface{}{ // 接口Article{Title: 新闻标题1,Content: 新闻内容1,},Article{Title: 新闻标题2,Content: 新闻内容2,},},testSlice:[]string{}, // 空数组/空切片news: Article{ // 结构体Title: 新闻标题3,Content: 新闻内容3,},date: 1672648334,})})r.GET(/news, func(c *gin.Context) {news : Article{Title: 新闻标题,Content: 新闻内容,}c.HTML(http.StatusOK, default/news.html, gin.H{title: 新闻详情,news: news,})})//后台路由r.GET(/admin, func(c *gin.Context) {//渲染模板文件c.HTML(http.StatusOK, admin/index.html, gin.H{title: 后台首页,})})r.GET(/admin/news, func(c *gin.Context) {news : Article{Title: 后台新闻标题,Content: 后台新闻内容,}c.HTML(http.StatusOK, admin/news.html, gin.H{title: 后台新闻详情,news: news,})})r.Run() // 启动一个web服务
}templates/admin/index.html!-- 相当于给模板定义一个名字, define end 必须成对出现 --
{{ define admin/index.html }}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title后台首页/title
/head
body
h2{{.title}}/h2
/body
/html
{{ end }}templates/admin/news.html{{ define admin/news.html }}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title后台新闻详情/title
/head
body
h2{{.title}}/h2
/body
/html
{{ end }}templates/default/index.html!-- 相当于给模板定义一个名字, define end 必须成对出现 --
{{ define default/index.html }}!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet href/static/css/base.csstitle首页/title/headbody{{ template public/page_header.html .}}h2{{.title}}/h2img src/static/images/test.png!-- 定义变量 把后台的变量赋值给$t --{{ $t : .title}}!-- 显示$t --h4 {{ $t }}/h4!-- if判断 --{{if gt .score 90}}div优秀/divbr/{{else if gt .score 80}}div良好/divbr/{{else if gt .score 70}}div可以/divbr/{{ else }}div合格/divbr/{{end}}!-- 循环数据 --ul!-- 循环切片 --{{range $k, $v : .hobby}}li{{$k}} {{$v}}/li{{end}}/ulul!-- 循环结构体 --{{range $k, $v : .newList}}li{{$k}} {{$v.Title}} --- {{$v.Content}}/li{{end}}/ulul!-- 循环空数组/切片 判断 --{{range $k, $v : .testSlice}}li{{$k}} {{$v.Title}} --- {{$v.Content}}/li{{else}}li空数据/li{{end}}/ulul!-- with 解析结构体--{{with .news}}li{{.Title}} {{.Content}}/li{{end}}/ulh4!--预定义函数 --{{.title}}的长度为{{len .title}}/h4h4!--自定义函数 --{{UnixToTime .date}}{{Println .title .news.Title}}/h4!-- 嵌套 template --{{ template public/page_footer.html .}}/body/html
{{end}}templates/default/news.html!-- 相当于给模板定义一个名字, define end 必须成对出现 --
{{ define default/news.html }}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlenews/title
/head
body
{{ template public/page_header.html .}}link relstylesheet hrefstatic/css/base.css
h2{{.title}}/h2
h4{{.news.Title}}{{.news.Content}}
/h4
{{ template public/page_footer.html .}}
/body
/html
{{ end }} templates/public/page_footer.html!-- 相当于给模板定义一个名字, define end 必须成对出现 --
{{ define public/page_footer.html }}h4公共的底部/h4
{{end}}templates/public/page_header.html!-- 相当于给模板定义一个名字, define end 必须成对出现 --
{{ define public/page_header.html }}h1公共的 --- {{.title}}/h1
{{end}}[上一节][golang gin框架] 1.Gin环境搭建,程序的热加载,路由GET,POST,PUT,DELETE
