21 Web编程模板引擎

[TOC]

Web编程模板引擎

模板引擎

Web模板页面就是预先设计好的HTML页面，模板引擎会重复使用模板页面根据不同数据渲染出HTML页面。
Go标准库提供了text/template 和 html/template 两个库模板引擎。

无逻辑模板引擎和嵌入逻辑的模板引擎

无逻辑模板引擎 (logic-less template engien)
将模板中指定的占位符替换成相应的动态数据。
无逻辑模板引擎只会进行字符串替换，不能执行任何逻辑处理。
无逻辑模板引擎的目的是完全分离程序的表现和逻辑，并将所有逻辑的工作都由处理器完成。

嵌入逻辑的模板引擎（embedded logic template engine）
模板中具有逻辑处理能力，可以将逻辑代码嵌入模板中。
因为拥有在模板中嵌入逻辑代码的能力，这类模板引擎功能很强大，但是在模板中维护逻辑代码相对要困难。

无逻辑模板引擎的渲染速度要比有逻辑的模板引擎快
但是大部分模板引擎都有逻辑处理能力，并非只是执行字符串替换操作。
有的嵌入逻辑的模板引擎通常表现的跟普通的编程语言一样，比如PHP，PHP开始是独立的Web模板引擎，现在PHP页面已经很少出现HTML代码，已经不再把PHP当做模板引擎。
Go将模板引擎大部分功能都定义在text/template库中，小部分与HTML相关的功能定义在html/template库。
Go的模板引擎也是介于无逻辑模板引擎和嵌入逻辑模板引擎之间的一种模板引擎，

Go模板引擎在Web应用中的作用示意图

模板解析与执行

解析模板
使用ParseFiles函数对模板文件进行语法分析并创建一个经过语法分析的模板结构以供Execute方法执行 tmp,err := template.ParseFiles("./web/test.html")
用正则匹配符合的所有模板进行解析 template.ParseGlob("*")

tmp,err := template.ParseFiles("test1.html","test2.html")
tmp,err := template.ParseGlob("*")

执行模板
执行 Execute 方法调用模板，Execute方法只会执行模板集合中第一个模板，如果要执行的是集合中其它模板，就要使用ExecuteTemplate方法。

tmp.Execute(w,数据)
tmp.ExecuteTemplate(w,"test2.html",数据)

动态渲染

Go 模板的动态渲染就是嵌入逻辑代码到模板中。
Go 模板中动态渲染使用 {{ 逻辑代码 }} ，可以进行条件判断、迭代、赋值、嵌套其它模板。
在text/template库中有更多模板动态渲染的功能。

动态渲染比较函数

