Gin使用html模板--將結構體、切片傳至前端
本文實現一個管理系統左邊菜單欄的動態顯示，頁面使用的是adminLTA模板中的starter.html
1.定義結構體
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"`
}
結構體的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.com/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")
}