Gee教程6.模板(HTML Template)

这一章节的内容是介绍 Web 框架如何支持服务端渲染的场景

  • 实现静态资源服务(Static Resource)。
  • 支持HTML模板渲染。

这一章节很多内容是基于net/http库的,该库已经实现了很多静态文件和HMML模板的相关功能的了。

 静态文件

网页的三剑客,JavaScript、CSS 和 HTML。要做到服务端渲染,第一步便是要支持 JS、CSS 等静态文件。

http.FileServer

为了方便使用像JavaScript、CSS和图像这样的静态资源,net/http内置了http文件服务器http.FileServer。

func main() {fs := http.FileServer(http.Dir("./static"))http.Handle("/assets/", http.StripPrefix("/assets/", fs))http.ListenAndServe("localhost:10000", nil)
}

我们使用了内置的http.FileServer,并将其指向url路径。为了使文件服务器正常工作,它需要知道从哪里提供文件。第二行代码就是告知静态文件是在路径./static。http.FileServer() 方法返回的是 fileHandler 实例,而 fileHandler 结构体实现了 Handler 接口的方法 ServeHTTP()

一旦我们的文件服务器就位,我们只需要将一个url路径指向它,就像我们对动态请求所做的一样。需要注意的一点是:为了正确地提供文件,我们需要去掉url路径的一部分。通常这是我们文件所在目录的名称。这是第三行代码http.StripPrefix的操作。

比如当前静态文件是在./static路径中,该路径有文件gee.js。

而用户访问localhost:10000/assets/gee.js。这时服务器就会把/assets/gee.js变成/gee.js,那就是访问./static/gee.js。这是正确的,而不是去访问./static/assers/gee.js。

静态文件Web服务器

找到文件后,如何返回这一步,net/http库已经实现了。因此,该web 框架要做的,仅仅是解析请求的地址,映射到服务器上文件的真实地址,交给http.FileServer处理就好了。

来看看使用方式

r := gee.New()
r.Static("/assets", "/usr/static")    //"/usr/static"是静态文件的存放路径
// 或相对路径 r.Static("/assets", "./static")
r.Run(":10000")

 r.Static就相当于r.GET。用户访问localhost:10000/assets/js/gee.js,最终会返回/usr/static/js/gee.js

代码实现HTML 模板渲染

// 静态文件服务器
func (group *RouterGroup) Static(relativePath string, root string) {handler := group.createStaticHandler(relativePath, http.Dir(root))urlPath := path.Join(relativePath, "/*filepath")group.GET(urlPath, handler)
}func (group *RouterGroup) createStaticHandler(relativePath string, fs http.FileSystem) HandlerFunc {absolutePath := path.Join(group.prefix, relativePath)fileServer := http.StripPrefix(absolutePath, http.FileServer(fs))return func(c *Context) {file := c.Param("filepath")if _, err := fs.Open(file); err != nil {c.Status(http.StatusNotFound)return}fileServer.ServeHTTP(c.Wrtier, c.Req)}
}

 HTML 模板渲染

 Go语言内置了text/templatehtml/template2个模板标准库,其中html/template为 HTML 提供了较为完整的支持。包括普通变量渲染、列表渲染、对象渲染等。该web框架的模板渲染直接使用了html/template提供的能力。

html/template库

这里需要简单介绍下html/template库的函数使用,该流程主要是

构建模板对象New()-->解析数据Parse()-->应用Execute()

新建一个模板

使用func(*Template) New(name string) *Template新建一个模板,并指定模板的名称。

比如:tpl := template.New("test")

文件模板解析:ParseFiles和ParseGlob

ParseFiles接受一个字符串,字符串的内容是一个模板文件的路径(绝对路径or相对路径)。
ParseGlob也差不多,是用正则的方式匹配多个文件。

假设一个目录里有a.txt b.txt c.txt的话,用ParseFiles需要写3行对应3个文件,如果有一百个文件呢?
而用ParseGlob只要写成template.ParseGlob("*.txt") 即可

模板的输出,ExecuteTemplate和Execute

