springboot一个好看的登录界面前端和后端的代码
时间: 2023-07-29 21:09:19 浏览: 144
以下是一个简单的Spring Boot登录界面的前端和后端代码示例:
前端代码(HTML、CSS和JavaScript):
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.container {
margin-top: 100px;
width: 30%;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter password">
</div>
<button type="button" class="btn btn-primary" onclick="login()">Login</button>
</form>
</div>
<script>
function login() {
var username = $("#username").val();
var password = $("#password").val();
// 发送登录请求到后端
$.ajax({
url: "/login",
type: "POST",
data: {
username: username,
password: password
},
success: function(response) {
// 处理登录成功的逻辑
alert("Login successful");
},
error: function() {
// 处理登录失败的逻辑
alert("Login failed");
}
});
}
</script>
</body>
</html>
```
后端代码(Java):
```java
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
@SpringBootApplication
@RestController
public class LoginApplication {
public static void main(String[] args) {
SpringApplication.run(LoginApplication.class, args);
}
@PostMapping("/login")
public String login(@RequestBody LoginRequest loginRequest) {
// 进行登录验证逻辑,这里只是简单示例
if (loginRequest.getUsername().equals("admin") && loginRequest.getPassword().equals("password")) {
return "success";
} else {
return "failure";
}
}
static class LoginRequest {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
}
```
上述代码演示了一个简单的登录界面,其中前端使用了Bootstrap库来美化界面,通过AJAX发送登录请求到后端的Spring Boot应用。后端接收到请求后,进行登录验证逻辑,并返回相应的结果。请根据实际需求进行适当修改和扩展。