代码来自b站青空的霞光
最新((不写了)主要是很乱,学不会)
技术
- spring boot3 + mysql + redis
- vue3 + vite + elementplus
spring boot只负责开发后端接口(后端服务器)
前端服务器nginx去访问spring boot(前端服务器)
get start
- 创建空项目,然后在创建后端项目(spring init…) java17 + 3.05版本 + maven
- 选 spring web + spring data jdbc + mysql driver + mybatis framework + lombok + spring security
- 创建后端项目-backend
- 删除resources/static + templates, 重命名application.yaml
- 创建前端项目, npm install -g create-vue
- create-vue #命名frontend
- 不要选ts + jsx + unit test + e2e test + eslint,选vue router + pinia +
- 点击项目结构设置->模块->把前端项目目录加进来
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类(一定要添加)
- 先添加依赖
//pom.xml
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>2.0.25</version>
</dependency>
- 修改配置类最后的方法
// SecurityConfiguration.java
...
response.getWriter().write(JSONObject.toJSONString(RestBean.success("登陆成功")));
再用apipost测试,localhost…/api/auth/login
! 注意login后没有/文章来源:https://www.toymoban.com/news/detail-435871.html
- 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模板网!