SpringBoot3+Vue3基础框架（1）-springboot+对接数据库表登录

多云的夏天2025-12-21 15:49

创建一个基础版用于各种web应用的开发。

1.新建项目与选项

1.1 后端

bash 复制代码 
spring.application.name=backend
server.port=8080
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://192.168.9.73:3306/pvfforecast?useSSL=false?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=INT@4001093999

application.properties

username :user

password:服务器启动

1.添加了config下添加有2个注解的类就可以有表单登录

http:\\localhost:8080\login

用户名：user

密码：是生成的

表示登录成功

2.添加了SecurityFilterChain

方法链风格编码，只有登录正确与否的字符显示，没有页面跳转。

java 复制代码 
package com.example.backend.config;


import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;

//2.Servlet相关:
import jakarta.annotation.Resource;
import jakarta.servlet.http.HttpServletRequest;  //Servlet相关:HTTP请求对象
import jakarta.servlet.http.HttpServletResponse;
//3 Spring 上下文：
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
//4.Spring Security 核心 用户认证
import org.springframework.http.HttpMethod;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.core.Authentication;         //代表用户认证信息的接口
import org.springframework.security.core.AuthenticationException;//认证异常基类
//5.Spring Security 配置
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;

//6.Spring Security 密码编码器
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
//7.Spring Security 安全过滤器链
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.io.IOException;


@Configuration
@EnableWebSecurity
public class SecurityConfiguration {


    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

        return http
                .authorizeHttpRequests(auth -> auth   //不支持POST,支持GET
                        .requestMatchers(HttpMethod.POST, "/**").permitAll()
                        .requestMatchers(HttpMethod.GET, "/**").permitAll()
                        .anyRequest().authenticated()
                )
                // 表单登录配置
                .formLogin(login -> login
                        .loginProcessingUrl("/api/auth/login")
                        .successHandler(this::onAuthenticationSuccess)
                        .failureHandler(this::onAuthenticationFailure)
                )
                .logout(logout -> logout
                        .logoutUrl("/api/auth/logout")
                        .logoutSuccessHandler(this::onAuthenticationSuccess)
                )
                .csrf(csrf -> csrf.disable())
                .exceptionHandling(exception -> exception
                        .authenticationEntryPoint(this::onAuthenticationFailure)

                )
                .build();
    }


    private CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration cors = new CorsConfiguration();
        cors.addAllowedOriginPattern("*");
        cors.setAllowCredentials(true);
        cors.addAllowedHeader("*");
        cors.addAllowedMethod("*");
        cors.addExposedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", cors);
        return source;
    }

