spring boot3 + vue 项目跟学

技术

• 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.Driver
        url: jdbc:mysql://>:3306/study?useUnicode=true&characterEncoding=utf-8 # 建议本机安装或使用docker
        username: root
        password: 123456
        

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

...
@Configuration
@EnableWebSecurity
public class SecurityConfiguration {
    @Bean
    public 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.alibabagroupId>
        <artifactId>fastjsonartifactId>
        <version>2.0.25version>
    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 {
    @Bean
    public 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(); // 配置完成
    }
    // 实现方法, 使用到RestBean

    public 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改变