第四章:JavaWeb项目+疫情防控健康码--配置阿里云的“对象存储 OSS”存储服务

今天主要学习了如何配置阿里云的oss存储服务,并对网站进行进一步完善和功能上的扩充-----以下学习来自 "东软教育-Neusoft"
仅作为学习记录,供今后复习参考

“对象存储 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);
    }
}

在这里插入图片描述

  • 重新部署,进行测试
  • 主界面出现直接登陆方式
    在这里插入图片描述
  • 点击 “ 直接登陆 ” 会直接跳转到 “ 获取健康码 ” 界面
    在这里插入图片描述
  • 点击 “ 获取健康码 ” 会跳出弹窗即测试成功

在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值