//加上后就会要求密码加密
   /* @Bean
    public BCryptPasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }
*/

    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException {
        response.setCharacterEncoding("utf-8");
        response.getWriter().write("登录成功");
       /* if(request.getRequestURI().endsWith("/login"))
            response.getWriter().write(JSONObject.toJSONString(RestBean.success("登录成功")));
        else if(request.getRequestURI().endsWith("/logout"))
            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("登录失败");
      //  response.getWriter().write(JSONObject.toJSONString(RestBean.failure(401, exception.getMessage())));

    }

}

post：http://localhost:8080/api/auth/login

username: user

password: 控制台里生成的一长串

post：http://localhost:8080/api/auth/login

3.使用数据库验证

数据库表;

java 复制代码 
/*
=========================================
        BCrypt密码生成器123
==========================================
原始密码: int
加密密码: $2a$10$bo6Mhp1s1KopuBD5oNM3fODlCPvNCs2rWvehMrwxJppBULSy3u7KW
------------------------------------------
原始密码: admin123
加密密码: $2a$10$pphyWI8acVboQq5ousC/NOmBLdehJfGHzXS6OrglFI4KfkxtmPBb2
------------------------------------------
原始密码: user123
加密密码: $2a$10$6NhWS6hcRnmejSPh7N8aqO1/f1ZIURVExhsFqCQaCcLRv4E/fyd7u
------------------------------------------

密码必须是加密的。

1.config SecurityConfiguration

中添加可以操作数据库表的服务和加密操作

java 复制代码 
@Resource
    AuthorizeService authorizeService;




 public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

        return http
                
.userDetailsService(authorizeService)
 .build();
    }







@Bean
    public BCryptPasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }
复制代码 
AuthorizeService 就会需要mapper 和entity
以下是service,mapper,和entity类的基本写法

service
java 复制代码 
package com.example.backend.service;

import com.example.backend.entity.Account;
import com.example.backend.mapper.UserMapper;
import jakarta.annotation.Resource;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;

@Service
public class AuthorizeService implements UserDetailsService {
    @Resource
    UserMapper userMapper;

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {

        if (username == null || username.isEmpty()) {
            throw new UsernameNotFoundException("Username is empty");
        }

        Account account = userMapper.getAccountByUsername(username);
        if (account == null) {
            throw new UsernameNotFoundException("Username not found");
        }
        return User.withUsername(account.getUsername())
                .password(account.getPassword())
                .roles("user")//有哪些roles 起什么作用？
                .build();
    }

}

mapper

java 复制代码 
package com.example.backend.mapper;


import com.example.backend.entity.Account;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface UserMapper {

@Select("select * from myuser where username=#{username} ")
Account getAccountByUsername(String username);

}

Account

java 复制代码 
package com.example.backend.entity;

import lombok.Data;

@Data
public class Account {
    int id;
    String email;
    String username;
    String password;
}c

config 需要添加下面的代码，就2个功能，一个service，一个加密

java 复制代码 
package com.example.backend.config;



import com.alibaba.fastjson2.JSONObject;
import com.example.backend.entity.RestBean;
import com.example.backend.service.AuthorizeService;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;

//2.Servlet相关:
import jakarta.annotation.Resource;
import jakarta.servlet.http.HttpServletRequest;  //Servlet相关:HTTP请求对象
import jakarta.servlet.http.HttpServletResponse;
//3 Spring 上下文：
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
//4.Spring Security 核心 用户认证
import org.springframework.http.HttpMethod;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.core.Authentication;         //代表用户认证信息的接口
import org.springframework.security.core.AuthenticationException;//认证异常基类
//5.Spring Security 配置
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;

//6.Spring Security 密码编码器
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
//7.Spring Security 安全过滤器链
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.io.IOException;


@Configuration
@EnableWebSecurity
public class SecurityConfiguration {


    @Resource
    AuthorizeService authorizeService;

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

        return http
                .authorizeHttpRequests(auth -> auth   //不支持POST,支持GET
                        .requestMatchers(HttpMethod.POST, "/**").permitAll()
                        .requestMatchers(HttpMethod.GET, "/**").permitAll()
                        .anyRequest().authenticated()
                )
                // 表单登录配置
                .formLogin(login -> login
                        .loginProcessingUrl("/api/auth/login")
                        .successHandler(this::onAuthenticationSuccess)
                        .failureHandler(this::onAuthenticationFailure)
                )
                .logout(logout -> logout
                        .logoutUrl("/api/auth/logout")
                        .logoutSuccessHandler(this::onAuthenticationSuccess)
                )
                .userDetailsService(authorizeService)
                .csrf(csrf -> csrf.disable())
                .exceptionHandling(exception -> exception
                        .authenticationEntryPoint(this::onAuthenticationFailure)

                )
                .build();
    }


    private CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration cors = new CorsConfiguration();
        cors.addAllowedOriginPattern("*");
        cors.setAllowCredentials(true);
        cors.addAllowedHeader("*");
        cors.addAllowedMethod("*");
        cors.addExposedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", cors);
        return source;
    }


    @Bean
    public BCryptPasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }


    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException {
        response.setCharacterEncoding("utf-8");
        response.getWriter().write(JSONObject.toJSONString(RestBean.success("登录成功")));
      //  response.getWriter().write("登录成功");
       /* if(request.getRequestURI().endsWith("/login"))
            response.getWriter().write(JSONObject.toJSONString(RestBean.success("登录成功")));
        else if(request.getRequestURI().endsWith("/logout"))
            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.success("登录失败")));
     //   response.getWriter().write("登录失败");
      //  response.getWriter().write(JSONObject.toJSONString(RestBean.failure(401, exception.getMessage())));

    }

}

系统环境变量：

javac -version

java -version

IDEA 设置

项目SDK配置

1.2前端

http://localhost:5173/

package.json 右键运行dev 跑起来

前后端环境开启

相关推荐
ZWZhangYu23 分钟前
从 Dify 实践理解大模型上下文缓存
java·后端·spring
AlickLbc1 小时前
DM-V8数据库证书过期处理过程记录
数据库
l1t1 小时前
DeepSeek总结的五分钟测试：Ted Dunning 谈 DuckDB 为何让分析更轻松
数据库·sql·duckdb
超级新零售1 小时前
零售 SaaS 与本地部署，技术责任边界究竟怎么分？
数据库·零售
考虑考虑1 小时前
瀚高数据库
数据库·后端·postgresql
dishugj2 小时前
oracle日志切换三条命令区别
数据库
锋行天下2 小时前
DeepSeek写Langgraph就是个大傻逼，一本正经胡说八道
前端·人工智能·后端
Patrick在香港2 小时前
一个斜杠，把毫秒变成十几秒
android·数据库·python·性能优化·正则表达式·回溯·redos
悟道书生2 小时前
（一）Navicate为什么转存结构和数据只转存表而不包含建库？
数据库·oracle
赤龙ERP3 小时前
ERP周报：连接器开闸、国产GPU进场与智能工厂253家
数据库·人工智能·大模型·rpa·erp·企业数字化·builderpattern
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05几个好用的ip纯净度检测网站06苹果iPA游戏软件资源下载网站07昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09CVE-2026-91403 高危漏洞预警：Java JSSE 信任链被攻破 全场景修复方案与Linux系统级彻底清理实操10Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）