前后端数据校验

已于 2024-02-09 17:36:43 修改
阅读量1.7k 收藏 13
点赞数 13
文章标签： 数据校验
于 2024-02-03 12:03:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/usa_washington/article/details/136006150
版权

前端校验内容

前端开发中的必要校验，可以保证用户输入的数据的准确性、合法性和安全性。同时，这些校验也有助于提供良好的用户体验和防止不必要的错误提交到后端。
在这里插入图片描述

1、必填字段校验： 对于必填的字段，需确保用户输入了有效的数据。可以检查字段是否为空或仅包含空格等无效字符。

2、数据格式校验： 根据字段的预期格式，验证用户输入的数据是否符合要求。例如，对于邮箱字段，可以使用正则表达式验证邮箱格式的正确性。

3、数字范围校验： 对于数字类型的字段，确保其值在指定的范围内。例如，年龄字段应该在特定的年龄范围内。

4、字符串长度校验： 对于字符串类型的字段，验证其长度是否在允许的范围内。例如，密码字段的长度应该在一定的范围内。

5、数据合法性校验： 根据业务规则验证数据的合法性。例如，检查用户名是否已被注册，或者验证产品ID是否存在于产品列表中。

6、安全性校验： 防止潜在的安全漏洞，如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。通过对用户输入的数据进行转义或过滤，确保不会执行恶意脚本或受到伪造的请求。

7、表单验证： 对于表单提交，对整个表单进行验证，而不仅仅是单个字段的验证。确保所有必填字段都填写正确，并且数据符合预期的格式和要求。

8、用户友好的错误提示： 当用户输入无效数据时，展示清晰和有意义的错误提示信息，帮助用户理解并纠正错误。

后端校验内容

接口开发中的必要校验，可以保证接口传输的数据的准确性、合法性和安全性。这些校验有助于防止无效数据进入系统，确保接口的正常运行和处理有效和合法的数据。同时，它们也为调用方提供了清晰的错误信息和可靠的返回结果。
在这里插入图片描述
1、参数完整性校验： 确保接口所需的参数都被正确传递，并且没有缺失。对于必需的参数，如果缺失则返回错误提示。

2、参数格式校验： 根据接口定义，验证参数的格式是否符合预期要求。例如，对于日期参数，验证其是否符合指定的日期格式。

3、数据合法性校验： 根据业务规则验证传入的数据是否合法。例如，检查所传递的ID是否存在于数据库中，或者验证所传递的数据是否满足特定的业务逻辑要求。

4、数据范围校验： 对于数值型参数，确保其值在指定的范围内。例如，验证年龄参数是否在有效的年龄范围内。

5、权限验证： 对于需要特定权限才能访问的接口，进行权限验证是必要的。确保只有具有足够权限的用户或系统可以调用接口。

6、输入验证和安全性校验： 防止潜在的安全漏洞，如跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等。对于用户输入的数据，进行输入验证和数据过滤，避免执行恶意脚本或受到伪造请求的影响。

7、数据一致性校验： 在接口涉及多个数据对象之间存在关联关系时，进行数据一致性校验是必要的。确保相关数据之间的关联关系和依赖关系得到维护和满足。

8、返回结果校验： 验证接口返回的结果是否符合预期的格式和内容。确保返回的数据结构和字段与接口定义一致，并且符合预期的数据类型和值。

前端和接口双重校验的意义

在这里插入图片描述
用户体验： 前端数据完整性校验可以在用户输入数据时即时进行验证，提供即时反馈和错误提示，帮助用户更快地发现和纠正错误，提升用户体验。

减轻服务器压力： 前端数据完整性校验可以在数据发送到后端之前就进行校验，减轻后端服务器的负担。这可以防止无效或错误的数据被发送到服务器，减少不必要的网络流量和服务器资源消耗。

安全性保障： 后端数据完整性校验是最终的防线，用于确保数据的完整性和一致性。即使前端校验可能被绕过或篡改，后端校验可以提供最终的保障，避免恶意操作和数据破坏。

数据一致性： 后端数据完整性校验可以验证数据的正确性和一致性，确保符合业务规则和约束。这对于多个前端渠道或多个客户端同时访问后端数据的情况尤为重要，可以防止不符合规定的数据进入系统，保持数据的准确性和一致性。

SpringBoot参数校验

