内容展示

最新推荐文章于 2021-03-16 12:51:42 发布
最新推荐文章于 2021-03-16 12:51:42 发布
阅读量259 收藏
点赞数
分类专栏： Go
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39777626/article/details/86165020
版权

更多Go内容请见： https://blog.csdn.net/weixin_39777626/article/details/85066750

模板引擎

类型

  • 无逻辑模板引擎：将模板中指定的占位符替换成相应的动态数据
  • 嵌入逻辑模板引擎：执行代码，并进行相应的字符串替换工作

Go 模板引擎

语法分析——ParseFile()
执行模板——Execute()

工作原理
在这里插入图片描述
一个简单的模板

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Go Web Programming</title>
	</head>
	<body>
		{{.}}
	</body>
</html>

在处理器函数中出发模板引擎

package main

import (
	"html/template"
	"net/http"
)

func process(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("tmpl.html")
	t.Execute(w, "Hello World!")
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

动作

条件动作

在这里插入图片描述
在处理器中生成随机数

package main

import (
	"html/template"
	"math/rand"
	"net/http"
	"time"
)

func process(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("tmpl.html")
	rand.Seed(time.Now().Unix())
	t.Execute(w, rand.Intn(10) > 5)
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

tmpl.html 文件（使用了条件语句）

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Go Web Programming</title>
	</head>
	<body>
		{{if .}}
			Number is greater than 5 !
		{{else}}
			Number is 5 or less !
		{{end}}
	</body>
</html>
迭代动作

在这里插入图片描述
调用迭代动作

package main

import (
	"html/template"
	"net/http"
)

func process(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("tmpl.html")
	days := []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}
	t.Execute(w, days)
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

tmpl.html 文件（使用了迭代语句）

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Go Web Programming</title>
	</head>
	<body>
		<ul>
		{{range . }}
			<li>{{ . }}</li>
		{{end}}
		</ul>
	</body>
</html>

tmpl.html 文件（带有备选结果的迭代语句）

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Go Web Programming</title>
	</head>
	<body>
		<ul>
		{{range . }}
			<li>{{ . }}</li>
		{{else}}
			<li>Nothing to show</li>
		{{end}}
		</ul>
	</body>
</html>
设置动作

在这里插入图片描述

package main

import (
	"html/template"
	"net/http"
)

func process(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("tmpl.html")
	t.Execute(w, "hello")
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

tmpl.html 文件（对点进行设置）

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Go Web Programming</title>
	</head>
	<body>
		<div>The dot is {{ . }}</div>
		<div>
			{{with "world"}}
				Now the dot is set to {{ . }}
			{{end}}
		</div>
		<div>The dot is {{ . }} again</div>
	</body>
</html>

tmpl.html 文件（在设置点的时候提供备选方案）

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Go Web Programming</title>
	</head>
	<body>
		<div>The dot is {{ . }}</div>
		<div>
			{{with "world"}}
				Now the dot is set to {{ . }}
			{{else}}
				The dot is still {{ . }}
			{{end}}
		</div>
		<div>The dot is {{ . }} again</div>
	</body>
</html>
包含动作

t1.html

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9">
		<title>Go Web Programming</title>
	</head>
	<body>
		<div>This is t1.html before</div>
		<div>This is the value of the dot in t1.html - [{{ . }}]</div>
		<hr/>
		{{template "t2.html"}}
		<hr/>
		<div>This is t1.html after</div>
	</body>
</html>

t2.html

<div style="background-color : yellow ;">
	This is t2.html<br/>
	This is the value of the dot in t2.html - [{{ . }}]
</div>

调用嵌套模块

package main

import (
	"html/template"
	"net/http"
)

func process(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("t1.html", "t2.html")
	t.Execute(w, "hello world")
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

t1.html （将 t1.html 中的数据传递给 t2.html ）

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9">
		<title>Go Web Programming</title>
	</head>
	<body>
		<div>This is t1.html before</div>
		<div>This is the value of the dot in t1.html - [{{ . }}]</div>
		<hr/>
		{{template "t2.html" . }}
		<hr/>
		<div>This is t1.html after</div>
	</body>
</html>

参数、变量和管道

在这里插入图片描述

函数

模板引擎函数 输入 多个参数
返回一个值
一个值和一个错误

创建自定义模板函数
在这里插入图片描述

package main

import (
	"html/template"
	"net/http"
	"time"
)

func formatDate(t time.Time) string {
	layout := "2006-01-02"
	return t.Format(layout)
}

func process(w http.ResponseWriter, r *http.Request) {
	funcMap := template.FuncMap{"fdate": formatDate}
	t := template.New("tmpl.html").Funcs(funcMap)
	t, _ = t.ParseFiles("tmpl.html")
	t.Execute(w, time.Now())
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

tmpl.html（通过管道使用自定义函数）

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<title>Go Web Programming</title>

	</head>

	<body>

		<div>The date/time is {{ . | fdate }}</div>

	</body>

</html>

tmpl.html（通过传递参数使用自定义函数）

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<title>Go Web Programming</title>

	</head>

	<body>

		<div>The date/time is {{ fdate . }}</div>

	</body>

</html>

上下文感知

定义： 可以根据内容所处的上下文改变其显示的内容
用途：

  • 对被显示的内容实施正确的转义
  • 实现自动的防御编程

展示模板上下文感知

package main

import (
	"html/template"
	"net/http"
)

func process(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("tmpl.html")
	content := `I asked:<i>"What's up?"</i>`
	t.Execute(w, content)
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

tmpl.html（上下文感知模板）

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<title>Go Web Programming</title>

	</head>

	<body>

		<div>{{ . }}</div>

		<div><a href="/{{ . }}">Path</a></div>

		<div><a href="/?q={{ . }}">Query</a></div>

		<div><a onclick="f('{{ . }}')">Onclick</a></div>

	</body>

</html>
防御XSS攻击

持久性XSS漏洞（XSS攻击方式）：服务器将攻击者存储的数据原原本本地显示给其他用户

form.html(实施XSS攻击的表单)

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Go Web Programming</title>
	</head>
	<body>
		<form action="/process" method="post">
			Comment:<input name="comment" type="text">
			<hr/>
			<button id="submit">Submit</button>
		</form>
	</body>
</html>

测试XSS攻击

package main

import (
	"html/template"
	"net/http"
)

func process(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("tmpl.html")
	t.Execute(w, r.FormValue("comment"))
}

func form(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("form.html")
	t.Execute(w, nil)
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	http.HandleFunc("/form", form)
	server.ListenAndServe()
}

tmpl.html

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<title>Go Web Programming</title>

	</head>

	<body>

		<div>{{ . }}</div>

	</body>

</html>

<script>alert('Pwnd!');</script>
不对HTML进行转义

FireFox

package main

import (
	"html/template"
	"net/http"
)

func process(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("tmpl.html")
	t.Execute(w, template.HTML(r.FormValue("comment")))
}

func form(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("form.html")
	t.Execute(w, nil)
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	http.HandleFunc("/form", form)
	server.ListenAndServe()
}

关闭内置XSS防御功能（IE，Chrome，Safari）

package main

import (
	"html/template"
	"net/http"
)

func process(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("X-XSS-Protection", "0")
	t, _ := template.ParseFiles("tmpl.html")
	t.Execute(w, template.HTML(r.FormValue("comment")))
}

func form(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("form.html")
	t.Execute(w, nil)
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	http.HandleFunc("/form", form)
	server.ListenAndServe()
}

嵌套模板

布局：可以重复在多个页面上的固定模式

显示地定义一个模板

{{ define "layout" }}
<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<title>Go Web Programming</title>

	</head>

	<body>

		{{ template "content" }}

	</body>

</html>
{{ end }}

layout.html（在一个模板文件中定义多个模板）

{{ define "layout" }}
<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<title>Go Web Programming</title>

	</head>

	<body>

		{{ template "content" }}
	</body>

</html>
{{ end }}

{{ define "content" }}
	Hello World !
{{ end }}

使用显式定义的模板

package main

import (
	"html/template"
	"net/http"
)

func process(w http.ResponseWriter, r *http.Request) {
	t, _ := template.ParseFiles("layout.html")
	t.ExecuteTemplate(w, "layout", "")
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

red_hello.html

{{ define "content" }}
<h1 style="color:red;">Hello World!</h1>
{{ end }}

blue_hello.html

{{ define "content" }}
<h1 style="color:blue;">Hello World!</h1>
{{ end }}

不同模板中定义的同名模板

package main

import (
	"html/template"
	"math/rand"
	"net/http"
	"time"
)

func process(w http.ResponseWriter, r *http.Request) {
	rand.Seed(time.Now().Unix())
	var t *template.Template
	if rand.Intn(10) > 5 {
		t, _ = template.ParseFiles("layout.html", "red_hello.html")
	} else {
		t, _ = template.ParseFiles("layout.html", "blue_hello.html")
	}
	t.ExecuteTemplate(w, "layout", "")
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

通过块动作定义默认模板

块动作：允许用户定义一个模板并且立即使用
在这里插入图片描述
只对layout.html进行语法分析

package main

import (
	"html/template"
	"math/rand"
	"net/http"
	"time"
)

func process(w http.ResponseWriter, r *http.Request) {
	rand.Seed(time.Now().Unix())
	var t *template.Template
	if rand.Intn(10) > 5 {
		t, _ = template.ParseFiles("layout.html", "red_hello.html")
	} else {
		t, _ = template.ParseFiles("layout.html")
	}
	t.ExecuteTemplate(w, "layout", "")
}

func main() {
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.HandleFunc("/process", process)
	server.ListenAndServe()
}

layout.html（通过块动作添加默认的content模板）

{{ define "layout" }}
<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<title>Go Web Programming</title>

	</head>

	<body>

		{{ block "content" . }}
		<h1 style="color:blue;">Hello World!</h1>
		{{ end }}
	</body>

</html>

更多Go内容请见： https://blog.csdn.net/weixin_39777626/article/details/85066750

小小蒲公英
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring boot开源项目之个人博客（15）—博客详情页面展示
qq369392973的博客
08-28 704
Spring boot开源项目之个人博客（15）—博客详情页面展示 博客详情页分为两个部分，一个是博客详情信息的渲染，一个是评论功能。在这之前，做了一个全局搜索的功能。 1. 全局搜索 在导航栏有一个搜索框，定义搜索的功能是输入字段查找标题和内容中包含字段的博客，然后把符合条件的博客分页展示。 简单处理一下页面，粘贴之前博客列表中的div，就省去了再写theamleaf去渲染了，主要内容是根据搜索字段查找符合条件的博客。从前端开始看 <form action="#" name="search" th:
AE图文内容展示
05-06
在本文中，我们将深入探讨Adobe After Effects（简称AE）如何用于创建令人印象深刻的图文内容展示。After Effects是一款强大的视觉特效和动态图形软件，广泛应用于电影、电视和网络媒体的后期制作。通过它，用户能够...
展示内容
weixin_30653023的博客
11-29 71
今天课上展示了软件 评价为过于简单 还需另寻他法 转载于:https://www.cnblogs.com/wmqlzm/p/10041683.html
小酌Django5——博客内容展示
baby_hua的专栏
07-10 212
小酌Django5——博客内容展示 文章内容展示 我们已经实现了一个展示标题列表的页面，现在看看如何实现点击标题查看文章详情内容： 增加超链接 修改文章列表页的li，增加超链接： <li><a href="{{ blog.id }}">{{ blog.title }}</a></li> 点击某一个超链接：我们发现浏览器跳转的URL变成了http://127.0.0.1:8000/blog/5; 编写视图函数 获取id为5的article： 导入BlogAr
博客项目——用户文章内容展示
it___is_的博客
03-16 334
客户端呈现页面 （default.art 文章列表） 这里我们给两个标签添加链接路径，一个是图片链接，另一个是文章标题链接。 通过点击链接链接到。点击链接完成两件事，1.链接到文章内容页面（article），2.传递get请求参数id给服务器对应的article.js路由 <!-- 文章列表开始 --> <ul class="list w1100"> {{each articles.records}} <li class="{{$index%2 == 0 ?'f
十九、文章内容展示页面设计
jiangjingxuan的博客
01-25 2563
前面已经对整个网站的布局做了周密的准备，下面就是最关键内容的展示了，完成了这一部分网站也就基本搞成了。本节我们把文章内容展示部分完成。 请尊重原创，转载请注明来源网站www.shareditor.com以及原始链接地址 修改controller   修改src/AppBundle/Controller/BlogController.php，把BlogController类的showActi
jquery+json实现动态商品内容展示的方法
10-22
主要介绍了jquery+json实现动态商品内容展示的方法,涉及jQuery操作及解析json格式数据的相关技巧,需要的朋友可以参考下
菜谱展示小程序源码分享(包括：菜谱图片展示、内容展示、监控计划)
02-17
这款小程序源码包含三个主要功能模块：菜谱图片展示、内容展示以及监控计划，为开发者和用户提供了丰富的交互可能性。 一、菜谱图片展示 菜谱展示小程序的核心在于视觉呈现，图片展示部分尤为重要。源码中应包含了...
手机平板电脑内容展示PPT素材
07-16
本资源“手机平板电脑内容展示PPT素材”正为此目的而提供，它包含了适用于展示手机和平板电脑相关内容的PPT设计元素，能够帮助你在商业报告、产品介绍、培训课程或市场推广等场合中，更加生动地展示移动设备上的应用...
Spring Boot自定义异常内容展示代码.zip
04-01
Spring Boot自定义异常内容代码，用来自定义异常展示信息，添加需要展示的信息等，并满足自适应显示。浏览器访问出现异常返回 Hmtl页面，客户端访问出现异常返回 Json 数据。该 Demo 仅用作备份
从零开始搭建一个基于React框架的博客发布系统 （五）展示博客内容
Run_youngman的博客
06-28 1243
现在列表也有了，点击文章列表的缩略图之后，就要直接展示博客内容了。大家知道一篇博客如果过长的话，会有一个导航栏，帮住用户快速的定位到某个位置，这里也要加入这个功能。 之前说过了，这里引入了react-markdown，还有这个代码高亮的插件prismjf，在Components中新建一个文件夹，用来保存markdown中可能存在的各种布局块，比如代码块，列表，字体等。可以通过自定义样式的方式添加...
13.首页内容展示
weixin_34358092的博客
01-20 230
发布问答界面与功能以及完成了，我们要把用户发布的内容在首页展示出来，逻辑也是很简单，在请求home.html的时候，从Questions中获取所有的数据，在home.html中使用for循环将每一个对象的内容写上去。将home视图函数改写如下： @app.route('/') def home(): questions = Que...
安卓表单数据的展示方式~！
lixuce1234的博客
01-22 3630
最进公司再做一个办公类的软件，要把PC端的表单数据展示到手机上面！可以让你们看看，想象有多么恶心。数据是一个object，不是数组，也不能弄个listview去一行行的展示。刚开始就是用XML布局去写代码，写好了20个左右的表单之后，需求变了（客户比较恶心），说要变样式，标题中间需要加一些空格，感觉要疯了一样要做成这种样式，然后还要去修改布局，而且增删字段特别不方便，然后就想着不能这样做了，万一又改
十套精美个人博客网站模板
热门推荐
FZUMRWANG的博客
06-13 7万+
文件资源，点击下载 展示在下方 紫色的图片博客个人页面模板 红色的微博社交平台HTML模板 响应式生活博客设计网站HTML5模板 程序员个人博客模板 响应式的互联网IT技术博客网站模板 仿17素材官网静态页面模板 Bootstrap生活类型博客网站模板 黑色的WordPress主题博客网页静态模板 ...
个人博客系统项目设计及结果展示图
beststudent_的博客
09-04 4344
一、项目总设计图如下： 2.Http请求时序图： 三、具体开发流程图： 四、效果展示图： 1.显示文章列表 2.文章列表的删除 3.文章详情信息 ...
ElasticSearch实战：个人博客搜索和首页内容展示
刘大磊的博客
01-30 1852
前言最近学习了SpringBoot，搞了一个小型博客系统，在这个系统中的首页内容展示、全文搜索用到了elasticsearch。系统中持久层使用的是Springdata，但是没有使用spring-data-elasticsearch，而是单独引入的elasticsearch、transport依赖。下面就将我系统中涉及到的关于elasticsearch的代码贴出来、供大家一起学习。准备环境Elast
Qt之Web内容的展示
wei375653972的博客
01-18 1553
为了创建基于Qt的web应用程序，Qt提供了支持各种标准web技术(如HTML、CSS和JavaScript)的接口。这些接口使应用程序能够嵌入来自万维网的内容。 也可以将Qt c++和QML代码与HTML和JavaScript结合起来创建web应用程序。通过Qt WebChannel，远程客户端可以访问Qt的api。 ps:什么是web应用程序？Web应用程序是由多个Servlet、JSP页...
.\store.go:32:10: cannot assign *gorm.DB to Db (type gorm.DB) in multiple assignment
As的博客
02-12 1912
原码 var Db gorm.DB func init() { var err error Db, err = gorm.Open("postgres", "user=postgres dbname=testdb password=3141596 sslmode=disable") if err != nil { panic(err) } Db.AutoMigrate(&amp;P...
Go的部署——基于Manjaro（Arch Linux）
As的博客
02-23 1434
独立的服务器 Heroku Google App Engine Docker 什么是Docker 安装Docker Docker的理念与组件 Docker化的一个Go Web应用 将Docker容器推送到互联网 部署方法之间的对比
大屏实现分屏展示、滚动展示、定向内容展示等。
最新发布
06-07
如果您需要展示会议议程或嘉宾介绍，可以使用专业的会议管理系统，实现定向内容展示和互动交流。 希望以上方案能为您提供一些启示和帮助。如果您有其他问题或需要进一步咨询，欢迎随时向我提出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值