SpringBoot+vue中@Valid表单验证并返回给前端

总共分为3大步

1) 完成表单验证

1.导入表单验证依赖
<!-- 表单后端校验 -->
    <dependency>
        <groupid>org.springframework.boot</groupid>
        <artifactid>spring-boot-starter-validation</artifactid>
        <version>2.3.3.RELEASE</version>
    </dependency>

    <dependency>
        <groupid>org.projectlombok</groupid>
        <artifactid>lombok</artifactid>
        <optional>true</optional>
    </dependency>

2.在Controler中的login方法的参数加上@Valid注解,
这里是将表单参数都写到一个自定义的接受参数类,前端传过来的三个参数都会作为属性存储到该类的对象中,
这个类中调用validation包的注解来设置校验的内容

2) 捕获消息并返回给前端

表单验证到这里还没有结束，因为前面只设置了表单需要验证的内容，而我们现在要处理当不满足验证的需求时的情况

//自定义返回类: ApiResult
//所有信息都会存入该类的属性传给前端

import com.fasterxml.jackson.annotation.JsonInclude;
import lombok.Data;

import java.util.Date;

@Data
@JsonInclude(JsonInclude.Include.ALWAYS)
public class ApiResult<t> {
    int status;
    boolean success;
    String message;
    T data;
    Date time;

    public ApiResult(int status, boolean success, String message, T data) {
        this.status = status;
        this.success = success;
        this.message = message;
        this.data = data;
        this.time = new Date();
    }

    public static <t> ApiResult<t> ok(){
        return new ApiResult(200,true,"register successful",null);
    }

    public static <t> ApiResult<t> ok(String message){
        return new ApiResult(200,true,message,null);
    }
    public static <t> ApiResult<t> ok(T data){
        return new ApiResult(200,true,"register successful",data);
    }
    public static <t> ApiResult<t> ok(String message,T data){
        return new ApiResult(200,true,message,data);
    }

    public static <t> ApiResult<t> create(){
        return new ApiResult(201,true,"register successful",null);
    }
    public static <t> ApiResult<t> create(String message){
        return new ApiResult(201,true,message,null);
    }
    public static <t> ApiResult<t> create(T data){
        return new ApiResult(201,true,"register successful",data);
    }
    public static <t> ApiResult<t> create(String message,T data){
        return new ApiResult(201,true,message,data);
    }

    public static <t> ApiResult<t> notFound(String msg) {
        return new ApiResult(404,false,msg,null);
    }
    public static <t> ApiResult<t> failedMsg(int code, String msg) {
        return new ApiResult(code,false,msg,null);
    }

}

</t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t></t>

创建一个exception包，再分别创建两个类。再创建一个自定义返回类ApiResult

//第一个异常类LoginException继承与RuntimeException类

import org.springframework.http.HttpStatus;

import static org.springframework.http.HttpStatus.UNAUTHORIZED;

public class LoginException extends RuntimeException{
    private Integer status = UNAUTHORIZED.value();

    public LoginException(String msg){
        super(msg);
    }

    public LoginException(HttpStatus status, String msg){
        super(msg);
        this.status = status.value();
    }
}

//第二个异常类: ExceptionAdvice

import com.example.securityreview.coomon.api.ApiResult;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.*;
import javax.security.auth.login.LoginException;

@RestControllerAdvice
public class ExceptionAdvice {

    private final static String EXCEPTION_MSG_KEY = "Exception message : ";

    @ResponseStatus(HttpStatus.UNAUTHORIZED)
    @ExceptionHandler({LoginException.class}) //这里就是写入有@Vaild注解的那个累
    public ApiResult loginException(LoginException e){ //LoginException就是第一个异常类
        return ApiResult.failedMsg(HttpStatus.UNAUTHORIZED.value(), e.getMessage()); //HttpStatus是Spring自带的状态封装枚举类(200,400,404,500,....)
    }

}

到此，后端的所有配置皆已完成

3) 前端获取消息并输出该消息

后端已经可以把消息封装在ApiResult自定义返回对象返回给前端，那么前端该怎么处理呢?

从图片可以看出, 当不符合验证条件时发送登录请求到后端，
则会先经过@Valid和类中的验证注解，如果不符合条件，
则会被ExceptionAdvice类中的loginException方法捕获到(这个过程会和第一个异常类LoginException进行配合)，
并通过自定义返回类ApiResult返回给前端,前端拿到数据后,进行输出

原创分享，有什么问题可以交流一下

Original: https://www.cnblogs.com/cococici/p/16413795.html
Author: 黄伟鸿
Title: SpringBoot+vue中@Valid表单验证并返回给前端