Gin框架系列之数据类型渲染
一、结构体
1、后端
package main import ( "github.com/gin-gonic/gin" "net/http" ) type User struct { Id int Name string Age int } func StructDemo(ctx *gin.Context) { user := User{ Id: 1, Name: "lily", Age: 25, } ctx.HTML(http.StatusOK, "index.html", user) } func main() { router := gin.Default() // 加载模板路径 router.LoadHTMLGlob("template/*") // 结构体渲染 router.GET("/index", StructDemo) router.Run(":8080") }
2、前端
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p>结构体渲染p>
{{ .Id }}
{{ .Name }}
{{ .Age }}
body>
html>
其中的"."表示的就是上下文，就是后台传递过来的对象，表示的就是结构体对象。
二、数组渲染
1、后端
package main import ( "github.com/gin-gonic/gin" "net/http" ) func ArrayDemo(ctx *gin.Context) { numArr := [5]int{1, 2, 3, 4, 5} ctx.HTML(http.StatusOK, "index1.html", numArr) } func main() { router := gin.Default() // 加载模板路径 router.LoadHTMLGlob("template/*") // 数组渲染 router.GET("/index1", ArrayDemo) router.Run(":8080") }
2、前端
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>数组渲染div>
<p>方式一：p>
{{range .}}
{{.}}
{{end}}
<p>方式2：p>
{{range $i, $v := .}}
{{$i}} - {{$v}} <br>
{{end}}
body>
html>
三、数组结构体
1、后端
package main import ( "github.com/gin-gonic/gin" "net/http" ) type User struct { Id int Name string Age int } func ArrStruDemo(ctx *gin.Context) { arr_struct := [2]User{ { Id: 1, Name: "lily", Age: 25, }, { Id: 2, Name: "berry", Age: 15, }, } ctx.HTML(http.StatusOK, "index2.html", arr_struct) } func main() { router := gin.Default() // 加载模板路径 router.LoadHTMLGlob("template/*") // 数组结构体 router.GET("/index2", ArrStruDemo) router.Run(":8080") }
2、前端
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>数组结构体渲染div>
<p>方式一：p>
{{range .}}
{{.Id}}
{{.Name}}
{{.Age}}
{{end}}
<p>方式2：p>
{{range $i, $v := .}}
{{$v.Id}}
{{$v.Name}}
{{$v.Age}} <br>
{{end}}
body>
html>
四、map
1、后端
package main import ( "github.com/gin-gonic/gin" "net/http" ) func MapDemo(ctx *gin.Context) { data := map[string]string { "Name": "zhangsan", "Age": "15", } ctx.HTML(http.StatusOK, "index3.html", data) } func main() { router := gin.Default() // 加载模板路径 router.LoadHTMLGlob("template/*") // map router.GET("index3", MapDemo) router.Run(":8080") }
2、前端
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>map渲染div>
{{.Name}}
{{.Age}}
body>
html>
五、map结构体
1、后端
package main import ( "github.com/gin-gonic/gin" "net/http" ) type User struct { Id int Name string Age int } func MapStruDemo(ctx *gin.Context) { data := map[string]User{ "u1": { Id: 1, Name: "lily", Age: 25, }, "u2": { Id: 2, Name: "berry", Age: 15, }, } ctx.HTML(http.StatusOK, "index4.html", data) } func main() { router := gin.Default() // 加载模板路径 router.LoadHTMLGlob("template/*") // map结构体 router.GET("/index4", MapStruDemo) router.Run(":8080") }
2、前端
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>map结构体渲染div>
{{.u1.Id}}
{{.u1.Name}}
{{.u1.Age}}
<br>
{{.u2.Id}}
{{.u2.Name}}
{{.u2.Age}}
body>
html>
六、切片
切片与数组类似，动态数组。
1、后端
package main import ( "github.com/gin-gonic/gin" "net/http" ) type User struct { Id int Name string Age int } func SliceDemo(ctx *gin.Context) { numSlice := []int{1, 2} // 无需指定数组的长度，动态数组 ctx.HTML(http.StatusOK, "index5.html", numSlice) } func main() { router := gin.Default() // 加载模板路径 router.LoadHTMLGlob("template/*") // 切片 router.GET("/index5", SliceDemo) router.Run(":8080") }
2、前端
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>切片渲染div>
<p>方式一：p>
{{range .}}
{{.}}
{{end}}
<p>方式2：p>
{{range $i, $v := .}}
{{$i}} - {{$v}} <br>
{{end}}
body>
html>