云相册

最新推荐文章于 2024-08-03 21:02:21 发布

L未末

最新推荐文章于 2024-08-03 21:02:21 发布

阅读量1.8k

点赞数

分类专栏：项目文章标签： java

本文链接：https://blog.csdn.net/qq_44834690/article/details/105507903

版权

项目专栏收录该内容

2 篇文章 1 订阅

订阅专栏

一，云相册简单介绍

云相册项目实际上可以看作一个图片服务器。它可以实现在一个云服务器上对图片的存储和展示。如今人手一个手机，其中拍照成为手机很重要的一个功能。但是对于许多喜欢拍照的童鞋来说，手机存储内存不够，所以有了这个云相册，我们就可以将自己喜欢的图片存储到云相册里，减轻了手机负担，也可以更多的存储自己喜欢的图片。

二，云相册实现功能

云相册核心就是一个HTTP服务器，它实现了图片的上传，展示，查询，删除功能，同时借助简单的页面辅助完成图片上传操作。
我负责：
1，项目的数据库，前后端交互接口的设计以及对应功能的实现
2，前端页面的搜索并进行简单的修改

三，项目设计

1，数据库设计
我们要存储图片，肯定要知道图片的属性，创建一个库设计自己需要存储的图片属性

create database if not exists java_image_server;

drop table if exists `image_table`;

create table `image_table`(image_Id int not null primary key auto_increment,
image_Name varchar(50),
size int,
upload_time varchar(50),
md5 varchar(128),
content_type varchar(50),
path varchar(1024));

在这里插入图片描述

image_Id:设为自增主键，用来查询图片
image_Name：用户上传图片的名称
size:图片大小
uoloadTime:上传时间
conentType:图片类型
path:图片存储路径。我们将图片正文以文件形式存储到磁盘上，数据库中只记录一个path路径对应到磁盘文件上
md5:MD5这个字段用来识别用户上传的是否是同一张图片。MD5根据字符串哈希算法得出一个固定长度的值来对图片进行加密。如果下一次上传的图片MD5与数据库中存储的其中一个MD5值相同，就说明该图片已经存储过，磁盘中就不需要再重复插入新图片了。

2，前后端API设计
在进行设计时，我们希望接收到的http响应是以json的格式响应的，方便进行网络传输。
它是一种键值对结构的数据组织格式。即[{},{},…]

1），上传图片
实现文件上传用到form表单

<html>
<head>
</head>
<body>
<form id="upload-form" action="image" method="post" enctype="multipart/form-data" >
    <input type="file" id="upload" name="upload" /> <br />
    <input type="submit" value="Upload" />
</form>
</body>
</html>

其中：
action：服务器在哪个html处发文件，我们在html中action处写入某个字段
enctype：multipart/form-data需要在表单中进行文件上传时需用
2），新增图片
根据抓包工具Fiddler给上传操作抓包，了解文件上传在html中是如何完成的，通过抓包工具将具体的协议格式看出来，服务器端根据这个格式来解析
请求：
POST/image
…

------WebKitFormBoundaryBkBkuowJZeaqAqp8
Content-Disposition: form-data; name=“upload”; filename=“QQ图片20200315190313.jpg”
Content-Type: image/jpeg
…
响应：
上传成功
HTTP/1.1 200 OK
{
“ok”:true
}
上传失败
HTTP/1.1 200 OK
{
“ok”:false,
“reason”:“原因”
}
3），查看图片属性
①，查看所有图片属性
请求：
GET/image
响应：
查看成功
HTTP/1.1 200 OK
[
{
imageId:…,
imageName:“1.jpg”,
contentType:“image/jpeg”,
size:…,
uploadTime:“20200414”,
path:"…";
md5:“11222222”,
},
{
…
},
{
…
},
]
查看失败
HTTP/1.1 200 OK
{
“ok”:false,
“reason”:“原因”
}
②，查看指定图片属性
请求:
GET/image？imageId=[?]
响应：
查看成功
{
imageId:…,
imageName:“1.jpg”,
contentType:“image/jpeg”,
size:…,
uploadTime:“20200414”,
path:"…";
md5:“11222222”,
},
查看失败
HTTP/1.1 200 OK
{
“ok”:false,
“reason”:“原因”
}
4），删除图片
请求：
DELETE/image?imageId=[?]
响应：
删除成功
HTTP/1.1 200 OK
{
“ok”:true
}
删除失败
HTTP/1.1 200 OK
{
“ok”:false,
“reason”:“原因”
}
5)查看指定图片内容
请求：
GET/imageShow？imagrId=[?]
响应：
查看成功
HTTP/1.1 200 OK
Conent-Type：image/jpeg

【
图片
】
查看失败
HTTP/1.1 200 OK
{
“ok”:false,
“reason”:“原因”
}

四，源码开发
1，数据库操作：创建DBUtil封装一下获取数据库连接的过程
我们通过jdbc的方式访问MySQL

public static DataSource getDataSource(){
    //通过这个方法来创建Datasource 的实例,获取数据库连接
    if(dataSource == null) {
        synchronized (DBUtil.class) {
            if (dataSource == null) {
                dataSource = new MysqlDataSource();
                //线程不安全的单例模式
                MysqlDataSource tmpDataSource = (MysqlDataSource) dataSource;
                tmpDataSource.setURL(URL);
                tmpDataSource.setUser(USERNAME);
                tmpDataSource.setPassword(PASSWORD);
            }
        }
    }
    return dataSource;
}

DataSource对象是获取连接的首方法。它基本实现是生成标准的Connection对象
2，实现代码
①，dao层：实现封装数据库操作
DBUtil：封装获取数据库连接操作
Image：一个图片对象（对应到数据库的图片属性）
ImageDao：image对象的管理器，根据我们上述的api设计，借助这个类完成对image对象的上传，查询，删除，展示图片操作。
②，api层：：基于servelet来搭建服务器
servelt相当于Java提供的一组api
webapp/WEB-INF/web.xml文件中将新创建的servelet注册进去
servelt标签：告诉tomcat当前的servelt对应到代码中的哪个类
servlet-mapping标签：告诉tomcat当前servelt对应到的URL的path是什么
在这里插入图片描述
五，部署到服务器上
1，使用maven打一个war包
2，将war包拷贝到tomcat的webapps目录中
部署完成之后就可以在浏览器中访问服务器了
六，页面展示
前端页面来自网上模板的搜索，根据自己的需求对功能进行过改编，实现图片的上传，展示和删除功能。

L未末

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
云相册

一，云相册简单介绍云相册项目实际上可以看作一个图片服务器。它可以实现在一个云服务器上对图片的存储和展示。如今人手一个手机，其中拍照成为手机很重要的一个功能。但是对于许多喜欢拍照的童鞋来说，手机存储内存不够，所以有了这个云相册，我们就可以将自己喜欢的图片存储到云相册里，减轻了手机负担，也可以更多的存储自己喜欢的图片。二，云相册实现功能云相册核心就是一个HTTP服务器，它实现了图片的上传，展...
复制链接

扫一扫

专栏目录