go引擎模板非html,GoFrame登录实战之模板引擎

GoFrame登录实战之模板引擎

这节课开始除了会介绍一部分GoFrame基础知识，也有一些关键的知识点和实战经验进行分享。示例还是主要以GoFrame为基础；

实践是检验真理的唯一标准。希望大家可以多跟练习，多去思考，多去体会，而不是简单的听；

一、模板引擎

模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

但模板引擎不属于特定技术领域，它是跨领域跨平台的概念。

模板配置config.toml

# 模板引擎配置

[viewer]

Path = "template"

DefaultFile = "index.html"

Delimiters = ["${", "}"]

模板使用

// 调用文件

s := g.Server()

s.BindHandler("/template", func(r *ghttp.Request) {

r.Response.WriteTpl("index.tpl", g.Map{

"id": 123,

"name": "john",

})

})

// 直接传入字符串

s := g.Server()

s.BindHandler("/template", func(r *ghttp.Request){

tplContent := `id:{{.id}}, name:{{.name}}`

r.Response.WriteTplContent(tplContent, g.Map{

"id" : 123,

"name" : "john",

})

})

模板常用标签

{{ .value }}

{{if .condition}}

...

{{else if .condition2}}

...

{{else}}

...

{{end}}

{{range $index, $elem := .SliceContent}}

{{range $key, $value := $elem}}

{{$key}}:{{$value}}

{{end}}

{{end}}

{{include "模板文件名(需要带完整文件名后缀)" .}}

{{/*

comment content

support new line

*/}}

模板也支持函数，大家也可以自定义函数

${"我是中国人" | substr 2 -1}

其实模板可以当做一种语言来讲，这里不做过多介绍，一般使用模板只用一些基本功能，但是要想深入了解建议去看go模板和GoFram官网模板章节；

二、示例

目录

:.

│ go.mod

│ go.sum

│ main.go

│

├─config

│ config.toml

│

└─template

index.html

include.html

config.toml

# 模板引擎配置

[viewer]

Path = "template"

DefaultFile = "index.html"

Delimiters = ["${", "}"]

go.mod

module gf-template

go 1.14

require github.com/gogf/gf v1.12.1

main.go

package main

import (

"github.com/gogf/gf/frame/g"

"github.com/gogf/gf/net/ghttp"

)

func main() {

s := g.Server()

// 常规注册

group := s.Group("/")

// 模板文件

group.GET("/", func(r *ghttp.Request) {

r.Response.WriteTpl("index.html", g.Map{

"title": "列表页面",

"show": true,

"listData": g.List{

g.Map{

"date": "2020-04-01",

"name": "朱元璋",

"address": "江苏110号",

},

g.Map{

"date": "2020-04-02",

"name": "徐达",

"address": "江苏111号",

},

g.Map{

"date": "2020-04-03",

"name": "李善长",

"address": "江苏112号",

},

}})

})

// 字符串传入

group.GET("/template", func(r *ghttp.Request) {

tplContent := `id:${.id}, name:${.name}`

r.Response.WriteTplContent(tplContent, g.Map{

"id" : 123,

"name" : "john",

})

})

s.Run()

}

index.html

.el-row {

margin-bottom: 20px;

}

${ .title }

${if .show}【展示】${end}

:data="tableData"

style="width: 100%">

prop="date"

label="日期"

width="180">

prop="name"

label="姓名"

width="180">

prop="address"

label="地址">

${include "include.html" .}

/**

tableData: [{

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}]

*/

var listData = new Array();

var data;

${range $index, $elem := .listData}

data = {};

${range $key, $value := $elem}

data['${$key}']='${$value}'

${end}

listData.push(data)

${end}

var vm = new Vue({

el: '#app',

data: {

visible: false,

tableData: listData

}

})

include.html

这里是通过include引用的文件内容

视频地址

代码地址