一、靜態資源服務與動態資源服務的區別

首先動靜分離非前后端分離，關于兩者的介紹如下：

• 動靜分離：動態資源(jsp、ftl)與靜態資源(js、img、css)分開
• 前后端分離：接口與視圖分開獨立開發部署

二、為什么靜態資源需要實現CDN內容加速

在一個網站中，請求是比較占寬帶資源的。

其主要加載內容為靜態資源，如： css、js、img

我們知道，一個1兆帶寬服務器 = 128kb/s，如果存在一個 512/kb 的靜態資源需要請求 4s 左右，而動態資源(json)占帶寬很小(幾十B)，幾乎可以忽略不計。

既然帶寬影響網站訪問速度，那就加帶寬好了？

但是！帶寬價格不是貴的一點點…

所以市場上出現了一些靜態資源服務器平臺（對象文件存儲） 。

比如七牛云、阿里云（oss）、騰訊云(內置CDN內容分發)。

什么是CDN內容分發？

CDN內容分發，就是將靜態資源服務器會部署全國各個服務器節點，用戶訪問的時候，遵循就近原則。比如你的所在地在濟南，那么你在訪問資源文件時，會分配給你距離濟南最近的CDN網點。

三、七牛云創建靜態資源存儲空間

官方地址：https://developer.qiniu.com/

注冊之后就可以去創建對象存儲空間了，詳細步驟建議看官方文檔。

創建好空間后需要綁定一個自己的域名，如果不綁定則使用默認提供的域名，提供的域名有默認的使用時長：

如下是我的存儲空間域名綁定截圖：

如下是我之前涂涂影院存放的一些靜態資源：

四、動靜分離架構系統缺點

使用CDN內容分發確實提高了網站的訪問速度，但是動靜分離架構模式有什么缺點呢？

跨域問題

比如域名訪問的是：www.sscai.club

而靜態資源訪問的則是：cdn.sscai.club

如何解決跨域問題？

nginx轉發

將 www.sscai.club 轉發到 cdn.sscai.club

五、代碼中實現七牛云文件上傳

引入pom依賴

<!--?七牛云SDK?-->
<dependency>
????<groupId>com.qiniu</groupId>
????<artifactId>qiniu-java-sdk</artifactId>
????<version>[7.2.0,?7.2.99]</version>
</dependency>

主要代碼：

@RequestMapping(value?=?"/file",?method?=?RequestMethod.POST)
@ApiOperation(value?=?"文件上傳")
public?Result<Object>?upload(
????@RequestParam(required?=?false)?MultipartFile?file,
????@RequestParam(required?=?false)?String?base64,
????HttpServletRequest?request)?{

????//?判斷上傳類型?*/
????if(StrUtil.isNotBlank(base64)){
????????//?base64上傳?*/
????????file?=?Base64DecodeMultipartFile.base64Convert(base64);
????}
????String?result?=?"";
????String?fKey?=?renamePic(file.getOriginalFilename());
????File?f?=?new?File();
????try?{
????????//?獲取文件流
????????InputStream?inputStream?=?file.getInputStream();

????????/*?上傳至第三方云服務——七牛云?*/
????????result?=?qiniuInputStreamUpload(inputStream,?fKey);
????????f.setLocation(CommonConstant.OSS_QINIU);

????????/*?保存數據信息至數據庫?*/
????????f.setName(file.getOriginalFilename());
????????f.setSize(file.getSize());
????????f.setType(file.getContentType());
????????f.setFKey(fKey);
????????f.setUrl(result);
????????fileService.save(f);
????}?catch?(Exception?e)?{
????????log.error(e.toString());
????????return?new?ResultUtil<Object>().setErrorMsg(e.toString());
????}
????if(used.equals(SettingConstant.LOCAL_OSS)){
????????OssSetting?os?=?fileUtil.getOssSetting();
????????result?=?os.getHttp()?+?os.getEndpoint()?+?"/"?+?f.getId();
????}
????return?new?ResultUtil<Object>().setData(result);
}

public?static?String?renamePic(String?fileName)?{
????String?extName?=?fileName.substring(fileName.lastIndexOf("."));
????return?UUID.randomUUID().toString().replace("-",?"")?+?extName;
}


