# springboot-vue3

**Repository Path**: jiuqi0822/springboot-vue3

## Basic Information

- **Project Name**: springboot-vue3
- **Description**: SpringBoot与vue3的交互, 主要有显示数据, 分页, 增加, 修改和删除
- **Primary Language**: Java
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-29
- **Last Updated**: 2024-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### SpringBoot与vue3的交互, 主要有显示数据, 分页, 增加, 修改和删除

1. ##### 显示

   ![输入图片说明](https://foruda.gitee.com/images/1714389126689314353/cdfebdc4_8294971.png "JiuQi_2024-04-29_18-57-24.png")



2. ##### 修改

   ![输入图片说明](https://foruda.gitee.com/images/1714389145039481755/1878f490_8294971.png "JiuQi_2024-04-29_18-57-48.png")

3. ##### 增加

   ![输入图片说明](https://foruda.gitee.com/images/1714389166995111805/8f4905a1_8294971.png "JiuQi_2024-04-29_18-58-27.png")

4. ##### 删除
    ![输入图片说明](https://foruda.gitee.com/images/1714389186477871672/cc9411cf_8294971.png "JiuQi_2024-04-29_18-58-36.png")


##### `后台统一返回Result`

```java
@Data
public class Result<T> implements Serializable {
    private Integer code;
    private String msg;
    private String total;
    private T data;

    public static <T> Result<T> success (T data) {
        return Result.success (StatusCodeEnum.SC200.getMsg (), data);
    }

    public static <T> Result<T> success (String msg, T data) {
        Result<T> result = new Result<>();
        result.setCode (StatusCodeEnum.SC200.getCode ());
        result.setMsg (msg);
        result.setData (data);
        return result;
    }

    public static <T> Result<T> success (String msg, T data, String total) {
        Result<T> result = new Result<>();
        result.setCode (StatusCodeEnum.SC200.getCode ());
        result.setMsg (msg);
        result.setData (data);
        result.setTotal (total);
        return result;
    }

    public static <T> Result<T> fail (Integer code, String msg) {
        Result<T> result = new Result<>();
        result.setCode (code);
        result.setMsg (msg);
        return result;
    }

    public static <T> Result<T> fail (String msg) {
        Result<T> result = new Result<>();
        result.setMsg (msg);
        return result;
    }
}
```

##### 前后端跨域问题

```java
@Configuration
public class CorsConfig {

    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}
```

添加这个就可以解决



























1.