Gee教程6.模板(HTML Template)

这篇具有很好参考价值的文章主要介绍了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 {
	*RouterGroup
	router *router
	gorups []*RouterGroup

	htmlTemplates *template.Template
	funcMap       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 pointer
	engine *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 = middlewares
	c.engine = engine       //给 c.engine 赋值 
	engine.router.handle(c)
}

测试

 该文件目录结构

Gee教程6.模板(HTML Template),# Go实现Web框架,html,go,web

代码

<!-- templates/custom_func.tmpl -->
<html>
<body>
    <p>hello, {{.title}}</p>
    <p>Date: {{.now | FormatAsDate}}</p>
</body>
</html>
type student struct {
	Name string
	Age  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文章来源地址https://www.toymoban.com/news/detail-756478.html

到了这里,关于Gee教程6.模板(HTML Template)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:

    👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比

    2024年02月12日
    浏览(90)
  • go语言模板处理包text/template详解

     本文对go语言内置模板处理包\\\"text/template\\\"常用操作汇总进行了详解,非常全面,一次搞定你的问题!还不收藏等啥呢! 目录 通用结构体定义 通用转换 1,基础操作 2,解析文件 3,自定义函数调用 4,循环遍历 5,语句、运算符、函数 6,变量与操作符

    2024年01月25日
    浏览(46)
  • HTML <template> 标签

    实例 使用 template 保留页面加载时隐藏的内容。使用 JavaScript 来显示: 页面下方有更多 TIY 实例。 template  标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。 template  中的内容可以稍后使用 JavaScript 呈现。 如果您有一些需要重复使用的 HTML 代码,则可以使用  template  

    2024年02月11日
    浏览(36)
  • html实现动漫视频网站模板源码

    作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/134899691 html实现动漫视频网站模板源码 ,功能最全,好看的动漫网站模板,视频网站模板,主要以动漫视频介绍为主,视频网站以六个板块(视频网站首页,视频网站视频详情,视频网站视频播放,视频网站娱

    2024年02月05日
    浏览(68)
  • 无涯教程-HTML5 - Web 存储

    HTML5引入了两种机制是会话存储(Session Storage)和本地存储(Local Storage),它们将用于处理不同的情况。 几乎每个浏览器的最新版本都支持HTML5存储,包括Internet Explorer。 HTML5引入了 sessionStorage 属性,站点将使用该属性将数据添加到会话存储中,并且在该窗口中打开的同一站点中的

    2024年02月19日
    浏览(42)
  • html5实现好看的年会邀请函源码模板

    作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/135720875 html5实现好看的年会邀请函源码模板 ,十个界面效果,邀请函、诚挚邀请、关于我们、董事长致词、公司合作方、活动流程、加盟支持、加盟流程、加盟申请、活动信息等。界面展示图文时支持自己设置

    2024年01月21日
    浏览(44)
  • Go开发使用bee工具生成beego框架工程代码、运行web项目以及beego中内置模板函数列表

        GO开发中使用bee工具生成beego框架工程代码,在这之前假定你已经成功安装好了Beego环境搭建和bee工具,Windows下Beego环境搭建和bee工具的安装使用_bee命令 windows-CSDN博客 然后在命令行或者在git bash中进入到GOPATH的src目录,执行bee new 工程名称,来生成一个beego框架工程目录:

    2024年04月29日
    浏览(38)
  • Web端服务器推送技术原理分析及dwr框架简单的使用,html5移动web开发

    缺点  : a) 糟糕的用户体验 b) 对服务器的压力很大,并且造成带宽的极大浪费。 2.2 Ajax 轮询 Ajax隔一段时间(通常使用JavaScript的setTimeout函数)就去服务器查询是否有改变,从而进行增量式的更新。但是间隔多长时间去查询成了问题,因为性能和即时性造成了严重的反比

    2024年04月16日
    浏览(50)
  • html实现好看的个人介绍,个人主页模板5(附源码)

    作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/131273315 html实现好看的个人介绍,个人主页模板5(附源码) ,第五种风格,html源码下载,响应式布局,动态展示数据效果,界面整洁,布局清晰。 代码备注详细,可在此基础上更加完善功能,打造属于自己的个人

    2024年02月09日
    浏览(82)
  • 教你使用PHP实现一个轻量级HTML模板引擎

    🏆作者简介,黑夜开发者,全栈领域新星创作者✌,2023年6月csdn上海赛道top4。多年电商行业从业经验,对系统架构,数据分析处理等大规模应用场景有丰富经验。 🏆本文已收录于PHP专栏:PHP进阶实战教程。 🏆另有专栏PHP入门基础教程,希望各位大佬多多支持❤️。 在 W

    2024年02月15日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包