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官网模板章节；

二、示例

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>

unsafe-rust / gfstudy

GoFrame登录实战之模板引擎

一、模板引擎

二、示例

目录

config.toml

go.mod

main.go

index.html

include.html

简介

发行版

贡献者

近期动态

unsafe-rust / gfstudy .gitee-modal { width: 500px !important; }

GoFrame登录实战之模板引擎

一、模板引擎

二、示例

目录

config.toml

go.mod

main.go

index.html

include.html

简介

发行版

贡献者

近期动态

搜索帮助

unsafe-rust / gfstudy