第四章：JavaWeb項目+疫情防控健康碼--配置阿裡雲的“對象存儲 OSS”存儲服務

今天主要學習了如何配置阿裡雲的oss存儲服務，并對網站進行進一步完善和功能上的擴充-----以下學習來自 "東軟教育-Neusoft"

僅作為學習記錄，供今後複習參考

目錄

• “對象存儲 OSS”存儲服務配置
• • 1. 新增賬號
  • 2. 開通 “對象存儲 OSS” 存儲服務
  • 3. 建立Bucket
  • 4. 建立目錄
  • 5. 建立AccessKey
  • 6. 編寫随機生成多級子目錄算法
  • 7. 編寫阿裡雲常量類
  • • 7.1随便上傳一張圖檔
    • 7.2建立AliYunOSSConst接口
  • 8. 建立OSSUtils類
  • 9. 建立js；fonts；img；css檔案夾
  • • 9.1 配置js檔案
    • 9.2 對login.html進行完善
    • 9.3 對index.jsp進行完善，增加直接登陸跳轉
    • 9.4 對LoginServlet.class進行完善

“對象存儲 OSS”存儲服務配置

1. 新增賬號

此處不做介紹，就正常新增賬號

2. 開通 “對象存儲 OSS” 存儲服務

• 點選立即開通

3. 建立Bucket

• 注意藍色框的EndPoint後面會用到

  

4. 建立目錄

• 建立一個目錄，用于存放檔案，這裡起名為demo

5. 建立AccessKey

• 點選頭像，選擇AccessKey管理，建立AccessKey，注意儲存建立成功後提示的下載下傳檔案，裡面存放了我們要用到的AccessKey和AccessKeySecret

6. 編寫随機生成多級子目錄算法

• 編寫一個多級子目錄随機生成類，用于為我們生成圖檔檔案的随機路徑

package com.wanglianng.utils;

//此工具類的作用：生成并擷取随機的目錄層級
public class DirUtils {
   public static String getDirs(String fileName){
       //參數是一個字元串，每個字元串都有一個hashcode.
       int hashCode = fileName.hashCode();
       //建構一個字元串工具序列
       StringBuilder sb = new StringBuilder();
       //四級目錄
       for(int i = 0;i<4;i++){
           int x = hashCode & 0b111;
           sb.append(Integer.toHexString(x)+"/");
           hashCode = hashCode>>>4;
       }
       return sb.toString();//傳回結果
   }//getDirs


   //測試
   public static void main(String[] args) {
       String xdir = DirUtils.getDirs("demo");
       System.out.println("xdir:"+xdir);
   }
}
           

• 運作測試，檢視傳回結果

7. 編寫阿裡雲常量類

7.1随便上傳一張圖檔

• 點選詳情，複制圖檔url位址

7.2建立AliYunOSSConst接口

• 在工具包utils下建立AliYunOSSConst接口
• 用于存放oss存儲服務下的一些關鍵資訊

package com.wanglianng.utils;


public interface AliYunOSSConst {
    //通路阿裡雲的根節點，也就是伺服器外網通路的域名位址
    //https://wl8138.oss-cn-beijing.aliyuncs.com/%E9%A1%B9%E7%9B%AE%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84%20%281%29.png
    //下載下傳複制檔案 URL
    public static final String endpoint ="https://oss-cn-beijing.aliyuncs.com";

    //定義申請阿裡雲給開發者開通的賬号 : AccessKeyId
    String accessKeyId = "LTAI4GFAQFR7HzjNJ21AiWZY";
    //id對應的唯一密碼 : AccessKeySecret
    String accessKeySecret = "BIIX2o06ZNYpcdDtr1UP9sLPxovs7a";
    //桶的名稱 Bucket:wl8138
    String bucketName = "wl8138";
    //上傳檔案的路徑全名 "demo/"
    String yourObjectName = "demo/";
}

           

• 注意一下幾處，仔細仔細仔細！

8. 建立OSSUtils類

• 添加阿裡雲com.aliyun.oss依賴包：選擇3.8.0版本

  

• 在工具包utils下建立OSSUtils.class
• 用于編寫我們的檔案存儲函數和檔案擷取函數，實作将照片通過注冊的方式上傳到建立的bucket中，并能從中調取

package com.wanglianng.utils;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.OSSObject;

import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;

