谷粒商城 (十七) --------- 商品服务 API 品牌管理 ③ OSS 前后端联调

---

一、OSS 获取服务端签名

我们后期还有可能调用发送短信的 API等，因此我们在项目中新建一个专门实现第三方服务的 module

创建完成之后添加对于 gulimall-common 的依赖，同时将 OSS 服务调出至此模块

然后将此模块注册到注册中心

在配置中心新建配置文件，把 OSS 的相关配置配置进去

使配置文件生效

其他配置：

排除 mybatis 的相关配置

获取 web 端签名的相关代码

package com.fancy.gulimall.thirdparty.controller;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;

@RestController
public class OssController {
    
    @Resource
    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 Map<String, String> policy() {
        
        // 填写Bucket名称，例如examplebucket。
        String bucket = "gulimall-hello--fancy";
        // 填写Host地址，格式为https://bucketname.endpoint。
        String host = "https://" + bucket + "." +  "endpoint";
        // 设置上传回调URL，即回调服务器地址，用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后，把文件上传信息通过此回调URL发送给应用服务器。
//        String callbackUrl = "https://192.168.0.0:8888";
        // 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。
        // 目录以日期进行命名
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format + "/";

        // 创建ossClient实例。

        Map<String, String> 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<String, String>();
            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 respMap;
    }


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

配置此服务的网关

测试服务：

二、前后端联调测试上传

将课件中的代码复制到组件里

组件相关更改

导入单文件上传模块

将 logo 文本框替换成文件上传按钮

将响应数据替换成 R 类型，便于前端接收

然后我们要开启阿里云 OSS的跨域访问

注意： 报 403 其实是前端的一处地方写错了。。。。

这里原本是 accessid，要改成 accessId

三、测试

四、前端表单校验

我们发现新增之后 logo 地址显示的是链接地址，这里我们要求自定义显示

修改这里即可

效果如图：

自定义校验规则：使用校验器 validator

我们来修改检查首字母以及排序校验的校验规则

代码如下：

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",
  },
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28