使用JSR303后台数据校验，以及前台校验，前台增删改查代码

最新推荐文章于 2022-05-26 21:06:37 发布

侯侯侯先生

最新推荐文章于 2022-05-26 21:06:37 发布

阅读量1.6k

点赞数

分类专栏：谷粒商城-心得笔记

本文链接：https://blog.csdn.net/weixin_44142032/article/details/108713643

版权

谷粒商城-心得笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

前台的增删改查代码

brand.vue 前端代码

<template>
  <div class="mod-config">
    <!-- 提交表单，横向排列 -->
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button
          v-if="isAuth('product:brand:save')"
          type="primary"
          @click="addOrUpdateHandle()"
        >新增</el-button>
        <el-button
          v-if="isAuth('product:brand:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
        >批量删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="brandId" header-align="center" align="center" label="品牌id"></el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="品牌名"></el-table-column>
      <el-table-column prop="logo" header-align="center" align="center" label="品牌logo地址">
        <template slot-scope="scope">
          <!-- <el-image style="width: 100px; height: 80px" :src="scope.row.logo" fit="scale-down"></el-image> -->
          <img :src="scope.row.logo" style="width: 100px; height: 80px">
        </template>
      </el-table-column>
      <el-table-column prop="descript" header-align="center" align=" center" label="介绍"></el-table-column>
      <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态">
        <template slot-scope="scope">
          <!-- 当使用开关按钮，后台传入的showStatus字段1或0 将不起作用了，不论1，或0，开关都是关闭状态false。
          所以要根据开关的状态（true/false），与数据库中showStatus字段1或者0 进行关联。
           {{scope.row.showStatus}}都是false
          -->
          <el-switch
            v-model="scope.row.showStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="updateBrandStatus(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="firstLetter" header-align="center" align="center" label="检索首字母"></el-table-column>
      <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.brandId)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.brandId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

    <!-- 这样写规范，表名组件名字为components: {AddOrUpdate,},内定义的-->
    <!-- <AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></AddOrUpdate> -->
  </div>
</template>

<script>
import AddOrUpdate from "./brand-add-or-update";
export default {
  data() {
    return {
      dataForm: {
        key: "",
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false, // 加载缓存圆圈。true显示
      dataListSelections: [],
      addOrUpdateVisible: false,
    };
  },
  //加载组件 key：value形式
  components: {
    AddOrUpdate,
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/product/brand/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },

    //开启开关执行的状态
    updateBrandStatus(data) {
      //开关开启：返回true。开关关闭：返回false
      console.log("状态：", data);

      let { brandId, showStatus } = data;
      //开始发送请求
      this.$http({
        url: this.$http.adornUrl("/product/brand/update"),
        method: "post",
        data: this.$http.adornData({ brandId, showStatus }, false),
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "状态修改成功",
        });
      });
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },

    // 多选，当选择多个选项的时候，每选一个，触发该事件。传入该行所有的数据
    selectionChangeHandle(val) {
      // console.log("我选中你了：",val);
      this.dataListSelections = val;
    },

    // 新增 / 修改
    addOrUpdateHandle(id) {
      // console.log("我的id：",id);
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },

    // 删除，包括删除一项，和选择多项进行批量删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.brandId;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/product/brand/delete"),
          method: "post",
          data: this.$http.adornData(ids, false),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              // 删除成功之后的一个回调函数
              onClose: () => {
                this.getDataList();
              },
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
  },
};
</script>

brand-add-or-update.vue代码，是弹框，增加和修改的时候的弹框，也集成了文件上传的功能

