一、结构体
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>Title</title> </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>Title</title> </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>Title</title> </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>Title</title> </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>Title</title> </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>Title</title> </head> <body> <div>切片渲染</div> <p>方式一：</p> {{range .}} <!-- 这里的点表示的就是后端传递过来的上下文切片 --> {{.}} <!-- 这里的点表示的就是每一个循环的数据值 --> {{end}} <p>方式2：</p> {{range $i, $v := .}} {{$i}} - {{$v}} <br> {{end}} </body> </html>