传统方式，一大堆if…else

private void verifyForm(SysMenuEntity menu){
	
	if(StringUtils.isBlank(menu.getName())){
		throw new RRException("菜单名称不能为空");
	}
	if(menu.getParentId() == null){
        throw new RRException("上级菜单不能为空");
    }

    //菜单
    if(menu.getType() == Constant.MenuType.MENU.getValue()){
        if(StringUtils.isBlank(menu.getUrl())){
            throw new RRException("菜单URL不能为空");
        }
    }

    //上级菜单类型
    int parentType = Constant.MenuType.CATALOG.getValue();
    if(menu.getParentId() != 0){
        SysMenuEntity parentMenu = sysMenuService.getById(menu.getParentId());
        parentType = parentMenu.getType();
    }

    //目录、菜单
    if(menu.getType() == Constant.MenuType.CATALOG.getValue() ||
       menu.getType() == Constant.MenuType.MENU.getValue()){
        if(parentType != Constant.MenuType.CATALOG.getValue()){
            throw new RRException("上级菜单只能为目录类型");
        }
        return ;
    }

    //按钮
    if(menu.getType() == Constant.MenuType.BUTTON.getValue()){
        if(parentType != Constant.MenuType.MENU.getValue()){
            throw new RRException("上级菜单只能为菜单类型");
        }
        return ;
    }
}

改进方式，先了解一些注解

javax.validation.constraints 包下，定义了一系列的约束( constraint )注解，共 22个：
在这里插入图片描述
大致可以分为以下几类：

1、空和非空检查

  • @NotBlank ：只能用于字符串不为 null ，并且字符串 #trim() 以后 length 要大于 0
  • @NotEmpty ：集合对象的元素不为 0 ，即集合不为空，也可以用于字符串不为 null
  • @NotNull ：不能为 null
  • @Null ：必须为 null

2、数值检查

  • @DecimalMax(value) ：被注释的元素必须是一个数字，其值必须小于等于指定的最大值
  • @DecimalMin(value) ：被注释的元素必须是一个数字，其值必须大于等于指定的最小值
  • @Digits(integer, fraction) ：被注释的元素必须是一个数字，其值必须在可接受的范围内
  • @Positive ：判断正数
  • @PositiveOrZero ：判断正数或 0
  • @Max(value) ：该字段的值只能小于或等于该值
  • @Min(value) ：该字段的值只能大于或等于该值。- @Negative ：判断负数
  • @NegativeOrZero ：判断负数或 0

3、Boolean 值检查

  • @AssertFalse ：被注释的元素必须为 true
  • @AssertTrue ：被注释的元素必须为 false

4、长度检查

  • @Size(max, min) ：检查该字段的 size 是否在 min 和 max 之间，可以是字符串、数组、集合、Map 等

5、日期检查

  • @Future ：被注释的元素必须是一个将来的日期
  • @FutureOrPresent ：判断日期是否是将来或现在日期
  • @Past ：检查该字段的日期是在过去
  • @PastOrPresent ：判断日期是否是过去或现在日期

6、其它检查

  • @Email ：被注释的元素必须是电子邮箱地址
  • @Pattern(value) ：被注释的元素必须符合指定的正则表达式

7、Hibernate Validator 附加的约束注解

org.hibernate.validator.constraints 包下，定义了一系列的约束( constraint )注解。如下：

  • @Range(min=, max=) ：被注释的元素必须在合适的范围内

  • @Length(min=, max=) ：被注释的字符串的大小必须在指定的范围内

  • @URL(protocol=,host=,port=,regexp=,flags=) ：被注释的字符串必须是一个有效的 URL

  • @SafeHtml ：判断提交的 HTML 是否安全。例如说，不能包含 javascript 脚本等等
    在这里插入图片描述
    8、 @Valid 和 @Validated

  • @Valid 注解，是 Bean Validation 所定义，可以添加在普通方法、构造方法、方法参数、方法返回、成员变量上，表示它们需要进行约束校验

  • @Validated 注解，是 Spring Validation 锁定义，可以添加在类、方法参数、普通方法上，表示它们需要进行约束校验。同时，@Validated 有 value 属性，支持分组校验。属性如下：

