05.模板基本使用

# 01.视图(Views)简介

beego 中 views 目录中存放着项目的模板（视图）文件。
beego 的模板处理引擎采用的是 Go 内置的 html/template 包进行处理
并且 beego 的模板处理逻辑是采用了缓存编译方式
也就是所有的模板会在 beego 应用启动的时候全部编译然后缓存在 map 里面。
在前面编写 Controller 的时候，我们在 Get 里面写过这样的语句 c.TplName ="index.tpl"
设置显示的模板文件，默认支持.tpl 和.html 的后缀名。
控制器中可以使用 c.TplName 指定模板路径，模板文件必须放在 views 文件夹里面

# 02.标签基本使用

# 2.1 基本数据字符串数值布尔值

.go

func (c *MainController) Get() {
	//1、模板中绑定基本数据 字符串 数值 布尔值
	c.Data["website"] = "beego 教程"
	c.Data["title"] = "你好beego"
	c.Data["num"] = 12
	c.Data["flag"] = true
	c.TplName = "index.html"
}

1
2
3
4
5
6
7
8

.html

    <p>{{.title}}</p>
    <p>{{.num}}</p>
    <p>{{.flag}}</p>

1
2
3

# 2.2 模板中绑定结构体数据

.go

// 定义 struct 解析表单结构体
type ArticleType struct {
	Title string `xml:"title"`
	Content string `xml:"content"`
}

func (c *MainController) Get() {
	//2、模板中绑定结构体数据
	article := ArticleType{
		Title:   "我是golang教程",
		Content: "beego仿小米商城项目",
	}
	c.Data["article"] = article
    c.TplName = "index.html"
}

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

.html

    <h2>模板中绑定结构体数据</h2>
    <p>{{.article.Title}}</p>
    <p>{{.article.Content}}</p>

1
2
3

# 2.3 模板中循环切片

.go

func (c *MainController) Get() {
	//3、模板中循环遍历 range  模板中循环切片
	c.Data["sliceList"] = []string{"php", "java", "golang"}
	c.TplName = "index.html"
}

1
2
3
4
5

.html

    <h2>4、模板中循环遍历 range  模板中循环切片</h2>
    <ul>
        {{range $key,$val := .sliceList}}
        <li>{{$key}}---{{$val}}</li>
        {{end}}
    </ul>

1
2
3
4
5
6

# 2.4 模板中循环Map

.go

func (c *MainController) Get() {
	//4、模板中循环遍历 range  模板中循环Map
	userinfo := make(map[string]interface{})
	userinfo["username"] = "张三"
	userinfo["age"] = 20
	userinfo["sex"] = "男"
	c.Data["userinfo"] = userinfo
	c.TplName = "index.html"
}

1
2
3
4
5
6
7
8
9

.html

    <h2>5、模板中循环遍历 range  模板中循环Map</h2>
    <ul>
        {{range $key,$val := .userinfo}}
        <li>{{$key}}---{{$val}}</li>
        {{end}}
    </ul>

1
2
3
4
5
6

# 2.5 结构体类型的切片

.go

// 定义 struct 解析表单结构体
type ArticleType struct {
	Title string `xml:"title"`
	Content string `xml:"content"`
}

