普拉多VX

人生一路,不问来时,不知归期

0%

Gin web开发系列(三)

静态文件

使用模版开发web站点就离不开css,js,img这些静态文件,在gin中也一样可以定义静态文件及使用方法。gin是如何做的呢?

gin 可使用Static、StaticFile、StaticFS方法定义静态文件

1
2
3
4
5
6
7
8
//加载静态资源,例如网页的css、js
r.Static("/static", "./statics") //默认gin http 访问的static路径,statics是映射的实际目录

//加载静态资源,一般是上传的资源,例如用户上传的图片
r.StaticFS("/upload", http.Dir("upload"))

//加载单个静态文件
r.StaticFile("/favicon.ico", "./static/favicon.ico")

参考实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package main
import (

"github.com/gin-gonic/gin"
"html/template"
"net/http"
)


func main() {
r := gin.Default()
//自定义模版变量必须放在解析模版之前
r.SetFuncMap(template.FuncMap{
"safe": func(str string) template.HTML{
return template.HTML(str)
},
})

// 加载静态文件,以static开头指向statics
r.Static("/static","./statics")
// 加载单一文件
r.StaticFile("/favicon.ico","./statics/favicon.ico")


//r.LoadHTMLFiles("templates") //模版渲染 如果只有一层的情况下
r.LoadHTMLGlob("templates/**/*") //**表示文件夹/*表示文件


r.GET("/server",func(c *gin.Context){

c.HTML(http.StatusOK,"server",gin.H{
"name":"roddy",
})
})


r.Run("127.0.0.1:8001")
}

html代码

1
2
3
4
5
6
7
8
9
10
11
12

<html>

<head>
<link rel="stylesheet" href="/static/server.css">
</head>
<body>
<h1>
server page {{ .name |safe }}
</h1>
</body>
</html>

模版继承

Gin 框架下使用的模板都是单文件模板,多模板继承需要使用 第三方的包multitemplate

安装

1
go get -u github.com/gin-contrib/multitemplate

使用

创建构建多模版方法

1
2
3
4
5
6
7
8
9
10
11
12
13

func webRender() multitemplate.Renderer {
r := multitemplate.NewRenderer()
// 添加两个多模板继承, 初始模板必须写在前面。
r.AddFromFiles("server", "templates/base.html", "templates/server.html")
r.AddFromFiles("login", "templates/base.html", "templates/login.html")
return r
}


//此时渲染模版使用HTMLRender方法
//使用模版
r.HTMLRender=webRender()

html使用block定义 ,这点与django有点类似。

1
2
3
<body>
<a href="http://www.baidu.com">baidu</a>
{{ block "content" . }} {{ end }}

login.html

1
2
3
4
5
6
7
{{ template "base"}} 

{{ define "content"}}
<h2>
login page {{.name}}
</h2>
{{end}}

server.html

1
2
3
4
5
6
7
{{ template "base"}}

{{ define "content"}}
<h2>
server page {{.name}}
</h2>
{{end}}

golang实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
package main
import (
"github.com/gin-contrib/multitemplate"
"github.com/gin-gonic/gin"
"html/template"
"net/http"
)


func webRender() multitemplate.Renderer {
r := multitemplate.NewRenderer()
// 添加两个多模板继承, 初始模板必须写在前面。
r.AddFromFiles("server", "templates/base.html", "templates/server.html")
r.AddFromFiles("login", "templates/base.html", "templates/login.html")
return r
}

func main() {
r := gin.Default()
//自定义模版变量必须放在解析模版之前
r.SetFuncMap(template.FuncMap{
"safe": func(str string) template.HTML{
return template.HTML(str)
},
})

// 加载静态文件,以static开头指向statics
r.Static("/static","./statics")
r.StaticFile("/favicon.ico","./statics/favicon.ico")


//r.LoadHTMLFiles("templates") //模版渲染 如果只有一层的情况下
//r.LoadHTMLGlob("templates/**/*") //**表示文件夹/*表示文件

//使用模版
r.HTMLRender=webRender()


r.GET("/server",func(c *gin.Context){

c.HTML(http.StatusOK,"server",gin.H{
"name":"roddy",
})
})

r.GET("/login",func(c *gin.Context){

c.HTML(http.StatusOK,"login",gin.H{
"name":"roddy",
})
})


// json数据
r.GET("/json",func(c *gin.Context){
data := map[string]interface{}{
"name":"roddy",
"message":"hello world!",
"age":28,
}

c.JSON(http.StatusOK,data)
})

// 结构体方式返回json数据
r.GET("/structJson",func(c *gin.Context){
type Msg struct{
Name string `json:"name"`
Age int
Message string

}
data := Msg{"roddy",23,"this is "}

c.JSON(http.StatusOK,data)
})

r.Run("127.0.0.1:8001")
}

测试结果

github代码