模板下有多套模板,其中有一套模板是当前模板
可以使用Name的方式查看当前模板

err = tmpl.ExecuteTemplate(os.Stdout, "a.html", sweaters)  //指定模板名,这次为a.html
err = tmpl.Execute(os.Stdout, sweaters)  //模板名省略,打印的是当前模板

 添加模板函数

 模板文件中支持函数操作,我们可以使用func (t *Template) Funcs(funcMap FuncMap) *Template方法给模板添加函数。

函数Must,初始化简便

Must函数用于包装返回(*Template, error)的函数/方法调用。它会自动在有err的时候panic,无错的时候只返回其中的*Template,一般用于变量初始化。这在赋值给变量的时候非常简便。

比如:var t = template.Must(template.New("name").Parse("html"))

模板功能添加入框架

了解了上面的函数使用,之后,就可以在web框架中添加template功能。

type Engine struct {*RouterGrouprouter *routergorups []*RouterGrouphtmlTemplates *template.TemplatefuncMap       template.FuncMap
}func (engine *Engine) SetFuncMap(funcMap template.FuncMap) {engine.funcMap = funcMap
}func (engine *Engine) LoadHTMLGlob(path string) {engine.htmlTemplates = template.Must(template.New("").Funcs(engine.funcMap).ParseGlob(path))
}

首先为 Engine 添加了 *template.Template 和 template.FuncMap对象,前者将所有的模板加载进内存,后者是所有的自定义模板渲染函数。

另外,也给用户分别提供了设置自定义渲染函数funcMap和加载模板LoadHTMLGlob的方法。

注意:从这也看出来,要先使用SetFuncMap方法,才能使用LoadHTMLGlob

接下来,对原来的 (*Context).HTML()方法做了些小修改,使之支持根据模板文件名选择模板进行渲染。

type Context struct {// ...// engine pointerengine *Engine    //新添加的,为了HTMl方法中能访问到engine.htmlTemplates
}// func (c *Context) HTML(code int, html string) {
func (c *Context) HTML(code int, name string, data any) {c.SetHeader("Content-Type", "text/html")c.Status(code)if err := c.engine.htmlTemplates.ExecuteTemplate(c.Wrtier, name, data); err != nil {c.Fail(500, err.Error())}//以前的做法// c.SetHeader("Content-Type", "text/html")// c.Status(code)// c.Wrtier.Write([]byte(html))
}

在Context.HTML方法中要想能使用到templates,那么就需要能访问到Engine。那我们在 Context 中添加了成员变量 engine *Engine,这样就能够通过 Context 访问 Engine 中的 HTML 模板。实例化 Context 时,还需要给 c.engine 赋值。

func (engine *Engine) ServeHTTP(w http.ResponseWriter, req *http.Request) {.............................c := newContext(w, req)c.midHandlers = middlewaresc.engine = engine       //给 c.engine 赋值 engine.router.handle(c)
}

测试

 该文件目录结构

代码

<!-- templates/custom_func.tmpl -->
<html>
<body><p>hello, {{.title}}</p><p>Date: {{.now | FormatAsDate}}</p>
</body>
</html>
type student struct {Name stringAge  int8
}func FormatAsDate(t time.Time) string {year, month, day := t.Date()return fmt.Sprintf("%d-%02d-%02d", year, month, day)//return fmt.Sprintf("%d-%02d-%d", year, month, day)
}func main() {r := gee.New()r.Use(gee.Logger())//设置自定义渲染函数funcMap,custom_func.tmpl文件中的FormatAsDate格式就是FormatAsDate函数返回的格式r.SetFuncMap(template.FuncMap{"FormatAsDate": FormatAsDate,})r.LoadHTMLGlob("templates/*")r.Static("/assets", "./static")stu1 := &student{Name: "Geektutu", Age: 20}stu2 := &student{Name: "Jack", Age: 22}r.GET("/", func(c *gee.Context) {c.HTML(http.StatusOK, "css.tmpl", nil)})r.GET("/students", func(c *gee.Context) {c.HTML(http.StatusOK, "arr.tmpl", gee.H{"title":  "gee","stuArr": [2]*student{stu1, stu2},})})r.GET("/date", func(c *gee.Context) {c.HTML(http.StatusOK, "custom_func.tmpl", gee.H{"title": "gee","now":   time.Date(2023, 12, 5, 0, 0, 0, 0, time.UTC),})})r.Run("localhost:10000")
}

