为了实现一个简单的Spring Boot和Vue.js的登录页面，你需要创建后端Spring Boot应用程序和前端Vue.js应用程序。以下是实现这两个应用程序的基本步骤：
后端（Spring Boot）:
- 创建一个Spring Boot项目，并添加Spring Security依赖。
- 配置Spring Security来设置用户和密码。
- 创建一个控制器处理登录请求。
前端（Vue.js）:
- 创建一个Vue.js项目，并添加Vue Router和Axios依赖。
- 设计登录表单的HTML模板并添加CSS样式。
- 创建Vue组件处理登录逻辑，并使用Axios发送登录请求到后端。
Spring Boot 后端代码示例
// build.gradle 或 pom.xml 中添加依赖
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.springframework.boot:spring-boot-starter-web'
}
// SecurityConfig.java
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.inMemoryAuthentication()
.withUser("user").password("{noop}password").roles("USER");
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/", "/home").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.logout()
.permitAll();
}
}
// LoginController.java
@Controller
public class LoginController {
@GetMapping("/login")
public String loginPage() {
return "login";
}
// 处理登录请求
}Vue.js 前端代码示例
<!-- Login.vue -->
<template>
<div class="login-container">
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async login() {
try {
const response = await axios.post('/login', {
username: this.username,
password: this.password
});
// 处理登录成功的情况
} catch (error) {
// 处理登录失败的情况
}
}
}
};
</script>
<style>
/* CSS样式 */
.login-container {
/* 样式内容 */
}
</style>在实际的应用中，你需要将登录逻辑与后端的\`LoginCo