В настоящее время я работаю над созданием собственной платформы для блогов с использованием Go, Templ и HTMX, которую буду размещать сам. Я решил, что это будет интересный и полезный проект, который также поможет мне получить знания об этом стеке. В этом сообщении блога я поделюсь своим опытом и решениями проблемы, с которой столкнулся при обработке перенаправлений с помощью HTMX.

Перенаправление браузера

Завершая функционал для админа, я решил, что пора наконец приступить к внедрению HTMX в проект. Я начал с элемента кнопки, который отправлял POST-запрос моему обработчику выхода из системы. Обычно я решаю эту задачу с помощью элемента формы, но, как я уже говорил, пришло время приступить к внедрению HTMX в проект. Проблема в том, что я хочу, чтобы это действие POST по-прежнему вело себя как форма и чтобы ответ от сервера был перенаправлен обратно на конечную точку /.

Проблема: обработка перенаправления с помощью http.Redirect

Вот элемент кнопки, который я использовал:

Logout

Проблема, с которой я столкнулся, заключалась в том, что ответом на перенаправление по-прежнему является HTML, а HTMX заменяет это содержимое элементом кнопки выхода из системы.

Обработка перенаправления с помощью http.Redirect

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

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

Изображение: содержимое заменено кнопкой «Выход»

Решение: использование заголовка HX-Redirect.

Замену содержимого можно предотвратить, заменив http.Redirect заголовком HX-Redirect в ответе и целевым местоположением в качестве его значения.

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

Изображение: браузер был перенаправлен на / обратите внимание на URL-адрес.

Заключение

Процесс создания собственной платформы для блогов с использованием Go, Templ и HTMX до сих пор был полезным опытом. Благодаря интеграции HTMX сайт по-прежнему сможет иметь множество интерактивных функций, если это современный веб-сайт, без необходимости писать и использовать дополнительный код JavaScript. Обработка перенаправлений с помощью заголовка HX-Redirect оказалась простым и эффективным решением. Я надеюсь, что этот пост поможет любому в его проектах и ​​побудит вас изучить потенциал HTMX в ваших веб-приложениях.