go语言中前端模板的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了go语言中前端模板的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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中文章来源地址https://www.toymoban.com/news/detail-476884.html

<!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}}