golang学习之gin(二):模板渲染、数据渲染
2023-09-27 14:29:29 时间
文章目录
一、模板渲染:
1. 一级模板:
./main.go
package main
import (
"github.com/gin-gonic/gin"
)
func index(ctx *gin.Context) {
// HTML(code int, name string, obj interface{}): 状态码, 模板文件, 模板参数
ctx.HTML(200, "index.html", nil)
}
func main() {
// 模板渲染01
engine := gin.Default()
// 指定模板路径
engine.LoadHTMLGlob("template/*") // LoadHTMLGlob(pattern string): 通配路径
// engine.LoadHTMLFiles("index.html", "new.html") // LoadHTMLFiles(files ...string): 指定具体的html文件
engine.GET("/", index)
engine.Run(":9000")
}
./tempalte/index.html
<!DOCTYPE html>
<html>
<head>
<title>gin</title>
</head>
<body>
<h1>index html</h1>
</body>
</html>
2. 多级模板:
./main.go
package main
import (
"github.com/gin-gonic/gin"
)
func user(ctx *gin.Context) {
username := "张三"
ctx.HTML(200, "user/user.html", username)
}
func main() {
// 模板渲染02: 多级模板
engine := gin.Default()
// 指定模板路径
engine.LoadHTMLGlob("template/**/*") // LoadHTMLGlob(pattern string): 通配路径
engine.GET("/user", user)
engine.Run(":9000")
}
./template/user/user.html
{{ define "user/user.html" }}
<!DOCTYPE html>
<html>
<head>
<title>user页面</title>
</head>
<body>
<h1>大家好, 我是{{.}}</h1>
</body>
</html>
{{end}}
2.1 多级目录模板指定:
- 有几级目录,需要指明注册:
- 二级:
engine.LoadHTMLGlob("template/**/*") - 三级
engine.LoadHTMLGlob("template/**/**/*") - ps: 之前注册的模板被覆盖了, 再使用会报错!!!
- 二级:
- 指定html文件:
- 除了第一级的templarte路径不需要指定, 后面的路径都要指定
ctx.HTML(200, "user/user.html", username)
- 在html文件中
{{ define "user/user.html" }}
<html>
...
</html>
{{end}}
二、静态文件的使用:
./main.go
package main
import (
"net/http"
"github.com/gin-gonic/gin"
)
func static_file(ctx *gin.Context) {
ctx.HTML(http.StatusOK, "index/index.html", nil)
}
func main() {
// 模板渲染03: 静态文件
engine := gin.Default()
// 注册模板
engine.LoadHTMLGlob("template/**/*")
// 注册静态文件
engine.Static("./static", "static") // (relativePath, root string): 路径, 文件夹名称
// 注册路由
engine.GET("/", static_file)
engine.Run(":9000")
}
./template/index/index.html
{{ define "index/index.html" }}
<!DOCTYPE html>
<html lang="zh">
<head>
<title>静态文件</title>
<link rel="stylesheet" href="static/css/index.css">
</head>
<body>
<div class="content">引入静态文件</div>
</body>
</html>
{{end}}
./static/css/index.css
.content {
width: 200px;
height: 200px;
background-color: red;
color: orange;
font-size: 24px;
margin: 100px auto;
}
三、数据渲染:
1. 字符串渲染:
2.结构体渲染:
gin_project
├── chapter02
│ └── user.go
├── main.go
├── static
│ ├── css
│ ├── images
│ └── js
└── template
└── user
└── userinfo.html
./main.go
package main
import (
"gin_project/chapter02"
"github.com/gin-gonic/gin"
)
func main() {
engine := gin.Default()
// 注册模板
engine.LoadHTMLGlob("template/**/*")
// 注册静态文件
engine.Static("./static", "static") // (relativePath, root string): 路径, 文件夹名称
// 注册路由
engine.GET("/userinfo", chapter02.UserInfo)
engine.Run(":9000")
}
./chapter02/user.go
package chapter02
import (
"net/http"
"github.com/gin-gonic/gin"
)
type UserInfoStruct struct {
Id int
Age int
Name string
Addr string
}
func UserInfo(ctx *gin.Context) {
user_info := UserInfoStruct{
Id: 101,
Age: 18,
Name: "张三",
Addr: "北京市"}
ctx.HTML(http.StatusOK, "user/userinfo.html", user_info)
}
./template/user/userinfo.html
{{ define "user/userinfo.html" }}
<!DOCTYPE html> <html lang="zh">
<head>
<title>userInfo</title>
</head>
<body>
<h3>大家好, 我是来自{{.Addr}}的{{.Id}}号的{{.Name}}, 年龄{{.Age}}</h3>
</body>
</html>
{{ end }}
3. 数组渲染:
gin_project
├── chapter02
│ └── user.go
├── main.go
├── static
│ ├── css
│ ├── images
│ └── js
└── template
├── chapter02
│ └── arr.html
└── user
└── userinfo.html
./main.go
package main
import (
"gin_project/chapter02"
"github.com/gin-gonic/gin"
)
func main() {
engine := gin.Default()
// 注册模板
engine.LoadHTMLGlob("template/**/*")
// 注册静态文件
engine.Static("./static", "static") // (relativePath, root string): 路径, 文件夹名称
// 注册路由
engine.GET("/userinfo", chapter02.UserInfo)
engine.GET("/arr", chapter02.ArrController)
engine.Run(":9000")
}
./chapter02/user.go
package chapter02
import (
"net/http"
"github.com/gin-gonic/gin"
)
type UserInfoStruct struct {
Id int
Age int
Name string
Addr string
}
func UserInfo(ctx *gin.Context) {
// 结构体渲染
...
ctx.HTML(http.StatusOK, "user/userinfo.html", user_info)
}
func ArrController(ctx *gin.Context) {
// 数组渲染
arr := [3]int{1, 3, 5}
ctx.HTML(http.StatusOK, "chapter02/arr.html", arr)
}
./template/chapter02/arr.html
{{ define "chapter02/arr.html" }}
<!DOCTYPE html>
<html lang="zh">
<head>
<title>arr渲染</title>
</head>
<body>
<!-- 第一种循环方式 -->
<div>
{{ range . }}
<span>{{ . }}</span>
{{ end }}
</div>
<!-- 第二种方式: 定义两个变量, 获取"索引"和"值" -->
<div>
{{ range $i, $v := . }}
<p>
<span>{{ $i }}</span> : <span>{{ $v }}</span>
</p>
{{ end }}
</div>
</body>
</html>
{{ end }}
4. 结构体数组渲染:
./main.go
package main
...
func main() {
engine := gin.Default()
...
// 注册路由
engine.GET("/userinfo", chapter02.UserInfo)
engine.GET("/arr", chapter02.ArrController)
engine.GET("/arr_struct", chapter02.ArrStruct)
engine.Run(":9000")
}
./chapter02/user.go
package chapter02
...
type UserInfoStruct struct {
Id int
Age int
Name string
Addr string
}
func UserInfo(ctx *gin.Context) {
....
ctx.HTML(http.StatusOK, "user/userinfo.html", user_info)
}
func ArrController(ctx *gin.Context) {
...
ctx.HTML(http.StatusOK, "chapter02/arr.html", arr)
}
func ArrStruct(ctx *gin.Context) {
// 结构体数据
arr_struct := [3]UserInfoStruct{
{Id: 102, Age: 18, Name: "张三", Addr: "北京"},
{Id: 103, Age: 19, Name: "李四", Addr: "上海"},
{Id: 104, Age: 20, Name: "王五", Addr: "广州"},
}
ctx.HTML(http.StatusOK, "chapter02/arr_struct.html", arr_struct)
}
./template/chapter02/arr_struct.html
{{ define "chapter02/arr_struct.html" }}
<!DOCTYPE html>
<html lang="zh">
<head>
<title>结构体数组渲染</title>
</head>
<body>
<h4>第一种遍历方式</h4>
{{ range . }}
<p>
<span>{{ .Id }}</span>
<span>{{ .Age }}</span>
<span>{{ .Name }}</span>
<span>{{ .Addr }}</span>
</p>
{{ end }}
<h4>第二中遍历方式</h4>
{{ range $i, $v := . }}
<p>
<span>{{ $i }}</span>
<span>{{ $v.Id }}</span>
<span>{{ $v.Age }}</span>
<span>{{ $v.Name }}</span>
<span>{{ $v.Addr }}</span>
</p>
{{ end }}
</body>
</html>
{{ end }}
5. map渲染:
./chapter02/user.go
...
func MapController(ctx *gin.Context) {
// map数据结构
map_data := map[string]string{
"name": "张三",
"age": "20"}
ctx.HTML(http.StatusOK, "chapter02/map.html", map_data)
}
./template/chapter02/map.html
{{ define "chapter02/map.html" }}
<!DOCTYPE html>
<html lang="zh">
<head>
<title>map渲染</title>
</head>
<body>
{{.name}}
{{.age}}
{{.addr}}
<!-- 没有的值, 获取到的是默认值 -->
</body>
</html>
{{ end }}
6. map+struct渲染:
./chapter02/user.go
...
func MapStruct(ctx *gin.Context) {
// map数据结构
map_struct := map[string]UserInfoStruct{
"101": {Id: 101, Name: "张三", Addr: "北京"},
"102": {Id: 102, Name: "李四", Addr: "北京", Age: 19},
"103": {Id: 103, Name: "王五", Addr: "北京", Age: 20}}
ctx.HTML(http.StatusOK, "chapter02/map_struct.html", map_struct)
}
./template/chapter02/map_struct.html
{{ define "chapter02/map_struct.html" }}
<!DOCTYPE html>
<html lang="zh">
<head>
<title>map_struct渲染</title>
</head>
<body>
{{ range $k, $v := . }}
<p>
<span>{{$k}}</span>
<span>{{$v.Id}}</span>
<span>{{$v.Name}}</span>
<span>{{$v.Age}}</span>
<span>{{$v.Addr}}</span>
</p>
{{ end }}
</body>
</html>
{{ end }}
7. 切片渲染:
参考"数组的渲染"
相关文章
- 【深度学习】手把手教你开发自己的深度学习模板从二分类到多分类，从0到1
- Confluence 6 管理站点模板
- NLP-语义解析(Text2SQL)：技术路线【Seq2Seq、模板槽位填充、中间表达、强化学习、图网络】
- HDU 2222 Keywords Search 【AC自动机模板】
- C++初阶-模板初阶
- [测试新人必看] 测试报告如何编写？ 掌握这五十个测试报告模板
- jeecms首页模板自定义
- C++学习笔记_13 双向链表和链表模板 2021-05-06
- C++学习笔记_12 单向链表和单向链表模板 2021-04-29
- WinEdt Latex使用人家提供的模板时无法插入参考文献的方法
- 模板template用法
- CodeSmith模板代码生成实战详解
- 20款免费的 PSD 网站模板【免费下载】
- 超精美！10款专业的高质量名片设计模板
- 模板引擎underscore配合Ajax读取数据
- 使用中间件处理Node.js中post请求（涉及express与模板引擎art-template的整合）
- C语言和设计模式（之模板模式）