1.菜單分級顯示問題

1.問題引出

1.蘋果燈，放到節能燈下面也就是id大于127

2.查看菜單，并沒有出現蘋果燈

3.放到燈具下面id=42，就可以顯示

2.問題分析和解決

1.判斷可能出現問題的位置

由于前端是直接調用了樹形控件，展示了一下數據，所以應該是后端返回的數據的問題，則出現問題的位置應該是遞歸返回樹形菜單數據的時候

2.找到遞歸返回樹形菜單數據的位置

3.這里出現問題的原因是，使用等號來比較了包裝類的數值，修改為equals即可

4.關于Long類型的機制

1.編寫測試用例

package io.renren;/*** Description:** @Author sun* @Create 2024/4/13 13:16* @Version 1.0*/
public class T1 {public static void main(String[] args) {Long num1 = 128l;Long num2 = 128l;System.out.println(num2 == num1);}
}

2.結果

3.debug 分析

• 如果包裝類的值在-128 到 127之間，直接返回int類型，但是如果不在這個范圍內就會返回一個Long類型
• 此時使用等號比較的就是兩個引用的地址了，由于都是new的，所以肯定不同

5.測試

1.此時將蘋果燈的id設置成652

2.成功顯示

2.文件存儲解決方案

1.文件存儲方案分析

2.OSS在微服務架構位置

3.上傳方式

1.普通上傳方式

2.服務端簽名后直傳

4.創建Bucket

1.進入對象存儲控制臺

https://oss.console.aliyun.com/overview

2.創建Bucket

3.填寫配置信息

4.查看Bucket

1.文件列表查看文件

2.如果想要訪問文件就使用url

5.使用原生SDK上傳文件到Bucket

1.找到OSS的SDK參考文檔

https://help.aliyun.com/zh/oss/developer-reference/java/?spm=a2c4g.11186623.0.0.35d25b0fLIE7J7

2.sunliving-commodity 導入依賴這里選擇3.5.0版本

        <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.5.0</version></dependency>

3.編寫一個TestConroller

package com.sun.sunliving.commodity.controller;import com.sun.common.utils.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;/*** Description:** @Author sun* @Create 2024/4/13 14:40* @Version 1.0*/
@RestController
@Slf4j
public class TestConroller {// 測試 aliyun-sdk-oss的使用// 編寫方法上傳文件到bucket@RequestMapping("/test")public R test() {return null;}
}

4.找到上傳文件代碼并粘貼到TestConroller，然后引包，拋出異常

5.回到控制臺找到指定信息

1.Endpoint

2.找到AccessKey管理

3.選擇開始使用子用戶的AccessKey

4.創建用戶

5.填寫信息

6.驗證一下

7.復制一份并保留，AccessKey Secret 以后不會再出現

8.選擇授權 -> 新增授權

9.為剛才的子用戶授予權限

10.查看子用戶信息

https://ram.console.aliyun.com/permissions

6.將上一步找到的三個信息填到代碼中并指定其余信息

1.Endpoint（前面需要加https://）

https://oss-cn-beijing.aliyuncs.com

2.設置環境變量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET

echo %OSS_ACCESS_KEY_ID%
echo %OSS_ACCESS_KEY_SECRET%
可以查看win環境變量是否生效

3.bucketName

4.填寫兩個文件路徑

7.測試

1.啟動 sunliving-commodity 模塊

2.瀏覽器訪問 http://localhost:9091/test 發現500了，是環境變量未讀取成功

3.第一次配置需要重啟電腦后再次訪問

4.查看阿里云，上傳成功了！

8.注意事項

文件名可能會重復，可以根據時間來生成目錄和文件名，之前寫過

6.使用SpringCloudAlibabaOSS上傳文件到Bucket

1.進入官網

https://github.com/alibaba/spring-cloud-alibaba/blob/2022.x/README-zh.md

2.選擇OSS的demo

3.引入依賴（跟官網不一樣）

        <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alicloud-oss</artifactId><version>2.1.0.RELEASE</version></dependency>

4.application.yml 配置信息

5.編寫代碼

@RestController
@Slf4j
public class TestConroller {// 第二個測試@Resourceprivate OSS ossClient;@RequestMapping("/test2")public R test2() {// 上傳文件// 填寫Bucket名稱，例如examplebucket。String bucketName = "sunliving";// 填寫Object完整路徑，完整路徑中不能包含Bucket名稱，例如exampledir/exampleobject.txt。String objectName = "testdir/test2.jpg";// 填寫本地文件的完整路徑，例如D:\\localpath\\examplefile.txt。String filePath= "C:\\Users\\86156\\Desktop\\images\\3.25.png";PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, new File(filePath));ossClient.putObject(putObjectRequest);ossClient.shutdown();return R.ok();}
}

6.測試

1.瀏覽器訪問 http://localhost:9091/test2

2.上傳成功

7.服務端簽名后直傳（正片開始）

1.官方文檔

https://help.aliyun.com/zh/oss/use-cases/obtain-signature-information-from-the-server-and-upload-data-to-oss?spm=a2c4g.11186623.0.0.518d5d03pHGK3i

https://help.aliyun.com/zh/oss/use-cases/java-1?spm=a2c4g.11186623.0.0.c14f5d03xW8RIq

2.創建sunliving-service模塊

1.創建maven模塊

2.查看父子pom.xml

