这节课开始除了会介绍一部分GoFrame基础知识,也有一些关键的知识点和实战经验进行分享。示例还是主要以GoFrame为基础;
实践是检验真理的唯一标准。希望大家可以多跟练习,多去思考,多去体会,而不是简单的听;
模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
但模板引擎不属于特定技术领域,它是跨领域跨平台的概念。
模板配置config.yaml
# 模板引擎配置
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.yaml
│
└─template
index.html
include.html
# 模板引擎配置
viewer:
Path: template
DefaultFile: index.html
Delimiters:
- ${
- "}"
module gf-template
go 1.21
require github.com/gogf/gf/v2 v2.6.2
package main
import (
"github.com/gogf/gf/v2/frame/g"
"github.com/gogf/gf/v2/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.SetPort(8199)
s.Run()
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-row {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="6" :offset="6" style="text-align: center">
<span>${ .title }</span>
<span>${if .show}【展示】${end}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
</el-col>
</el-row>
<el-row>
<el-col :span="6" :offset="6" style="text-align: center">
${"我是中国人" | substr 2 -1}
</el-col>
</el-row>
${include "include.html" .}
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<script>
${/*
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
}
})
</script>
</html>
<el-row>
<el-col :span="6" :offset="6" style="text-align: center">
<span style="font-weight: bold">这里是通过include引用的文件内容</span>
</el-col>
</el-row>