图床/图片服务器项目详细设计

àì夳堔傛蜴生んèń 2023-03-04 06:30 33阅读 0赞

### 项目目录 ###

*  1.前言
 *   *  1.1 项目背景
     *  1.2 项目意义
     *  1.3 涉及的知识点
 *  2.总体设计
 *   *  2.1 需求规定
     *   *  2.1.1 软件功能的规定
         *   *  2.1.1.1 系统功能
             *  2.1.1.2 数据流图
             *  2.1.1.3 数据字典
         *  2.1.2 性能的规定
         *   *  2.1.2.1 可靠性
             *  2.1.2.2 兼容性
             *  2.1.2.3 共享性
             *  2.1.2.4 可移植性
 *  3.系统设计
 *   *  3.1 数据库设计
     *  3.2 服务器API设计（前后端交互接口设计）
     *   *  3.2.1 新增图片（上传图片）
         *  3.2.2 查看所有图片信息（数据库里面存的属性信息）
         *  3.2.3 查看指定图片属性
         *  3.2.4 删除指定图片
         *  3.2.4 查看指定图片内容
 *  4.进行源码的开发
 *   *  4.1 封装数据库操作（DAO层）
     *  4.2 基于Servlet来搭建服务器
     *  4.3 优化设计
 *  5.小结Tomcat与Servlet
 *   *  5.1 概述
     *  5.2 Servlet 相关的代码执行方式
     *  5.3 Tomcat 工作原理
 *  6.实现客户端（网页前端的代码）
 *  7.项目源代码连接

# 1.前言 #

## 1.1 项目背景 ##

现在很多网页都可以见到图片上传功能，我们上传一张本地图片后，网页就会显示我们所上传的图片，比如博客、个人信息提交页面等等。那么这背后的原理是什么呢？  
其实当我们浏览网页的时候，本质上是从对端服务器获取文档，浏览器在获得这些文档之后进行解析和渲染，呈现在我们用户面前的就是绚丽多彩的页面了。一般来讲这些文档主要有三种格式：HTML、CSS、JS。HTML相当于网页的骨架，CSS相当于网页的衣服，用来规定网页的样式，比如字体大小以及排版等等，而JavaScript主要负责一些动态的逻辑，比如在网页上按下一个按键后会显示什么等等。这个专门存储图片的服务器叫做图片服务器也叫做图床。  
本项目就是实现一个简单的HTTP图片服务器，用这个服务器来存储图片，针对每张图片提供一个唯一的URL，有了这个URL之后其他网页就可以借助它把图片展示出来。此外我们还增加了防盗连功能功能，创造一个只属于你自己的私有图床。

## 1.2 项目意义 ##

简单来说，图床就是在云端的一块网络空间,我们可以将照片上传至云端，同时也可以随时访问云端的图片，我们在需要使用图片的时候,只需要拿到图片的链接就可以将图片放在任何网页或工具中，这样一来我们就可以高效、便捷的管理和使用我们的图片。我们的私人图床就像是我们个人专属的私有图片空间。在这个图片世界只属于你。

## 1.3 涉及的知识点 ##

> 1.简单的Web服务器设计能力  
> 2.JDBC操作MySQL数据库  
> 3.数据库设计  
> 4.Restful风格API  
> 5.gson的使用  
> 6.强化HTTP协议的理解  
> 7.Servlet的使用  
> 8.基于md5进行校验  
> 9.Postman工具的使用  
> 10.软件测试的基本思想和方法整体架构

# 2.总体设计 #

## 2.1 需求规定 ##

### 2.1.1 软件功能的规定 ###

#### 2.1.1.1 系统功能 ####

该项目的核心就是实现一个HTTP服务器，然后用这个服务器来存储图片，针对每一个图片提供一个唯一的url，有了这个url之后，就可以借助它把图片展示到其它网页上。具体功能包括：  
a、上传图片(得到一个url)  
b、根据图片的url访问图片，获取图片内容  
c、获取某个图片的属性  
d、删除全部图片的属性  
e、删除图片  
![在这里插入图片描述][20200801134428726.png]

用户操作流程图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70]

#### 2.1.1.2 数据流图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 1]

#### 2.1.1.3 数据字典 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 3]

### 2.1.2 性能的规定 ###

#### 2.1.2.1 可靠性 ####

本项目采用了防盗链技术，用户存储在服务器中的图片链接可能会被其他人使用。存在数据泄露的风险，为了保护用户的数据安全，我们采用了防盗链技术，判定当前请求的referer字段（HTTP请求协议中的header的部分），是不是在我们代码中指定的白名单中。如果是，才允许访问，通过这种机制来限制其他人来使用图片。也在一定程度上确保浏览器的运行速度

#### 2.1.2.2 兼容性 ####

本项目是借助Servlet（Tomcat这个HTTP服务器所提供的一组编程接口）设计的一个图片服务器，具有良好的兼容性，使用设备可以满足手机端和电脑端，操作系统可以满足Android系统和ios系统。可供用户随时随地、任何设备的使用。