func (c *MainController) Get() {
	//5、模板中循环遍历 结构体类型的切片
	c.Data["articleList"] = []ArticleType{
		{
			Title:   "新闻111",
			Content: "新闻内容111",
		},
		{
			Title:   "新闻2222",
			Content: "新闻内容222",
		},
	}
	c.TplName = "index.html"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.html

    <h2>6、模板中循环遍历 结构体类型的切片(用的非常多)</h2>
    <ul>
        {{range $key,$val := .articleList}}
        <li>
            {{$key}}--{{$val.Title}}---{{$val.Content}}
        </li>
        {{end}}
    </ul>

1
2
3
4
5
6
7
8

# 2.6 模板中条件判断

.go

func (c *MainController) Get() {
	//7、模板中条件判断
	c.Data["isLogin"] = true
	c.Data["isHome"] = false
	c.Data["isAbout"] = true
	c.TplName = "index.html"
}

1
2
3
4
5
6
7

.html

<body>
    {{if .isHome}}
        <p>isHome等于true</p>
    {{else}}
        {{if .isAbout}}
            <p>isAbout等于true 1111</p>
        {{end}}
    {{end}}
</body>

1
2
3
4
5
6
7
8
9

# 2.7 if条件判断

eq ne lt le gt ge

.go

func (c *MainController) Get() {
	//8、if条件判断eq / ne / lt / le / gt / ge
	c.Data["n1"] = 12
	c.Data["n2"] = 6
	c.TplName = "index.html"
}

1
2
3
4
5
6

.html

    <h2>9、if条件判断eq / ne / lt / le / gt / ge</h2>
    {{if gt .n1 .n2}}
        <p>n1大于n2</p>
    {{end}}

    {{if eq .n1 .n2}}
        <p>n1等于n2</p>
    {{else}}
        <p>n1不等于n2</p>
    {{end}}
    
    {{if ne .n1 .n2}}
        <p>n1不等于n2  ---</p>
    {{else}}
        <p>n1等于n2---</p>
    {{end}}

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

# 2.8 define自定义模板

    {{define "aaa"}}
        <h4>这是一个自定义的代码快</h4>
        <p>111</p>
        <p>2222221</p>
    {{end}}

    <div>
        <h1>引入aaa模板</h1>
        {{template "aaa" .}}
    </div>

1
2
3
4
5
6
7
8
9
10

# 2.9 外部自定义模板

views/index.html

<body>
    {{template "/public/header.html" .}}

    <div>
        中间内容
    </div>
    {{template "/public/footer.html" .}}
</body>

1
2
3
4
5
6
7
8

views/public/header.html

<h1>这是一个头部</h1>

views/public/footer.html

<style>
    footer{
        width: 100%;
        height: 60px;
        background: #000;
        text-align: center;
        color: #fff;
    }
</style>

<footer>
    <h1>我是一个底部</h1>
</footer>

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

# 03.beego内置的模板函数

# 3.1 date

.go

func (c *MainController) Get() {
	now := time.Now()
	//2020-05-14 16:43:55.1063927 +0800 CST m=+0.275015701
	fmt.Println(now)
	c.Data["now"] = now
	c.TplName = "index.html"
}

1
2
3
4
5
6
7

.html

    <h2>1、内置模板函数处理日期</h2>
    <!--2021-05-24 08:43:53.0714362 +0800 CST m=+3.665282201-->
    <p>{{.now}}</p>
    <!--2021-05-24 08:43:53-->
    <p>{{date .now "Y-m-d H:i:s"}}</p>

1
2
3
4
5

# 3.2 html2str

.go

func (c *MainController) Get() {
	c.Data["html"] = "<h2>这是一个后台渲染的 h2</h2>"
	c.TplName = "index.html"
}

1
2
3
4

.html

    <h2>3、内置模板函数处理html标签</h2>
    <p>{{.html | html2str}}</p>
    <p>{{html2str .html}}</p>

1
2
3

# 3.3 compare

.go

func (c *MainController) Get() {
	c.Data["a"] = "1"
	c.Data["b"] = "1"
	c.TplName = "index.html"
}

1
2
3
4
5

.html

    <!--true-->
    <p>{{compare .a .b}}</p>

1
2

# 3.4 substr

.go

func (c *MainController) Get() {
	c.Data["title"] = "床前明月光"
	c.TplName = "index.html"
}

1
2
3
4

.html

    <!--床前明月-->
    <p>{{substr .title 0 4}}</p>

1
2

# 3.5 map_get

map_get 获取 map 的值

.go

func (c *MainController) Get() {
	userinfo := make(map[string]interface{})
	userinfo["username"] = "张三"
	userinfo["age"] = 20
	userinfo["a"] = map[string]float64{
		"c": 4,
	}
	c.Data["userinfo"] = userinfo
	c.TplName = "index.html"
}

1
2
3
4
5
6
7
8
9
10

.html

    <h2>5、获取map对象数据</h2>
    <p>{{map_get .userinfo "username"}}</p>
    <p>{{map_get .userinfo "age"}}</p>
    <p>{{map_get .userinfo "a" "c"}}</p>

1
2
3
4

# 04.自定义模板函数

beego 支持用户定义模板函数，但是必须在 beego.Run() 调用之前

# 4.1 在models/tools.go添加模板函数

package models
import "time"

func UnixToDate(timestamp int) string {
	t := time.Unix(int64(timestamp), 0)
	return t.Format("2006-01-02 15:04:05")
}

func Hello(in string) (out string) {
	out = in + "world"
	return
}

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

# 4.2 在main.go中调用

func main() {
	beego.AddFuncMap("hi", models.Hello)
	beego.AddFuncMap("unixToDate", models.UnixToDate)
	beego.Run()
}

1
2
3
4
5

# 4.3 在 .html 中使用

    <p>{{.title | hi}}</p>
    <p>{{.unix | unixToDate}}</p>

1
2

# 05.beego 中静态资源

beego 默认注册了 static 目录为静态处理的目录
注册样式：URL 前缀和映射的目录（在/main.go 文件中 beego.Run()之前加入）

StaticDir["/static"] = "static"

用户可以设置多个静态文件处理目录，例如你有多个文件下载目录 download1、download2
你可以这样映射（在 /main.go 文件中 beego.Run() 之前加入）

func main() {
	beego.SetStaticPath("/down", "download")
	beego.Run()
}

1
2
3
4

这样用户访问 URL http://127.0.0.1:8080/down/baby.jpg 则会请求 download 目录下的文件

# 06.标签冲突修改

Go 语言的默认模板采用了作为左右标签
但是我们有时候在开发中可能界面是采用了 Angular 开发，他的模板也是这个标签，故而引起了冲突
在 beego 中你可以通过配置文件或者直接设置配置变量修改

# 6.1 `conf/app.conf`

appname = beegodemo02
httpport = 8080
runmode = dev
copyrequestbody = true
TemplateLeft="<<"
TemplateRight=">>"

1
2
3
4
5
6

# 6.2 也可以在main.go中进行配置

package main

import (
	_ "beegodemo02/routers"
	"github.com/astaxie/beego"
)

func main() {
    beego.BConfig.WebConfig.TemplateLeft = "<<"
    beego.BConfig.WebConfig.TemplateRight = ">>"
    beego.Run()
}

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

# 6.3 更多使用参考

详情参考 (opens new window)
使用 . 来访问当前位置的上下文
使用 $ 来引用当前模板根级的上下文
使用 $var 来访问创建的变量

上次更新: 2024/3/13 15:35:10

← 04.路由 06.Model封装公共方法→

05.模板基本使用

# 01.视图(Views)简介

# 02.标签基本使用

# 2.1 基本数据 字符串 数值 布尔值

# 2.2 模板中绑定结构体数据

# 2.3 模板中循环切片

# 2.4 模板中循环Map

# 2.5 结构体类型的切片

# 2.6 模板中条件判断

# 2.7 if条件判断

# 2.8 define自定义模板

# 2.9 外部自定义模板

# 03.beego内置的模板函数

# 3.1 date

# 3.2 html2str

# 3.3 compare

# 3.4 substr

# 3.5 map_get

# 04.自定义模板函数

# 4.1 在models/tools.go添加模板函数

# 4.2 在main.go中调用

# 4.3 在 .html 中使用

# 05.beego 中静态资源

# 06.标签冲突修改

# 6.1 conf/app.conf

# 6.2 也可以在main.go中进行配置

# 6.3 更多使用参考

# 2.1 基本数据字符串数值布尔值

# 6.1 `conf/app.conf`