Beego中的视图(views）、模板语法

华生我发现了盲点
631 阅读3分钟

作为前端程序员，浅学一下 golang Beego框架的前端语法~

该框架前端部分在项目 views 视图目录下，模板使用 tpl 或 html 文件，两者写法相同。

一、模板中支持的 go 语言符号

index.tpl

{{"string"}} // 一般 string
{{`raw string`}} // 原始 string
{{'c'}} // byte
{{print nil}} // nil 也被支持

二、模板中绑定基本数据类型 字符串 数值 布尔值

default.go

func(c *ArticleController) Get() {
    c.Data["title"] = "这是title"
    c.Data["num"] = 12
    c.Data["flag"] = true
    c.TplName = "article/index.tpl"
}

index.tpl

{{.title}}
{{.num}}
{{.flag}}

三、模板中绑定结构体数据

default.go

type Article struct {
    Title String
    Content String
}

func(c *ArticleController) Get() {
    article := Article{
        Title: "标题",
        Content: "内容",
    }
    c.Data["article"] = article
    c.TplName = "article/index.tpl"
}

index.tpl

{{.article.Title}}
{{.article.Content}}

四、模板中自定义变量

index.tpl

// 将业务逻辑里的 title 赋值给 $title 然后使用
{{$title := title}}
{{$title}}

五、模板中循环遍历 range

beego 的模板语法中使用 range 关键字进行遍历，有以下两种写法，其中遍历的值必须是数组、切片、字典或者通道。

注：结束 {{end}} 不可或缺

5.1 数组类型

default.go

c.Data["sliceList"] = []string{"php", "java", "golang"}

index.tpl

<ul>
    {{range $key,$value := .sliceList}}
    <li>{{$key}}---{{$value}}</li>
    {{end}}
</ul>

上文代码会遍历 sliceList 取到 key 和 value 生成如下 html

<ul>
    <li>0---php</li>
    <li>1---java</li>
    <li>2---golang</li>
</ul>

5.2 Map 类型

default.go

userInfo := make(map[string]interface{})
userInfo["username"] = "张三"
userInfo["age"] = 20
userInfo["sex"] = "男"
c.Data["userInfo"] = userInfo

index.tpl

<ul>
    {{range $key,$value := .userInfo}}
    <li>{{$key}}---{{$value}}</li>
    {{end}}
</ul>

上文代码会遍历 userInfo 取到 key 和 value 生成如下 html

<ul>
    <li>username---张三</li>
    <li>age---20</li>
    <li>sex---男</li>
</ul>

5.3 结构体类型切片(常用）

(下文两种不同写法与前端无关，关注如何使用数据即可)

5.3.1 定义结构体类型写法

default.go

type Article struct {
    Title String
    Content String
}

c.Data["articleList"] = []Article{
    {
        Title: "标题",
        Content: "内容",
    },
    {
        Title: "新闻",
        Content: "新闻内容",
    },
}

index.tpl

<ul>
    {{range $key,$value := .articleList}}
    <li>{{$key}}---{{$value.Title}}---{{$value.Content}}</li>
    {{end}}
</ul>

上文代码会遍历 userInfo 取到 key 和 value 生成如下 html

<ul>
    <li>0---标题---内容</li>
    <li>1---新闻---新闻内容</li>
</ul>

5.3.2 结构体匿名写法

default.go

c.Data["articleList"] = []struct{
    Title String
    Content String
}{
    {
        Title: "标题",
        Content: "内容",
    },
    {
        Title: "新闻",
        Content: "新闻内容",
    },
}

六、模板中条件判断

类似于 Vue 的 v-if 和 React 的 If 元素

6.1 基本用法

包含：if、else if、else，同时结构可以嵌套

default.go

c.Data["isLogin"] = true
c.Data["isHome"] = false
c.Data["isAbout"] = true

index.tpl

{{if .isLogin}}
    <div>isLogin = true</div>
{{else if .isAbout}}
    <div>isAbout = true</div>
{{else if .isHome}}
    <div>isHome = true</div>
{{end}}

上方代码会生成如下 html

<div>isLogin = true</div>
<div>isAbout = true</div>

6.2 可以配合使用的函数

  • eq: arg1 == arg2
  • ne: arg1 != arg2
  • lt: arg1 < arg2
  • le: arg1 <= arg2
  • gt: arg1 > arg2
  • ge: arg1 >= arg2

例：

default.go

c.Data["arg1"] = 20
c.Data["arg2"] = 10

index.tpl

{{if gt .arg1 arg2}}
    <div>arg1 > arg2</div>
{{end}}

上方代码会生成如下 html

<div>arg1 > arg2</div>

七、自定义模板

类似于 jsx 中定义一个元素，可以放在指定地方使用，主要用于复用代码块

{{define "loop"}}
    <p>被复用的元素</p>
{{end}}

<div>
    {{template "loop"}}
    {{template "loop"}}
</div>

上方代码会生成如下 html

<div>
    <p>被复用的元素</p>
    <p>被复用的元素</p>
</div>

八、引入外部自定义模板

template + 文件路径

/public/header.tpl

<div>header</div>

/public/footer.tpl

<div>footer</div>

index.tpl

{{template "/public/header.tpl"}}
{{template "/public/footer.tpl"}}

上方代码会生成如下 html

<div>header</div>
<div>footer</div>

九、Beego 内置的模板函数

9.1 date

实现了类似PHP的date函数，可以很方便的根据字符串返回时间，使用方法{{date.T"Y-m-d H:i:s"}

now := time.Now()
c.Data["now"] = now

{{date .now "Y-m-d H:i:s"}}

9.2 substr

实现了字符串的截取，支持中文截取的完美截取，使用方法{{substr .Str 0 30}}

c.DataT["title"] = "这是文章列表"

{{substr .title 0 4}}

输出: 这是文章

9.3 html2str

实现了把html 转化为字符串，剔除一些script、 css 之类的元素，返回纯文本信息，使用方法{{html2str .Htmlinfo}}

c.Data["html"] = "<h2>这是一个后台渲染的h2</h2>"

{{.html | html2str}}
{{html2str .html}}

9.4 str2html

实现了把相应的字符串当作HTML来输出，不转义，使用方法{{str2html .Strhtml}}

c.Data["html"] = "<h2>这是一个后台渲染的h2</h2>"

{{.html | str2htmI}}
{{str2html .htmI}}

9.5 htmlquote

实现了基本的html 字符转义，使用方法{{htmlquote .quotel}

c.Data["html"] = "<h2>这是一个后台渲染的h2</h2>"

得到

&It;h2&gt;这是一. 个后台渲染的h2&lt;/h2&gt;

9.6 htmlunquote

实现了基本的反转移字符，使用方法{{htmlunquote .unquote}}

9.7 assets_js

为js文件生成一个 script 标签.使用方法{{assets_ js src}

{{assets_ js "/static/js/reload.min.js"}}
<script src="/static/js/reload.min.js"></script>

9.8 assets_css

为css文件生成-一个 link 标签.使用方法{{assets_css src}}

{{assets_ Css "/static/css/basic.css"}}

得到

<link href-="/static/css/basic.css" rel="stylesheet" />

9.9 config

获取AppConfig 的值，使用方法{{config configType configKey defaultValue}} 可选的 configType有String, Bool, Int, Int64, Float, DIY

{{config "String" "httpport"}}

9.10 map_ get

获取map的值

Data["m"] = map[string]interface{} {
    "a": 1,
    "1": map[string]float64{
        "c": 4,
    },
}

{{ map_ get .m "a" }} // return 1
{{ map_get .m1 "c" }} // return 4

自定义模板函数

default.go

func he11o(in string) (out string) {
    out = in + "world"
    return
}
func main() {
    beego.AddFuncMap("hi", hello)
    beego.Run()
}

<div>{{.title | hi}}</div>

上方代码会生成如下 html

<div>标题world</div>

以上就是 Beego 框架前端部分的一些内容，生命不息，学习不止~

avatar
文章
阅读
粉丝