完整代码:https://github.com/liwook/Go-projects/tree/main/gee-web/6-template

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/214013.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

APP备案,最新获取安卓签名文件中MD5等信息方法

1.通过签名文件获取SHA1和SHA256 直接通过cmd执行命令 keytool -list -v -keystore xxxxx/xxx/xx/xxx.keystore输入后回车会提示输入密码库口令&#xff0c;直接输入Keystore密码&#xff08;输入过程中终端上不会显示&#xff0c;输完回车就行&#xff09; 2.获取md5 由于…

vmware ubuntu22 安装vmtools并设置共享文件夹

我是你爹&#xff0c;再不会就紫砂。 权限不够或没读写权限自己改下就行。 1. 主机下新建文件夹&#xff0c;并如下图设置成共享 2. 把上面文件夹路径添加到共享文件夹里面 3. 开启ubuntu&#xff0c;在登陆界面显示之前我们会看到下图的重新安装vmware tools由灰变黑&#x…

Linux面试必备系列

文章目录 1、Linux的体系结构2、如何查找特定的文件&#xff08;find&#xff09;3、检索文件内容(grep)4、对文件内容做统计(awk)5、批量替换文本内容&#xff08;sed&#xff09; 1、Linux的体系结构 体系结构主要分为用户态&#xff08;用户上层活动&#xff09;和内核态内核…

OpenHarmony北向-让更广泛的应用开发者更容易参与

一、标准系统的体验 按照官方文档指导&#xff0c;这样操作&#xff0c;OH标准系统开发板就可以运行开发者开发的OpenHarmony应用了。 二、实际情况 按照开发文档上的说明&#xff0c;肯定是装不上的。因为OH不同的发行版&#xff0c;不同发行板不同的设备&#xff0c;IDE&…

Kubernetes架构及核心部件

文章目录 1、Kubernetes集群概述1.1、概述1.2、通过声明式API即可 2、Kubernetes 集群架构2.1、Master 组件2.1.1、API Server2.1.2、集群状态存储2.1.3、控制器管理器2.1.4、调度器 2.2、Worker Node 组件2.2.1、kubelet2.2.2、容器运行时环境2.2.3、kube-proxy 2.3、图解架构…

c-语言->数据在内存的存储

系列文章目录 文章目录 系列文章目录前言 前言 目的&#xff1a;学习整数在内存的储存&#xff0c;什么是大小端&#xff0c;浮点数的储存。 1. 整数在内存中的存储 在讲解操作符的时候&#xff0c;我们就讲过了下⾯的内容&#xff1a; 整数的2进制表⽰⽅法有三种&#xff0…

可视化监控云平台/智能监控平台EasyCVR国标设备开启音频没有声音是什么原因?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。GB28181视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存…

sqlite3.44.2的编译

文章目录 sqlite3.44.2的编译概述笔记解决shell.c编译报错的方法整理 - 正常可用的编译脚本过程剩下的事情验证编译出的输出是否可以给工程正常使用?END sqlite3.44.2的编译 概述 想从源码编译一份Sqlite3.44.2出来. 编译sqlite3.44.2前置需要的TCL环境已经编译出来到了, 做…

uniapp获取wifi连接状态

当使用Uniapp开发移动应用时&#xff0c;我们经常需要获取设备的连接状态&#xff0c;特别是WiFi连接状态。下面是一个简短的关于在Uniapp中获取WiFi连接状态的博客&#xff1a; 在Uniapp中&#xff0c;要获取设备的WiFi连接状态&#xff0c;我们可以利用uni.getNetworkType接…

少女感满满的羽绒服 ~时尚又保暖