@Target({ElementType.TYPE, ElementType.METHOD, ElementType.PARAMETER})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface Validated {

    /**
  * Specify one or more validation groups to apply to the validation step
  * kicked off by this annotation.
  * <p>JSR-303 defines validation groups as custom annotations which an application declares
  * for the sole purpose of using them as type-safe group arguments, as implemented in
  * {@link org.springframework.validation.beanvalidation.SpringValidatorAdapter}.
  * <p>Other {@link org.springframework.validation.SmartValidator} implementations may
  * support class arguments in other ways as well.
  */
    Class<?>[] value() default {};

}

在这里插入图片描述
@Valid 有嵌套对象校验功能 例如说：如果不在 User.profile 属性上，添加 @Valid 注解，就会导致 UserProfile.nickname 属性，不会进行校验。

// User.java
public class User {

    private String id;

    @Valid
    private UserProfile profile;

}

// UserProfile.java
public class UserProfile {

    @NotBlank
    private String nickname;

}

总的来说，绝大多数场景下，我们使用 @Validated 注解即可。而在有嵌套校验的场景，我们使用 @Valid 注解添加到成员属性上。

一、引入依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>


    <groupId>com.ratel</groupId>
    <artifactId>java-validation</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>java-validation</name>
    <description>java validation action</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>


    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>


        <!--在一些高版本springboot中默认并不会引入这个依赖，需要手动引入-->
        <!--        <dependency>
            <groupId>org.hibernate.validator</groupId>
            <artifactId>hibernate-validator</artifactId>
            <scope>compile</scope>
        </dependency>-->

        <!-- 保证 Spring AOP 相关的依赖包 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
        </dependency>


        <!--lombok相关 方便开发-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <scope>provided</scope>
        </dependency>

        <!--knife4j接口文档 方便待会进行接口测试-->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>knife4j-spring-boot-starter</artifactId>
            <version>3.0.3</version>
        </dependency>

    </dependencies>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Spring Boot 体系中，也提供了 spring-boot-starter-validation 依赖
因为 spring-boot-starter-web 已经引入了 spring-boot-starter-validation ，而 spring-boot-starter-validation 中也引入了 hibernate-validator 依赖，所以无需重复引入。三者的依赖引入关系可见下图
在这里插入图片描述

二、创建基本的类

@Data
public class UserAddDTO{
	
	@NotEmpty(message = "登录账号不能为空")
	@Length(min = 5, max = 16, message = "账号长度为 5-16 位")
	@Pattern(regexp = "^[A-Za-z0-9]+$", message = "账号格式为数字以及字母")
	private String username;

	@NotEmpty(message = "密码不能为空")
    @Length(min = 4, max = 16, message = "密码长度为 4-16 位")
    private String password;
}

@RestController
@RequestMapping("/users")
@Validated //表示 UserController 是所有接口都需要进行参数校验
public class UserController{
	
	private Logger logger = LoggerFactory.getLogger(getClass());

	/**
		没有给 id 添加 @Valid 注解
		因为 UserController 使用了 @Validated 注解，那么 Spring Validation 就会使用 AOP 进行切面，进行参数校验。
		而该切面的拦截器，使用的是 MethodValidationInterceptor
		对于 #get(id) 方法，需要校验的参数 id ，是平铺开的，所以无需添加 @Valid 注解。
	
		对于 #get(id) 方法，在 MethodValidationInterceptor 拦截器中，校验到参数不正确，会抛出 ConstraintViolationException 异常。
	*/
	@GetMapping("/get")
    public UserAddDTO get(@RequestParam("id") @Min(value = 1L, message = "编号必须大于 0") Integer id) {
        logger.info("[get][id: {}]", id);
        UserAddDTO userAddDTO = new UserAddDTO();
        userAddDTO.setUsername("张三");
        userAddDTO.setPassword("123456");
        return userAddDTO;
    }

	/**
		给 addDTO 添加 @Valid 注解
		对于 #add(addDTO) 方法，需要校验的参数 addDTO ，
		实际相当于嵌套校验，要校验的参数的都在 addDTO 里面，所以需要添加 @Valid 
		（其实实测加@Validated也行，暂时不知道为啥 为了好区分就先用 @Valid 吧 ）注解。
	
		对于 #add(addDTO) 方法，因为 addDTO 是个 POJO 对象，所以会走 SpringMVC 的 DataBinder 机制，
		它会调用 DataBinder#validate(Object... validationHints) 方法，进行校验。在校验不通过时，会抛出 BindException 
		在 SpringMVC 中，默认使用 DefaultHandlerExceptionResolver 处理异常:
		对于 BindException 异常，处理成 400 的状态码。对于 ConstraintViolationException 异常，没有特殊处理，所以处理成 500 的状态码。
	*/
    @PostMapping("/add")
    public void add(@Valid @RequestBody UserAddDTO addDTO) {
        logger.info("[add][addDTO: {}]", addDTO);
    }
}