<template>
  <el-dialog
    :title="!dataForm.brandId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="140px"
    >
      <el-form-item label="品牌名" prop="name">
        <el-input v-model="dataForm.name" placeholder="品牌名"></el-input>
      </el-form-item>
      <el-form-item label="品牌logo地址" prop="logo">
        <!-- <el-input v-model="dataForm.logo" placeholder="品牌logo地址"></el-input> -->
        <!-- 使用导入进来的组件 -->
        <singleUpload v-model="dataForm.logo" placeholder="品牌logo地址"></singleUpload>
      </el-form-item>
      <el-form-item label="介绍" prop="descript">
        <el-input v-model="dataForm.descript" placeholder="介绍"></el-input>
      </el-form-item>
      <el-form-item label="显示状态" prop="showStatus">
        <el-switch
          v-model="dataForm.showStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="检索首字母" prop="firstLetter">
        <el-input v-model="dataForm.firstLetter" placeholder="检索首字母"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="dataForm.sort" placeholder="排序"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import singleUpload from "@/components/upload/singleUpload"
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        brandId: 0,
        name: "",
        logo: "",
        descript: "",
        showStatus: "",
        firstLetter: "",
        sort: "",
      },
      dataRule: {
        name: [{ required: true, message: "品牌名不能为空", trigger: "blur" }],
        logo: [
          { required: true, message: "品牌logo地址不能为空", trigger: "blur" },
        ],
        descript: [
          { required: true, message: "介绍不能为空", trigger: "blur" },
        ],
        showStatus: [
          {
            required: true,
            message: "显示状态[0-不显示；1-显示]不能为空",
            trigger: "blur",
          },
        ],
        //自定义校验规则
        firstLetter: [
          { validator: (rule, value, callback) => {
            if(value == ""){
              callback(new Error('检索首字母不能为空'));
            }else if(!/^[A-Za-z]$/.test(value)){
              callback(new Error('检索首字母只能是a-z或者A-Z之间的一个字母'));
            } else{
              callback(); //检索成功
            }
          }, trigger: "blur" },
        ],
        sort: [{validator: (rule, value, callback) => {
           if(value == ""){
              callback(new Error('排序不能为空'));
            }else if(!Number.isInteger(value) || value < 0){
              callback(new Error('请输入大于等于0的数字'));
            } else{
              callback(); 
            }
        }, trigger: "blur" }],
      },
    };
  },
  methods: {
    init(id) {
      this.dataForm.brandId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        //组件自带的resetFields()对所有的表单项进行重置，将其值重置为初始值并移除校验结果
        this.$refs["dataForm"].resetFields();

        //如果是修改，有对用的id，获取该id的信息。  
        if (this.dataForm.brandId) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/brand/info/${this.dataForm.brandId}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.name = data.brand.name;
              this.dataForm.logo = data.brand.logo;
              this.dataForm.descript = data.brand.descript;
              this.dataForm.showStatus = data.brand.showStatus;
              this.dataForm.firstLetter = data.brand.firstLetter;
              this.dataForm.sort = data.brand.sort;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      //validate()对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，
      //并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
      //Function(callback: Function(boolean, object)
      this.$refs["dataForm"].validate((valid) => {
        //校验成功valid为true
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/brand/${!this.dataForm.brandId ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              brandId: this.dataForm.brandId || undefined,
              name: this.dataForm.name,
              logo: this.dataForm.logo,
              descript: this.dataForm.descript,
              showStatus: this.dataForm.showStatus,
              firstLetter: this.dataForm.firstLetter,
              sort: this.dataForm.sort,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  //子组件使用.$emit()方法去触发父组件自定义的事件
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
  components: {
    singleUpload
  }

};
</script>

当前台在表单提交得时候进行校验，后台也需要再进行一次校验，不然安全性不高

前台自定义校验参考element ui组件

后台使用JSR303校验

常用的校验注解
https://blog.csdn.net/inthat/article/details/108843826

1）、给Bean添加校验注解:javax.validation.constraints包下，并定义自己的message提示

/**
 * 品牌
 */
@Data
@TableName("pms_brand")
public class BrandEntity implements Serializable {
	private static final long serialVersionUID = 1L;

	/**
	 * 品牌id
	 */
//	@NotNull(message = "修改必须指定品牌id",groups = {UpdateGroup.class})
//	@Null(message = "新增不能指定id",groups = {AddGroup.class})
	@TableId
	private Long brandId;
	/**
	 * 品牌名
	 */
	@NotBlank(message = "品牌名必须提交")
	private String name;
	/**
	 * 品牌logo地址
	 */
//	@NotBlank(groups = {AddGroup.class})
//	@URL(message = "logo必须是一个合法的url地址",groups={AddGroup.class,UpdateGroup.class})
	private String logo;
	/**
	 * 介绍
	 */
	private String descript;
	/**
	 * 显示状态[0-不显示；1-显示]
	 */
//	@Pattern()
//	@NotNull(groups = {AddGroup.class, UpdateStatusGroup.class})
//  	@ListValue(vals={0,1},groups = {AddGroup.class, UpdateStatusGroup.class})
	private Integer showStatus;
	/**
	 * 检索首字母
	 */
//	@NotEmpty(groups={AddGroup.class})
//	@Pattern(regexp="^[a-zA-Z]$",message = "检索首字母必须是一个字母",groups={AddGroup.class,UpdateGroup.class})
	private String firstLetter;
	/**
	 * 排序
//	 */
//	@NotNull(groups={AddGroup.class})
//	@Min(value = 0,message = "排序必须大于等于0",groups={AddGroup.class,UpdateGroup.class})
	private Integer sort;

}

2)、开启校验功能@Valid

 效果：校验错误以后会有默认的响应；

 只有在springmvc访问的具体的那个requestmapping，添加上@Valid注解，才会对相应的Bean进行校验，否则无效。

 /**
     * 保存
     * @Valid 注解开启校验
     * 给校验的bean后紧跟一个BindingResult，就可以获取到校验的结果
     */
    @RequestMapping("/save")
    public R save(@Valid @RequestBody BrandEntity brand){
		brandService.save(brand);
        return R.ok();
    }

3）、给校验的bean后紧跟一个BindingResult，就可以获取到校验的结果

 /**
     * 保存
     * @Valid 注解开启校验
     * 给校验的bean后紧跟一个BindingResult，就可以获取到校验的结果
     * 将校验信息按照规定的格式进行数据前台的返回
     */
    @RequestMapping("/save")
    public R save(@Valid @RequestBody BrandEntity brand, BindingResult bindingResult){

        if (bindingResult.hasErrors()){
            Map<String, String> map = new HashMap<>();
            //检验有错误，获取错误信息,(对每一个进行校验字段的属性进行校验后封装的返回的数据)
            bindingResult.getFieldErrors().forEach((item) -> {
                //获取错误的提示消息
                String defaultMessage = item.getDefaultMessage();
                //获取错误属性的名字
                String field = item.getField();
                map.put(field,defaultMessage);
            });

            return R.error(400,"提交的数据不合法").put("data",map);
        }else {
            brandService.save(brand);

        }


        return R.ok();
    }

4）、分组校验（多场景的复杂校验）

    1)、	@NotBlank(message = "品牌名必须提交",groups = {AddGroup.class,UpdateGroup.class})

     给校验注解标注什么情况需要进行校验
 	==AddGroup是一个接口，作用只是为了区分组，创建完成后什么都不用写。==

 */
 这是javaBean
	@NotNull(message = "修改必须指定品牌id",groups = {UpdateGroup.class})
	@Null(message = "新增不能指定id",groups = {AddGroup.class})
	@TableId
	private Long brandId;

    2）、@Validated({AddGroup.class}) ，可以区分哪个组开启注解

 /**
     * 保存
     * @Valid 注解开启校验，原生的注解
     * 给校验的bean后紧跟一个BindingResult，就可以获取到校验的结果
     * 将校验信息按照规定的格式进行数据前台的返回
     * @Validated spring提供的可以指定分组的注解
     * 在指定分组后，所有注解都要具体指定那个分组，否则不起作用
     */
    @RequestMapping("/save")
    public R save(@Validated(value = AddGroup.class) @RequestBody BrandEntity brand){

    3)、==默认没有指定分组的校验注解@NotBlank，在分组校验情况@Validated({AddGroup.class})下不生效，只会在@Validated生效；==

5）、自定义校验

 1）、编写一个自定义的校验注解

 2）、编写一个自定义的校验器 ConstraintValidator

 3）、关联自定义的校验器和自定义的校验注解
  *  @Documented
  * @Constraint(validatedBy = { ListValueConstraintValidator.class【==可以指定多个不同的校验器，适配不同类型的校验==】 })
  * @Target({ METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER, TYPE_USE })
  * @Retention(RUNTIME)
  * public @interface ListValue {

编写自定义注解ListValue

package com.atguigu.common.valid;


import javax.validation.Constraint;
import javax.validation.Payload;
import java.lang.annotation.Documented;
import java.lang.annotation.Retention;
import java.lang.annotation.Target;

import static java.lang.annotation.ElementType.*;

import static java.lang.annotation.RetentionPolicy.RUNTIME;


@Documented
@Constraint(validatedBy = {ListValueConstraintValidator.class })  //指定校验器
@Target({ METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER,TYPE_USE })
@Retention(RUNTIME)
public @interface ListValue {
    //这三个变量是必须的
    String message() default "{javax.validation.constraints.NotBlank.message}";

    Class<?>[] groups() default { };

    Class<? extends Payload>[] payload() default { };


    //自定义的value
    int[] vals() default { };
}

编写一个自定义的校验器 ConstraintValidator

package com.atguigu.common.valid;

import lombok.val;

import javax.validation.ConstraintValidator;
import javax.validation.ConstraintValidatorContext;
import java.lang.annotation.Annotation;
import java.util.HashSet;
import java.util.Set;


/**
 * 自定义校验器ConstraintValidator<注解名字,vals类型>
 */
public class ListValueConstraintValidator implements ConstraintValidator<ListValue,Integer> {

    private Set<Integer> set = new HashSet();

    //初始化方法，可以获取vals的值
    public void initialize(ListValue constraintAnnotation) {

        //获取注解vals的值
        int[] vals = constraintAnnotation.vals();
        if (vals != null && vals.length > 0){
            for (int i = 0; i < vals.length; i++) {
                set.add(vals[i]);
            }
        }
    }

    /**
     *
     * @param value 需要校验的字段，前端传过来的值
     * @param context
     * @return
     */
    @Override
    public boolean isValid(Integer value, ConstraintValidatorContext context) {
        //如果包含，符合，返回true
        return set.contains(value);
    }

}

javaBean使用自定义注解

 	@ListValue(vals={0,1},groups = {AddGroup.class, UpdateStatusGroup.class})
	private Integer showStatus;

统一的异常处理

@ControllerAdvice
1）、编写异常处理类，使用@ControllerAdvice。
2）、使用@ExceptionHandler标注方法可以处理的异常。

编写自定义的异常类，加上@ControllerAdvice注解，可以被容器识别，并定义识别那个包下面的异常
在类中遇见异常直接抛出去就可以了。

代码实例

/**
 * 统一的异常处理类,必须是一个组件才能被spring容器识别
 *  处理哪个包下面的异常
 * @ControllerAdvice (basePackages = "com.atguigu.gulimall.product.controller")
 *  1）、编写异常处理类，使用@ControllerAdvice。
 *  2）、使用@ExceptionHandler标注方法可以处理的异常。
 */
@Slf4j
@ResponseBody
@ControllerAdvice(basePackages = "com.atguigu.gulimall.product.controller")
public class GulimallException {


    //使用@ExceptionHandler注解表明可以处理哪个异常
    @ExceptionHandler(value = MethodArgumentNotValidException.class)
    public R handleVaildException(MethodArgumentNotValidException e){
        log.error("数据校验出现问题{}, 异常类型{}",e.getMessage(),e.getClass());

        BindingResult bindingResult = e.getBindingResult();
        Map<String, String> errorMap = new HashMap<String,String>();
        bindingResult.getFieldErrors().forEach((item) -> {
            //发生错误的属性名称
            String field = item.getField();
            //校验错误消息
            String defaultMessage = item.getDefaultMessage();
            errorMap.put(field,defaultMessage);
        });
        return R.error(BizCodeEnume.VAILD_EXCEPTION.getCode(),BizCodeEnume.VAILD_EXCEPTION.getMsg()).put("data",errorMap);
    }

    //使用@ExceptionHandler注解表明可以处理哪个异常
    @ExceptionHandler(value = Throwable.class)
    public R handleException(Throwable e){
        log.error("数据校验出现问题{}, 异常类型{}",e.getMessage(),e.getClass());

        return R.error(BizCodeEnume.UNKNOW_EXCEPTION.getCode(),BizCodeEnume.UNKNOW_EXCEPTION.getMsg());
    }


}

定义枚举

/**
 * 返回前端的业务状态码
 */
public enum BizCodeEnume {
    //定义枚举的变量，用逗号分隔

    UNKNOW_EXCEPTION(10000,"系统未知异常"),
    VAILD_EXCEPTION(10001,"参数格式校验失败");

    private int code;
    private String msg;


    BizCodeEnume(int code, String msg){
        this.code = code;
        this.msg = msg;
    }

    public int getCode() {
        return code;
    }

    public String getMsg() {
        return msg;
    }


}