02-Template Basic
源作者地址:https://github.com/bonfy/go-mega 仅个人学习使用
学习完 第一章 之后,我们已经拥有了虽然一个简单,但可以成功运行Web应用
本章将沿用这个应用,在此之上,加入模版渲染,使得页面更丰富
本章的GitHub链接为: Source, Diff,
Zip
什么是模板
微博应用程序的主页会有一个欢迎用户的标题。虽然目前的应用程序还没有实现用户概念,但这不妨碍我使用一个 Go Stuct 来模拟一个用户,由于Go是静态语言,先定义 User 的结构,然后再初始化 user ,如下所示:
type User struct {
Username string
}
user := User{Username: "bonfy"}
创建模拟对象是一项实用的技术,它可以让你专注于应用程序的一部分,而无需为系统中尚不存在的其他部分分心。 在设计应用程序主页的时候,我可不希望因为没有一个用户系统来分散我的注意力,因此我使用了模拟用户对象,来继续接下来的工作。
原先的视图函数返回简单的字符串,我现在要将其扩展为包含完整HTML页面元素的字符串,如下所示:
package main
import (
"html/template"
"net/http"
)
// User struct
type User struct {
Username string
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
user := User{Username: "bonfy"}
tpl, _ := template.New("").Parse(`<html>
<head>
<title>Home Page - Bonfy</title>
</head>
<body>
<h1>Hello, {{.Username}}!</h1>
</body>
</html>`)
tpl.Execute(w, &user)
})
http.ListenAndServe(":8888", nil)
}
对HTML标记语言不熟悉的话,建议阅读一下Wikipedia上的简介HTML Markup
利用上述的代码更新这个视图函数,然后再次运行 (这里并没有flask那样子的debug mode,每次更新都必须重新执行)
$ go run main.go
在浏览器打开它的URL看看结果
本小节 Diff
Tip: Go 中
反引号
用来创建原生的字符串字面量,这些字符串可能由多行组成(不支持任何转义序列),原生的字符串字面量多用于书写多行消息、HTML以及正则表达式
我们暂时将 template 以文本方式耦合在代码中,随着我们项目的扩大,这个不利于管理,而且如果公司有前端支持的话,模板的工作很大可能会有前端设计,所以我们有必要对其进行解偶。我们打算将模板文件放入 templates 的文件夹
建立 templates 文件夹
$ mkdir templates
将模板的内容移到 templates文件夹下
templates/index.html
<html>
<head>
<title>Home Page - Bonfy</title>
</head>
<body>
<h1>Hello, {{.Username}}!</h1>
</body>
</html>
然后将 template 文本从代码中移除
main.go
package main
import (
"html/template"
"net/http"
)
// User struct
type User struct {
Username string
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
user := User{Username: "bonfy"}
tpl, _ := template.ParseFiles("templates/index.html")
tpl.Execute(w, &user)
})
http.ListenAndServe(":8888", nil)
}
然后运行,在浏览器中打开,结果是与刚才一样的,不过代码的组织结构却更清晰了。
本小节 Diff
模板的常用操作
条件语句
在 index.html 中加入条件语句
templates/index.html
<html>
<head>
{{if .Title}}
<title>{{.Title}} - blog</title>
{{else}}
<title>Welcome to blog!</title>
{{end}}
</head>
<body>
<h1>Hello, {{.User.Username}}!</h1>
</body>
</html>
由于 User 没有 Title字段,所以我们引入新的 IndexViewModel 来具体处理所有与View对应的Model
main.go
package main
import (
"html/template"
"net/http"
)
// User struct
type User struct {
Username string
}
// IndexViewModel struct
type IndexViewModel struct {
Title string
User User
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
user := User{Username: "bonfy"}
v := IndexViewModel{Title: "Homepage", User: user}
tpl, _ := template.ParseFiles("templates/index.html")
tpl.Execute(w, &v)
})
http.ListenAndServe(":8888", nil)
}
本小节 Diff
循环
在 index.html 中加入循环
<html>
<head>
{{if .Title}}
<title>{{.Title}} - blog</title>
{{else}}
<title>Welcome to blog!</title>
{{end}}
</head>
<body>
<h1>Hello, {{.User.Username}}!</h1>
{{range .Posts}}
<div><p>{{ .User.Username }} says: <b>{{ .Body }}</b></p></div>
{{end}}
</body>
</html>
在 main.go 的 IndexViewModel 中加入 Post
package main
import (
"html/template"
"net/http"
)
// User struct
type User struct {
Username string
}
// Post struct
type Post struct {
User User
Body string
}
// IndexViewModel struct
type IndexViewModel struct {
Title string
User User
Posts []Post
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
u1 := User{Username: "bonfy"}
u2 := User{Username: "rene"}
posts := []Post{
Post{User: u1, Body: "Beautiful day in Portland!"},
Post{User: u2, Body: "The Avengers movie was so cool!"},
}
v := IndexViewModel{Title: "Homepage", User: u1, Posts: posts}
tpl, _ := template.ParseFiles("templates/index.html")
tpl.Execute(w, &v)
})
http.ListenAndServe(":8888", nil)
}
本小节 Diff
运行效果图
Links
- 目录
- 上一节: 01-Hello-World
- 下一节: 03-Template-Advance