Golang框架Gin入门实战--(4)HTML模板渲染以及模板语法自定义模板函数静态文件服务(下)

互联网-小阿宇

已于 2022-06-07 17:25:25 修改

阅读量980

点赞数

分类专栏： Gin框架文章标签： golang html 开发语言

于 2022-06-07 15:00:52 首次发布

小啊宇~！

本文链接：https://blog.csdn.net/weixin_46152207/article/details/125165350

版权

Gin框架专栏收录该内容

8 篇文章 2 订阅

订阅专栏

Golang框架Gin入门实战–(4)HTML模板渲染以及模板语法自定义模板函数静态文件服务(下)

此篇文章内容基于上篇文章继续修改Golang框架Gin入门实战–(3)HTML模板渲染及模板语法(上)
在这里插入图片描述
main.go

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()
}

GINDEMO\templates\admin\index.html

{{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}}

GINDEMO\templates\admin\news.html

{{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}}

GINDEMO\templates\default\index.html

<!--相当于给模板定义一个名称 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}}

GINDEMO\templates\default\news.html

{{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}}

GINDEMO\templates\public\page_footer.html

<!--相当于给模板定义一个名称 define-end成对出现-->
{{define "public/page_footer.html"}}


<h1>
    我是一个公共的底部
</h1>
{{end}}

GINDEMO\templates\public\page_header.html

<!--相当于给模板定义一个名称 define-end成对出现-->
{{define "public/page_header.html"}}


<h1>
    我是一个公共的标题---{{.title}}
</h1>
{{end}}

在demo目录下创建一个static目录用于存放静态文件
再在static目录下分别创建css、images、js目录

GINDEMO\static\css

h1 {
    
   background: #000;
    color: #fff;
    text-align: center;
    

}

h2 {
    color: red;
}

GINDEMO\static\images
存放一张名为test.jpg图片

访问localhost:8080
在这里插入图片描述
访问localhost:8080/news

互联网-小阿宇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Golang框架Gin入门实战--(4)HTML模板渲染以及模板语法自定义模板函数静态文件服务(下)

Golang框架Gin入门实战--(4)HTML模板渲染以及模板语法自定义模板函数静态文件服务(下)
复制链接

扫一扫

专栏目录

Golang框架Gin入门实战--(4)HTML模板渲染以及模板语法 自定义模板函数 静态文件服务(下)

Golang框架Gin入门实战–(4)HTML模板渲染以及模板语法 自定义模板函数 静态文件服务(下)

“相关推荐”对你有帮助么？

Golang框架Gin入门实战--(4)HTML模板渲染以及模板语法自定义模板函数静态文件服务(下)

Golang框架Gin入门实战–(4)HTML模板渲染以及模板语法自定义模板函数静态文件服务(下)