Golang框架Gin入门实战–(4)HTML模板渲染以及模板语法 自定义模板函数 静态文件服务(下)
此篇文章内容基于上篇文章继续修改Golang框架Gin入门实战–(3)HTML模板渲染及模板语法(上)
main.go
代码语言：javascript复制package main
import (
"fmt"
"html/template"
"time"
"github.com/gin-gonic/gin"
)
type Article struct {
Title string
Content string
}
//时间戳转换成日期
func UnixToTime(timestamp int) string {
fmt.Println(timestamp)
t := time.Unix(int64(timestamp), 0)
return t.Format("2006-01-02 15:04:05")
}
func Println(str1 string, str2 string) string {
fmt.Println(str1, str2)
return str1 "-----" str2
}
func main() {
r := gin.Default()
//自定义模板函数 注意要把这个函数放在加载模板前
r.SetFuncMap(template.FuncMap{
"UnixToTime": UnixToTime,
"Println": Println,
})
//加载模板
r.LoadHTMLGlob("templates/**/*")
// 配置静态web目录 第一个参数表示路由 第二个参数表示映射的目录
r.Static("/static", "./static")
//前台
r.GET("/", func(c *gin.Context) {
c.HTML(200, "default/index.html", gin.H{
"title": "aaa",
"msg": "我是msg",
"score": 89,
"hobby": []string{"吃饭", "睡觉", "写代码"},
"newsList": []interface{}{
&Article{
Title: "新闻标题111",
Content: "新闻详情111",
},
&Article{
Title: "新闻标题222",
Content: "新闻详情222",
},
},
"testSlice": []string{},
"news": &Article{
Title: "新闻标题",
Content: "新闻内容",
},
"date": 1654565445,
})
})
r.GET("/news", func(c *gin.Context) {
news := &Article{
Title: "新闻标题",
Content: "新闻详情",
}
c.HTML(200, "default/news.html", gin.H{
"title": "新闻页面",
"news": news,
})
})
//后台
r.GET("/admin", func(c *gin.Context) {
c.HTML(200, "admin/index.html", gin.H{
"title": "后台首页",
})
})
r.GET("/admin/news", func(c *gin.Context) {
c.HTML(200, "admin/news.html", gin.H{
"title": "新闻页面",
})
})
r.Run()
}GINDEMOtemplatesadminindex.html
代码语言：javascript复制{{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>
<h2>这是后台首页</h2>
</body>
</html>
{{end}}GINDEMOtemplatesadminnews.html
代码语言：javascript复制{{define "admin/news.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>
<h2>后台新闻页面</h2>
</body>
</html>
{{end}}GINDEMOtemplatesdefaultindex.html
代码语言：javascript复制<!--相当于给模板定义一个名称 define-end成对出现-->
{{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>
<link rel="stylesheet" href="/static/css/base.css">
</head>
<body>
{{template "public/page_header.html" .}}
<img src="/static/images/test.jpg" alt="">
<h2>{{.title}}</h2>
{{$t := .title}}
<!-- 定义变量 -->
<br>
<h4>
{{$t}}
</h4>
<!-- 条件判断 -->
{{if ge .score 60}}
<p>及格</p>
{{else}}
<p>不及格</p>
{{end}}
{{if gt .score 90}}
<p>优秀</p>
{{else if gt .score 80}}
<p>良好</p>
{{else if gt .score 60}}
<p>及格</p>
{{else}}
<p>不及格</p>
{{end}}
<!-- 循环遍历数据 -->
<ul>
{{range $key,$value:=.hobby}}
<li>{{$key}}----{{$value}}</li>
{{end}}
</ul>
<br>
<ul>
{{range $key,$value:=.newsList}}
<li>{{$key}}----{{$value.Title}}----{{$value.Content}}</li>
{{end}}
</ul>
<br>
<ul>
{{range $key,$value:=.testSlice}}
<li>{{$key}}----{{$value}}</li>
{{else}}
<li>数组中没有数据</li>
{{end}}
</ul>
<!-- with 解构结构体 -->
<p>{{.news.Title}}</p>
<p>{{.news.Content}}</p>
<br>
{{with .news}}
<p>{{.Title}}</p>
<p>{{.Content}}</p>
{{end}}
<br>
<!-- 预定义函数（了解） -->
{{len .title}}
<!-- 自定义模板函数 -->
<br>
<br>
{{.date}}
<br>
<br>
{{UnixToTime .date}}
<br>
<br>
{{Println .title .msg}}
<br><br>
{{template "public/page_footer.html" .}}
</body>
</html>
{{end}}GINDEMOtemplatesdefaultnews.html
代码语言：javascript复制{{define "default/news.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>
<link rel="stylesheet" href="static/css/base.css">
</head>
<body>
{{template "public/page_header.html" .}}
<h2>{{.title}}</h2>
<p>
{{.news.Title}}
</p>
<p>
{{.news.Content}}
</p>
<br><br>
{{template "public/page_footer.html" .}}
</body>
</html>
{{end}}GINDEMOtemplatespublicpage_footer.html
代码语言：javascript复制<!--相当于给模板定义一个名称 define-end成对出现-->
{{define "public/page_footer.html"}}
<h1>
我是一个公共的底部
</h1>
{{end}}GINDEMOtemplatespublicpage_header.html
代码语言：javascript复制<!--相当于给模板定义一个名称 define-end成对出现-->
{{define "public/page_header.html"}}
<h1>
我是一个公共的标题---{{.title}}
</h1>
{{end}}在demo目录下创建一个static目录用于存放静态文件 再在static目录下分别创建css、images、js目录
GINDEMOstaticcss
代码语言：javascript复制h1 {
background: #000;
color: #fff;
text-align: center;
}
h2 {
color: red;
}GINDEMOstaticimages 存放一张名为test.jpg图片
访问localhost:8080
访问localhost:8080/news
