SSM整合项目(校验)

文章目录

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);
        }

    }
6.postman测试
7.后端校验,整合前端
1.数据池中添加信息,存储错误信息
2.将后端返回的信息放到数据池中
3.单向绑定,取出数据展示
4.放行前端校验进行测试
5.结果展示
相关推荐
牧羊人_myr12 分钟前
Ajax 技术详解
前端
浩男孩21 分钟前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学25 分钟前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空36 分钟前
重学React —— React事件机制 vs 浏览器事件机制
前端
程序定小飞1 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
一小池勺1 小时前
CommonJS
前端·面试
孙牛牛1 小时前
实战分享:一招解决嵌套依赖版本失控问题,以 undici 为例
前端
用户52709648744901 小时前
Git 最佳实践
前端
星秀日1 小时前
JavaWeb--Ajax
前端·javascript·ajax