帮我用springboot和Vue写一个登录跳转界面的代码
时间: 2024-04-16 10:26:17 浏览: 14
当然,这是一个简单的示例代码,可以帮助你实现一个基本的登录跳转界面。以下是一个使用Spring Boot和Vue的示例代码:
Spring Boot代码(LoginController.java):
```java
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class LoginController {
@GetMapping("/login")
public String loginPage() {
return "login";
}
}
```
Vue代码(login.vue):
```vue
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="login">
<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: {
login() {
// 在这里执行登录请求
// 可以使用axios或其他库发送POST请求到后端
// 例如:axios.post('/api/login', { username: this.username, password: this.password })
// 成功后进行页面跳转
// 例如:this.$router.push('/home');
}
}
};
</script>
<style scoped>
/* 在这里添加样式 */
</style>
```
请注意,这只是一个简单的示例,你需要根据你的实际需求进行修改和扩展。同时,你还需要确保正确配置了Vue和Axios。
希望对你有所帮助!如果还有其他问题,请随时提问。