【今日成果】：

//使用阿里云OSS服務(wù)：

//使用v-if如果地址沒有就不顯示 ， 如果地址錯(cuò)誤圖片就顯示不出來；

【快速回顧】：

任何數(shù)據(jù)的刪除都不要使用物理上的刪除，應(yīng)當(dāng)使用邏輯上的刪除！！！
《顯示狀態(tài)控制》——可以通過《el-swtich》控件來完成。
logo圖片需要保存到服務(wù)器上，數(shù)據(jù)庫中只是存儲(chǔ)了圖片的地址?！獀sftpd 、 FastDFS ； 或者使用阿里云對(duì)象存儲(chǔ)。

【details】:

【阿里云OSS】:

我們?cè)趯W(xué)習(xí)的時(shí)候，沒有那么高的訪問頻率 ， 所以可以選擇《低頻訪問存儲(chǔ)》；

【依賴】：

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

【YML配置】

spring:cloud:alicloud:oss:endpoint: oss-cn-hangzhou.aliyuncs.comaccess-key: LTAI5~~~~~~~~~~~~~~~~~~~secret-key: otlPc-------------------

[ 文件上傳方式 ]:

【單體】：

瀏覽器 -》 商品服務(wù) -》 服務(wù)器

//如果上傳的文件比較大 ， 對(duì)正常的業(yè)務(wù)是有影響的。這個(gè)時(shí)候就需要進(jìn)行拆分。

【分布1】：

瀏覽器 ： （1）–商品服務(wù)
（2）–服務(wù)器 //在新增品牌的時(shí)候，立即就上傳到云服務(wù)器上，然后會(huì)返回一個(gè)圖片地址，再把這個(gè)地址返回給后端系統(tǒng)。
//這種方式的缺點(diǎn)是在客戶端需要獲取AccessKey和SecuretKey，這樣將相關(guān)的核心數(shù)據(jù)暴露在前端不安全。

【分布2】：

先去后端請(qǐng)求防偽簽名 ， 拿著簽名去文件存儲(chǔ)服務(wù)器請(qǐng)求。

【新模塊】：

【Oss后端代碼】：

package com.msb.mall.third.controller;import com.aliyun.oss.OSS;
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 com.msb.common.utils.R;
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 java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.logging.SimpleFormatter;@RestController
public class OSSController {@Autowiredprivate 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 getOssPolicy(){String host = "https://" + bucket + "." + endpoint; // host的格式為 bucketname.endpoint// callbackUrl為上傳回調(diào)服務(wù)器的URL，請(qǐng)將下面的IP和Port配置為您自己的真實(shí)信息。String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());String dir = format+"/"; // 用戶上傳文件時(shí)指定的前綴。// 創(chuàng)建OSSClient實(shí)例。//OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);Map<String, String> respMap = null;try {long expireTime = 30;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);// PostObject請(qǐng)求最大可支持的文件大小為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);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());} finally {ossClient.shutdown();}return R.ok().put("data",respMap);}
}

【前端表單校驗(yàn)】：

        dataRule: {name: [{ required: true, message: '品牌名不能為空', trigger: 'blur' }],logo: [{ required: true, message: '品牌logo地址不能為空', trigger: 'blur' }],descript: [{ required: true, message: '介紹不能為空', trigger: 'blur' }],showStatus: [{ required: true, message: '顯示狀態(tài)[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 == "" && value != 0){callback(new Error("檢索字母不能為空"))}else if(!Number.isInteger(value) || value < 0){callback(new Error("排序必須是數(shù)字且不能小于0"))}else{callback()}}, trigger: 'blur' }]}

[ 詭異BUG ]：

明明校驗(yàn)規(guī)則數(shù)組寫的沒有問題，但還是出BUG ————原因是 v-model.number 沒有加 ， 明明是學(xué)過的知識(shí)，但是第一時(shí)間就是沒有反應(yīng)過來；