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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。