后端

1. 创建Spring Boot项目：使用Spring Initializr创建一个Spring Boot项目，选择依赖Spring Web和Spring Session.

2. 添加依赖：
   在pom.xml中，添加Spring Session和Spring Security依赖：

     org.springframework.session     spring-session-core       org.springframework.session     spring-session-data-redis       org.springframework.boot     spring-boot-starter-data-redis       org.springframework.boot     spring-boot-starter-security  

3. 配置Redis：
   在application.properties中添加Redis配置：

spring.redis.host=localhost spring.redis.port=6379 spring.session.store-type=redis 

4. 创建用户认证配置类：
   创建一个类SecurityConfig来配置Spring Security：

import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; import org.springframework.security.crypto.password.PasswordEncoder;  @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter {      @Override     protected void configure(HttpSecurity http) throws Exception {         http             .authorizeRequests()                 .antMatchers("/api/login", "/api/register").permitAll()                 .anyRequest().authenticated()                 .and()             .csrf().disable()             .formLogin()                 .loginProcessingUrl("/api/login")                 .defaultSuccessUrl("/home", true)                 .permitAll()                 .and()             .logout()                 .logoutUrl("/api/logout")                 .permitAll();     }      @Bean     public PasswordEncoder passwordEncoder() {         return new BCryptPasswordEncoder();     } } 

5. 创建用户服务类：
   创建一个类UserService来管理用户：

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.security.crypto.password.PasswordEncoder; import org.springframework.stereotype.Service;  import java.util.HashMap; import java.util.Map;  @Service public class UserService {      @Autowired     private PasswordEncoder passwordEncoder;      private Map users = new HashMap<>();      public void register(String username, String password) {         users.put(username, passwordEncoder.encode(password));     }      public boolean authenticate(String username, String password) {         String encodedPassword = users.get(username);         return encodedPassword != null && passwordEncoder.matches(password, encodedPassword);     } } 

6. 创建控制器类：
   创建一个控制器类AuthController来处理登录和注册请求：

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.security.core.Authentication; import org.springframework.web.bind.annotation.*;  import java.util.HashMap; import java.util.Map;  @RestController @RequestMapping("/api") public class AuthController {      @Autowired     private UserService userService;      @PostMapping("/login")     public Map login(@RequestParam String username, @RequestParam String password) {         Map response = new HashMap<>();         if (userService.authenticate(username, password)) {             response.put("status", "success");         } else {             response.put("status", "error");             response.put("message", "Invalid username or password");         }         return response;     }      @PostMapping("/register")     public Map register(@RequestParam String username, @RequestParam String password) {         userService.register(username, password);         Map response = new HashMap<>();         response.put("status", "success");         return response;     }      @GetMapping("/home")     public Map home(Authentication authentication) {         Map response = new HashMap<>();         response.put("message", "Welcome " + authentication.getName());         return response;     } } 

前端

1. 创建Vue 3项目：
   使用Vue CLI创建一个新的Vue 3项目：

vue create frontend 

2. 安装Axios：
   在Vue项目根目录下安装Axios用于发送HTTP请求：

npm install axios 

3. 创建登录和注册页面：

• Login.vue:

• Register.vue:

• Home.vue:

4. 配置路由：
   在src/router/index.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router'; import Login from '../views/Login.vue'; import Register from '../views/Register.vue'; import Home from '../views/Home.vue';  const routes = [   { path: '/login', component: Login },   { path: '/register', component: Register },   { path: '/home', component: Home },   { path: '/', redirect: '/login' } ];  const router = createRouter({   history: createWebHistory(process.env.BASE_URL),   routes });  export default router; 

5. 启动前后端：

• 启动Spring Boot应用：

./mvnw spring-boot:run 

• 启动Vue开发服务器：

npm run serve 

这样，你就可以使用Vue 3来处理前端登录和注册界面，并通过Spring Boot后端进行登录验证。