三、启动测试‘

启动程序，然后再浏览器里我们就可以进行输入: swagger访问地址：http://localhost:8080/doc.html#/home 打开swagger文档 就可以进行测试了：
在这里插入图片描述
首先我们访问 http://localhost:8080/users/get?id=-1 进行测试，查看返回结果，果然对我们的 id 进行校验。
在这里插入图片描述
接下来我们访问 http://localhost:8080/users/add 进行新增用户的校验：请求体我们写成：

{
  "password": "233",
  "username": "33"
}

返回结果如下：

{
  "timestamp": "2023-04-09T13:33:58.864+0000",
  "status": 400,
  "error": "Bad Request",
  "errors": [
    {
      "codes": [
        "Length.userAddDTO.password",
        "Length.password",
        "Length.java.lang.String",
        "Length"
      ],
      "arguments": [
        {
          "codes": [
            "userAddDTO.password",
            "password"
          ],
          "arguments": null,
          "defaultMessage": "password",
          "code": "password"
        },
        16,
        4
      ],
      "defaultMessage": "密码长度为 4-16 位",
      "objectName": "userAddDTO",
      "field": "password",
      "rejectedValue": "233",
      "bindingFailure": false,
      "code": "Length"
    },
    {
      "codes": [
        "Length.userAddDTO.username",
        "Length.username",
        "Length.java.lang.String",
        "Length"
      ],
      "arguments": [
        {
          "codes": [
            "userAddDTO.username",
            "username"
          ],
          "arguments": null,
          "defaultMessage": "username",
          "code": "username"
        },
        16,
        5
      ],
      "defaultMessage": "账号长度为 5-16 位",
      "objectName": "userAddDTO",
      "field": "username",
      "rejectedValue": "33",
      "bindingFailure": false,
      "code": "Length"
    }
  ],
  "message": "Validation failed for object='userAddDTO'. Error count: 2",
  "path": "/users/add"
}

返回结果的json串中的 errors 字段，参数错误明细数组。每一个数组元素，对应一个参数错误明细。这里，username 违背了 账号长度为 5-16 位规定。password违反了 密码长度为 4-16 位的规定。

返回结果示意图：
在这里插入图片描述

四、处理校验异常

①、校验不通过的枚举类

public enum ServiceExceptionEnum{
	
	// ========== 系统级别 ==========
    SUCCESS(0, "成功"),
    SYS_ERROR(2001001000, "服务端发生异常"),
    MISSING_REQUEST_PARAM_ERROR(2001001001, "参数缺失"),
    INVALID_REQUEST_PARAM_ERROR(2001001002, "请求参数不合法"),

    // ========== 用户模块 ==========
    USER_NOT_FOUND(1001002000, "用户不存在"),

    // ========== 订单模块 ==========

    // ========== 商品模块 ==========
    ;

	 /**
     * 错误码
     */
    private final int code;
    /**
     * 错误提示
     */
    private final String message;

    ServiceExceptionEnum(int code, String message) {
        this.code = code;
        this.message = message;
    }

    public int getCode() {
        return code;
    }

    public String getMessage() {
        return message;
    }

}

②、统一返回结果实体类

public class CommonResult<T> implements Serializable{
	
	public static Integer CODE_SUCCESS = 0;

    /**
     * 错误码
     */
    private Integer code;
    /**
     * 错误提示
     */
    private String message;
    /**
     * 返回数据
     */
    private T data;

    /**
     * 将传入的 result 对象，转换成另外一个泛型结果的对象
     *
     * 因为 A 方法返回的 CommonResult 对象，不满足调用其的 B 方法的返回，所以需要进行转换。
     *
     * @param result 传入的 result 对象
     * @param <T> 返回的泛型
     * @return 新的 CommonResult 对象
     */
    public static <T> CommonResult<T> error(CommonResult<?> result) {
        return error(result.getCode(), result.getMessage());
    }

