【Go + htmx】隨手玩玩

閱讀時間約 2 分鐘

htmx前陣子還只是網路迷因,近期拿來搭配go的系列影片越來越多了,兩者都可以用很少量的程式實作出功能,很適合拿來做些簡單的project。

專案架構

專案架構

專案架構


  • go主程式為後端server
  • html檔案為前端頁面




畫面

呈現上只使用預設的模板修改一下文字,加入一個按鈕作為請求的觸發

raw-image


程式

後段部分:

實作一個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

前端發送post request




CORS

啟動後,點擊畫面按鈕發現沒反應
用開發者工具檢視一下問題(F12),是被瀏覽器的CORS擋下來了

raw-image

preflight request有完成,只不過傳送的header不在後端允許的項目中

raw-image

回到後端多設置兩條header

	w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Headers", "hx-current-url,hx-request")
header處理

header處理




結果


成功發送post request

成功發送post request

改為發送GET

<button hx-get="http://localhost:8080" hx-swap="outerHTML">Click Me</button>
前端發送get request

前端發送get request

取的get結果

取的get結果


htmx強大的地方,在於一些常用的功能已透過attribute進行處理,不用額外寫javascript去控制邏輯。官方文件上還有很多機制可以發掘,等有時間再來鑽研了。


avatar-img
12會員
63內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現,文件更新往往跟不上新需求的更迭,犯錯的歷史總是不斷重演。因此,我改變了方式,蒐集從程式上、系統上的每一次異常處理過程,好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本,期待日後不管在工作上或交流上遇到難題,都能輕鬆地應答:有什麼難的,我都踩過。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Err500 的其他內容
作為程式開發人員,一路從Notepad++、VSCode、Eclipse,或多或少都有機會聽過vim,只為了追求極致的開發效率。看看國外直播主ThePrimeagen邊寫程式邊直播,行雲流水的編輯速度,我覺得...我的問題是出在英打。
相信很多初學者學python的原因,不外乎語法簡單、好上手、重點是有很多現成的套件可以玩。那麼,Java呢?有!當然有!而且還多到你不知道該選哪個好! 今天的文章主要示範如何在vscode新建立Java 的maven專案,並且透過maven安裝這些額外的套件(依賴)
最近配合公司政策換了新電腦,重新回想起從頭建環境的惡夢。本篇文就來記錄一下如何開始踏入Java的第一步,方便起見也使用相對Eclipse、IntelliJ來說輕量不少的VScode作為編輯器。
進入官方網站,根據自己電腦的作業系統,選擇適合的安裝檔。 切記,注意一下基本的配備要求
初玩python時常用pip安裝各式各樣的套件下來,而這些套件在本機中是以全域的方式安裝。假設今天需要接手別人的專案,所用的套件版本不相容,對於這些仰賴的套件(依賴dependencies)進行管理跟切分就成了一個課題。
作為程式開發人員,一路從Notepad++、VSCode、Eclipse,或多或少都有機會聽過vim,只為了追求極致的開發效率。看看國外直播主ThePrimeagen邊寫程式邊直播,行雲流水的編輯速度,我覺得...我的問題是出在英打。
相信很多初學者學python的原因,不外乎語法簡單、好上手、重點是有很多現成的套件可以玩。那麼,Java呢?有!當然有!而且還多到你不知道該選哪個好! 今天的文章主要示範如何在vscode新建立Java 的maven專案,並且透過maven安裝這些額外的套件(依賴)
最近配合公司政策換了新電腦,重新回想起從頭建環境的惡夢。本篇文就來記錄一下如何開始踏入Java的第一步,方便起見也使用相對Eclipse、IntelliJ來說輕量不少的VScode作為編輯器。
進入官方網站,根據自己電腦的作業系統,選擇適合的安裝檔。 切記,注意一下基本的配備要求
初玩python時常用pip安裝各式各樣的套件下來,而這些套件在本機中是以全域的方式安裝。假設今天需要接手別人的專案,所用的套件版本不相容,對於這些仰賴的套件(依賴dependencies)進行管理跟切分就成了一個課題。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
可免費獲得虛擬貨幣的錢包APP 馬上下載「GO!WALLET」吧! 趁現在利用下列號碼註冊APP,就可300點數喔
Thumbnail
Go out less during the pandemic avoidance time frame! Get ready nourishment for hide kids + train to go to the restroom at home   Grasp 1 rule to succ
一天傍晚和老婆散步經過一家雙語幼兒園,正巧是放學時間,父母們趕忙到園區接兒女回家。此時,聽到園區傳來廣播內容: “Go home, Ivy!” 一位老師透過廣播通知小朋友,意思對應到中文應該是:「爸媽來接你了,回家囉!」我和太太互看一眼後,不但笑了,也覺得很「三條缐」。
Thumbnail
當一顆種子天天被陽光露水,折磨在潮濕悶熱的土壤裡時,你我不會感到惋惜,因為曉得這是刺激生命更燦爛的關鍵,但倘若你我就是那顆種子,就是正被困住、被壓迫在毫無自由的階段裡,還能相信自己的未來很燦爛嗎? 圖片摘自臉書「家政夫的悄悄話」。 最近因著寒假的緣故,家政夫有機會坐在書桌前,一邊調整三条老師的錄音內
Thumbnail
我的旅行規劃方式是訂好機票跟住宿,列出想去的景點依據交通去安排路線,只要先建構出相關地理位置概念就可以了
Thumbnail
一直以來不敢踏入吃素的行列,雖然知道吃素對世界好處多多,但總覺得身體會處在長期慢性缺乏蛋白質的狀態。但事實上,我才執行兩週,好處之明顯,讓我非常興奮,不得不打在這裡跟大家分享。
Thumbnail
完整標題:go on 與「繼往走向」或「繼往開來」及「繼」、「續」、「繼續」、「接續」、「启開」、「正昂」、「發生」等的轉換密碼
Thumbnail
完整標題:go 與「之」、「至」、「至于」、「到」、「到于」、「前往」、「進往」、「步往」、「走」、「走于」、「走往」、「行」、「行于」、「行往」、「行走」、「去」、「過」、「過去」、「過于」、「步」、「步于」、「步往」、「步行」、「機遇」、「行旺」等的轉換密碼
Thumbnail
完整標題:go around 與「逛」、「觀覽」、「交往」、「相處」、「走訪」、「轉繞圓動」等的轉換密碼及「天狼星」之謎
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
可免費獲得虛擬貨幣的錢包APP 馬上下載「GO!WALLET」吧! 趁現在利用下列號碼註冊APP,就可300點數喔
Thumbnail
Go out less during the pandemic avoidance time frame! Get ready nourishment for hide kids + train to go to the restroom at home   Grasp 1 rule to succ
一天傍晚和老婆散步經過一家雙語幼兒園,正巧是放學時間,父母們趕忙到園區接兒女回家。此時,聽到園區傳來廣播內容: “Go home, Ivy!” 一位老師透過廣播通知小朋友,意思對應到中文應該是:「爸媽來接你了,回家囉!」我和太太互看一眼後,不但笑了,也覺得很「三條缐」。
Thumbnail
當一顆種子天天被陽光露水,折磨在潮濕悶熱的土壤裡時,你我不會感到惋惜,因為曉得這是刺激生命更燦爛的關鍵,但倘若你我就是那顆種子,就是正被困住、被壓迫在毫無自由的階段裡,還能相信自己的未來很燦爛嗎? 圖片摘自臉書「家政夫的悄悄話」。 最近因著寒假的緣故,家政夫有機會坐在書桌前,一邊調整三条老師的錄音內
Thumbnail
我的旅行規劃方式是訂好機票跟住宿,列出想去的景點依據交通去安排路線,只要先建構出相關地理位置概念就可以了
Thumbnail
一直以來不敢踏入吃素的行列,雖然知道吃素對世界好處多多,但總覺得身體會處在長期慢性缺乏蛋白質的狀態。但事實上,我才執行兩週,好處之明顯,讓我非常興奮,不得不打在這裡跟大家分享。
Thumbnail
完整標題:go on 與「繼往走向」或「繼往開來」及「繼」、「續」、「繼續」、「接續」、「启開」、「正昂」、「發生」等的轉換密碼
Thumbnail
完整標題:go 與「之」、「至」、「至于」、「到」、「到于」、「前往」、「進往」、「步往」、「走」、「走于」、「走往」、「行」、「行于」、「行往」、「行走」、「去」、「過」、「過去」、「過于」、「步」、「步于」、「步往」、「步行」、「機遇」、「行旺」等的轉換密碼
Thumbnail
完整標題:go around 與「逛」、「觀覽」、「交往」、「相處」、「走訪」、「轉繞圓動」等的轉換密碼及「天狼星」之謎