5

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

LiberHome
409 声望1.1k 粉丝

有问题 欢迎发邮件 📩 liberhome@163.com