bootstrap网页模板源码_Go Web 编程--超详细的模板库应用指南
如果你有過Web編程的經(jīng)驗，那么或多或少都聽說過或者使用過模板。簡而言之，模板是可用于創(chuàng)建動態(tài)內(nèi)容的文本文件。例如，你有一個網(wǎng)站導(dǎo)航欄的模板，其中動態(tài)內(nèi)容的一部分可能是根據(jù)當前用戶是否登錄顯示登錄還是退出按鈕。
Go提供了兩個模板庫text/template和html/template。這兩個模板庫的使用方式是相同的，但是html/template包在渲染頁面模板時會在后臺進行一些編碼以幫助防止造成代碼注入（XSS 攻擊）。
因為兩個模板庫都使用相同的接口，因此本文中介紹的所有內(nèi)容均可用于這兩個程序包，但是大多數(shù)時候我們都會使用html/template程序包來生成HTML代碼段。
Go Web 編程系列的每篇文章的源代碼都打了對應(yīng)版本的軟件包，供大家參考。公眾號中回復(fù)gohttp07獲取本文源代碼模板文件的后綴名
模板文件可以使用.html或任何其他擴展名。但是通常我們將使用.gohtml擴展名來命名模板文件，因為編輯器通常使用它來表示你想要高亮Go HTML模板語法。 Atom和Sublime Text等編輯器都具有Go插件，來默認識別此擴展名。
模板語法
我們先來創(chuàng)建一個簡單的模板文件test.gohtml:
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Go Web</title></head><body>{{ . }}</body> </html>{{ 和 }} 中間的半角句號 . 它代表模板對象執(zhí)行Execute(w, data)傳入模板的數(shù)據(jù)，它是頂級作用域范圍內(nèi)的，根據(jù)傳入的數(shù)據(jù)不同渲染不同的內(nèi)容。. 可以代表Go語言中的任何類型，如結(jié)構(gòu)體、Map等。
在寫模板的時候，會經(jīng)常用到.。比如{{.}}、{{len .}}、{{.Name}}、{{$x.Name}}
{{ 和 }} 包裹的內(nèi)容統(tǒng)稱為 action，分為兩種類型：
- 數(shù)據(jù)求值（data evaluations）
- 控制結(jié)構(gòu)（control structures）
action求值的結(jié)果會直接復(fù)制到模板中，控制結(jié)構(gòu)和我們寫Go程序差不多，也是條件語句、循環(huán)語句、變量、函數(shù)調(diào)用等等...模板中的 action 并不多，我們一個一個看。
注釋
{{/* comment */}}裁剪空字符
注意裁剪的是替換內(nèi)容前面或者后面的空字符，你可以理解成模板中{{前面或}}后面的空字符(包括換行符、制表符、空格等)。
// 裁剪 content 前后的空字符 {{- content -}}// 裁剪 content 前面的空字符 {{- content }}// 裁剪 content 后面的空字符 {{ content -}}文本輸出
{{ pipeline }}pipeline代表的數(shù)據(jù)會產(chǎn)生與調(diào)用 fmt.Print 函數(shù)類似的輸出，例如整數(shù)類型的 3 會轉(zhuǎn)換成字符串 "3" 輸出。
條件語句
{{ if pipeline }} T1 {{ end }}{{ if pipeline }} T1 {{ else }} T0 {{ end }}{{ if pipeline }} T1 {{ else if pipeline }} T0 {{ end }}// 上面的語法其實是下面的簡寫 {{ if pipeline }} T1 {{ else }}{{ if pipeline }} T0 { {end }}{{ end }}{{ if pipeline }} T1 {{ else if pipeline }} T2 {{ else }} T0 {{ end }}如果 pipeline 的值為空，不會輸出 T1，除此之外 T1 都會被輸出。
空值有false、0、 nil空字符串 ""（長度為 0 的字符串）。
循環(huán)語句
{{ range pipeline }} T1 {{ end }}// 這個 else 比較有意思，如果 pipeline 的長度為 0 則輸出 else 中的內(nèi)容 {{ range pipeline }} T1 {{ else }} T0 {{ end }}// 獲取容器的下標 {{ range $index, $value := pipeline }} T1 {{ end }}循環(huán)語句中的pipeline 的值必須是數(shù)組、切片、字典和通道中的一種，即可迭代類型的值，根據(jù)值的長度輸出多個 T1。
define
{{ define "name" }} T {{ end }}定義命名為 name 的模板。
template
{{ template "name" }}{{ template "name" pipeline }}第一種是直接執(zhí)行名為name的模板，模板的全局數(shù)據(jù)對象.設(shè)置為nil。第二種是點.設(shè)置為pipeline的值，并執(zhí)行名為name的模板。
block
{{ block "name" pipeline }} T1 {{ end }}block 的語義是如果有命名為 name 的模板，就引用過來執(zhí)行，如果沒有命名為 name 的模板，就是執(zhí)行自己定義的內(nèi)容。換句話說，block可以認為是設(shè)置一個默認模板。
with
{{ with pipeline }} T1 {{ end }}// 如果 pipeline 是空值則輸出 T0 {{ with pipeline }} T1 {{ else }} T0 {{ end }}{{ with arg }}. // 此時 . 就是 arg {{ end }}with 創(chuàng)建一個新的上下文環(huán)境，在此環(huán)境中的 . 與外面的 . 無關(guān)。
對于第一種格式，當pipeline不為0值的時候，點.設(shè)置為pipeline運算的值，否則跳過。對于第二種格式，當pipeline為0值時，執(zhí)行else語句塊，否則.設(shè)置為pipeline運算的值，并執(zhí)行T1。
例如：
{{with .Person}}{{ .Name}}{{end}}在這個 with 塊中.Name實際上引用的是全局數(shù)據(jù)對象的.Person.Name。
實踐練習(xí)：課程花名冊頁面
了解完模板語法后，接下來讓我們再http_demo項目中結(jié)合BootStrap創(chuàng)建一個簡單的模板，來展示服務(wù)器如何把數(shù)據(jù)傳遞給模板、渲染HTML頁面，把頁面響應(yīng)返回給客戶端。
我們創(chuàng)建一個用來展示大學(xué)物理課程的花名冊（授課老師和上課學(xué)生）
創(chuàng)建頁面模板
首先在我們的項目添加一個views目錄用于存放模板文件，在創(chuàng)建三個模板文件分別是：
layout.gohtml 用于存放頁面的整體布局。
<html lang="en"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content=""><meta name="author" content=""><title>Bootstrap Template Page for Go Web Programming</title><!-- Bootstrap core CSS --><link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head><body>{{ template "nav" .}}<div class="container">{{template "content" .}} </div> <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>nav.gohtml是網(wǎng)頁頭部區(qū)域的頁面模板。
{{define "nav"}} <nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><a class="navbar-brand" href="#">Person general infor</a></div></div> </nav><div class="jumbotron"><div class="container"><h1>Hello, Professor {{.Teacher.Name}}</h1><ul><li>Name : {{.Teacher.Name}}<p><li>Subject : {{.Teacher.Subject}}</ul><p><a class="btn btn-primary btn-lg" href="#" role="button">More »</a></p></div> </div> {{end}}content.gohtml是網(wǎng)頁主體內(nèi)容部分的頁面模板。
{{define "content"}} {{range .Students}} <div class="row"><div class="col-md-4"><h2>Name</h2><p>Name has the value of : {{.Name}} </p><p><a class="btn btn-default" href="#" role="button">More »</a></p></div><div class="col-md-4"><h2>Id</h2><p>Id has the value of : {{.Id}} </p><p><a class="btn btn-default" href="#" role="button">More »</a></p></div><div class="col-md-4"><h2>Country</h2><p>Country has the value of : {{.Country}} </p><p><a class="btn btn-default" href="#" role="button">More »</a></p></div> </div> {{end}} {{end}}在layout.gohtml中我們引用了另外的兩個模板：
{{ template "nav" .}} {{template "content" .}}這樣不同的頁面變化的部分就只是content部分，針對不同的頁面我們只需要定義多個content模板，每次根據(jù)不同請求使用不同的content模板就行了。當然這里的例子有點簡陋，大家理解意思就行了。
注意模板名稱后面的.，我們把layout.gohtml的全局數(shù)據(jù)對象傳給了另外兩個模板這樣，在子模板里也能訪問傳給模板的數(shù)據(jù)了。如果頁面模板中使用的數(shù)據(jù)字段和循環(huán)語句有點疑惑可以先不用管，繼續(xù)往下看，等看過傳給頁面模板的數(shù)據(jù)后自然就理解了。
創(chuàng)建響應(yīng) 頁面請求的Handler
接下來創(chuàng)建一個伺服頁面請求的Handler：
package handlerimport ("fmt""html/template""net/http" )type Teacher struct {Name stringSubject string } type Student struct {Id intName stringCountry string }type Rooster struct {Teacher TeacherStudents []Student }func ShowIndexView(response http.ResponseWriter, request *http.Request) {teacher := Teacher{Name: "Alex",Subject: "Physics",}students := []Student{{Id: 1001, Name: "Peter", Country: "China"},{Id: 1002, Name: "Jeniffer", Country: "Sweden"},}rooster := Rooster{Teacher: teacher,Students: students,}tmpl, err := template.ParseFiles("./views/layout.gohtml", "./views/nav.gohtml", "./views/content.gohtml")if err != nil {fmt.Println("Error " + err.Error())}tmpl.Execute(response, rooster) }使用template.ParseFiles加載這個頁面要使用的全部三個模板（如果加載少了，訪問頁面時會發(fā)生panic），然后使用模板對象的 Execute方法把我們存儲了花名冊信息的數(shù)據(jù)對象傳給模板: tmpl.Execute(response, rooster) 渲染頁面并寫到響應(yīng)里去（http.ResponseWriter對象）。
注冊頁面路由
處理程序?qū)懲旰?#xff0c;為其注冊路由，在我們項目的路由模塊添加如下路由:
package routerimport ("example.com/http_demo/middleware""github.com/gorilla/mux""example.com/http_demo/handler" )func RegisterRoutes(r *mux.Router) {r.Use(middleware.Logging()) ...viewRouter := r.PathPrefix("/view").Subrouter()viewRouter.HandleFunc("/index", handler.ShowIndexView) }訪問頁面
現(xiàn)在所有步驟都完成了，重啟我們的服務(wù)器后就可以訪問到新寫的頁面了。
如果是在本地電腦里，用Ctrl+C結(jié)束服務(wù)器進程后再次執(zhí)行g(shù)o run main.go。如果是使用我們之前文章里的Docker開發(fā)環(huán)境的話（公眾號回復(fù):go-docker 獲取Docker環(huán)境的安裝指南）需要在docker-compose.yml所在的目錄里用docker-compose restart重啟服務(wù)。
打開瀏覽器輸入http://localhost:8000/view/index就能訪問到我們剛才寫的頁面了。
總結(jié)
今天的文章講解了Go模板最常使用的幾個功能的使用方法，使用html/template模板庫結(jié)合BootStrap做頁面模板，還是比較簡單的BootStrap幫我們解決了很多前端的樣式問題。模板庫還有很多更高級的用法，比如在模板中調(diào)用函數(shù)、定義變量等功能，可以看下文末給出的參考鏈接了解這些內(nèi)容。在前后端分離架構(gòu)流行的今天我覺得作為用Go開發(fā)的后端工程師了解文章中列出的這些功能就夠了。
今天的例子中是通過 CDN 引用的BootStrap靜態(tài)資源，到目前我們的服務(wù)器還無法伺服靜態(tài)資源，這個我們下篇文章再講。公眾號回復(fù)gohttp07即可獲取今天文章中示例代碼的下載鏈接。如果覺得我的文章有收獲，請幫忙分享給更多人。
參考
Go 語言標準庫 text/template 包深入淺出
An Introduction to Templates in Go
前文回顧
深入學(xué)習(xí)用Go編寫HTTP服務(wù)器
設(shè)置HTTP服務(wù)器的路由
Go Web編程--應(yīng)用ORM
Go Web編程--深入學(xué)習(xí)解析HTTP請求
掃碼關(guān)注公眾號：網(wǎng)管叨bi叨總結(jié)
以上是生活随笔為你收集整理的bootstrap网页模板源码_Go Web 编程--超详细的模板库应用指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nodejs express use 传
- 下一篇： php post请求后端拿不到值_Aja