图片模块实现方案设计

一、需求分析

在设计图库系统时,要优先确保用户能够查看图片功能的实现,而上传功能暂时仅限管理员使用,以保证系统的安全性和稳定性。

基于这一原则,我们将优先实现以下功能,并按优先级排列如下:

1)管理员功能

  • 图片上传与创建

  • 图片管理

  • 图片修改(编辑信息)

2)用户功能

  • 查看与搜索图片列表(主页)

  • 查看图片详情(详情页)

  • 图片下载

具体分析每个需求:

1)图片上传与创建:仅管理员可用,支持选择本地图片上传,并填写相关信息,如名称、简介、标签、分类等。系统会自动解析图片的基础信息(如宽高和格式等),便于检索。

2)图片管理:管理员可以对图库内的图片资源进行管理,包括查询和删除。

3)图片修改:管理员可以对图片信息进行编辑,例如修改名称、简介、标签、分类等。

4)查看与搜索图片列表:用户在主页上可按关键词搜索图片,并支持按分类、标签等筛选条件分页查看图片列表。

5)查看图片详情:用户点击列表中的图片后,可进入详情页,查看图片的大图及相关信息,如名称、简介、分类、标签、其他图片信息(如宽高和格式等)。

6)图片下载:用户在详情页可点击下载图片按钮,将图片保存至本地。

二、方案设计

方案设计阶段我们需要确认:

  • 库表设计

  • 如何实现图片上传和下载?

  • 创建图片的业务流程

  • 如何解析图片的信息?

库表设计

表名:picture(图片表),根据需求可以做出如下 SQL 设计:

-- 图片表  
create table if not exists picture  
(  
    id           bigint auto_increment comment 'id' primary key,  
    url          varchar(512)                       not null comment '图片 url',  
    name         varchar(128)                       not null comment '图片名称',  
    introduction varchar(512)                       null comment '简介',  
    category     varchar(64)                        null comment '分类',  
    tags         varchar(512)                      null comment '标签(JSON 数组)',  
    picSize      bigint                             null comment '图片体积',  
    picWidth     int                                null comment '图片宽度',  
    picHeight    int                                null comment '图片高度',  
    picScale     double                             null comment '图片宽高比例',  
    picFormat    varchar(32)                        null comment '图片格式',  
    userId       bigint                             not null comment '创建用户 id',  
    createTime   datetime default CURRENT_TIMESTAMP not null comment '创建时间',  
    editTime     datetime default CURRENT_TIMESTAMP not null comment '编辑时间',  
    updateTime   datetime default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间',  
    isDelete     tinyint  default 0                 not null comment '是否删除',  
    INDEX idx_name (name),                 -- 提升基于图片名称的查询性能  
    INDEX idx_introduction (introduction), -- 用于模糊搜索图片简介  
    INDEX idx_category (category),         -- 提升基于分类的查询性能  
    INDEX idx_tags (tags),                 -- 提升基于标签的查询性能  
    INDEX idx_userId (userId)              -- 提升基于用户 ID 的查询性能  
) comment '图片' collate = utf8mb4_unicode_ci;

几个注意事项:

1)字段设计:

  • 基础信息:包括图片的 URL、名称、简介、分类、标签等,满足图片管理和分类筛选的基本需求。

  • 图片属性:记录图片大小、分辨率(宽度、高度)、宽高比和格式,方便后续按照多种维度筛选图片。

  • 用户关联:通过 userId 字段关联用户表,表示由哪个用户创建了该图片。

  • 多个标签:由于标签支持多个值,使用 JSON 数组字符串来维护,而不是单独新建一个表,可以提高开发效率。示例格式:["标签1", "标签2"]

2)时间字段区分:

  • updateTime:任何字段的修改都会触发数据库自动更新,便于记录最新变动。该字段可以不让用户看到

  • editTime:专用于记录图片信息被编辑的时间,需要通过业务逻辑主动更新。该字段可以对用户公开

3)索引设计:为高频查询的字段(如图片名称、简介、分类、标签、用户 id)添加索引,提高查询效率。

4)逻辑删除:也就是 “软删除”,使用 isDelete 字段标记是否删除,避免直接删除数据导致数据不可恢复问题

