时间戳

首页 > 技术文章 > Gin使用html模板--将结构体、切片传至前端

Gin使用html模板--将结构体、切片传至前端

ihappycat 2020-12-11 16:13 原文

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

推荐阅读