[ Day 23 ] Go 模板引擎：動態生成 HTML 頁面的魔法

15th鐵人賽 golang go

dylan_kacaw

2023-10-06 20:28:58

318 瀏覽

分享至

在昨天的練習中，當我們使用 GET 請求時，並成功得到網站中的資料，我們都用是終端機查看回傳的資訊，雖然一樣可以達到查看資料的目的，但好像缺少了什麼！！
這就不得不提到組成 Web 畫面的 HTML，它是最直覺的呈現 Web 頁面的方式。HTML 是一種標記語言，用於結構化網頁的內容。
然而，在動態網站中，指示用固定的 HTML 內容是不足以應付現在日益繁雜的網站需求，這時就可以使用 Go 模板引擎來幫我們根據不同情境動態生成 HTML 頁面了。

為甚麼要用 Go 模板引擎？？

Go 模板引擎是 Go 語言內建的一個工具，但說穿了它就是一個內建於 Go 的一個套件，這個套件是用於將動態生成的數據注入到 HTML 中。它有幾點優勢：

易於使用： Go 模板語法簡單直觀，學習曲線較為平緩，只需要基本的 HTML 的知識就可以使用。
安全：模板引擎內建了自動防範注入攻擊的機制，可以有效地防止 XSS 攻擊。
內建功能：支援條件語句、迴圈等基本結構，滿足大部分的動態生成需求。

這個模板引擎不僅提供安全的 HTML 輸出，也支援模板嵌套、條件語句、迴圈等功能，使開發者能夠方便地構建動態且安全的 HTML 頁面。

要怎麼使用？

匯入套件

首先，我們必須匯入 html/template，如果你想要在瀏覽器上看到結果，也必須匯入前天提到的 net/http，如下：

import (
    "html/template"
    "net/http"
)

產生一個要用的結構體

之前有提到結構體 struct，這邊我們需要用到它來幫我們定義一些變數：

type PageVariables struct {
	Title   string
	Message string
}

這邊我定義了 Title 及 Message 這兩個變數以便我等一下使用它們。

主函式 main

這邊跟前天提到的差不多：

package main
import (
    "html/template"
    "net/http"
)
func main(){
    http.HandleFunc("/", handler)
	http.ListenAndServe(":8080", nil)
}

此時，你去執行 go build 那一定會出錯，因為你還沒有處理完進到根目錄要處理的函式。

寫一些 HTML

只差最後一步就完成了，這也是為什麼要匯入 html/tmplete 這個套件：

func handler(w http.ResponseWriter, r *http.Request) {
	pageVariables := PageVariables{
		Title:   "冒險開始",
		Message: "歡迎來到冒險之旅！",
	}

	tmpl, err := template.New("index").Parse(`
<!DOCTYPE html>
<html>
<head>
    <title>{{.Title}}</title>
</head>
<body>
    <h1>{{.Title}}</h1>
    <p>{{.Message}}</p>
</body>
</html>
`)

	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}

	err = tmpl.Execute(w, pageVariables)
	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}
}

將積木組合起來

package main

import (
	"html/template"
	"net/http"
)

type PageVariables struct {
	Title   string
	Message string
}

func handler(w http.ResponseWriter, r *http.Request) {
	pageVariables := PageVariables{
		Title:   "冒險開始",
		Message: "歡迎來到冒險之旅！",
	}

	tmpl, err := template.New("index").Parse(`
<!DOCTYPE html>
<html>
<head>
    <title>{{.Title}}</title>
</head>
<body>
    <h1>{{.Title}}</h1>
    <p>{{.Message}}</p>
</body>
</html>
`)

	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}

	err = tmpl.Execute(w, pageVariables)
	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}
}

func main() {
	http.HandleFunc("/", handler)
	http.ListenAndServe(":8080", nil)
}

執行結果：
新手頁面