技术

• spring boot3 + mysql + redis
• vue3 + vite + elementplus

spring boot只负责开发后端接口(后端服务器)

前端服务器nginx去访问spring boot(前端服务器)

get start

1. 创建空项目,然后在创建后端项目(spring init…) java17 + 3.05版本 + maven
2. 选 spring web + spring data jdbc + mysql driver + mybatis framework + lombok + spring security
3. 创建后端项目-backend
4. 删除resources/static + templates, 重命名application.yaml

1. 创建前端项目, npm install -g create-vue
2. create-vue #命名frontend
3. 不要选ts + jsx + unit test + e2e test + eslint,选vue router + pinia +
4. 点击项目结构设置->模块->把前端项目目录加进来

backend

• 本地仓库的配置(不用远程仓库),提交前端的项目先,前端挂了还可以回滚（建议选项）

对后端项目编写readme.md文件

# TDS
基本的登陆，注册，密码重置
- 登陆功能（支持用户名，邮箱登陆）
- 注册用户（邮箱注册）
- 重置密码

！ 没有数据源，启动项目会报错，原来如此

配置application.yml

# 配置数据源
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://<ip>:3306/study?useUnicode=true&characterEncoding=utf-8 # 建议本机安装或使用dockerusername: rootpassword: 123456

创建config.SecurityConfiguration(看下面完整版)

...
@Configuration
@EnableWebSecurity
public class SecurityConfiguration {@Beanpublic SecurityFilterChain filterChain(HttpSecurity http) throws Exception {return http.authorizeHttpRequests().anyRequest().authenticated().and().formLogin().loginProcessingUrl("/api/auth/login").successHandler(this::onAuthenticationSuccess).and().logout().logoutUrl("/api/auth/logout").and().csrf().disable().build(); // 配置完成}// 实现方法public void onAuthenticationSuccess(HttpServletRquest request,HttpServletResponse response,Authentication authentication) throws IOException{response.setEncoding("utf-8");response.getWriter().write("登陆成功！");}
}
···
- 验证后端能不能登陆，localhost:8080/login  用户是user,密码在spring 启动台有一个自动生成的密钥
- 若返回404，验证成功
- 再验证， localhost:8080/api/auth/logout
 apipost测试
- localhost:8080/api/auth/login,同上user,和密码 --使用post 请求
 创建entity.RestBean
```java
// RestBean
package com.example.studyprojectbackend.entity;import lombok.Data;@Data
public class RestBean<T>{private int status;private boolean success;private T message;private RestBean(int status,boolean success,T message){this.status = status;this.success = success;this.message = message;}public static <T> RestBean<T> success(){return new RestBean<>(200,true,null);}public static <T> RestBean<T> success(T data){return new RestBean<>(200,true,data);}public static <T> RestBean<T> failure(int status){return new RestBean<>(status,false,null);}public static <T> RestBean<T> failure(int status, T data){return new RestBean<>(status, false,data);}
}

回去修改刚刚的config类(一定要添加)

1. 先添加依赖

//pom.xml<dependency>  <groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>2.0.25</version></dependency>

2. 修改配置类最后的方法

// SecurityConfiguration.java
...response.getWriter().write(JSONObject.toJSONString(RestBean.success("登陆成功")));

再用apipost测试，localhost…/api/auth/login

! 注意login后没有/

• JSON就是前端希望后端能返回给前端的数据的格式

再度完善刚刚的配置类,不要用刚刚的（妈的）

package com.example.studyprojectbackend.config;import com.alibaba.fastjson.JSONObject;
import com.example.studyprojectbackend.entity.RestBean;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.boot.autoconfigure.neo4j.Neo4jProperties;
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.core.Authentication;
import org.springframework.security.core.AuthenticationException;
import org.springframework.security.web.SecurityFilterChain;import java.io.IOException;@Configuration
@EnableWebSecurity
public class SecurityConfiguration {@Beanpublic SecurityFilterChain filterChain(HttpSecurity http) throws Exception {return http.authorizeHttpRequests().anyRequest().authenticated().and().formLogin().loginProcessingUrl("/api/auth/login").successHandler(this::onAuthenticationSuccess).failureHandler(this::onAuthenticationFailure).and().logout().logoutUrl("/api/auth/logout").and().csrf().disable().exceptionHandling().authenticationEntryPoint(this::onAuthenticationFailure).and().build(); // 配置完成}// 实现方法, 使用到RestBeanpublic void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response,Authentication authentication) throws IOException {response.setCharacterEncoding("utf-8");response.getWriter().write(JSONObject.toJSONString(RestBean.success("登陆成功")));}public void onAuthenticationFailure(HttpServletRequest request, HttpServletResponse response,AuthenticationException exception) throws IOException{response.setCharacterEncoding("utf-8");response.getWriter().write(JSONObject.toJSONString(RestBean.failure(401,exception.getMessage())));}
}

• 使用apipost测试成功
• 现在可以跑一下装逼了

数据库设计

！连接本人热点，否则ip改变