#### 2.1.2.3 共享性 ####

本项目可以支持多设备共享功能，支持多用户同时在线使用。同时支持电脑端和手机端同时使用。

#### 2.1.2.4 可移植性 ####

本项目使用Java语言编码实现，大大增强了代码的可移植性，从而便于代码的进一步优化和处理。

# 3.系统设计 #

## 3.1 数据库设计 ##

**E-R图：**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 4][]  
**MySQL数据库:**

create table image_table (imageId int not null primary key auto_increment,
    imageName varchar(50),
    size int, 
    uploadTime varchar(50),
    contentType varchar(50),
    path varchar(1024),
    md5 varchar(1024));

**表格效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 5]  
**说明：**

> 数据库存储的是图片的属性（元信息）；  
> 而图片正文是以文件的形式直接存在磁盘上的；  
> 当有一个图片上传到服务器上时，数据库就记录一个path对应到磁盘上的这个文件

**注意：**

> md5:图片的 md5 校验和。  
> 字符串哈希算法。  
> 校验和：通过一个更短的字符串，来验证整体数据是否正确，短的字符串是根据原串内容通过一定的规则来计算出来的。

## 3.2 服务器API设计（前后端交互接口设计） ##

**Gson的使用：**

> 这里我们使用JSON来组织数据。  
> Json 是一种常见是数据格式组织方式. 源于 JavaScript, 是一种键值对风格的数据格式；  
> Java 中可以使用 Gson 库来完成 Json 的解析和构造。

**在pom.xml中添加依赖：**

<dependency>
          <groupId>com.google.code.gson</groupId>
          <artifactId>gson</artifactId>
          <version>2.8.2</version>
        </dependency>

**呈现格式：**  
![在这里插入图片描述][20200801143032808.png]  
**API具体的设定有很多方式：**

> 可以用200表示成功，404表示失败；  
> 也可以使用body中的ok字段true表示成功，false表示失败；  
> 也可以使用\[\]由内容百世成功，为空表示失败。

### 3.2.1 新增图片（上传图片） ###

1）请求格式

> POST/image

2）响应格式：  
![在这里插入图片描述][20200801152054464.png]

### 3.2.2 查看所有图片信息（数据库里面存的属性信息） ###

1）请求格式

> GET/image

2）响应格式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 6]

### 3.2.3 查看指定图片属性 ###

1）请求格式

> GET/image?imageId=\[具体的数值\]

2）响应格式  
![在这里插入图片描述][20200801152745893.png]

### 3.2.4 删除指定图片 ###

1）请求格式

> DELETE/image?imageId=\[具体的图片id\]

2）响应格式  
![在这里插入图片描述][2020080115290118.png]  
**注意：**

> 服务器实现代码的时候就可以判定方法，如果是DELETE方法，就执行删除操作。  
> 删除也不一定非得用DELETE方法，  
> 例如：  
> GET/image?imageId=xxx&delete=1

### 3.2.4 查看指定图片内容 ###

1）请求格式

> GET/imageShow?imageId=\[具体的图片id\]

2）响应格式  
![在这里插入图片描述][20200801153208144.png]

# 4.进行源码的开发 #

## 4.1 封装数据库操作（DAO层） ##

1）先创建DBUtil类：封装一下获取数据库连接的过程。  
dao数据访问层,这里面的类围绕着数据操作展开。

private static final String URL = "jdbc:mysql://127.0.0.1:3306/java_image_server?characterEncoding=utf8&useSSL=true";
        private static final String USERNAME = "root";
        private static final String PASSWORD = "peng0415";

**这个类里面有3个方法如下：**

> 创建DateSource的实例：DataSource getDataSource()  
> 获取连接：Connection getConnection()  
> 关闭连接：void close(Connection connection, PreparedStatement statement, ResultSet resultSet)  
> 这里关闭的时候要注意：先创建的对象后关闭，后创建的对象先关闭

2）创建常见实体类Image：对应到一个图片对象（包含图片的相关属性）

public class Image {
        
        private int imageId;
        private String imageName;
        private  int size;
        private String uploadTime;
        private String contenType;
        private String path;
        private String md5;
    }

3）ImageDao：Image对象的管理器。借助这个类完成Image对象的增删改查操作。

## 4.2 基于Servlet来搭建服务器 ##

1）安装 Servlet  
使用 maven管理项目  
2）创建一个类 ImageServlet，继承 HttpServlet父类，并且重写这个父类中的一些重要方法。

> 因为在Tomcat里会根据请求格式解析出Servlet需要的方法

**HttpServlet 中提供的方法 doxxx 系列和 HTTP 协议的方法是一一对应的：**

> 如果服务器收到的是 GET 请求，就会自动调用到 HttpServlet 的 doGet 方法；  
> 如果服务器收到的是 POST 请求，就会自动调用到 HttpServlet 的 doPost方法；  
> 如果服务器收到的是 DELETE 请求，就会自动调用到 HttpServlet 的 doDelete方法；

