Go Web 编程--超详细的模板库应用指南

时间 2020-03-05

标签 css html 前端 git github docker 编程 bootstrap 后端数组栏目 HTML 繁體版

原文原文链接

模板库介绍

若是你有过Web编程的经验，那么或多或少都据说过或者使用过模板。简而言之，模板是可用于建立动态内容的文本文件。例如，你有一个网站导航栏的模板，其中动态内容的一部分多是根据当前用户是否登陆显示登陆仍是退出按钮。css

Go提供了两个模板库text/template和html/template。这两个模板库的使用方式是相同的，可是html/template包在渲染页面模板时会在后台进行一些编码以帮助防止形成代码注入（XSS 攻击）。html

由于两个模板库都使用相同的接口，所以本文中介绍的全部内容都可用于这两个程序包，可是大多数时候咱们都会使用html/template程序包来生成HTML代码段。前端

Go Web 编程系列的每篇文章的源代码都打了对应版本的软件包，供你们参考。公众号中回复 gohttp07获取本文源代码

模板文件的后缀名

模板文件可使用.html或任何其余扩展名。可是一般咱们将使用.gohtml扩展名来命名模板文件，由于编辑器一般使用它来表示你想要高亮Go HTML模板语法。 Atom和Sublime Text等编辑器都具备Go插件，来默认识别此扩展名。git

模板语法

咱们先来建立一个简单的模板文件test.gohtml:github

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Go Web</title>
    </head>
    <body>
        {{ . }}
    </body>
</html>

{{ 和 }} 中间的半角句号 . 它表明模板对象执行Execute(w, data)传入模板的数据，它是顶级做用域范围内的，根据传入的数据不一样渲染不一样的内容。. 能够表明Go语言中的任何类型，如结构体、Map等。docker

在写模板的时候，会常常用到.。好比{{.}}、{{len .}}、{{.Name}}、{{$x.Name}} 编程

{{ 和 }} 包裹的内容统称为 action，分为两种类型：bootstrap

数据求值（data evaluations）
控制结构（control structures）

action求值的结果会直接复制到模板中，控制结构和咱们写Go程序差很少，也是条件语句、循环语句、变量、函数调用等等...模板中的 action 并很少，咱们一个一个看。后端

注释

{{/* comment */}}

裁剪空字符

注意裁剪的是替换内容前面或者后面的空字符，你能够理解成模板中{{前面或}}后面的空字符(包括换行符、制表符、空格等)。数组

// 裁剪 content 先后的空字符
{{- content -}}

// 裁剪 content 前面的空字符
{{- content }}

// 裁剪 content 后面的空字符
{{ content -}}

文本输出

{{ pipeline }}

pipeline表明的数据会产生与调用 fmt.Print 函数相似的输出，例如整数类型的 3 会转换成字符串 "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 的字符串）。

循环语句

{{ range pipeline }} T1 {{ end }}

// 这个 else 比较有意思，若是 pipeline 的长度为 0 则输出 else 中的内容
{{ range pipeline }} T1 {{ else }} T0 {{ end }}

// 获取容器的下标
{{ range $index, $value := pipeline }} T1 {{ end }}

循环语句中的pipeline 的值必须是数组、切片、字典和通道中的一种，便可迭代类型的值，根据值的长度输出多个 T1。

define

{{ define "name" }} T {{ end }}

定义命名为 name 的模板。

template

{{ template "name" }}

{{ template "name" pipeline }}

第一种是直接执行名为name的模板，模板的全局数据对象.设置为nil。第二种是点.设置为pipeline的值，并执行名为name的模板。

block

{{ block "name" pipeline }} T1 {{ end }}

block 的语义是若是有命名为 name 的模板，就引用过来执行，若是没有命名为 name 的模板，就是执行本身定义的内容。换句话说，block能够认为是设置一个默认模板。

with

{{ with pipeline }} T1 {{ end }}

// 若是 pipeline 是空值则输出 T0
{{ with pipeline }} T1 {{ else }} T0 {{ end }}

{{ with arg }}
    . // 此时 . 就是 arg
{{ end }}

