编写一个代码gin框架下的登录用到html,js
时间: 2024-02-21 09:00:06 浏览: 24
以下是一个使用Gin框架实现登录功能的示例代码,其中包括使用HTML和JavaScript实现前端页面:
HTML代码(login.html):
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("form").submit(function (event) {
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "/login",
type: "POST",
data: JSON.stringify({
"username": username,
"password": password
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.success) {
alert("登录成功!");
} else {
alert("登录失败:" + response.message);
}
},
error: function () {
alert("请求失败!");
}
});
});
});
</script>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
JavaScript代码:
```javascript
$(document).ready(function () {
$("form").submit(function (event) {
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "/login",
type: "POST",
data: JSON.stringify({
"username": username,
"password": password
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.success) {
alert("登录成功!");
} else {
alert("登录失败:" + response.message);
}
},
error: function () {
alert("请求失败!");
}
});
});
});
```
Gin框架代码:
```go
package main
import (
"github.com/gin-gonic/gin"
"net/http"
)
func main() {
router := gin.Default()
router.LoadHTMLGlob("templates/*")
router.GET("/", func(c *gin.Context) {
c.HTML(http.StatusOK, "login.html", gin.H{})
})
router.POST("/login", func(c *gin.Context) {
var data struct {
Username string `json:"username"`
Password string `json:"password"`
}
if err := c.ShouldBindJSON(&data); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"success": false, "message": "参数错误"})
return
}
// 验证用户名和密码
if data.Username == "admin" && data.Password == "123456" {
c.JSON(http.StatusOK, gin.H{"success": true})
} else {
c.JSON(http.StatusOK, gin.H{"success": false, "message": "用户名或密码错误"})
}
})
router.Run(":8080")
}
```
在上述代码中,我们首先定义了一个/login的路由,当客户端发送POST请求到该路由时,会执行相应的处理函数。在处理函数中,我们通过c.ShouldBindJSON函数解析客户端发送的JSON数据,并进行用户名和密码的验证。如果验证通过,我们返回一个JSON格式的响应,其中success字段为true,否则为false,并附带相应的错误信息。在HTML和JavaScript代码中,我们使用jQuery库发送POST请求到/login路由,并根据响应的success字段显示相应的提示信息。