/**
?*?文件流上傳
?*?@param?inputStream
?*?@param?key??文件名
?*?@return
?*/
public?String?qiniuInputStreamUpload(InputStream?inputStream,?String?key)?{

????OssSetting?os?=?getOssSetting();
????Auth?auth?=?Auth.create(os.getAccessKey(),?os.getSecretKey());
????String?upToken?=?auth.uploadToken(os.getBucket());
????try?{
????????Response?response?=?getUploadManager(getConfiguration(os.getZone())).put(inputStream,?key,?upToken,?null,?null);
????????/*?解析上傳成功的結果?*/
????????DefaultPutRet?putRet?=?new?Gson().fromJson(response.bodyString(),?DefaultPutRet.class);
????????return?os.getHttp()?+?os.getEndpoint()?+?"/"?+?putRet.key;
????}?catch?(QiniuException?ex)?{
????????Response?r?=?ex.response;
????????throw?new?XbootException("上傳文件出錯，請檢查七牛云配置，"?+?r.toString());
????}
}


@Data
public?class?OssSetting?implements?Serializable{

????@ApiModelProperty(value?=?"服務商")
????private?String?serviceName;

????@ApiModelProperty(value?=?"ak")
????private?String?accessKey;

????@ApiModelProperty(value?=?"sk")
????private?String?secretKey;

????@ApiModelProperty(value?=?"endpoint域名")
????private?String?endpoint;

????@ApiModelProperty(value?=?"bucket空間")
????private?String?bucket;

????@ApiModelProperty(value?=?"http")
????private?String?http;

????@ApiModelProperty(value?=?"zone存儲區域")
????private?Integer?zone;

????@ApiModelProperty(value?=?"bucket存儲區域")
????private?String?bucketRegion;

????@ApiModelProperty(value?=?"本地存儲路徑")
????private?String?filePath;

????@ApiModelProperty(value?=?"是否改變secrectKey")
????private?Boolean?changed;
}

Base64轉為MultipartFile工具類：

/**
?*?base64轉為multipartFile工具類
?*?@author?nikou
?*/
public?class?Base64DecodeMultipartFile?implements?MultipartFile?{

????private?final?byte[]?imgContent;
????private?final?String?header;

????public?Base64DecodeMultipartFile(byte[]?imgContent,?String?header)?{
????????this.imgContent?=?imgContent;
????????this.header?=?header.split(";")[0];?
????}

????@Override
????public?String?getName()?{
????????return?System.currentTimeMillis()?+?Math.random()?+?"."?+?header.split("/")[1];
????}

????@Override
????public?String?getOriginalFilename()?{
????????return?System.currentTimeMillis()?+?(int)Math.random()?*?10000?+?"."?+?header.split("/")[1];
????}

????@Override
????public?String?getContentType()?{
????????return?header.split(":")[1];
????}

????@Override
????public?boolean?isEmpty()?{
????????return?imgContent?==?null?||?imgContent.length?==?0;
????}

????@Override
????public?long?getSize()?{
????????return?imgContent.length;
????}

????@Override
????public?byte[]?getBytes()?throws?IOException?{
????????return?imgContent;
????}

????@Override
????public?InputStream?getInputStream()?throws?IOException?{
????????return?new?ByteArrayInputStream(imgContent);
????}

????@Override
????public?void?transferTo(File?dest)?throws?IOException,?IllegalStateException?{
????????new?FileOutputStream(dest).write(imgContent);
????}


????public?static?MultipartFile?base64Convert(String?base64)?{

????????String[]?baseStrs?=?base64.split(",");
????????BASE64Decoder?decoder?=?new?BASE64Decoder();
????????byte[]?b?=?new?byte[0];
????????try?{
????????????b?=?decoder.decodeBuffer(baseStrs[1]);
????????}?catch?(IOException?e)?{
????????????e.printStackTrace();
????????}
????????for?(int?i?=?0;?i?<?b.length;?++i)?{
????????????if?(b[i]?<?0)?{
????????????????b[i]?+=?256;
????????????}
????????}
????????return?new?Base64DecodeMultipartFile(b,?baseStrs[0]);
????}
}

我創建了一個java相關的公眾號，用來記錄自己的學習之路，感興趣的小伙伴可以關注一下微信公眾號哈：niceyoo

總結

以上是生活随笔為你收集整理的动静分离-静态资源缓存控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。