第十七章第六节：添加品牌--修改品牌图片显示细节以及表单提交校验
品牌保存请求：/product/brand/save
请求参数：
{
"descript": "oppo",
"firstLetter": "b",
"logo": "https://onlinemall2021.oss-cn-beijing.aliyuncs.com/2021-06-15/ef4cb417-aa70-4f2e-80eb-6bcf17861c6f_11a.png",
"name": "oppo",
"showStatus": 1,
"sort": 1,
"t": 1623741377108
}
响应数据示例：
{
"msg": "success",
"code": 0
}
操作数据库表：pms_brand
1、添加和修改品牌数据时指定状态回显的值
默认会传递true和false 数据库保存的是0和1
src\views\modules\product\brand-add-or-update.vue
2、解决新增品牌回显logo地址不显示图片
src\views\modules\product\brand.vue
<el-table-column prop="logo" header-align="center" align="center" label="品牌logo地址">
<!-- 自定义显示内容：图片 -->
<template slot-scope="scope">
<img :src="scope.row.logo" style="width:100px;height:80px" />
</template>
</el-table-column>
效果预览
3、添加品牌vue页面表单校验
表单上绑定:rules="dataRule" ，然后在data()里面定义校验规则，规则分为内置校验和自定义校验
表单校验参考：https://element.eleme.cn/#/zh-CN/component/form
dataRule: {
//内置校验
//name：表示哪个表单属性；
//required：true 表示字段不能为空,
//message：表示提示的信息
//trigger: "blur":失去焦点时触发
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",
},
],
//自定义校验：
//validator：value为输入的值，callback为返回的error信息
//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",
},
],
},
效果展示
4、添加品牌java后端校验
JSR303校验规则如下：
【一】空检查
@Null 验证对象是否为null
@NotNull 验证对象是否不为null, 无法查检长度为0的字符串
@NotBlank 检查约束字符串是不是Null还有被Trim的长度是否大于0,只对字符串,且会去掉前后空格.
@NotEmpty 检查约束元素是否为NULL或者是EMPTY.
【二】Booelan检查
@AssertTrue 验证 Boolean 对象是否为 true
@AssertFalse 验证 Boolean 对象是否为 false
【三】长度检查
@Size(min=, max=) 验证对象（Array,Collection,Map,String）长度是否在给定的范围之内
@Length(min=, max=) Validates that the annotated string is between min and max included.
【四】日期检查
@Past 验证 Date 和 Calendar 对象是否在当前时间之前
@Future 验证 Date 和 Calendar 对象是否在当前时间之后
@Pattern 验证 String 对象是否符合正则表达式的规则
【五】数值检查，建议使用在Stirng,Integer类型，不建议使用在int类型上
@Min 验证 Number 和 String 对象是否大等于指定的值
@Max 验证 Number 和 String 对象是否小等于指定的值
@DecimalMax 被标注的值必须不大于约束中指定的最大值. 这个约束的参数是一个通过BigDecimal定义的最大值的字符串表示.小数存在精度
@DecimalMin 被标注的值必须不小于约束中指定的最小值. 这个约束的参数是一个通过BigDecimal定义的最小值的字符串表示.小数存在精度
@Digits 验证 Number 和 String 的构成是否合法
@Digits(integer=,fraction=) 验证字符串是否是符合指定格式的数字，interger指定整数精度，fraction指定小数精度。
@Range(min=, max=) 检查数字是否介于min和max之间.
@Range(min=10000,max=50000,message="range.bean.wage")
private BigDecimal wage;
【六】其他检查
@Valid 递归的对关联对象进行校验, 如果关联对象是个集合或者数组,那么对其中的元素进行递归校验,如果是一个map,则对其中的值部分进行校验.(是否进行递归验证)
@CreditCardNumber信用卡验证
@Email 验证是否是邮件地址，如果为null,不进行验证，算通过验证。
@ScriptAssert(lang= ,script=, alias=)
@URL(protocol=,host=, port=,regexp=, flags=)
给品牌实体类相关字段增加校验规则
com.applesnt.onlinemall.product.entity.BrandEntity
package com.applesnt.onlinemall.product.entity;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import java.io.Serializable;
import lombok.Data;
import org.hibernate.validator.constraints.Range;
import org.hibernate.validator.constraints.URL;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Pattern;
/**
* 品牌
*
* @author menghaibin
* @email applesnt@163.com
* @date 2021-05-27 09:26:38
*/
@Data
@TableName("pms_brand")
public class BrandEntity implements Serializable {
private static final long serialVersionUID = 1L;
/**
* 品牌id
*/
@TableId
private Long brandId;
/**
* 品牌名:判断不能为空 也不能是一个空字符
*/
@NotBlank(message="品牌不能为空")
private String name;
/**
* 品牌logo地址：判断必须是一个url地址
*/
@URL(message = "品牌必须是一个url地址")
private String logo;
/**
* 介绍：判断不能为null
*/
@NotNull(message="介绍不能为空")
private String descript;
/**
* 显示状态[0-不显示；1-显示]
*/
private Integer showStatus;
/**
* 检索首字母：正则表达式 判断必须是一个英文字母
*/
@NotBlank(message = "检索首字母不能为空")
@Pattern(regexp = "/^[a-zA-Z]$/",message = "检索首字母必须是a-z或者A-Z")
private String firstLetter;
/**
* 排序
*/
@NotNull(message = "排序不能为空")
@Range(min = 0,message = "必须是一个大于等于0的整数")
private Integer sort;
}
品牌的保存方法进行校验拦截
com.applesnt.onlinemall.product.controller.BrandController
/**
* 品牌信息保存
* @Valid：实体类开启校验
* BindingResult：错误消息体
*/
@RequestMapping("/save")
public R save(@Valid @RequestBody BrandEntity brand, BindingResult result){
if (result.hasErrors()){
Map<String,String> map = new HashMap<>();
result.getFieldErrors().forEach((item)->{
/*获取有异常的字段名*/
System.out.println(item.getField());
/*获取有异常的消息体*/
System.out.println(item.getDefaultMessage());
/*把异常消息放到map中*/
map.put(item.getField(),item.getDefaultMessage());
});
return R.error(400,"提交的数据不合法").put("data",map);
}else{
brandService.save(brand);
return R.ok();
}
}
浙公网安备 33010602011771号