vue和springboot实现登录的代码
时间: 2023-09-02 18:07:38 浏览: 40
下面是一个简单的示例,演示了如何使用 Vue 和 Spring Boot 实现基本的登录功能:
Vue 代码:
```html
<template>
<div>
<h1>Login Form</h1>
<form @submit.prevent="submitForm">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
submitForm() {
this.$http.post('/login', { username: this.username, password: this.password })
.then(response => {
// 登录成功,处理逻辑
})
.catch(error => {
// 登录失败,处理逻辑
});
}
}
}
</script>
```
Spring Boot 代码:
```java
@RestController
public class LoginController {
@PostMapping("/login")
public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {
// 处理登录逻辑
return ResponseEntity.ok(new LoginResponse(token));
}
}
```
其中,`LoginRequest` 是一个 POJO,表示登录请求,包含 `username` 和 `password` 字段;`LoginResponse` 是一个 POJO,表示登录响应,包含 `token` 字段。在 `login` 方法中,可以根据 `loginRequest` 中的信息进行登录验证,如果验证通过,生成一个 `token` 并返回给前端。
需要注意的是,上述代码只是一个简单的示例,实际生产环境中可能需要对登录请求进行更严格的验证,并且使用更安全的加密算法生成 `token`。