5

We often use POST requests to send FORM form data, which is more secure than GET.


Here is a simple horizontally centered login page I wrote

 <!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>

The effect of the login page is as follows:


Well, next, the post request that sends the form form to the server is also added:

 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")
}

Then add the front-end page after the post request is successful (Oh, yes, this should be the simplest full-stack development practice)

 <!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>

Finally, after entering the user name and password in the input box and clicking login, the effect is as follows:


Similar to the DefaultQuery and GetQuery of the GET request, the POST request also has DefaultPostForm and GetPostForm. Here I only talk about the GetPostForm that I commonly use:

Tips: When writing your own service, if 404, you can try to turn off the ladder (if there is one)


Reference: bilibili

LiberHome
409 声望1.1k 粉丝

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