生成前后端分离登录页面的代码
时间: 2023-08-25 09:14:14 浏览: 51
以下是一个简单的前后端分离登录页面的代码示例:
前端代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 mt-5">
<div class="card">
<div class="card-header">
<h4>Login</h4>
</div>
<div class="card-body">
<form id="login-form">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" class="form-control" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#login-form').submit(function (event) {
event.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: '/login',
type: 'POST',
data: {
username: username,
password: password
},
success: function (data) {
window.location.href = '/home';
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
});
});
</script>
</body>
</html>
```
后端代码(以Java Spring Boot为例):
```java
@RestController
public class LoginController {
@PostMapping("/login")
public ResponseEntity<String> login(@RequestBody LoginForm loginForm) {
// TODO: check username and password in database
if (loginForm.getUsername().equals("admin") && loginForm.getPassword().equals("admin")) {
return ResponseEntity.ok("Login success");
} else {
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");
}
}
}
```
其中,`LoginForm`是一个简单的Java类,用于封装前端提交的登录表单数据:
```java
public class LoginForm {
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;
}
}
```
需要注意的是,这只是一个简单的示例代码,实际项目中需要进行更多的安全性和健壮性考虑。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)