spring boot3 + vue 项目跟学---已放弃

这篇具有很好参考价值的文章主要介绍了spring boot3 + vue 项目跟学---已放弃。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

代码来自b站青空的霞光

最新((不写了)主要是很乱,学不会)

技术

  • 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://<ip>: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.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>2.0.25</version>
    </dependency>
  1. 修改配置类最后的方法
// 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改变文章来源地址https://www.toymoban.com/news/detail-435871.html

到了这里,关于spring boot3 + vue 项目跟学---已放弃的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • spring boot3参数校验基本用法

    ⛰️个人主页:      蒾酒 🔥系列专栏: 《spring boot实战》 🌊山高路远,行路漫漫,终有归途。 目录 前置条件 前言 导入依赖 使用介绍 配置检验规则 开启校验 使用注意 全局异常捕获返回友好提示信息 常用的校验规则注解 使用技巧 已经初始化好一个spring boot项目且版本为

    2024年02月21日
    浏览(45)
  • Spring Boot3整合MyBatis Plus

    目录 1.前置条件 2.导坐标 3.配置数据源 4.mybatis-plus基础配置 5.配置mapper扫描路径 6.MyBatis Plus代码生成器整合 1.导坐标 2.编写代码生成逻辑 7.整合Druid连接池 已经初始化好一个spring boot项目且版本为3X,项目可正常启动 初始化教程: 新版idea创建spring boot项目-CSDN博客 https://blog

    2024年01月23日
    浏览(49)
  • Spring Boot3整合Druid(监控功能)

    目录 1.前置条件 2.导依赖 错误依赖: 正确依赖: 3.配置 已经初始化好一个spring boot项目且版本为3X,项目可正常启动。 作者版本为3.2.2 初始化教程: 新版idea创建spring boot项目-CSDN博客 https://blog.csdn.net/qq_62262918/article/details/135785412?spm=1001.2014.3001.5501 这个依赖对于spring boot 3的支

    2024年01月22日
    浏览(61)
  • spring boot3整合mybatis-plus

    添加依赖 配置属性信息 编写业务逻辑测试代码 配置mybatis-plus分页插件 配置mybatis-plus之属性自动填充 如图所示 1、添加依赖 2、配置属性 3、编写测试代码 4、XML文件 5、测试数据是否能走通

    2024年03月12日
    浏览(58)
  • spring boot3登录开发-2(2短信验证码接口实现)

      ⛰️个人主页:     蒾酒 🔥系列专栏:《spring boot实战》 🌊山高路远,行路漫漫,终有归途 目录 写在前面 上文衔接 内容简介 短信验证码接口实现 1.依赖导入 2.接口分析 3.实现思路 3.功能实现 创建发送短信工具类 配置阿里云短信服务 接口代码实现 4.功能测试 写在最后

    2024年03月23日
    浏览(44)
  • spring boot3登录开发-2(1图形验证码接口实现)

    ⛰️个人主页:     蒾酒 🔥系列专栏:《spring boot实战》 🌊 山高路远,行路漫漫,终有归途。 目录 前置条件 内容简介 图形验证码接口实现 导入糊涂工具依赖 接口分析 编写验证码接口 测试验证码接口 本文衔接上文,请从上文开始 spring boot3x登录开发-上(整合jwt)-CSDN博客

    2024年02月20日
    浏览(49)
  • spring boot3登录开发-3(2短信验证登录/注册逻辑实现)

      ⛰️个人主页:     蒾酒 🔥系列专栏:《spring boot实战》 🌊山高路远,行路漫漫,终有归途 目录 写在前面 上文衔接 内容简介 功能分析 短信验证登录实现 1.创建交互对象 用户短信登录/注册DTO 创建用户登录VO 2.创建自定义业务异常 创建验证码错误异常 创建用户被封禁异

    2024年04月09日
    浏览(44)
  • spring boot3登录开发-微信小程序用户登录设计与实现

      ⛰️个人主页:     蒾酒 🔥系列专栏:《spring boot实战》 🌊山高路远,行路漫漫,终有归途 目录 写在前面 登录流程 流程解析 具体实现 相关代码 说明 服务端 小程序端 写在最后 本文介绍了springboot开发微信小程序后端服务中,用户登录功能的设计与实现,坚持看完相信

    2024年03月18日
    浏览(66)
  • Spring Boot3.2.2整合MyBatis Plus3.5.5

    目录 1.前置条件 2.导坐标 3.配置数据源 4.mybatis-plus基础配置 5.配置mapper扫描路径 6.MyBatis Plus代码生成器整合 1.导坐标 2.编写代码生成逻辑 7.整合Druid连接池 已经初始化好一个spring boot项目且版本为3X,项目可正常启动 初始化教程: 新版idea创建spring boot项目-CSDN博客 https://blog

    2024年01月22日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包