Gin Web 应用程序仅渲染一个模板-Golang-PHP中文网

Gin Web 应用程序仅渲染一个模板

WBOY

发布： 2024-02-13 11:30:15

转载

1005人浏览过

gin web 应用程序仅渲染一个模板

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

登录后复制

{{ 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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2290">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/175686939683618.png" alt="AiPPT模板广场">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2290">AiPPT模板广场</a>
                            <p>AiPPT模板广场-PPT模板-word文档模板-excel表格模板</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AiPPT模板广场">
                                <span>147</span>
                            </div>
                        </div>
                        <a href="/ai/2290" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AiPPT模板广场">
                        </a>
                    </div>
                
            <p>Click <a href="https://www.php.cn/link/1b8e84dcae97ad25234484e38615c570">here</a> to login.</p>
        </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"}}

登录后复制

以上就是Gin Web 应用程序仅渲染一个模板的详细内容，更多请关注php中文网其它相关文章！