基于Gin框架的web后端开发（四）: 获取FORM表单参数

我们常用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>

登录页的效果是这样的：
基于Gin框架的web后端开发（四）: 获取FORM表单参数

好了，接下来，把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>

最后在输入框中输入用户名和密码之后点击登录后，效果如下：
基于Gin框架的web后端开发（四）: 获取FORM表单参数