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