以下是一个简化的Spring Boot后端和Vue前端的登录和注册功能的实现示例。
Spring Boot后端:
// UserController.java
@RestController
@RequestMapping("/api")
public class UserController {
@PostMapping("/register")
public ResponseEntity<?> registerUser(@RequestBody User user) {
// 实现用户注册逻辑
// ...
return ResponseEntity.ok("User registered successfully.");
}
@PostMapping("/login")
public ResponseEntity<?> loginUser(@RequestBody User user) {
// 实现用户登录逻辑
// ...
return ResponseEntity.ok("User logged in successfully.");
}
}
// User.java
public class User {
private String username;
private String password;
// 省略getter和setter
}Vue前端:
<!-- Login.vue -->
<template>
<div>
<input type="text" v-model="loginForm.username" placeholder="Username">
<input type="password" v-model="loginForm.password" placeholder="Password">
<button @click="login">Login</button>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
}
};
},
methods: {
login() {
axios.post('/api/login', this.loginForm)
.then(response => {
// 处理登录成功的响应
console.log(response.data);
})
.catch(error => {
// 处理登录失败的情况
console.error(error);
});
}
}
};
</script>
<!-- Register.vue -->
<template>
<div>
<input type="text" v-model="registerForm.username" placeholder="Username">
<input type="password" v-model="registerForm.password" placeholder="Password">
<button @click="register">Register</button>
</div>
</template>
<script>
export default {
data() {
return {
registerForm: {
username: '',
password: ''
}
};
},
methods: {
register() {
axios.post('/api/register', this.registerForm)
.then(response => {
// 处理注册成功的响应
console.log(response.data);
})
.catch(error => {
// 处理注册失败的情况
console.error(error);
});
}
}
};
</script>确保你的Spring Boot应用配置了CORS（跨源资源共享），以便Vue应用能够从不同的域进行请求。
这个示例展示了如何使用Spring Boot和Vue.js创建简单的登录和注册功能。在实际应用中，你需要加入更复杂的逻辑，例如密码加密、处理错误信息、实现用户验证等。