【Go + htmx】隨手玩玩

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去控制邏輯。官方文件上還有很多機制可以發掘，等有時間再來鑽研了。