Umleitung des Browsers über HTMX

Ich arbeite derzeit an der Erstellung meiner eigenen Blogging-Plattform mit Go, Templ und HTMX, die ich selbst hosten werde. Ich entschied, dass dies ein unterhaltsames und nützliches Projekt sein würde, das mir auch dabei helfen würde, Kenntnisse über diesen Stack zu erlangen. In diesem Blogbeitrag werde ich meine Erfahrungen und Lösungen für eine Herausforderung teilen, mit der ich bei der Handhabung von Weiterleitungen mithilfe von HTMX konfrontiert war.

Umleitung des Browsers

Während ich die Funktionalität für den Administrator fertigstellte, entschied ich, dass es an der Zeit war, endlich mit der Implementierung von HTMX in das Projekt zu beginnen. Ich begann mit einem Schaltflächenelement, das eine POST-Anfrage an meinen Abmeldehandler senden würde. Normalerweise würde ich diese Aufgabe mithilfe eines Formularelements erledigen, aber wie bereits erwähnt, ist es an der Zeit, mit der Implementierung von HTMX in das Projekt zu beginnen. Das Problem besteht darin, dass ich möchte, dass sich diese POST-Aktion weiterhin wie ein Formular verhält und dass die Antwort vom Server eine Umleitung zurück zum /-Endpunkt ist.

Problem: Weiterleitung mit http.Redirect verarbeiten

Hier ist das Schaltflächenelement, das ich verwendet habe:

<button hx-post="/logout" hx-trigger="click">Logout</button>

Das Problem, auf das ich gestoßen bin, war, dass die Antwort für die Weiterleitung immer noch HTML ist und HTMX diesen Inhalt durch das Element der Abmeldeschaltfläche ersetzt.

Verarbeitung der Weiterleitung mit http.Redirect

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    http.Redirect(w, r, "/", http.StatusSeeOther)
}

Bild: Der Inhalt wurde mit dem Abmelden-Button ausgetauscht

Lösung: Verwendung des HX-Redirect-Headers

Das Austauschen von Inhalten kann verhindert werden, indem der http.Redirect durch einen HX-Redirect-Header in der Antwort und den Zielort als Wert ersetzt wird.

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    // Write our HX-Redirect header with location and redirect
    w.Header().Set("HX-Redirect", "/")
    http.WriteHeader(http.StatusNoContent)
}

Bild: Der Browser wurde umgeleitet / beachten Sie die URL.

Abschluss

Der Aufbau meiner eigenen Blogging-Plattform mit Go, Templ und HTMX war bisher eine lohnende Erfahrung. Durch die Integration von HTMX kann die Website weiterhin über viele Interaktivitätsfunktionen einer modernen Website verfügen, ohne dass zusätzlicher Javascript-Code geschrieben und bereitgestellt werden muss. Die Handhabung von Weiterleitungen mit dem HX-Redirect-Header war eine einfache und effektive Lösung. Ich hoffe, dieser Beitrag hilft jedem bei seinen Projekten und ermutigt Sie, das Potenzial von HTMX in Ihren Webanwendungen zu erkunden.

Das obige ist der detaillierte Inhalt vonUmleitung des Browsers über HTMX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!