一. 业务设计
-
注册接口
-
登录接口
-
退出登录接口
二. 数据存储
mysql+redis
三. 技术选型
Spring Boot + MyBatis +redis+ H2/MySQL + JWT(最后加入)+Vue
四. 遇到的问题
1. vue和后端springboot进行交互如何解决跨域问题？
浏览器提示：No 'Access-Control-Allow-Origin' header is present (跨域问题)
解释：前端 http://localhost:5173 去请求后端 http://localhost:8080，被浏览器的跨域策略拦截了，
所以前端拿不到真实的响应内容，即使后端已经返回了 true / 200 OK。(vue默认5173端口)
换句话说：
后端其实成功执行了，但浏览器不允许前端读取结果。
解决方式：
- 如果你是 Spring Boot，最简单的是在 Controller 上加 @CrossOrigin，例如：
@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:5173") // 或 "*" 做开发测试
public class LoginController {
@PostMapping("/register")
public boolean register(@RequestParam("username") String username,
@RequestParam("password") String password) {
int n = loginService.register(username, password);
return n > 0;
}
}
- 第二种写一个全局配置
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:5173")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true);
}
};
}
}
一定要重启后端，然后再在浏览器里 完全刷新（Ctrl+F5） 再试一次注册。
第三种: 前端在vite.config.js加对应的配置
export default defineConfig({
plugins: [vue(), vueDevTools()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
},
},
},
})
然后把前端地址改成 相对路径：
这样在开发环境下，请求是从同源的 5173 发给 Vite，再由 Vite 转发到 8080，浏览器就不会认为是跨域。
2. springboot项目我引入了下面的依赖，但是在代码里面我并没有写效验以及认证，前端调用为啥也要认证？
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
注意:
Spring Boot 引入 spring-boot-starter-security 后，会自动注册 SecurityFilterChain，
默认策略是所有请求都需要认证，即使没有写任何安全配置，也会启用默认用户和 Basic 认证。
spring-boot-starter-validation 呢？
不会自动开启，只有写了@NotNull @NotBlank @Valid这些注解才会开启。
五. 前端页面展示
登录:
注册：
六. 源码
源码可以运行，功能后续继续优化。