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

最新推荐文章于 2024-04-14 22:34:37 发布

-Coche-

最新推荐文章于 2024-04-14 22:34:37 发布

阅读量1.4k

点赞数 1

分类专栏：项目文章标签： java mysql web service servlet tomcat

本文链接：https://blog.csdn.net/qq_44330050/article/details/107731262

版权

项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目目录

1.前言
2.总体设计
- 2.1 需求规定
3.系统设计
4.进行源码的开发
5.小结Tomcat与Servlet
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、删除图片
在这里插入图片描述

 用户操作流程图如下：

在这里插入图片描述

2.1.1.2 数据流图

在这里插入图片描述

2.1.1.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图：

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));

表格效果如下：
在这里插入图片描述
说明：

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

注意：

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

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

Gson的使用：

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

在pom.xml中添加依赖：

<!--JSON库，gson-->
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.2</version>
    </dependency>

呈现格式：
在这里插入图片描述
API具体的设定有很多方式：

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

3.2.1 新增图片（上传图片）

1）请求格式

POST/image

2）响应格式：
在这里插入图片描述

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

1）请求格式

GET/image

2）响应格式
在这里插入图片描述

3.2.3 查看指定图片属性

1）请求格式

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

2）响应格式
在这里插入图片描述

3.2.4 删除指定图片

1）请求格式

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

2）响应格式
在这里插入图片描述
注意：

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

3.2.4 查看指定图片内容

1）请求格式

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

2）响应格式
在这里插入图片描述

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的映射关系,步骤如下：
在这里插入图片描述

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

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

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

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

7.项目源代码连接

项目全部源代码

-Coche-

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
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 删除
复制链接

扫一扫