public class OSSUtils {
   //作用：将檔案資料存儲到阿裡雲的OSS服務上
   //别忘記添加阿裡雲的pom.xml依賴包。groupid：<com.aliyun.oss>
   //參數1：fileName ---需要被上傳的檔案名
   //參數2：   in    ---上傳檔案的輸入流
   //return String   ---傳回上傳到阿裡雲OSS上之後的檔案的URL位址
   public static String ossUploadFile (String fileName, InputStream in){
       //擷取到操作OSS的用戶端對象。
       OSS ossClient = new OSSClientBuilder().build(AliYunOSSConst.endpoint,
               AliYunOSSConst.accessKeyId,AliYunOSSConst.accessKeySecret);
       //添加上傳的相關參數。
       //先建構對象名。比如：xdir:3/6/5/7/xxx.xx
       String yourObjectName = AliYunOSSConst.yourObjectName+DirUtils.getDirs(fileName)+fileName;
       //把對象名放到桶當中
       ossClient.putObject(AliYunOSSConst.bucketName,yourObjectName,in);
       //關閉用戶端
       ossClient.shutdown();
       return "https://wl8138.oss-cn-beijing.aliyuncs.com/"+yourObjectName;
   }

   //擷取檔案方法
   public static InputStream getFile(String imgUrl) throws MalformedURLException{
       OSS ossClient = new OSSClientBuilder().build(AliYunOSSConst.endpoint,
               AliYunOSSConst.accessKeyId,AliYunOSSConst.accessKeySecret);
       OSSObject object = ossClient.getObject(new URL(imgUrl),null);
       InputStream in = object.getObjectContent();
       return in;
   }


}
           

• 主要用于圖檔檔案的上傳和讀取

• 然後傳回到web包下的RegistServlet.class進行修改
• 由于之前未進行AliYunOSSConst接口和OSSUtils類的編寫，是以在注冊時，圖檔檔案不能夠對資料庫進行傳值，我們虛拟了一個圖檔位址（紅色圈體内）；這是我們已經編寫好圖檔檔案存儲函數，是以将虛拟的圖檔位址注釋掉，添加檔案上傳語句，并将位址映射到imgUrl中。

  

String url = OSSUtils.ossUploadFile(fileItem.getName(),fileItem.getInputStream());
      map.put("imgUrl",url);
           

• 重新載入，點選重新整理，進行注冊

  

  

  

• 測試成功，成功将注冊圖檔檔案上傳到阿裡雲

9. 建立js；fonts；img；css檔案夾

• 在web包下的建立四個檔案夾，分别為：
• js；fonts；img；css。

  

9.1 配置js檔案

• 向js檔案夾内導入jquery-3.5.1.js

  

9.2 對login.html進行完善

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"type="text/javascript"charset="UTF-8"></script>
</head>
<body>
<h1>歡迎使用個人健康碼</h1>
<form method="post">
手機号碼：
<input type="text" name="telephone" id="telephone"><br>
身份證号：
<input type="text" name="idCard" id="idCard"><br>

<button type="button"onclick="getCard()">擷取健康碼</button>&nbsp;&nbsp;&nbsp;
<a href="register.html">注冊健康碼</a><br>

</form>
</body>
<script type="text/javascript">
    function getCard() {
        //alert("getCard");
        /*post方法有三個參數
        參1：字元串-送出的servlet位址/伺服器根目錄
        參2：字元串-地之後的參數
        參3：函數-傳回後的結果處理
        * */
    $.post("/HealthCode_war/login","telephone=323&idCard=3232",function (resp) {
        alert(resp);//響應的結果

        })
    }
</script>
</html>
           

9.3 對index.jsp進行完善，增加直接登陸跳轉

<html lang="zh">
<body>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<h2>Hello World!healthcode java</h2>
<a href="register.html">register healthcode</a><br>
<a href="login.html">直接登陸</a><br>
</body>
</html>
           

9.4 對LoginServlet.class進行完善

package com.wanglianng.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "LoginServlet",urlPatterns = "/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String telephone =request.getParameter("telephone");
        String idCard =request.getParameter("idCard");
        System.out.println("telephone:"+telephone);
        System.out.println("idCard:"+idCard);
        String cpath = request.getContextPath();
        System.out.println("測試連接配接servlet"+cpath);
    }
}
           

• 重新部署，進行測試
• 主界面出現直接登陸方式

  

• 點選 “ 直接登陸 ” 會直接跳轉到 “ 擷取健康碼 ” 界面

  

• 點選 “ 擷取健康碼 ” 會跳出彈窗即測試成功