玫瑰刺绣新中式羽绒服 粉粉嫩嫩的超级有少女心蓬松柔软又保暖 领口和袖口拼接仿真兔毛增添温暖更显可爱穿上精致可爱不显臃肿 宝贝肯定会喜欢&#xff01;&#xff01;

springboot3远程调用

RPC 两个服务器之间的调用 远程请求 内部服务之间的调用 可以通过 cloud 注册中心 openfeign等 外部服务的调用 http请求 外部协议 api:远程接口 sdk&#xff1a;本地调用 调用阿里云的天气请求 方法二&#xff1a; 写每个类型调用的接口 例如短信功能 天气查询功能 快递功…

同旺科技 USB TO RS-485 定制款适配器--- 拆解(四)

内附链接 1、USB TO RS-485 定制款适配器 ● 支持USB 2.0/3.0接口&#xff0c;并兼容USB 1.1接口&#xff1b; ● 支持USB总线供电&#xff1b; ● 支持Windows系统驱动&#xff0c;包含WIN10 / WIN11系统32 / 64位&#xff1b; ● 支持Windows RT、Linux、Mac OS X、Windo…

Java利用TCP实现简单的双人聊天

一、创建新项目 首先创建一个新的项目&#xff0c;并命名为聊天。然后创建包&#xff0c;创建两个类&#xff0c;客户端&#xff08;SocketClient&#xff09;和服务器端&#xff08;SocketServer&#xff09; 二、实现代码 客户端代码&#xff1a; package 聊天; import ja…

【Redis深度专题】「核心技术提升」从源码角度探究Redis服务的内存使用、清理以及逐出等底层实现原理

背景介绍 Redis作为一种高性能的内存NoSQL数据库&#xff0c;其容量受限于最大内存的限制。用户在使用阿里云Redis时&#xff0c;除了对性能和稳定性有较高的要求外&#xff0c;对内存占用也非常敏感。然而&#xff0c;在实际使用中&#xff0c;一些用户可能会发现他们的线上实…

Android View的 getHeight 和 getMeasuredHeight 的区别

前言 先简单复习一下Android View 的 绘制顺序&#xff1a; 1、onMeasure&#xff08;测量&#xff09;&#xff0c;先根据构造器传进来的LayoutParams&#xff08;布局参数&#xff09;&#xff0c;测量view宽高。 2、onLayout&#xff08;布局&#xff09;&#xff0c;再根…

ExoPlayer架构详解与源码分析(10)——H264Reader

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…

iOS(swiftui)——系统悬浮窗( 可在其他应用上显示,可实时更新内容)

因为ios系统对权限的限制是比较严格的,ios系统本身是不支持全局悬浮窗(可在其他app上显示)。在iphone14及之后的iPhone机型中提供了一个叫 灵动岛的功能,可以在手机上方可以添加一个悬浮窗显示内容并实时更新,但这个功能有很多局限性 如:需要iPhone14及之后的机型且系统…

软件测试相关

软件测试是什么&#xff1f; 使用人工和自动手段来运行或测试某个系统的过程&#xff0c;其目的在于验证它是否满足规定的需求或弄清预期结果与实际结果的差别。 为什么做软件测试&#xff1f;目的是什么&#xff1f; 发现软件存在的代码或业务逻辑错误 检验产品是否符合用户需…

基于Lucene的全文检索系统的实现与应用

文章目录 一、概念二、引入案例1、数据库搜索2、数据分类3、非结构化数据查询方法1&#xff09; 顺序扫描法(Serial Scanning)2&#xff09;全文检索(Full-text Search) 4、如何实现全文检索 三、Lucene实现全文检索的流程1、索引和搜索流程图2、创建索引1&#xff09;获取原始…

掌控安全 暖冬杯 CTF Writeup By AheadSec

本来结束时发到了学校AheadSec的群里面了的&#xff0c;觉得这比赛没啥好外发WP的&#xff0c;但是有些师傅来问了&#xff0c;所以还是发一下吧。 文章目录 Web签到&#xff1a;又一个计算题计算器PHP反序列化又一个PHP反序列化 Misc这是邹节伦的桌面背景图什么鬼&#xff1f;…