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

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

WBOY
WBOYavant
2024-02-13 11:30:15917parcourir

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

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

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

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="https://www.php.cn/link/1b8e84dcae97ad25234484e38615c570">here</a> to login.</p>
        </div>
    </div>
</div>
{{ end }}

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
}

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

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

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

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="https://www.php.cn/link/1b8e84dcae97ad25234484e38615c570">here</a> to login.</p>
        </div>
    </div>
</div>
{{template "footer"}}

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer