SSM整合项目（校验）

文章目录

- 1.前端校验
- - - 1.需求分析
    - 2.HomeView.vue的数据池中添加校验规则
    - [3.HomeView.vue 绑定校验规则! $image-20240311213428771$ (https://img-blog.csdnimg.cn/img_convert/7770bfa16814a0efd4eb818c9869a5bd.png)](#3.HomeView.vue 绑定校验规则)
    - 4.验证是否生效
    - 5.如果验证不通过，阻止用户提交表单
    - - [1.el-form加上 ref="form"](#1.el-form加上 ref="form")
      - [2.HomeView.vue 修改save方法](#2.HomeView.vue 修改save方法)
      - 3.结果展示
- 2.后端校验
- - - 1.需求分析
    - 2.思路分析
    - [3.引入依赖 JSR303](#3.引入依赖 JSR303)
    - 4.在Furn的属性上添加注解校验
    - [5.在Controller中进行校验 FurnController.java](#5.在Controller中进行校验 FurnController.java)
    - 6.postman测试
    - 7.后端校验，整合前端

1.前端校验

1.需求分析

2.HomeView.vue的数据池中添加校验规则

js 复制代码

      //定义校验规则
      rules: {
        name: [
          {required: true, message: "请输入家居名", trigger: "blur"}
        ],
        maker: [
          {required: true, message: "请输入制造商名", trigger: "blur"}
        ],
        price: [
          {required: true, message: "请输入价格", trigger: "blur"},
          {pattern: /^([1-9])\d*|0(\.\d+)?$/, message: "请输入数字", trigger: "blur"}
        ],
        sales: [
          {required: true, message: "请输入销量", trigger: "blur"},
          {pattern: /^([1-9])\d*|0(\.\d+)?$/, message: "请输入数字", trigger: "blur"}
        ],
        stock: [
          {required: true, message: "请输入库存", trigger: "blur"},
          {pattern: /^([1-9])\d*|0(\.\d+)?$/, message: "请输入数字", trigger: "blur"}
        ]
      }

3.HomeView.vue 绑定校验规则

4.验证是否生效

5.如果验证不通过，阻止用户提交表单

1.el-form加上 ref="form"

2.HomeView.vue 修改save方法

js 复制代码

        //判断表单校验是否通过
        this.$refs['form'].validate(valid => {
          //如果校验不通过则弹出提示框
          if (!valid) {
            this.$message(
                {
                  type: "error",
                  message: "校验失败！"
                }
            )
            return false; //放弃提交表单
          } else {
            //如果form没有id则说明这个提示框是新增的提示框
            //发送post请求并携带form这个js对象的数据，会以json格式进行发送
            request.post("/api/save", this.form).then(
                res => {
                  console.log("res=", res);
                  this.dialogVisible = false;
                  //调用list方法，刷新家居信息
                  this.list();
                }
            )
          }
        })

3.结果展示

2.后端校验

1.需求分析

2.思路分析

3.引入依赖 JSR303

xml 复制代码

    <dependency>
      <groupId>org.hibernate</groupId>
      <artifactId>hibernate-validator</artifactId>
      <version>6.1.0.Final</version>
    </dependency>

4.在Furn的属性上添加注解校验

java 复制代码

    @NotEmpty(message = "请输入家居名")
    private String name;

    @NotEmpty(message = "请输入制造厂商")
    private String maker;

    @NotNull(message = "请输入数字")
    @Range(min = 0, message = "价格不能小于0")
    private BigDecimal price;

    @NotNull(message = "请输入数字")
    @Range(min = 0, message = "销量不能小于0")
    private Integer sales;
    @NotNull(message = "请输入数字")
    @Range(min = 0, message = "库存不能小于0")
    private Integer stock;

5.在Controller中进行校验 FurnController.java

java 复制代码

    @ResponseBody //将结果转换成json字符串返回
    @PostMapping("/save")
    public Msg save(@Validated @RequestBody Furn furn, Errors errors) { //将接受到的json字符串转换成Furn对象
        //用来存储错误信息的map
        Map<String, Object> errorMap = new HashMap<>();
        //获取所有的error
        List<FieldError> fieldErrors = errors.getFieldErrors();
        //遍历错误并放到map中
        for (FieldError fieldError : fieldErrors) {
            errorMap.put(fieldError.getField(), fieldError.getDefaultMessage());
        }
        //判断map是否为空，为空则表示没有错误
        if (errorMap.isEmpty()) {
            furnService.save(furn);
            return Msg.success();
            //如果没有报错，则返回成功的Msg对象
        } else {
            //将信息放错误的Msg中并返回
            return Msg.fail().add("errMsg", errorMap);
        }

    }