go语言中前端模板的使用

最新推荐文章于 2024-12-08 12:00:00 发布

水痕01

最新推荐文章于 2024-12-08 12:00:00 发布

阅读量1.1k

点赞数

文章标签：前端 golang java

本文链接：https://blog.youkuaiyun.com/kuangshp128/article/details/131122110

版权

该文介绍了如何在Golang中设置静态目录以服务静态文件，如图片、CSS和JS，以及如何使用Gin框架进行模板渲染。首先，通过创建assets文件夹并配置HTTP服务器来提供静态资源。其次，展示了如何解析和渲染HTML模板，包括在Gin中使用模板和处理模板嵌套。最后，给出了示例代码以展示具体实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、配置直接加载静态目录

1、项目中创建一个文件夹为assets来存放静态目录(图片、css、js)

2、在main.go文件中添加以下代码

package main

import "net/http"

func main() {
	http.Handle("/assets/", http.FileServer(http.Dir(".")))

	http.ListenAndServe(":8080", nil)
}

3、直接在浏览器上输入http://localhost:8080/assets/1122.jpg就可以访问静态目录的文件

4、如果在gin中使用呢

package main

import (
	"github.com/gin-gonic/gin"
	"net/http"
)

func main() {
	router := gin.Default()
	router.StaticFS("/assets/", http.Dir("./assets"))
	router.Run(":8080")
}

二、模板渲染

1、在项目中创建一个views的文件，并且里面存放html模板

2、创建一个通用的模板渲染方法

func RegisterView() {
	// 一次性解析出全部的模板
	tpl, err := template.ParseGlob("views/**/*")
	if err != nil {
		log.Fatal("解析模板出错" + err.Error())
	}
	for _, item := range tpl.Templates() {
		templateName := item.Name()
		fmt.Println("当前模板名称:" + templateName)
		http.HandleFunc(templateName, func(writer http.ResponseWriter, request *http.Request) {
			err := tpl.ExecuteTemplate(writer, templateName, nil)
			if err != nil {
				log.Fatal("渲染模板失败:" + err.Error())
			}
		})
	}
}

3、直接使用

func main() {
	http.Handle("/assets/", http.FileServer(http.Dir(".")))
	// 全局注册模板渲染器
	RegisterView()

	http.ListenAndServe(":8080", nil)
}

4、在view/user/login.html文件中添加前端代码

{{define  "/user/login.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>登录</h1>
</body>
</html>
{{end}}

5、浏览器上输入地址http://localhost:8080/user/login.html

6、在gin中渲染模板

package main

import (
	"github.com/gin-gonic/gin"
	"net/http"
)

func main() {
	router := gin.Default()
    router.StaticFS("/assets/", http.Dir("./assets"))
	router.LoadHTMLGlob("views/**/*")
	router.GET("/user/register", func(ctx *gin.Context) {
		ctx.HTML(http.StatusOK, "register.html", nil)
	})
	router.Run(":8080")
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<img src="/assets/1122.jpg" />
</body>
</html>

7、页面访问http://localhost:8080/user/register

三、公共模板的嵌套

1、原生中使用

{{define  "/user/login.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>登录</h1>
{{template "/user/test1.html"}}
</body>
</html>
{{end}}

2、在gin中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<img src="/assets/1122.jpg" />
{{template "/user/test2.html"}}
</body>
</html>

{{ define "/user/test2.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试</h1>
</body>
</html>
{{end}}