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.结果展示
相关推荐
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
天天进步20155 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html