處理 HTML 表單資料

建立基本表單,使用 HTTP POST 在 HTML 範本上顯示使用者提交的內容。

本頁與範例是簡易網誌應用程式之延伸學習範例的一部分,此網誌應用程式可讓使用者上傳貼文。您應該已經熟悉 Go 程式設計語言和基本的網路開發。如要從頭開始,請前往透過 Go 建構應用程式

費用

執行本教學課程不會產生任何費用,而且單獨執行這個範例應用程式也不會超過您的免費配額

事前準備

如果您已從透過 Go 建構應用程式開始教學課程,請跳過本節。

  1. 完成設定您的專案和應用程式中的事前準備工作。

  2. 在本範例中,請將程式碼新增至 gophers-2 範例,也就是從提供靜態檔案中產生的最終成果。

    下載 gophers-2 範例及其依附元件到您的本機電腦:

    go get -u -d github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-2/...
    
  3. 切換至 gophers-2 目錄:

    cd $GOPATH/src/github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-2
    

結構化您的應用程式

本範例專案的結構如下:

  • go-app/:專案根目錄。

    • app.yaml:App Engine 應用程式的配置設定。
    • main.go:應用程式的程式碼。
    • index.html:會顯示您首頁的 HTML 範本。
    • static/:儲存靜態檔案的目錄。
      • style.css:會設定 HTML 檔案外觀格式的樣式表。
      • gcp-gopher.svg:Gopher 圖片。

在 HTML 範本上建立表單

如果在程式碼中嵌入 HTML 使得程式碼變得不易維護,您應使用範本系統。如果字串或檔案中有部分內容包含在雙括弧中 ({{...}}),會產生動態 HTML。動態 HTML 是一種會因應用程式的作業而發生變更的內容。

  1. index.html 中的標題與圖片下,建立一個區段來向使用者提供提交的意見回饋,並建立包含名稱與訊息輸入欄位的表單:

    {{with .Notice}}<div id="notice">{{.}}</div>{{end}}
    
    <form action="/" method="post">
      <div>Name: <input name="name" value="{{.Name}}"></div>
      <div>Message: <input name="message"></div>
      <input type="submit">
    </form>

    使用者提交表單時,POST 要求會更新動態 HTML 以產生使用者提交表單的通知。

  2. 程式碼範例 gophers-2提供靜態檔案中所述步驟的結果,但在這個頁面中,您將此變更為將 index.html 設定為動態,而不是靜態;因此,請從 app.yaml 中刪除下列幾行:

    - url: /
      static_files: index.html
      upload: index.html
    

整合 HTML 範本

使用 Go 的 html/template 套件,剖析 index.html,並將其做為範本建立關聯。

  1. 將套件 html/templatefmt 新增至 main.go 中的匯入作業清單:

    "fmt"
    "html/template"

    fmt 套件中,您可以使用 Sprintf 函式傳回內含使用者名稱的訊息。

  2. 初始化 main.go 中的範本變數:

    var (
    	indexTemplate = template.Must(template.ParseFiles("index.html"))
    )
    

    template.Must() 函式包住另一個函式,以傳回範本指標與錯誤。

  3. 將範本參數定義為在 main.go 中具有 NoticeName 兩個欄位的資料結構:

    type templateParams struct {
    	Notice string
    	Name   string
    }
    

處理表單資料

第一次載入頁面時,系統會傳送 GET 要求。使用者提交內容時,頁面會重新載入並傳送 POST 要求。POST 要求會處理提交的表單,並更新範本變數,如下面的程式碼所示。

main.go 中,將下列幾行新增至 indexHandler 函式:

params := templateParams{}

if r.Method == "GET" {
	indexTemplate.Execute(w, params)
	return
}

// It's a POST request, so handle the form submission.

name := r.FormValue("name")
params.Name = name // Preserve the name field.
if name == "" {
	name = "Anonymous Gopher"
}

if r.FormValue("message") == "" {
	w.WriteHeader(http.StatusBadRequest)

	params.Notice = "No message provided"
	indexTemplate.Execute(w, params)
	return
}

// TODO: save the message into a database.

params.Notice = fmt.Sprintf("Thank you for your submission, %s!", name)

呼叫 r.FormValue 之後,您就可以從表單中擷取資料。

將資料傳送至範本

indexHandler 函式結尾使用 Execute 函式,在可安全插入內容的 index.html 範本中顯示使用者提交的內容:

indexTemplate.Execute(w, params)

在本機執行您的應用程式

使用 Cloud SDK 隨附的本機開發伺服器 (dev_appserver.py),執行並測試您的應用程式。

  1. 在應用程式 app.yaml 所在的專案根目錄中,使用以下指令來啟動本機開發伺服器:

    dev_appserver.py app.yaml
    

    本機開發伺服器現已開始執行並監聽 8080 通訊埠的要求。發生問題了嗎?

  2. 使用網路瀏覽器造訪 http://localhost:8080/ 以查看應用程式。

    最終

執行本機開發伺服器 (dev_appserver.py)

如要執行本機開發伺服器,您可以指定完整的目錄路徑來執行 dev_appserver.py,或是將 dev_appserver.py 新增至 PATH 環境變數:

  • 如果您安裝了原始 App Engine SDK,該工具位於以下路徑:

    [PATH_TO_APP_ENGINE_SDK]/dev_appserver.py
    
  • 如果您安裝了 Google Cloud SDK,該工具位於以下路徑:

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/bin/dev_appserver.py
    

    提示:如要將 Google Cloud SDK 工具新增至您的 PATH 環境變數,並在殼層中啟用 command-completion,您可以執行以下指令:

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/install.sh
    

如要進一步瞭解如何執行本機開發伺服器 (包括如何變更通訊埠編號),請參閱本機開發伺服器參考資料。

變更程式碼

本機開發伺服器會監視您的專案檔案變更情形,因此會在您變更程式碼後,重新編譯並重新啟動您的應用程式。

  1. 立即嘗試:讓本機開發伺服器維持執行的狀態,然後試著編輯 index.html,將「The Gopher Network」改成其他內容。

  2. 重新載入 http://localhost:8080/,查看您變更的內容。

部署應用程式

使用下列指令,從 app.yaml 所在的專案根目錄,將您的應用程式部署到 App Engine:

gcloud app deploy

查看應用程式

如要啟動瀏覽器並前往 http://[YOUR_PROJECT_ID].appspot.com 查看您的應用程式,請執行下列指令:

gcloud app browse

後續步驟

您剛建構了一個可讓後端與前端透過 HTTP POST 要求互動的應用程式。

接下來,瞭解如何將使用者上傳的內容儲存在 Cloud Datastore 中,這是專為自動調整資源配置、高效能,以及協助應用程式開發所打造的非關聯 (NoSQL) 資料庫。

本頁內容對您是否有任何幫助?請提供意見:

傳送您對下列選項的寶貴意見...

這個網頁
Go 適用的 App Engine 標準環境