4 Gin HTML模板渲染以及模板语法自定义模板函数静态文件服务(下)

main.go

package main

import (
	"fmt"
	"html/template"
	"net/http"
	"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(http.StatusOK, "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": 1629423555,
		})
	})
	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) {
		c.HTML(http.StatusOK, "admin/news.html", gin.H{
			"title": "新闻页面",
		})
	})
-
	r.Run()
}

　　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/node.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 }}

posted on 2022-10-01 14:05 KOA2后端阅读(94) 评论(0) 收藏举报

4 Gin HTML模板渲染以及模板语法 自定义模板函数 静态文件服务(下)

4 Gin HTML模板渲染以及模板语法自定义模板函数静态文件服务(下)