比较函数只适用于基本类型(或重定义的基本类型, 如`type Celsius float32)，但是整数和浮点数不能互相比较。
e只有eq可以多参数相等检测，接受2个或更多个参数，它会将第一个参数和其余参数依次比较。

{{eq arg1 arg2 arg3}}

函数

描述

相等判断；例如：arg1 == arg2

不相等判断；例如：arg1 != arg2

小于判断；例如：arg1 < arg2

小于等于判断；例如：arg1 <= arg2

大于判断；例如：arg1 > arg2

大于等于判断；例如：arg1 >= arg2

动态渲染预定义函数

预定义函数是模板库中定义好的函数，可以直接在{{}}中使用。

函数

描述

and

函数返回其第1个空参数或者最后一个参数，即："and x y"等价于"if x then y else x"。所有参数都会执行

返回第一个非空参数或者最后一个参数，即"or x y"等价于"if x then x else y"。所有参数都会执行

not

返回其单个参数的布尔值“不是”

len

返回其参数的整数类型长度

index

执行结果为index()函数后第一个参数以第一个参数后面剩下的参数为索引指向的位置。每个被索引的主体必须是数组、切片、map

即fmt.Sprintprintf即fmt.Sprintf

println

即fmt.Sprintln

html

返回其参数文本表示的HTML逸码等价表示

urlquery

返回其参数文本表示的可嵌入URL查询的逸码等价表示

返回其参数文本表示的JavaScript译码等价表示

call

执行结果是调用第一个参数的返回值，该参数必须是函数类型，其余参数作为调用该函数的参数

动态渲染：注释、变量定义、条件判断、比较函数、内置函数、遍历

package main

import (
	"fmt"
	"html/template"
	"net/http"
)

func main() {
	http.HandleFunc("/test.html",func (w http.ResponseWriter,r *http.Request){
		tmp,err := template.ParseFiles("./web/test.html")
		// 使用 template.Must() 可以将err交由go处理
		// tmp := template.Must(template.ParseFiles("./web/test.html","./web/error.html"))
		if nil != err {
			fmt.Println(err)
			return
		}
		mp := make(map[string]interface{})
		mp["name"] = "大白"
		mp["age"] = 18
		mp["gender"] = false
		tmp.Execute(w,mp)
	})
	http.ListenAndServe(":8080",nil)
}

test.html
模板解析案例：注释、变量定义、条件判断、比较函数、内置函数、遍历

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <div>go模板引擎</div>
    <div>**********************************注释*****************************</div>
    <div>{{/* 这是一个注释，不会被解析 go模板引擎 */}}</div>
    <div>****************************获取参数*****************************</div>
    <div>获取所有参数{{.}}</div>
    <div>获取单个参数name={{.name}}</div>
    <div>获取单个参数age={{.age}}</div>
    <div>******************* 变量定义 ************************</div>
    {{ $name := .name}}
    <div>name={{$name}}</div>
    <div>*******************************预定义函数使用 len ************************</div>
    <div>len = {{len .}}</div>
    <div>{{$name}}</div>
    <div>移除空格符-：{{- $name -}}</div>
    <div>********************** if 条件判断 **************************</div>
    {{if .gender}}
        {{$name}}是公猫
    {{else}}
        {{$name}}是母猫
    {{end}}
    <div>************* ge 比较函数 比较结果是true|false 再用if进行判断 *************</div>
    {{if ge .age 18}}
        <div>{{$name}}成年了</div>
    {{else}}
        <div>{{$name}}未成年</div>
    {{end}}
    <div>*************************** range 遍历 ***********************</div>
    {{range $key, $val := .}}
        <div>key= {{$key}} ------- val= {{$val}}</div>
    {{end}}
</body>
</html>

自定义函数

html/template 允许自定义函数
Funcs()方法向模板对象的函数map里加入参数funcMap内的键值对。
如果funcMap的某个键值对的值不是函数类型，或者返回值不符合要求，则会报panic错误，但可以对模板对象的函数列表的成员进行重写。
FuncMap类型定义了函数名字符串到函数的映射，每个函数都必须有1个或者2个返回值。如果有两个返回值，则后一个必须是error接口类型；如果有2个返回值的方法返回error非nil，则模板执行会中断并返回该错误给调用者。
在执行模板时，函数从两个函数map中查找：首先是模板函数map，然后是全局函数map。一般不在模版内定义函数，而是使用Funcs()方法添加函数到模板里。

package main

import (
	"fmt"
	"html/template"
	"net/http"
)

func main() {
	http.HandleFunc("/test2.html",func (w http.ResponseWriter,r *http.Request){
		//定义函数
		isAdultFun := func(age int) bool{
			if 18 > age {
				return false
			}else{
				return true
			}
		}
		// 先将函数注册到FuncMap 再进行解析
		tmp,err := template.New("test2.html").Funcs(template.FuncMap{"isAdultFun": isAdultFun}).ParseFiles("./web/test2.html")
		if nil != err {
			fmt.Println(err)
			return
		}
		mp := make(map[string]interface{})
		mp["age"] = 18
		tmp.Execute(w,mp)
	})
	http.ListenAndServe(":8080",nil)
}

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义函数</title>
</head>
<body>
    <div>{{.age}}</div>
    <div>{{isAdultFun .age}}</div>
</body>
</html>

嵌套 template

template中可以嵌套其他的template。这个template可以是单独的文件，也可以是通过define定义的template。

package main

import (
	"fmt"
	"html/template"
	"net/http"
)

func main() {
	http.HandleFunc("/test3.html",func (w http.ResponseWriter,r *http.Request){
		tmp,err := template.ParseFiles("./web/test3.html","./web/test4.html")
		if nil != err {
			fmt.Println(err)
			return
		}
		tmp.Execute(w,nil)
	})
	http.ListenAndServe(":8080",nil)
}

test3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板嵌套</title>
</head>
<body>
  <div>********************  template嵌套  ******************************</div>
  <div>
    {{template "test4.html"}}
  </div>
  <div>******************* 嵌套 define *********************************</div>
  <div>
    {{template "defineTest.html"}}
  </div>
</body>
</html>

{{ define "defineTest.html"}}
  <div>
    <h1>被嵌套的 define 定义模板</h1>
  </div>
{{end}}

test4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test4</title>
</head>
<body>
  <h1>被嵌套的test4.html</h1>
</body>
</html>

block 空内容填充

使用 block 可以预设一块空地，为空地取一个名字 {{block "content" . }}{{end}}，后面使用 define 填充。

package main

import (
	"fmt"
	"html/template"
	"net/http"
)

func main() {
	http.HandleFunc("/test5.html", func(writer http.ResponseWriter, request *http.Request) {
		tm,err := template.ParseGlob("./web/*.html")
		if nil != err {
			fmt.Println(err)
			return
		}
		tm.ExecuteTemplate(writer,"test5.html",nil)
	})
	http.ListenAndServe("0.0.0.0:8080",nil)
}

base.html
{{block "content" . }}{{end}} 预先留下了一块空地。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板引擎</title>
</head>
<body>
    {{block "content" .  }}{{end}}
</body>
</html>

test5.html
{{define "content"}} 会填充到base.html {{block "content" . }}{{end}} 中。

{{template "base.html"}}

{{define "content"}}
    <div>
        <h1>填充进block的content</h1>
    </div>
{{end}}

修改默认的标识符

Go标准库的模板引擎使用的花括号{{和}}作为标识，而许多前端框架（如Vue和 AngularJS）也使用 {{}} 作为标识符，所以使用Go模板引擎和前端框架时就会出现冲突就有必要修改前端的或者修改Go语言的的标识符。

//  将{{}}修改成{[]}
template.New("test.html").Delims("{[", "]}").ParseFiles("./web/test.html")

text/template 和 html/template 的区别

text/template 和 html/template 的区别
text/template 是将内容都是text文本格式返回，不会对HTML、JS进行转义，会执行JS代码。
html/tempalte 针对的是需要返回HTML内容的场景。在模板渲染过程中会对一些有风险的内容进行转义，以此来防范跨站脚本（XSS）攻击。
传入一段JS代码使用html/template去渲染会在页面上显示出转义后的JS文本内容。使用text/template渲染就会把JS代码执行。

package main

import (
	htmlTemplate "html/template"
	"net/http"
	"text/template"
)

func main() {
	xssLine := "<script>alert(111)</script>"
	// 访问 http://localhost:8080/textTemplateTest 将会出现alert() 弹窗
	http.HandleFunc("/textTemplateTest", func(writer http.ResponseWriter, request *http.Request) {
		tm,_ := template.ParseFiles("./web/xssTest.html")
		tm.Execute(writer,xssLine)
	})
	// 访问 http://localhost:8080/htmlTemplateTest 只会显示 <script>alert(111)</script>
	http.HandleFunc("/htmlTemplateTest", func(writer http.ResponseWriter, request *http.Request) {
		tm,_ := htmlTemplate.ParseFiles("./web/xssTest.html")
		tm.Execute(writer,xssLine)
	})
	http.ListenAndServe(":8080",nil)
}

xssTest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xssTest</title>
</head>
<body>
  {{.}}
</body>
</html>

Previous20 网络编程 Web 服务器 Next22 Web编程 WebSocket

Last updated 3 years ago

Web编程 模板引擎

模板引擎

动态渲染

Web编程模板引擎