尚硅谷 2020 谷粒商城项目 笔记(六) 产品品牌 图片上传 数据校验

目录

1、图片上传

1.1、开启阿里云对象存储 OSS

1.2、测试 OSS

1.3、创建第三方服务项目，并且返回签名。

1.4、使用服务端签名后直传方式上传文件

1.4.1、创建阿里云子用户访问阿里云 OSS 对象

1.4.2、为用户添加管理 OSS 的权限

1.5、OSS 开启跨域访问

2、前端校验

2.1、绑定校验规则

 2.2、编写校验规则

3、JSR303 校验

3.1、采用分组校验

---

1、图片上传

1.1、开启阿里云对象存储 OSS

按步骤开启即可

1.2、测试 OSS

pom.xml

	com.alibaba.cloud
	spring-cloud-starter-alicloud-oss

阿里云官网 Demo

https://help.aliyun.com/document_detail/84781.html?spm=a2c4g.11186623.6.793.60e259aahqPvDX

@Autowired
OSSClient ossClient;

@Test
public void testUpload() throws FileNotFoundException {
//        // Endpoint以杭州为例，其它Region请按实际情况填写。
//        String endpoint = "";
//        // 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。
//        String accessKeyId = "";
//        String accessKeySecret = "";
//
//        // 创建OSSClient实例。
//        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

	// 上传文件流。
	InputStream inputStream = new FileInputStream("D:\\aaa.jpg");

	ossClient.putObject("gulimall-xerxes", "aaa.jpg", inputStream);

	// 关闭OSSClient。
	ossClient.shutdown();

	System.out.println("上传完成...");
}

1.3、创建第三方服务项目，并且返回签名。

参考：

https://github.com/alibaba/spring-cloud-alibaba/blob/master/spring-cloud-alibaba-examples/oss-example/readme-zh.md

@RestController
public class OssController {

    @Autowired
    OSS ossClient;

    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endpoint;
    @Value("${spring.cloud.alicloud.oss.bucket}")
    private String bucket;

    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;


    @RequestMapping("/oss/policy")
    public R policy() {
        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
//        String callbackUrl = "http://88.88.88.88:8888";
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format + "/"; // 用户上传文件时指定的前缀。

        Map respMap = null;
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            respMap = new LinkedHashMap();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            // respMap.put("expire", formatISO8601Date(expiration));
        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        }
        return R.ok().put("data", respMap);
    }
}

1.4、使用服务端签名后直传方式上传文件

1.4.1、创建阿里云子用户访问阿里云 OSS 对象

1.4.2、为用户添加管理 OSS 的权限

1.5、OSS 开启跨域访问

2、前端校验

2.1、绑定校验规则

 :rules="dataRule"

 2.2、编写校验规则

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"
	  }
	]
  }
};

 brand-add-or-update.vue

3、JSR303 校验

3.1、采用分组校验

BrandController.java

    /**
     * 修改
     */
    @RequestMapping("/update")
//    @RequiresPermissions("product:brand:update")
    public R update(@Validated(value = {UpdateGroup.class}) @RequestBody BrandEntity brand) {
        brandService.updateById(brand);

        return R.ok();
    }

    /**
     * 修改状态
     */
    @RequestMapping("/update/status")
//    @RequiresPermissions("product:brand:update")
    public R updateStatus(@Validated(value = {UpdateStatusGroup.class}) @RequestBody BrandEntity brand) {
        brandService.updateById(brand);

        return R.ok();
    }

BrandEntity.java

@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 = "品牌名必须提交", groups = {AddGroup.class, UpdateGroup.class})
    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;

}