Mengubah hala pelayar menggunakan HTMX

Saya sedang berusaha untuk mencipta platform blog saya sendiri menggunakan Go, Templ dan HTMX yang akan saya hos sendiri. Saya memutuskan ini akan menjadi projek yang menyeronokkan dan berguna untuk ditangani yang juga akan membantu saya memperoleh pengetahuan tentang timbunan ini. Dalam catatan blog ini, saya akan berkongsi pengalaman dan penyelesaian saya kepada cabaran yang saya hadapi dengan mengendalikan ubah hala menggunakan HTMX.

Mengubah hala penyemak imbas

Semasa melengkapkan fungsi untuk pentadbir, saya memutuskan sudah tiba masanya untuk akhirnya mula melaksanakan HTMX ke dalam projek. Saya bermula dengan elemen butang yang akan menghantar permintaan POST kepada pengendali log keluar saya. Biasanya, saya akan menyelesaikan tugas ini menggunakan elemen borang, tetapi seperti yang saya nyatakan, sudah tiba masanya untuk mula melaksanakan HTMX ke dalam projek. Isunya ialah saya mahu tindakan POST ini masih berkelakuan seperti borang dan mempunyai respons daripada pelayan menjadi ubah hala kembali ke / titik akhir.

Isu: mengendalikan ubah hala dengan http.Redirect

Ini elemen butang yang saya gunakan:

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

Isu yang saya hadapi ialah respons untuk ubah hala masih HTML dan HTMX menukar kandungan ini dengan elemen butang log keluar.

Mengendalikan ubah hala dengan http.Redirect

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

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

Imej: Kandungan telah ditukar dengan butang Log Keluar

Penyelesaian: menggunakan pengepala HX-Redirect

Pertukaran kandungan boleh dihalang dengan menggantikan http.Redirect dengan pengepala HX-Redirect dalam respons dan lokasi sasaran sebagai nilainya.

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

Imej: Penyemak imbas telah diubah hala ke / perhatikan url.

Kesimpulan

Proses membina platform blog saya sendiri dengan Go, Templ dan HTMX telah menjadi pengalaman yang menggembirakan setakat ini. Dengan menyepadukan HTMX, tapak akan dapat masih mempunyai banyak ciri interaktiviti jika tapak web moden tanpa perlu menulis dan menyediakan kod javascript tambahan. Mengendalikan ubah hala dengan pengepala HX-Redirect ialah penyelesaian yang mudah dan berkesan. Saya harap siaran ini membantu sesiapa sahaja dengan projek mereka dan menggalakkan anda meneroka potensi HTMX dalam aplikasi web anda.

Atas ialah kandungan terperinci Mengubah hala pelayar menggunakan HTMX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!