基於Gin框架的web後端開發（四）: 獲取FORM表單引數

LiberHome發表於2022-06-14
框架Web後端ORM

我們常用POST請求傳送FORM表單資料，這種方式相對於GET方式更加安全。

這裡先放一個我寫的簡陋的水平居中的登入頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: calc(100vh)">
    <form action="/login" method="post" novalidate autocomplete="off">
        <div>
            <label for="username">username:</label>
            <input type="text" name="username" id="username">
        </div>
        <br>
        <div>
            <label for="password">password:</label>
            <input type="password" name="password" id="password">
        </div>
        <br>
        <div>
            <input type="submit" value="登入" style="float: right">
        </div>
    </form>
</div>
</body>
</html>

登入頁的效果是這樣的：

好了，接下來，把form表單傳送給伺服器的post請求也加上：

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func main() {
    r := gin.Default()
    r.LoadHTMLFiles("./login.html", "./index.html")
    r.GET("/login", func(c *gin.Context) {
        c.HTML(http.StatusOK, "login.html", nil)
    })
    r.POST("/login", func(c *gin.Context) {
        //等待結束後傳送過來的使用者名稱和密碼,這裡PostFrom的key就是login.html裡面的name
        username := c.PostForm("username")
        password := c.PostForm("password")
        c.HTML(http.StatusOK, "index.html", gin.H{
            "Name":     username,
            "Password": password,
        })
    })
    r.Run(":9090")
}

然後把post請求成功之後的前端頁面也加上（歐~是的，這應該是最simple的全棧開發實踐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h1>Hi~ {{ .Name }}</h1>
<p>Your password is {{ .Password }}</p>
</body>
</html>

最後在輸入框中輸入使用者名稱和密碼之後點選登入後，效果如下：

和GET請求的DefaultQuery、GetQuery類似，POST請求也有DefaultPostForm和GetPostForm,這裡只講一下我常用的GetPostForm：

tips: 自己寫服務的時候如果404可以試一下關掉梯子（如果有的話）

參考： bilibili

相關文章