💡索引是数据库优化的核心手段,对于有大量查询需求的字段,不要吝啬索引的添加。

如何实现图片上传和下载

图片本质上是一种 “小型” 文件,那么我们要思考:将文件上传到哪里?从哪里下载?

最简单的方式就是上传到后端项目所在的服务器,直接使用 Java 自带的文件读写 API 就能实现。但是,这种方式存在不少缺点,比如:

  1. 不利于扩展:单个服务器的存储是有限的,如果存满了,只能再新增存储空间或者清理文件。

  2. 不利于迁移:如果后端项目要更换服务器部署,之前所有的文件都要迁移到新服务器,非常麻烦。

  3. 不够安全:如果忘记控制权限,用户很有可能通过恶意代码访问服务器上的文件,而且想控制权限也比较麻烦,需要自己实现。

  4. 不利于管理:只能通过一些文件管理器进行简单的管理操作,但是缺乏数据处理、流量控制等多种高级能力。

因此,除了存储一些需要清理的临时文件之外,我们通常不会将用户上传并保存的文件(比如用户头像和图片)直接上传到服务器,而是更推荐大家使用专业的第三方存储服务,专业的工具做专业的事。其中,最常用的便是 对象存储

什么是对象存储?

对象存储是一种存储 海量文件分布式 存储服务,具有高扩展性、低成本、可靠安全等优点。

比如开源的对象存储服务 MinIO,还有商业版的云服务,像亚马逊 S3(Amazon S3)、阿里云对象存储(OSS)、腾讯云对象存储(COS)等等。

我个人更推荐学习者和小型团队使用第三方云服务,不要自己再去搭建 MinIO 之类的,主打一个快速!

零柒使用最多的对象存储服务当属 腾讯云的 COS,除了基本的对象存储的优点外,还可以通过控制台、API、SDK 和工具等多样化方式,简单快速地接入 COS,进行多格式文件的上传、下载和管理,实现海量数据存储和管理。

本节教程中,就将使用腾讯云 COS 带大家实现文件的上传和下载。

创建图片的业务流程

创建图片其实包括了 2 个过程:上传图片文件 + 补充图片信息并保存到数据库中

有 2 种常见的处理方式:

1)先上传再提交数据:用户直接上传图片,系统生成图片的存储 URL;然后在用户填写其他相关信息并提交后,才保存图片记录到数据库中。

2)上传图片时直接保存记录:在用户上传图片后,系统立即生成图片的完整数据记录(包括图片 URL 和其他元信息),无需等待用户点击提交,图片信息就立刻存入了数据库中。之后用户再填写其他图片信息,相当于编辑了已有图片记录的信息。

方案 1 的优点是流程简单,但缺点是如果用户不提交,图片会残留在存储中,导致空间浪费;方案 2 则可以理解为保存了 “图片草稿”,即使用户不填写任何额外信息,也能找到之前的创建记录。

在我们的系统中,由于图片是核心资源,所以此处选择方案 2。 便于对图片进行溯源,还可以对图片上传做一些限制 —— 比如发现用户上传资源过多,就禁止上传。

如何解析图片的信息?

根据需求,我们要获取的图片信息包括:宽度、高度、宽高比、大小、格式、名称。

主流的获取图片信息的方法主要有 2 种:

  1. 在后端服务器直接处理图片,比如 Java 库 ImageIO、Python 库 Pillow,还有更成熟的专业图像处理库 OpenCV 等。

  2. 通过第三方云存储服务(如腾讯云 COS、AWS S3)或图像处理 API(如 ImageMagick、ExifTool)直接提取图片的元数据。

由于本教程中使用腾讯云 COS 对象存储来实现文件的上传和下载,腾讯云 COS 对象存储支持在图片上传时通过 数据万象 服务直接获取到图片的各种基础信息。

这样一来,我们不用再单独引入一个库或者自己编写解析代码了,更方便;而且提供的免费额度足够用了,所以采用这种方式。

OK,有了实现方案后,接下来我们先开发后端接口。

posted @ 2025-02-10 14:30  柒墨轩  阅读(149)  评论(0)    收藏  举报