Golang htmx Tailwind CSS: Buat Aplikasi Web Responsif
Latar belakang
Dalam landskap pembangunan web hari ini, JavaScript telah lama menjadi bahasa pilihan untuk mencipta aplikasi web yang dinamik dan interaktif.
Sebagai pembangun Go, bagaimana jika anda tidak mahu menggunakan Javascript dan masih melaksanakan aplikasi web responsif?
Bayangkan apl senarai tugasan anggun yang dikemas kini serta-merta semasa anda menyemak tugas tanpa memuat semula halaman penuh. Inilah kuasa Golang dan htmx!
Menggabungkan Go dan htmx membolehkan kami membuat aplikasi web responsif dan interaktif tanpa menulis satu baris JavaScript.
Dalam blog ini, kami akan meneroka cara menggunakan htmx dan Golang untuk membina aplikasi web. (Ia juga boleh digunakan dengan platform kegemaran anda yang lain.)
Sebagai pembelajaran, kami akan melaksanakan operasi asas mencipta dan memadam untuk pengguna.
Apa itu htmx?
htmx ialah sambungan HTML moden yang menambahkan komunikasi dua arah antara penyemak imbas dan pelayan.
Ia membolehkan kami membuat halaman web dinamik tanpa menulis JavaScript, kerana ia menyediakan akses kepada AJAX, acara yang dihantar pelayan, dll dalam HTML secara langsung.
Bagaimana htmx berfungsi?
- Apabila pengguna berinteraksi dengan elemen yang mempunyai atribut htmx (cth., mengklik butang), penyemak imbas mencetuskan acara yang ditentukan.
- htmx memintas acara dan menghantar permintaan HTTP ke titik akhir sebelah pelayan yang dinyatakan dalam atribut (cth., hx-get="/my-endpoint").
- Titik akhir sebelah pelayan memproses permintaan dan menjana respons HTML.
- htmx menerima respons dan mengemas kini DOM mengikut atribut hx-target dan hx-swap. Ini boleh melibatkan:
— Menggantikan keseluruhan kandungan elemen.
— Memasukkan kandungan baharu sebelum atau selepas elemen.
— Melampirkan kandungan pada penghujung elemen.
Mari kita fahami dengan lebih mendalam dengan contoh.
<button hx-get="/fetch-data" hx-target="#data-container">
Fetch Data
</button>
<div>
<p>In the above code, when the button is clicked:</p>
<ol>
<li>htmx sends a GET request to /fetch-data.
</li>
<li>The server-side endpoint fetches data and renders it as HTML.</li>
<li>The response is inserted into the #data-container element.</li>
</ol>
<h3>
Create and delete the user
</h3>
<p>Below are the required tools/frameworks to build this basic app.</p>
<ul>
<li>Gin (Go framework)</li>
<li>Tailwind CSS </li>
<li>htmx</li>
</ul>
<p><strong>Basic setup</strong> </p>
<ul>
<li>Create main.go file at the root directory.</li>
</ul>
<p><strong>main.go</strong><br>
</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">package main
import (
"fmt"
"github.com/gin-gonic/gin"
)
func main() {
router := gin.Default()
router.Run(":8080")
fmt.Println("Server is running on port 8080")
}
Ia menyediakan pelayan Go asas, berjalan pada port 8080.
Jalankan pergi jalankan main.go untuk menjalankan aplikasi.
- Buat fail HTML pada direktori akar, untuk memaparkan senarai pengguna.
pengguna.html
<!DOCTYPE html>
<html>
<head>
<title>Go + htmx app </title>
<script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<blockquote>
<p>We have included,</p>
<p><strong>htmx</strong> using the script tag — <u>https://unpkg.com/htmx.org@2.0.0</u></p>
<p><strong>Tailwind CSS</strong> with cdn link —<br>
<u>https://cdn.tailwindcss.com</u></p>
</blockquote>
<p>Now, we can use Tailwind CSS classes and render the templates with htmx.</p>
<p>As we see in users.html, we need to pass users array to the template, so that it can render the users list. </p>
<p>For that let’s create a hardcoded static list of users and create a route to render users.html .</p>
<h3>
Fetch users
</h3>
<p><strong>main.go</strong><br>
</p>
<pre class="brush:php;toolbar:false">package main
import (
"fmt"
"net/http"
"text/template"
"github.com/gin-gonic/gin"
)
func main() {
router := gin.Default()
router.GET("/", func(c *gin.Context) {
users := GetUsers()
tmpl := template.Must(template.ParseFiles("users.html"))
err := tmpl.Execute(c.Writer, gin.H{"users": users})
if err != nil {
panic(err)
}
})
router.Run(":8080")
fmt.Println("Server is running on port 8080")
}
type User struct {
Name string
Email string
}
func GetUsers() []User {
return []User{
{Name: "John Doe", Email: "johndoe@example.com"},
{Name: "Alice Smith", Email: "alicesmith@example.com"},
}
}
Kami telah menambah laluan / untuk memaparkan senarai pengguna dan menyediakan senarai statik pengguna (yang mana kami akan menambah pengguna baharu di hadapan).
Itu sahaja. Mulakan semula pelayan dan mari lawati — http://localhost:8080/ untuk menyemak sama ada ia memaparkan senarai pengguna atau tidak. Ia akan memaparkan senarai pengguna seperti di bawah.
Buat pengguna
Buat fail user_row.html. Ia akan bertanggungjawab untuk menambah baris pengguna baharu pada jadual pengguna.
user_row.html
<button hx-get="/fetch-data" hx-target="#data-container"> Fetch Data </button> <div> <p>In the above code, when the button is clicked:</p> <ol> <li>htmx sends a GET request to /fetch-data. </li> <li>The server-side endpoint fetches data and renders it as HTML.</li> <li>The response is inserted into the #data-container element.</li> </ol> <h3> Create and delete the user </h3> <p>Below are the required tools/frameworks to build this basic app.</p>
- Gin (Go framework)
- Tailwind CSS
- htmx
Basic setup
- Create main.go file at the root directory.
main.go
package main
import (
"fmt"
"github.com/gin-gonic/gin"
)
func main() {
router := gin.Default()
router.Run(":8080")
fmt.Println("Server is running on port 8080")
}
Ia mengambil nama dan e-mel daripada input borang dan melaksanakan user_row.html.
Mari cuba tambah pengguna baharu pada jadual. Lawati http://localhost:8080/ dan klik butang Tambah Pengguna.
Yayy! Kami telah berjaya menambah pengguna baharu pada senarai ?.
Untuk menyelami lebih mendalam panduan pelaksanaan terperinci, lihat panduan lengkap di Canopas.
Jika anda suka apa yang anda baca, pastikan anda tekan ? butang! — sebagai seorang penulis ia bermakna dunia!
Saya menggalakkan anda untuk berkongsi pendapat anda di bahagian komen di bawah. Input anda bukan sahaja memperkaya kandungan kami tetapi juga menyemarakkan motivasi kami untuk mencipta artikel yang lebih berharga dan bermaklumat untuk anda.
Selamat mengekod!?
Atas ialah kandungan terperinci Golang htmx Tailwind CSS: Buat Aplikasi Web Responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah kelemahan debian openssl
Apr 02, 2025 am 07:30 AM
OpenSSL, sebagai perpustakaan sumber terbuka yang digunakan secara meluas dalam komunikasi yang selamat, menyediakan algoritma penyulitan, kunci dan fungsi pengurusan sijil. Walau bagaimanapun, terdapat beberapa kelemahan keselamatan yang diketahui dalam versi sejarahnya, yang sebahagiannya sangat berbahaya. Artikel ini akan memberi tumpuan kepada kelemahan umum dan langkah -langkah tindak balas untuk OpenSSL dalam sistem Debian. Debianopenssl yang dikenal pasti: OpenSSL telah mengalami beberapa kelemahan yang serius, seperti: Kerentanan Pendarahan Jantung (CVE-2014-0160): Kelemahan ini mempengaruhi OpenSSL 1.0.1 hingga 1.0.1f dan 1.0.2 hingga 1.0.2 versi beta. Penyerang boleh menggunakan kelemahan ini untuk maklumat sensitif baca yang tidak dibenarkan di pelayan, termasuk kunci penyulitan, dll.
Bagaimana cara menentukan pangkalan data yang berkaitan dengan model dalam beego orm?
Apr 02, 2025 pm 03:54 PM
Di bawah rangka kerja beegoorm, bagaimana untuk menentukan pangkalan data yang berkaitan dengan model? Banyak projek beego memerlukan pelbagai pangkalan data untuk dikendalikan secara serentak. Semasa menggunakan beego ...
Berubah dari front-end ke pembangunan back-end, adakah lebih menjanjikan untuk belajar Java atau Golang?
Apr 02, 2025 am 09:12 AM
Laluan Pembelajaran Backend: Perjalanan Eksplorasi dari Front-End ke Back-End sebagai pemula back-end yang berubah dari pembangunan front-end, anda sudah mempunyai asas Nodejs, ...
Bagaimana menyelesaikan masalah penukaran jenis user_id semasa menggunakan aliran redis untuk melaksanakan beratur mesej dalam bahasa Go?
Apr 02, 2025 pm 04:54 PM
Masalah menggunakan redisstream untuk melaksanakan beratur mesej dalam bahasa Go menggunakan bahasa Go dan redis ...
Apa yang perlu saya lakukan jika label struktur tersuai di Goland tidak dipaparkan?
Apr 02, 2025 pm 05:09 PM
Apa yang perlu saya lakukan jika label struktur tersuai di Goland tidak dipaparkan? Apabila menggunakan Goland untuk Pembangunan Bahasa GO, banyak pemaju akan menghadapi tag struktur tersuai ...
Perpustakaan apa yang digunakan untuk operasi nombor terapung di GO?
Apr 02, 2025 pm 02:06 PM
Perpustakaan yang digunakan untuk operasi nombor terapung dalam bahasa Go memperkenalkan cara memastikan ketepatannya ...
Apakah masalah dengan thread giliran di crawler colly go?
Apr 02, 2025 pm 02:09 PM
Masalah Threading Giliran di GO Crawler Colly meneroka masalah menggunakan Perpustakaan Colly Crawler dalam bahasa Go, pemaju sering menghadapi masalah dengan benang dan permintaan beratur. � ...
Cara mengkonfigurasi pengembangan automatik MongoDB pada Debian
Apr 02, 2025 am 07:36 AM
Artikel ini memperkenalkan cara mengkonfigurasi MongoDB pada sistem Debian untuk mencapai pengembangan automatik. Langkah -langkah utama termasuk menubuhkan set replika MongoDB dan pemantauan ruang cakera. 1. Pemasangan MongoDB Pertama, pastikan MongoDB dipasang pada sistem Debian. Pasang menggunakan arahan berikut: SudoaptDateSudoaptInstall-ImongoDB-Org 2. Mengkonfigurasi set replika replika MongoDB MongoDB Set memastikan ketersediaan dan kelebihan data yang tinggi, yang merupakan asas untuk mencapai pengembangan kapasiti automatik. Mula MongoDB Service: sudosystemctlstartmongodsudosys
