htmx前陣子還只是網路迷因，近期拿來搭配go的系列影片越來越多了，兩者都可以用很少量的程式實作出功能，很適合拿來做些簡單的project。
專案架構
專案架構
- go主程式為後端server
- html檔案為前端頁面
畫面
呈現上只使用預設的模板修改一下文字，加入一個按鈕作為請求的觸發
程式
後段部分：
實作一個server監聽本機的8080 port，依據請求的類型(GET/POST)決定回應的段落內容
後端程式
前端部分：
在head區塊引入CDN，並且在button 上加入htmx相對應功能的attribute
<script src="https://unpkg.com/htmx.org@1.9.9"></script>
<button hx-post="http://localhost:8080" hx-swap="outerHTML">Click Me</button>
前端發送post request
CORS
啟動後，點擊畫面按鈕發現沒反應
用開發者工具檢視一下問題(F12)，是被瀏覽器的CORS擋下來了
preflight request有完成，只不過傳送的header不在後端允許的項目中
回到後端多設置兩條header
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Headers", "hx-current-url,hx-request")
header處理
結果
成功發送post request
改為發送GET
<button hx-get="http://localhost:8080" hx-swap="outerHTML">Click Me</button>
前端發送get request
取的get結果
htmx強大的地方，在於一些常用的功能已透過attribute進行處理，不用額外寫javascript去控制邏輯。官方文件上還有很多機制可以發掘，等有時間再來鑽研了。