3）代码写完之后，程序还无法直接运行，还需要修改 webapp/WEB-INF/web.xml（项目创建的时候会自动生成），

> 把新创建的 Servlet 注册进去。  
> 标签：告诉 Tomcat 当前这个 servlet 对应到代码中的哪个类。  
> 标签：告诉 Tomcat 当前 servlet 对应到的 URL 的 path 是什么？

<servlet>
        <servlet-name>ImageServlet</servlet-name>
        <servlet-class>api.ImageServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>ImageServlet</servlet-name>
        <url-pattern>/image</url-pattern>
      </servlet-mapping>
    
      <servlet>
        <servlet-name>ImageShowServlet</servlet-name>
        <servlet-class>api.ImageShowServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>ImageShowServlet</servlet-name>
        <url-pattern>/imageShow</url-pattern>
      </servlet-mapping>

> 这个配置文件的目的：  
> 收到的请求中访问的某个路径对应的 Servlet 类是哪个；  
> 进一步执行对应的 Servlet 中的代码。

## 4.3 优化设计 ##

1.简单的防盗链接机制。

> 用户的图片链接可能会被其他人使用。  
> 通过一定的机制来限制其他人来使用图片。（否则用户的图片用的人太多了，可能服务器就挂了）  
> 技术原理：可以判定当前请求的referer字段（HTTP请求协议中的header的部分），是不是在我们代码中指定的白名单中。如果是，才允许访问。

**白名单：**

static private HashSet<String> whiteList = new HashSet<>();
    
        static {
        
    //        whiteList.add("http://39.106.198.109:8080/java_image_server/index.html");
            whiteList.add("http://localhost:9998/java_server/index.html");
        }

**不在白名单里url复制图片链接打开会显示未授权：**

resp.getWriter().write("{ \"ok\":false,\"reason\":\"未授权的访问！\"}");

2.优化磁盘存储空间

> 应用到 MD5（如果两个图片内容完全一样，就在磁盘上只存一份文件就可以了。  
> 通过MD5就能判定两个图片的内容是否一样。

# 5.小结Tomcat与Servlet #

## 5.1 概述 ##

> Tomcat相当于一个HTTP服务器（Web服务器）  
> Servlet是Tomcat这个HTTP服务器所提供的一组编程接口

## 5.2 Servlet 相关的代码执行方式 ##

> 我们平时的代码，是从 main 方法运行的；  
> 而 Servlet 里面没有 main 方法，而是靠 Tomcat 来自动调用到 Servlet 的代码。

## 5.3 Tomcat 工作原理 ##

1. 启动的时候要绑定端口号（8080）
    2. 进入一个主循环
    3. 在主循环里面，调用 accept 获取到当前的请求的链接
    4. 读取客户端发送的数据（字符串）
    5. 把这个字符串按照 HTTP 协议来进行解析
    6. 解析出的 HTTP 请求的方法和 URL 之后，找到对应的 Servlet,并进行对应 doXXX 方法。

**理解Tomcat中URL与Servlet的映射关系,步骤如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 7]

# 6.实现客户端（网页前端的代码） #

1）实现前端页面主要应用的技术：

> HTML：网页的骨架 骨  
> CSS： 描述网页上组件的样式（位置、颜色、大小、字体、背景…）皮  
> JavaScrpit：描述前端页面上的一些动作（和用户具体交互的行为）魂

2）前端这里用的是网页模板加以修改，所以先略

# 7.项目源代码连接 #

[项目全部源代码][Link 1]

[20200801134428726.png]: /images/20230208/f83ce53b48a945779d70a41fe3faee7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70]: /images/20230208/163e2302051e4e7bbeccc0c4b3d62039.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 1]: /images/20230208/a84445d9458e4ed48c917a161e932606.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 2]: /images/20230208/8865a722a734465dad721321475f3eb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 3]: /images/20230208/fd871e78b78242928ff8b106c799a3cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 4]: /images/20230208/ebc80014a605480795c750292b9b7936.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 5]: /images/20230208/e02acd8ed7ce47b5b89d1f178140c3a9.png
[20200801143032808.png]: /images/20230208/b526f5a661954e42be2e475d8bdeecc6.png
[20200801152054464.png]: /images/20230208/708c5830f14a402d8f90ff504a9de42c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 6]: /images/20230208/803b0ad93dec4daa8fcc9befef80ccdf.png
[20200801152745893.png]: /images/20230208/12c48d39df164a96b7f1fa102b12c181.png
[2020080115290118.png]: /images/20230208/0bd6af63daa5401d9ab18f524b8655a6.png
[20200801153208144.png]: /images/20230208/340fd3c9d91444b0b7b4c894fdd179df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MzMwMDUw_size_16_color_FFFFFF_t_70 7]: /images/20230208/9c809ed8a16c4679bfd5c4607e7bf924.png
[Link 1]: https://github.com/JinpengChe415/project/tree/master/java_image_server2