3.參考sunliving-commodity來配置pom.xml

    <!-- 添加描述信息 --><description>sun(家居生活)-OSS服務</description><!-- 導入SpringBoot父工程 --><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.8.RELEASE</version><relativePath/> <!-- 當parent的groupId沒有指向父工程時就需要加 --></parent><properties><java.version>1.8</java.version><!-- SpringCloud版本 2020.0.5--><spring-cloud.version>2020.0.5</spring-cloud.version><!-- 解決java: -source 1.5 中不支持 diamond 運算符 問題 --><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target></properties><dependencies><!-- 阿里云對象存儲依賴 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alicloud-oss</artifactId><version>2.1.0.RELEASE</version></dependency><!-- SpringBoot web模塊 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- SpringBoot test模塊 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!-- 公共模塊 --><dependency><groupId>com.sun.sunliving</groupId><artifactId>sunliving-common</artifactId><version>1.0-SNAPSHOT</version><!-- 排除mybatis-plus-boot-starter, 因為不使用，就不會配置application.yml的mybatis-plus的部分，不排除會報錯 --><exclusions><exclusion><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId></exclusion></exclusions></dependency></dependencies><!-- maven打包常規配置 --><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>

4.配置application.yml 填寫對象存儲所需信息

server:port: 7070
spring:cloud:alicloud:oss:endpoint: oss-cn-beijing.aliyuncs.combucket: sunlivingaccess-key: *******secret-key: *******

5.編寫啟動類com/sun/sunliving/service/OssServiceApplication.java 啟動測試

package com.sun.sunliving.service;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;/*** Description:** @Author sun* @Create 2024/4/14 10:40* @Version 1.0*/
@SpringBootApplication
public class OssServiceApplication {public static void main(String[] args) {SpringApplication.run(OssServiceApplication.class, args);}
}

6.目前文件目錄

7.參考官方文檔編寫 com/sun/sunliving/service/controller/OssServiceController.java

1.官方文檔

2.OssServiceController 簽名直傳服務,返回一個簽名

package com.sun.sunliving.service.controller;import com.aliyun.oss.OSS;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.sun.common.utils.R;
import org.codehaus.jettison.json.JSONObject;
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;/*** Description: 簽名直傳服務** @Author sun* @Create 2024/4/14 10:45* @Version 1.0*/
@RestController
public class OssServiceController {// 注入OSS對象@Resourceprivate OSS ossClient;// 從配置文件中獲取accessId@Value("${spring.cloud.alicloud.access-key}")private String accessId;// 從配置文件中獲取endpoint@Value("${spring.cloud.alicloud.oss.endpoint}")private String endpoint;// 從配置文件中獲取bucket@Value("${spring.cloud.alicloud.oss.bucket}")private String bucket;@RequestMapping("/oss/policy")public R policy() {try {// host的格式為 http:// + bucket + . + endpointString host = "https://" + bucket + "." + endpoint;// 根據當前日期來存放文件String dir = new SimpleDateFormat("yyyy-MM-dd").format(new Date()) + "/";long expireTime = 30; // 默認30秒過期long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);// PostObject請求最大可支持的文件大小為5 GB，即CONTENT_LENGTH_RANGE為5*1024*1024*1024。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);// 返回的信息Map<String, String> 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));JSONObject jasonCallback = new JSONObject();// jasonCallback.put("callbackUrl", callbackUrl);jasonCallback.put("callbackBody","filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");jasonCallback.put("callbackBodyType", "application/x-www-form-urlencoded");String base64CallbackBody = BinaryUtil.toBase64String(jasonCallback.toString().getBytes());respMap.put("callback", base64CallbackBody);return R.ok().put("data", respMap);} catch (Exception e) {System.out.println(e.getMessage());return R.error();} finally {ossClient.shutdown();}}
}

3.測試

8.通過前端上傳圖片到OSS

1.將上傳文件工具類放到 src/components下

2.policy.js 向簽名直傳服務發送請求，獲取簽名（部署的時候注意修改）

3.singleUpload.vue 就是一個上傳文件的組件，修改action

4.啟動前后端項目測試

5.src/views/modules/commodity/brand-add-or-update.vue 整合上傳文件的控件

1.引入導出上傳文件的控件

2.使用控件

3.查看效果

4.上傳出現跨域問題

6.上傳文件跨域解決

1.上傳文件之前通過瀏覽器向后端發送請求，獲取簽名

• 首先調用beforeUpload方法

• 然后調用policy方法，就是policy.js的方法

• policy.js的方法通過瀏覽器向后端發送請求獲取簽名，此時出現跨域

2.從renren-fast模塊找到io/renren/config/CorsConfig.java的配置文件，放到后端項目即可解決第一個跨域

3.重啟后端，再次測試，還是有跨域問題

4.第二個跨域問題分析

從瀏覽器報錯中可以看到這次是向oos發送請求，進行保存文件的，也是滿足跨域條件

5.在阿里云OSS解決跨域

網址：https://oss.console.aliyun.com/bucket/oss-cn-beijing/sunliving/data-security/cors

6.再次測試，成功！

7.使用前端工具類進行文件上傳步驟梳理

1.保證后端傳遞的簽名json對象使用data命名

2.修改 policy.js 的url為后端返回簽名的接口

3.修改 el-upload 標簽的action為 http:// + bucket + endpoint

4.兩個跨域問題

1. 前端向后端簽名接口發送請求
2. 前端向OSS發送請求存儲圖片

9.品牌管理列表顯示logo圖片

1.目前插入數據，顯示的是url

1.示意圖

2.通過訪問這個url可以下載圖片

2.使用插槽機制顯示圖片

        <!-- 使用插槽機制來顯示圖片 --><template slot-scope="scope"><img:src="scope.row.logo"style="width: 80px;"></template>

3.結果展示