Maison > développement back-end > Golang > L'application Web Gin ne restitue qu'un seul modèle

L'application Web Gin ne restitue qu'un seul modèle

WBOY
Libérer: 2024-02-13 11:30:15
avant
941 Les gens l'ont consulté

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

Gin est un framework Web léger largement utilisé dans le développement Web en langage Go. Dans Gin, les applications Web n'ont généralement besoin que de restituer un modèle pour compléter l'affichage de la page. Cette conception permet aux développeurs de se concentrer davantage sur la mise en œuvre de la logique métier et simplifie le processus de développement. De l'avis de l'éditeur PHP Xiaoxin, cette fonctionnalité de Gin améliore non seulement l'efficacité du développement, mais réduit également l'utilisation des ressources, rendant les applications Web plus efficaces. Dans le même temps, Gin fournit également une multitude de middlewares et de plug-ins, offrant aux développeurs plus d'évolutivité et de flexibilité. En bref, la simplicité et les fonctionnalités puissantes de Gin en font le framework préféré de nombreux développeurs.

Contenu de la question

J'ai une application Web Gin qui contient plusieurs modèles HTML basés sur un ensemble de sections et un modèle de base. Le modèle de base semble s'afficher correctement avec les parties pertinentes, mais ma vue principale, ma connexion, mon index et mon enregistrement ne s'affichent pas comme prévu. Chaque fois que j'accède au point de terminaison HTTP de l'un d'entre eux, seule la vue du registre est affichée.

Le contenu manquant ou mal configuré dans les fichiers suivants empêche mon itinéraire d'afficher la page demandée ?

Mon projet a la structure suivante.

├── 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
Copier après la connexion

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}}
Copier après la connexion

Inscription.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 }}
Copier après la connexion

index.tmpl.html (La structure de connexion est la même que ces deux-là.)

{{ 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="//m.sbmmt.com/link/1b8e84dcae97ad25234484e38615c570">here</a> to login.</p>
        </div>
    </div>
</div>
{{ end }}
Copier après la connexion

Les modèles HTML sont regroupés avec des binaires utilisant 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
}
Copier après la connexion

La page est rendue dans mon parcours de candidature. Les références ici correspondent au nom de fichier du fichier *.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)
}
Copier après la connexion

Solution de contournement

Pour toute autre personne rencontrant ce problème. La solution soulignée par mkopriva dans le commentaire est correcte. J'ai supprimé le base.tmpl.html et composé chaque vue avec la section mise à jour et la page cible.

Titre

{{ 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}}
Copier après la connexion

Pied de page

{{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}}
Copier après la connexion

Page problématique

{{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="//m.sbmmt.com/link/1b8e84dcae97ad25234484e38615c570">here</a> to login.</p>
        </div>
    </div>
</div>
{{template "footer"}}
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:stackoverflow.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal