
Gin是一款轻量级的Web框架,被广泛应用于Go语言的Web开发中。在Gin中,Web应用程序通常只需要渲染一个模板即可完成页面的展示。这种设计使得开发者可以更加专注于业务逻辑的实现,简化了开发流程。在php小编小新的观点中,Gin的这种特性不仅提高了开发效率,还能减少资源的占用,使得Web应用程序更加高效。同时,Gin还提供了丰富的中间件和插件,为开发者提供了更多的扩展性和灵活性。总之,Gin的简洁而强大的特性使得它成为了许多开发者的首选框架。
问题内容
我有一个 Gin Web 应用程序,其中包含基于一组部分和一个基本模板的多个 HTML 模板。基本模板似乎与相关部分一起渲染得很好,但我的主要视图、登录、索引和注册没有按预期渲染。每当我访问其中任何一个的 HTTP 端点时,只会呈现寄存器视图。
以下文件中缺少或配置错误的内容导致我的路由无法呈现请求的页面?
我的项目具有以下结构。
├── app ... │ ├── handlers │ │ ├── general │ │ │ └── general.go │ │ └── routes.go │ ├── main.go │ ├── reloadDev.sh │ ├── static │ │ ├── css │ │ ├── img │ │ └── js │ └── templates │ ├── home │ │ ├── index.tmpl.html │ │ ├── login.tmpl.html │ │ └── register.tmpl.html │ ├── layouts │ │ └── base.tmpl.html │ └── partials │ ├── footer.tmpl.html │ ├── head.tmpl.html │ └── navbar.tmpl.html
base.tmpl.html
{{ define "base" }}
<!DOCTYPE html>
<html lang="eng" data-bs-theme="dark">
{{ template "head" . }}
{{template "navbar" .}}
<body>
{{ block "content" . }}{{ end }}
</body>
{{template "footer" .}}
</html>
{{end}}
注册.tmpl.html
{{ template "base" . }}
{{ define "content" }}
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1>Register</h1>
<form action="/register" method="post">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password" required>
</div>
...SNIP...
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
{{ end }}
index.tmpl.html(登录的结构与这两个相同。)
{{ template "base" . }}
{{ define "title" }}Home{{ end }}
{{ define "content" }}
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<p>Welcome to Astra Porta.</p>
<p>Click <a href="https://www.php.cn/link/1b8e84dcae97ad25234484e38615c570">here</a> to login.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/9644" title="乐尚团购"><img
src="https://img.php.cn/upload/webcode/000/000/015/175955400520047.png" alt="乐尚团购" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/9644" title="乐尚团购">乐尚团购</a>
<p>乐尚团购系统,是一项基于PHP+MYSQL为核心开发的一套免费 + 开源专业团购系统。软件具执行效率高、模板自由切换、后台管理功能方便等诸多优秀特点。本软件是基于Web应用的B/S架构的团购网站建设解决方案的建站系统。它可以让用户高效、快速、低成本的构建个性化、专业化、强大功能的团购网站。从技术层面来看,本程序采用目前软件开发IT业界较为流行的PHP和MYSQL数据库开发技术,基于面向对象的编程,</p>
</div>
<a href="/xiazai/code/9644" title="乐尚团购" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>
</div>
{{ end }}
HTML 模板使用 embed.FS 与二进制文件捆绑在一起。
//go:embed templates/partials/* templates/layouts/* templates/home/*
var files embed.FS
func main() {
router := setupRouter()
err := router.Run()
if err != nil {
panic(err)
}
}
func setupRouter() *gin.Engine {
router := gin.Default()
subFS, e := fs.Sub(files, "templates")
if e != nil {
panic(e)
}
tmpl := template.Must(template.ParseFS(
subFS,
"layouts/*.html",
"partials/*.html",
"home/*.html",
))
router.SetHTMLTemplate(tmpl)
router.StaticFS("/static", http.Dir("static"))
err := router.SetTrustedProxies(nil)
if err != nil {
panic(err)
}
handlers.InitializeRoutes(&router.RouterGroup)
return router
}
页面在我的应用程序路由中呈现。此处的引用映射到 *.tmpl.html 文件的文件名。
func SiteIndex(c *gin.Context) {
c.HTML(http.StatusOK, "index.tmpl.html", nil)
}
func GetRegister(c *gin.Context) {
c.HTML(http.StatusOK, "register.tmpl.html", nil)
}
func GetLogin(c *gin.Context) {
c.HTML(http.StatusOK, "login.tmpl.html", nil)
}解决方法
对于其他遇到此问题的人。 mkopriva 评论中指出的解决方案是正确的。我删除了 base.tmpl.html 并使用更新的部分和目标页面组成每个视图。
标题
{{ define "header" }}
<!DOCTYPE html>
<html lang="eng" data-bs-theme="dark">
{{template "navbar" .}}
<body>
{{ block "content" . }}{{ end }}
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...SNIP...
<title>App</title>
</head>
{{end}}
页脚
{{define "footer"}}
<div class="container">
<footer class="py-3 my-4" data-bs-theme="dark">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="/" class="nav-link px-2 text-body-secondary">Home</a></li>
</ul>
<p class="text-center text-body-secondary">© 2024 .</p>
</footer>
</div>
</body>
</html>
{{end}}
有问题的页面
{{template "header"}}
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<p>Welcome to Astra Porta.</p>
<p>Click <a href="https://www.php.cn/link/1b8e84dcae97ad25234484e38615c570">here</a> to login.</p>
</div>
</div>
</div>
{{template "footer"}}









