【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去控制邏輯。官方文件上還有很多機制可以發掘，等有時間再來鑽研了。
13會員
68內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現，文件更新往往跟不上新需求的更迭，犯錯的歷史總是不斷重演。因此，我改變了方式，蒐集從程式上、系統上的每一次異常處理過程，好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本，期待日後不管在工作上或交流上遇到難題，都能輕鬆地應答：有什麼難的，我都踩過。
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
xhr
在下面的例子裡，我們首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
具體來說步驟有四個：
建立XMLHttpReque
開啟一個請求。
送出請求。
拿到回應後去處理畫面要如何呈現。
可能包含敏感內容
先說一下我的背景，非本科系從 2022/3 開始接觸到前端領域，在摸索過程中遇到六角學院，買了 ＨTML 和 CSS 課程從基礎學起。
gRPC是一款跨平台、高性能的RPC框架，他可以在任何環境下執行，主要用於後端為服務開發。在用戶端應用程式中，可以像本地物件那樣呼叫遠端伺服器的方法，因此可以創建出分散式應用。
使用
到https://github.com/protocolbuffers/protobuf/releases下
HTTP伺服器端
package main
import (
"net/http"
)
type Refer struct {
handler http.Handler
refer string
}
//實現中介軟體邏輯
func (this *Refer) ServeHTTP(
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
xhr
在下面的例子裡，我們首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
具體來說步驟有四個：
建立XMLHttpReque
開啟一個請求。
送出請求。
拿到回應後去處理畫面要如何呈現。
可能包含敏感內容
先說一下我的背景，非本科系從 2022/3 開始接觸到前端領域，在摸索過程中遇到六角學院，買了 ＨTML 和 CSS 課程從基礎學起。
gRPC是一款跨平台、高性能的RPC框架，他可以在任何環境下執行，主要用於後端為服務開發。在用戶端應用程式中，可以像本地物件那樣呼叫遠端伺服器的方法，因此可以創建出分散式應用。
使用
到https://github.com/protocolbuffers/protobuf/releases下
HTTP伺服器端
package main
import (
"net/http"
)
type Refer struct {
handler http.Handler
refer string
}
//實現中介軟體邏輯
func (this *Refer) ServeHTTP(