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
<!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>
${include "include.html" .}
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/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>
include.html
<el-row>
<el-col :span="6" :offset="6" style="text-align: center">
<span style="font-weight: bold">這裏是通過include引用的文件內容</span>
</el-col>
</el-row>
視頻地址
- 騰訊課堂教程地址：https://ke.qq.com/course/2587868?taid=9171133864049884&tuin=13b4f9bd
- bilibili教程地址：https://www.bilibili.com/video/BV1oT4y1G7ge/
代碼地址
- github：https://github.com/goflyfox/gfstudy
- gitee：https://gitee.com/goflyfox/gfstudy
- 公衆號搜索：GoWeb學習之路