Gin使⽤html模板--将结构体、切⽚传⾄前端Gin使⽤html模板--将结构体、切⽚传⾄前端
本⽂实现⼀个管理系统左边菜单栏的动态显⽰，页⾯使⽤的是adminLTA模板中的starter.html
1.定义结构体
type LeftAside struct {
NavTree NavTree  `json:"navtree"`
NavItem []NavItem `json:"navitem"`html新年网页中文模板
}
type NavTree struct {
Name string `json:"name"`
Icon string `json:"icon"`
}
type NavItem struct {
Href string `json:"href"`
Name string `json:"name"`
}
结构体的json⽰例
[
{"navtree":{"name":"starter pages","icon":"nav-icon fas fa-tachometer-alt"},"navitem":[{"href":"/aaaa/bbb","name":"功能⼀"}, {"href":"/aaaa/ccc","name":"功能⼆"}]},
{"navtree":{"name":"main pages","icon":"nav-icon fas fa-tachometer-alt"},"navitem":[{"href":"/aaaa/bbb","name":"功能⼀"}, {"href":"/aaaa/ccc","name":"功能⼆"}]}
]
2.建⽴html模板⽂件夹
3.利⽤gin加载html模板
[
r.LoadHTMLGlob("templates/*") //templates⽂件夹下所有模板⽂件
]
4.将左边栏菜单结构体对象返回⾄指定的前端html模板页⾯
lfetasides := []LeftAside{ //⽅法1：初始化结构体
{NavTree: NavTree{Name: "startpages", Icon: "nav-icon fas fa-tachometer-alt"},
NavItem: []NavItem{{Href: "/aaa/bbb", Name: "功能⼀"}, {Href: "/aaa/ccc", Name: "功能⼆"}}},
{NavTree: NavTree{Name: "mainpages", Icon: "nav-icon fas fa-tachometer-alt"},
NavItem: []NavItem{{Href: "/aaa/eee", Name: "功能三"}, {Href: "/aaa/fff", Name: "功能四"}}},
}
aaa := []LeftAside{}
for i := 0; i <= 10; i++ { //⽅法2：循环给结构体赋值
aaa = append(aaa, LeftAside{NavTree: NavTree{Name: "startpages" + strconv.Itoa(i), Icon: "nav-icon fas fa-
tachometer-alt"},
NavItem: []NavItem{{Href: "/aaa/bbb", Name: "功能⼀"}, {Href: "/aaa/ccc", Name: "功能⼆"}}})
}
dataM2, err := json.Marshal(aaa)
if err != nil {
fmt.Printf("序列化错误 err = %v\n", err)
}
fmt.Println(string(dataM2))
c.HTML(http.StatusOK, "hello.html", gin.H{
"lists":  lfetasides,
"jsonres": string(dataM2),
"tt":      aaa,
})
5.前端html模板页⾯加载数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>
</head>
<body>
<h1>
对象：{{ .lists }}
</h1>
<br>
<h1>
字符串：{{ .jsonres }}
</h1>
<br>
<hr>
{{range .tt}}
<h3>{{.NavTree.Name }}</h3>
<h3>{{.NavTree.Icon }}</h3>
{{range .NavItem}}
<h6>{{.Name}}</h6>
{{end}}
{{end}}
<br>
<hr>
</body>
</html>
效果图
完整gin代码
package main
import (
"encoding/json"
"fmt"
"net/http"
"strconv"
"github/gin-gonic/gin"
)
type LeftAside struct {
NavTree NavTree  `json:"navtree"` NavItem []NavItem `json:"navitem"`
}
type NavTree struct {
Name string `json:"name"`
Icon string `json:"icon"`
}
type NavItem struct {
Href string `json:"href"`
Name string `json:"name"`
}
func main() {
r := gin.Default()
r.LoadHTMLGlob("templates/*")
r.GET("/ping", func(c *gin.Context) {
ipAddr := c.ClientIP()
fmt.Println(ipAddr)
c.JSON(200, gin.H{
"message": "pong",
})
})
r.GET("/test", func(c *gin.Context) {
lfetasides := []LeftAside{ //⽅法1：初始化结构体
{NavTree: NavTree{Name: "startpages", Icon: "nav-icon fas fa-tachometer-alt"},
NavItem: []NavItem{{Href: "/aaa/bbb", Name: "功能⼀"}, {Href: "/aaa/ccc", Name: "功能⼆"}}},
{NavTree: NavTree{Name: "mainpages", Icon: "nav-icon fas fa-tachometer-alt"},
NavItem: []NavItem{{Href: "/aaa/eee", Name: "功能三"}, {Href: "/aaa/fff", Name: "功能四"}}},
}
aaa := []LeftAside{}
for i := 0; i <= 10; i++ { //⽅法2：循环给结构体赋值
aaa = append(aaa, LeftAside{NavTree: NavTree{Name: "startpages" + strconv.Itoa(i), Icon: "nav-icon fas fa-tachometer-alt"},    NavItem: []NavItem{{Href: "/aaa/bbb", Name: "功能⼀"}, {Href: "/aaa/ccc", Name: "功能⼆"}}})
}
dataM2, err := json.Marshal(aaa)//测试结构体转化为json
if err != nil {
fmt.Printf("序列化错误 err = %v\n", err)
}
fmt.Println(string(dataM2))
c.HTML(http.StatusOK, "hello.html", gin.H{
"lists":  lfetasides,//传递给前端的值
"jsonres": string(dataM2),
"tt":      aaa,
})
})
r.Run(":8062")
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。