    public static <T> CommonResult<T> error(Integer code, String message) {
        Assert.isTrue(!CODE_SUCCESS.equals(code), "code 必须是错误的！");
        CommonResult<T> result = new CommonResult<>();
        result.code = code;
        result.message = message;
        return result;
    }

    public static <T> CommonResult<T> success(T data) {
        CommonResult<T> result = new CommonResult<>();
        result.code = CODE_SUCCESS;
        result.data = data;
        result.message = "";
        return result;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    @JsonIgnore
    public boolean isSuccess() {
        return CODE_SUCCESS.equals(code);
    }

    @JsonIgnore
    public boolean isError() {
        return !isSuccess();
    }

    @Override
    public String toString() {
        return "CommonResult{" +
            "code=" + code +
            ", message='" + message + '\'' +
            ", data=" + data +
            '}';
    }
}

③、增加全局异常处理类 GlobalExceptionHandler

@ControllerAdvice(basePackages = "com.ratel.validation.cotroller")
public class GlobalExceptionHandler {

    private Logger logger = LoggerFactory.getLogger(getClass());

    /**
     * 处理 MissingServletRequestParameterException 异常
     *
     * SpringMVC 参数不正确
     */
    @ResponseBody
    @ExceptionHandler(value = MissingServletRequestParameterException.class)
    public CommonResult missingServletRequestParameterExceptionHandler(HttpServletRequest req, MissingServletRequestParameterException ex) {
        logger.error("[missingServletRequestParameterExceptionHandler]", ex);
        // 包装 CommonResult 结果
        return CommonResult.error(ServiceExceptionEnum.MISSING_REQUEST_PARAM_ERROR.getCode(),
                                  ServiceExceptionEnum.MISSING_REQUEST_PARAM_ERROR.getMessage());
    }

    @ResponseBody
    @ExceptionHandler(value = ConstraintViolationException.class)
    public CommonResult constraintViolationExceptionHandler(HttpServletRequest req, ConstraintViolationException ex) {
        logger.error("[constraintViolationExceptionHandler]", ex);
        // 拼接错误
        StringBuilder detailMessage = new StringBuilder();
        for (ConstraintViolation<?> constraintViolation : ex.getConstraintViolations()) {
            // 使用 ; 分隔多个错误
            if (detailMessage.length() > 0) {
                detailMessage.append(";");
            }
            // 拼接内容到其中
            detailMessage.append(constraintViolation.getMessage());
        }
        // 包装 CommonResult 结果
        return CommonResult.error(ServiceExceptionEnum.INVALID_REQUEST_PARAM_ERROR.getCode(),
                                  ServiceExceptionEnum.INVALID_REQUEST_PARAM_ERROR.getMessage() + ":" + detailMessage.toString());
    }

    @ResponseBody
    @ExceptionHandler(value = BindException.class)
    public CommonResult bindExceptionHandler(HttpServletRequest req, BindException ex) {
        logger.info("========进入了 bindException======");
        logger.error("[bindExceptionHandler]", ex);
        // 拼接错误
        StringBuilder detailMessage = new StringBuilder();
        for (ObjectError objectError : ex.getAllErrors()) {
            // 使用 ; 分隔多个错误
            if (detailMessage.length() > 0) {
                detailMessage.append(";");
            }
            // 拼接内容到其中
            detailMessage.append(objectError.getDefaultMessage());
        }
        // 包装 CommonResult 结果
        return CommonResult.error(ServiceExceptionEnum.INVALID_REQUEST_PARAM_ERROR.getCode(),
                                  ServiceExceptionEnum.INVALID_REQUEST_PARAM_ERROR.getMessage() + ":" + detailMessage.toString());
    }

    @ResponseBody
    @ExceptionHandler(value = MethodArgumentNotValidException.class)
    public CommonResult MethodArgumentNotValidExceptionHandler(HttpServletRequest req, MethodArgumentNotValidException ex) {
        logger.info("-----------------进入了 MethodArgumentNotValidException-----------------");
        logger.error("[MethodArgumentNotValidException]", ex);
        // 拼接错误
        StringBuilder detailMessage = new StringBuilder();
        for (ObjectError objectError : ex.getBindingResult().getAllErrors()) {
            // 使用 ; 分隔多个错误
            if (detailMessage.length() > 0) {
                detailMessage.append(";");
            }
            // 拼接内容到其中
            detailMessage.append(objectError.getDefaultMessage());
        }
        // 包装 CommonResult 结果
        return CommonResult.error(ServiceExceptionEnum.INVALID_REQUEST_PARAM_ERROR.getCode(),
                                  ServiceExceptionEnum.INVALID_REQUEST_PARAM_ERROR.getMessage() + ":" + detailMessage.toString());
    }


