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

小鱼儿 2024-04-07 14:01 80阅读 0赞

#### 目录 ####

*  一、OSS 获取服务端签名
 *  二、前后端联调测试上传
 *  三、测试
 *  四、前端表单校验

--------------------

## 一、OSS 获取服务端签名 ##

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

![在这里插入图片描述][48647174eafe47a98e67e46e9bbe3cd2.png]  
![在这里插入图片描述][a1f4a752fd9d455f928648f29fd48d00.png]

创建完成之后添加对于 gulimall-common 的依赖，同时将 OSS 服务调出至此模块  
![在这里插入图片描述][a5be56ec96664a9f9dd9d48b23fe96e4.png]  
![在这里插入图片描述][87fe0e60fa6e4711bf2186c93aff9c81.png]

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

![在这里插入图片描述][c8ad8989a1434f598304c54eac8a9b13.png]

在配置中心新建配置文件，把 OSS 的相关配置配置进去  
![在这里插入图片描述][c5260b9de0d74f7db081b6f4acb29e8e.png]

使配置文件生效

![在这里插入图片描述][1cc15dac9a764a8a99f26155863e5403.png]

其他配置：

![在这里插入图片描述][3cd00f526cb044c7a4b58208c41ce77b.png]

排除 mybatis 的相关配置

![在这里插入图片描述][859d8f684e594ff29c4dad5c32f13c73.png]  
获取 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;
        }
    
    
    }

配置此服务的网关

![在这里插入图片描述][a12066f25b7f4facbce820a729facebc.png]

测试服务：

![在这里插入图片描述][25e6446d0bac457bb01e490b9196a5e3.png]

## 二、前后端联调测试上传 ##

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

![在这里插入图片描述][35ec595baabf47dea3ecdcd1ed859385.png]  
组件相关更改  
![在这里插入图片描述][f3f25559e03849788e24dc24c97d6d6c.png]

导入单文件上传模块

![在这里插入图片描述][705b22827e3b4548939a7ddb5f06897c.png]  
将 logo 文本框替换成文件上传按钮

![在这里插入图片描述][9c52971d3fcc4e468e684832f5452ba9.png]  
将响应数据替换成 R 类型，便于前端接收  
![在这里插入图片描述][8bcdbe294d19403f99c0eadb4607cbeb.png]  
然后我们要开启阿里云 OSS的跨域访问

![在这里插入图片描述][9a17bc5830a54ee088ca0f5f24b9f6ee.png]  
![在这里插入图片描述][a48722d0e1d64638912a0d71edca71be.png]  
**注意：** 报 403 其实是前端的一处地方写错了。。。。

这里原本是 accessid，要改成 accessId  
![在这里插入图片描述][6730c3d1b96e4cc9b8792d0f37716ea1.png]

## 三、测试 ##

![在这里插入图片描述][0d013e587287481cbd1eec2de033a456.png]

## 四、前端表单校验 ##

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

![在这里插入图片描述][8177aee457a0465b83da1f9403057aaa.png]  
修改这里即可

![在这里插入图片描述][0d28473e634b459a98cf82ba1fee36fa.png]

效果如图：  
![在这里插入图片描述][5772e8ecc3314cb69f66033faecbbb9d.png]  
自定义校验规则：使用校验器 validator

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

![在这里插入图片描述][e6701d61e8414727acd497ac3c01c9eb.png]  
代码如下：

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

[48647174eafe47a98e67e46e9bbe3cd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/eb800b7ab9834f33b675d26b310ce836.png
[a1f4a752fd9d455f928648f29fd48d00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ae992c0c18cd4013b8a6a1146166cd7b.png
[a5be56ec96664a9f9dd9d48b23fe96e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3f93157a792643e3967d3906d43cbd21.png
[87fe0e60fa6e4711bf2186c93aff9c81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b9bdb165af1c45298d8912208265ce38.png
[c8ad8989a1434f598304c54eac8a9b13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d0c9e3212fc14f85b736b1367edf1fad.png
[c5260b9de0d74f7db081b6f4acb29e8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0ef1fa3e2fa642a6b37b79ebc238f621.png
[1cc15dac9a764a8a99f26155863e5403.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ed91f9e471d04906b314861b076415b9.png
[3cd00f526cb044c7a4b58208c41ce77b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d11593c8f5174a91903c545fce12bbc4.png
[859d8f684e594ff29c4dad5c32f13c73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e05b2e74a6ed45b683b0ceaee9b9105a.png
[a12066f25b7f4facbce820a729facebc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5e44073eb5144c58898ba7ad804b60b8.png
[25e6446d0bac457bb01e490b9196a5e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/cad98255f4464a4eaf1ab06a373fbaa0.png
[35ec595baabf47dea3ecdcd1ed859385.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b7139cb9a9d647e8a9159ae715528bc0.png
[f3f25559e03849788e24dc24c97d6d6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c74527a096b945f1aabd158edd0499dc.png
[705b22827e3b4548939a7ddb5f06897c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3221a9f6208b435192dab8cd75c57dd8.png
[9c52971d3fcc4e468e684832f5452ba9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/68eaa6e3ab4a458fa8b26be0f017f086.png
[8bcdbe294d19403f99c0eadb4607cbeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f51456a14cda4a2995c8628fee484cc4.png
[9a17bc5830a54ee088ca0f5f24b9f6ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/03fe76abcc3d4eb2b2b1b94457b404a8.png
[a48722d0e1d64638912a0d71edca71be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1a5f9969a277455194966535f2193377.png
[6730c3d1b96e4cc9b8792d0f37716ea1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7647a897f0ae46019c1384d854dcb299.png
[0d013e587287481cbd1eec2de033a456.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2d75d94107ec425fad16b71ec4bcbc3e.png
[8177aee457a0465b83da1f9403057aaa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2dfe025f34994b0eb7e9a69d95606151.png
[0d28473e634b459a98cf82ba1fee36fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2a30d61921e844d087eef8acda6e2059.png
[5772e8ecc3314cb69f66033faecbbb9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b68cf191fbcc4b2f85a497c6655f3f7d.png
[e6701d61e8414727acd497ac3c01c9eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/eecbbe9535524093b498902b75e12fc6.png