with 建立一个新的上下文环境，在此环境中的 . 与外面的 . 无关。

对于第一种格式，当pipeline不为0值的时候，点.设置为pipeline运算的值，不然跳过。对于第二种格式，当pipeline为0值时，执行else语句块，不然.设置为pipeline运算的值，并执行T1。

例如：

{{with .Person}}{{ .Name}}{{end}}

在这个 with 块中.Name实际上引用的是全局数据对象的.Person.Name。

实践练习：课程花名册页面

了解完模板语法后，接下来让咱们再http_demo项目中结合BootStrap建立一个简单的模板，来展现服务器如何把数据传递给模板、渲染HTML页面，把页面响应返回给客户端。

咱们建立一个用来展现大学物理课程的花名册（授课老师和上课学生）

建立页面模板

首先在咱们的项目添加一个views目录用于存放模板文件，在建立三个模板文件分别是：

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是网页头部区域的页面模板。

{{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 &raquo;</a></p>
    </div>
</div>
{{end}}

content.gohtml是网页主体内容部分的页面模板。

{{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 &raquo;</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 &raquo;</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 &raquo;</a></p>
    </div>
</div>
{{end}}
{{end}}

在layout.gohtml中咱们引用了另外的两个模板：

{{ template "nav" .}}
{{template "content" .}}

这样不一样的页面变化的部分就只是content部分，针对不一样的页面咱们只须要定义多个content模板，每次根据不一样请求使用不一样的content模板就好了。固然这里的例子有点简陋，你们理解意思就好了。

注意模板名称后面的.，咱们把layout.gohtml的全局数据对象传给了另外两个模板这样，在子模板里也能访问传给模板的数据了。若是页面模板中使用的数据字段和循环语句有点疑惑能够先不用管，继续往下看，等看过传给页面模板的数据后天然就理解了。

建立响应页面请求的Handler

接下来建立一个伺服页面请求的Handler：

package handler

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

type Teacher struct {
    Name    string
    Subject string
}
type Student struct {
    Id      int
    Name    string
    Country string
}

type Rooster struct {
    Teacher Teacher
    Students []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加载这个页面要使用的所有三个模板（若是加载少了，访问页面时会发生panic），而后使用模板对象的 Execute方法把咱们存储了花名册信息的数据对象传给模板: tmpl.Execute(response, rooster) 渲染页面并写到响应里去（http.ResponseWriter对象）。

注册页面路由

处理程序写完后，为其注册路由，在咱们项目的路由模块添加以下路由:

package router

import (
    "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)
}

访问页面

如今全部步骤都完成了，重启咱们的服务器后就能够访问到新写的页面了。

若是是在本地电脑里，用Ctrl+C结束服务器进程后再次执行go run main.go。若是是使用咱们以前文章里的Docker开发环境的话（公众号回复:go-docker 获取Docker环境的安装指南）须要在docker-compose.yml所在的目录里用docker-compose restart重启服务。

打开浏览器输入http://localhost:8000/view/index就能访问到咱们刚才写的页面了。

总结

今天的文章讲解了Go模板最常使用的几个功能的使用方法，使用html/template模板库结合BootStrap作页面模板，仍是比较简单的BootStrap帮咱们解决了不少前端的样式问题。模板库还有不少更高级的用法，好比在模板中调用函数、定义变量等功能，能够看下文末给出的参考连接了解这些内容。在先后端分离架构流行的今天我以为做为用Go开发的后端工程师了解文章中列出的这些功能就够了。

今天的例子中是经过 CDN 引用的BootStrap静态资源，到目前咱们的服务器还没法伺服静态资源，这个咱们下篇文章再讲。公众号回复gohttp07便可获取今天文章中示例代码的下载连接。若是以为个人文章有收获，请帮忙分享给更多人。

参考

Go 语言标准库 text/template 包深刻浅出

An Introduction to Templates in Go

前文回顾

深刻学习用Go编写HTTP服务器

设置HTTP服务器的路由

Go Web编程--应用ORM

Go Web编程--深刻学习解析HTTP请求