    /**
     * 处理其它 Exception 异常
     * @param req
     * @param e
     * @return
     */
    @ResponseBody
    @ExceptionHandler(value = Exception.class)
    public CommonResult exceptionHandler(HttpServletRequest req, Exception e) {
        // 记录异常日志
        logger.error("[exceptionHandler]", e);
        // 返回 ERROR CommonResult
        return CommonResult.error(ServiceExceptionEnum.SYS_ERROR.getCode(),
                                  ServiceExceptionEnum.SYS_ERROR.getMessage());
    }
}

④、测试

访问：http://localhost:8080/users/add 可以看到异常结果已经被拼接成一个字符串，相比之前清新 易懂了不少。
在这里插入图片描述
在这里插入图片描述

A尘埃
关注
  • 13
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
返回前端数据
blackball1998的博客
05-09 625
返回前端数据 当我们在处理前端请求时，我们不想返回一个视图，也不想返回一个静态资源，而是想要返回数据，这时候该怎么做呢？实际上这种情况会更加常见，因为在前后端分离的时代，往往不会将页面和静态资源放在后端项目中，后端只负责数据的处理 @ResponseBody 我们只需要在Controller类上添加一个@ResponseBody注解，既可以使类中所有的方法返回字符串数据，而不走视图映射 @Controller @ResponseBody public class MyController { @R
前端数据处理
weixin_44719702的博客
06-29 104
2.删除数组最后一位 3.将两个对象合并成一个 4.用=赋值后视图不更新 5.获取视图高度 6.删除对象的某个属性 7. filter(过滤空数据) 8.map 9.处理地址栏数据 二、时间处理dayjs 三、el-select绑定两个值 五、样式 1.选第一个孩子设置样式 2.动态绑定样式..................
前端校验和后端校验区别
weixin_38383877的博客
08-11 8893
前台验证数据格式 后台验证的是数据的正确性 当下流行的系统架构方案中，前端和后端都是分离开的。 目的：① 为了方便前端开发人员和后端开发人员可以同时开发；② 前后端分离也使得前后端的代码可以分开进行管理，方便了各自的版本迭代及控制。 1.1前端校验 就是通过前端技术，在浏览器（B/S模式中的B（browser）端）上面可以进行简单的数据检查。 如果前端不进行任何的数据检查，直接把数据发送给后端，让后端来进行检查的话，那么就会带来这样的问题： 太浪费网络，对于网站本身来说完全就是在浪费流..
前端常用的正则校验
wwyxjjz的博客
12-13 1538
例如element常用的必填校验： 固话和手机号 pattern: /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/ 手机号 pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/ 身份证 pattern:/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|1...
接口测试｜前端交互测试和后端逻辑测试
2301_80119579的博客
05-17 562
在交互过程中，针对一个接口也会有多个场景，前端会根据不同的入参来调 用不同的场景，根据不同响应结果， 进行响应数据的改写，来获得不同响应，验证不同响应下前端的展示效果。接口测试相对容易实现自动化，且相对 UI 自动化也比较稳定，可以减少人 工回归测试人力成本与时间，缩短测试周期，是支持后端快速发版需求，达到低 成本高收益的根源。可以使用抓包工具来进行交互层面测试，查看每个交互功能，对应的接口是否正确 （包含请求头、请求参数、响应以及其他约束项），确保前端按照后端的要求正确地进行了调用。
前后端联调统一校验规则
qq_63196986的博客
05-22 1044
前后端联调 1.前端传递到后端的参数进行参数校验，到底是在Controller还是在Service校验 2.Spring提供的支持的SpringBoot提供了JSR-303的参数校验规范 3.实现统一校验规则 4.分组校验规则
前端数据校验Rules
m0_52802317的博客
12-15 926
前端数据校验.
IP端口解析校验:
Smile_Gently的博客
06-16 254
1、判断是否在1-65535之间、判断是否符合端口规范，解析开始、结束。例如： 12,12-23（现这样，后期优化） // 校验端口 export const portGather = (data) => { if (data != '') { // 匹配非数字、非英文横线、非英文逗号的字符 const pattern = /[^0-9,-]/g; if (!pattern.test(data)) { // 判断数据 开头，末尾 只能是数字 c
php留言板 前后端数据校验 有安全限制
12-17
php留言板 前端和后端都做了数据校验；数据库语句有安全限制；
前后端加密CryptoJS包
06-13
在前后端分离的架构中，数据传输的安全性是至关重要的。由于前端代码通常暴露给用户，因此不希望敏感数据（如用户密码、个人信息等）在客户端与服务器间以明文形式传输。为解决这一问题，我们可以采用加密技术，将...
基于Swagger的前后端分离开发实践
02-24
前后端分离开发已经是很流行的一个开发模式。前端开发不需要部署后端语言的环境，后端开发也不需要前端写好的任何程序。后端只管暴露各种API接口供给前端进行数据的增、删、改、查，不负责生成HTML页面，这种方式...
校验算法及数据转换小工具包含源码
11-27
通过对传输前后的数据进行异或，可以计算出一个校验和，若接收方计算出的校验和与发送方的一致，则说明数据在传输过程中没有错误。这种方法简单快速，但不能定位具体错误位置。 LRC（Longitudinal Redundancy Check...
spingboot+vue前后端分离项目人员管理系统
09-25
3. **数据校验**：前端进行表单验证，提升用户体验，后端同样进行数据校验，确保数据安全。 4. **错误处理**：前后端都需要设置合适的错误处理机制，以便在出现问题时能够及时反馈并进行处理。 5. **Mock Server**：...
jQuery.validate验证功能--有道笔记整理
want_water_fish的博客
11-19 504
Query Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。 该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery
前端数据校验
与或
06-04 2804
数据校验效果图代码注意事项 当前端做一些表单时，通常涉及到一些数据校验，比如字符长度，是否非空，两次输入数据是否一致。 这些功能完全可以通过脚本实现。 效果图 废话不多说，直接上代码。 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据校验</title> <!-- 数据校验部分-->
vue必填校验
xyfwang的博客
12-20 718
现在我们需要规定rules里边的required参数，因为我们需要在里边规定必填校验的规则。接着我们会在data规定必填校验数据。必填校验则是上面的函数代码。以上是弹窗框必填校验。
前端参数校验和后端参数校验
B★R★S的博客
07-01 2943
之前一直心存疑惑，对于同一表单的参数，是前端校验好还是后端。今天翻看了网上一些文章，发现这不是一个技术性问题，是我概念没弄清。先抛出结论： 前端校验是辅助，后端校验是核心。后端校验必不可少。 前端校验 前端校验主要是针对用户输入时，一些基础的错误进行提示，提升用户体验。比如：参数为空，密码邮箱的组合规则等。归根到底是对所有请求的一种过滤操作，如果前端都校验不通过当然就没必要请求后端了，这样可以减轻服务器负担。 但是：对于某些不走寻常路的用户，前端校验其实形同虚设。 后端校验 后端校验是针对整个系
前端必填项校验
xchnba2107的博客
06-18 2051
<link rel="stylesheet" type="text/css" href="${ctx}/static/framework/plugins/jquery-plugins/validate/jquery.validate.min.css"> <script type="text/javascript" src="${ctx}/static/framework/p...
前端开发中常用的格式校验
前端-卡布达的博客
09-24 1174
前端开发中常用的格式校验
若依框架前后端数据返回
最新发布
05-24
若依框架是一套基于Spring Boot + Vue.js的前后端分离开发平台，前后端数据返回的流程如下： 1.前端发送请求到后端，后端接收请求并进行处理； 2.后端处理完请求后，将数据封装成JSON格式并返回给前端； 3.前端通过Vue.js框架进行数据渲染展示。 在实际开发中，若依框架通常采用RESTful风格进行前后端数据交互，前后端通过JSON格式进行数据传输。在前后端交互时，需要注意接口的设计和参数的传递，同时也需要对异常情况进行处理。如果需要在前端页面进行数据的增删改查操作，还需要对数据的格式和校验进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值