简介这是一套基于JSP技术实现的轻量级相册管理系统源码面向Java Web初学者与课程设计实践者解决个人或小团队照片的上传、分类、查看与评论等核心管理需求。资源包共115个文件含20个JSP页面负责前端交互与展示、22个Java源文件与对应class字节码涵盖PhotoServlet、AdminServlet等核心业务逻辑、1个SQL建表脚本用于MySQL初始化、1个CSS样式文件及若干配置类与工具类整体3.53MB结构清晰模块职责分明。已有434人学习下载适合通过完整项目理解JSPServletJavaBeanMySQL四层架构的协作机制。读者可直接部署运行掌握数据库连接池配置、用户权限控制、图片元数据存储、防SQL注入基础实践及Tomcat环境搭建全流程是Web开发入门到进阶的典型教学案例。1. 一个被低估的JSP相册系统它不只存照片而是把MySQL当图床、用原生Servlet链路做权限隔离、靠JSTL自定义标签压住页面复杂度上周帮某高校实验室迁移老系统翻出一套2018年部署在Tomcat 7上的JSP相册管理源码——没有Spring Boot自动装配没用MyBatis动态SQL连jQuery都只引入了1.11.3版本。但就是这套“古董级”组合撑住了三年日均300次图片上传、5000次浏览且从未出现过文件覆盖、权限越界或缩略图错位。它真正解决的不是“怎么展示照片”而是在零框架依赖下如何用最朴素的JSPServletMySQL三件套把用户分组、相册归属、图片元数据、访问日志这四层关系稳稳钉死在事务边界内。适合正在维护老旧教育/政务内网系统的开发者也适合想逆向拆解“无框架Web应用骨架”的后端新人——你看得见每一行request.getParameter()怎么进数据库也看得清每个 jsp:include 背后藏着怎样的职责切分。这不是怀旧玩具是能跑在国产化信创环境里的轻量级图像资产基座。2. 技术栈解剖为什么选JSP而非JSFMySQL表结构如何支撑多级权限这套系统标题里写着“jsf 相册 mysql”但实际代码中完全未使用JSFJavaServer Faces。经逐行扫描WEB-INF/lib和web.xml配置确认所有前端交互均由JSP原生Servlet驱动JSF相关jar包如jsf-api.jar、jsf-impl.jar不存在于项目依赖中。“jsf”关键词极可能是历史文档笔误或早期技术选型讨论残留。真实技术栈如下服务端核心Java SE 7 Servlet 3.0 API无Spring、无Struts视图层JSP 2.2 JSTL 1.2 自定义Taglibphoto:thumb、auth:ifRole持久层JDBC直连 手写DAO无Hibernate/MyBatis数据库MySQL 5.6InnoDB引擎显式开启事务部署容器Apache Tomcat 7.0.x要求JDK 1.7提示项目未使用任何ORM所有SQL语句硬编码在DAO类中便于审计但牺牲灵活性。若需适配高并发场景建议后续将关键查询如相册列表分页迁移到PreparedStatement预编译。2.1 MySQL核心表结构设计四张表锁死权限与归属系统仅用4张MySQL表实现完整业务闭环字段设计直击相册管理本质需求表名主要字段关键约束业务含义usersid(PK),username,password,role(admin/user)username唯一索引用户身份与角色role字段直接控制后台入口可见性albumsid(PK),name,owner_id(FK→users.id),created_time外键级联删除每个相册严格绑定单一创建者删除用户时自动清空其相册photosid(PK),filename,original_name,album_id(FK→albums.id),width,height,size_kb,upload_timealbum_id外键filename为UUID生成确保唯一文件物理存储名与原始名分离width/height用于前端响应式布局access_logsid(PK),photo_id(FK),user_id(FK),ip_address,access_time无外键避免日志表拖慢主流程记录每次图片查看行为供后期统计热门相册注意photos.filename字段存储的是服务器端保存的UUID文件名如a1b2c3d4-e5f6-7890-g1h2-i3j4k5l6m7n8.jpg而original_name保留用户上传时的原始文件名如毕业合影_2023.jpg。这种分离设计规避了中文文件名乱码、特殊字符路径错误等经典JSP痛点。2.2 JSP页面分层逻辑从index.jsp到view_album.jsp的请求链路整个前端由5个核心JSP页面构成通过标准Servlet跳转串联index.jsp登录入口提交至LoginServletmain.jsp用户主页显示所属相册列表由AlbumListServlet填充数据view_album.jsp相册详情页展示该相册下所有图片缩略图由PhotoListServlet加载upload.jsp上传表单页POST至UploadServletadmin_manage.jsp管理员专属页仅roleadmin可见由AdminServlet提供用户/相册管理接口所有Servlet均继承自BaseServlet统一处理Session校验request.getSession().getAttribute(user) ! null字符编码强制设置request.setCharacterEncoding(UTF-8)异常统一跳转至error.jsp// BaseServlet.java 片段 protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 强制UTF-8解决中文参数乱码 request.setCharacterEncoding(UTF-8); response.setContentType(text/html;charsetUTF-8); // Session有效性检查 User user (User) request.getSession().getAttribute(user); if (user null) { response.sendRedirect(request.getContextPath() /index.jsp); return; } // 子类实现具体业务逻辑 handleRequest(request, response, user); }这段代码看似简单却是整个系统稳定运行的基石——它把字符集、会话、重定向三件事在基类里焊死子类Servlet只需专注业务逻辑无需重复处理底层细节。2.3 自定义Taglib实战photo:thumb如何生成安全缩略图URL系统未使用ImageIO生成缩略图而是采用“懒加载URL路由”策略原图保存在/WEB-INF/images/目录禁止外部直接访问缩略图URL形如/thumb?photoId123width200height150ThumbServlet拦截该路径根据photoId查库获取原图路径用Graphics2D生成指定尺寸缩略图并输出流photo:thumb标签封装了这一逻辑!-- 在 view_album.jsp 中调用 -- c:forEach items${photoList} varp img srcphoto:thumb photoId${p.id} width200 height150/ alt${p.originalName} / /c:forEach对应TLD文件/WEB-INF/tlds/photo.tld定义tag namethumb/name tag-classcom.example.tag.ThumbTag/tag-class body-contentempty/body-content attribute namephotoId/name requiredtrue/required rtexprvaluetrue/rtexprvalue /attribute attribute namewidth/name requiredtrue/required rtexprvaluetrue/rtexprvalue /attribute attribute nameheight/name requiredtrue/required rtexprvaluetrue/rtexprvalue /attribute /tagThumbTag.java核心逻辑public class ThumbTag extends SimpleTagSupport { private String photoId; private String width; private String height; Override public void doTag() throws JspException, IOException { PageContext ctx (PageContext) getJspContext(); String contextPath ctx.getServletContext().getContextPath(); // 生成安全URL避免直接暴露文件路径 String url String.format(%s/thumb?photoId%swidth%sheight%s, contextPath, photoId, width, height); getJspContext().getOut().print(url); } // getter/setter 省略 }这个设计的关键价值在于前端JSP完全不知道图片物理路径所有缩略图请求必须经过Servlet校验权限。比如ThumbServlet会在生成前检查当前用户是否有权查看该photoId对应的相册——这是JSF组件难以低成本实现的细粒度控制。3. 运行环境搭建从Tomcat配置到MySQL初始化脚本3.1 Tomcat 7 部署四步法实测Windows/Linux通用确认JDK版本必须为JDK 1.7非JRE执行java -version验证提示若使用JDK 1.8需修改web.xml中web-app声明为Servlet 3.1规范否则启动报错Unsupported major.minor version 52.0配置Tomcat连接器conf/server.xml!-- 在Connector节点内添加URIEncoding -- Connector port8080 protocolHTTP/1.1 connectionTimeout20000 redirectPort8443 URIEncodingUTF-8 / !-- 关键解决中文路径乱码 --部署WAR包将源码打包为photo-manager.war使用jar -cvf photo-manager.war *放入webapps/目录Tomcat自动解压为webapps/photo-manager/重要确保webapps/photo-manager/WEB-INF/images/目录存在且Tomcat进程有写权限Linux下chown -R tomcat:tomcat webapps/photo-manager/WEB-INF/images/启动验证# Linux启动 ./bin/startup.sh # Windows启动 bin\startup.bat访问http://localhost:8080/photo-manager/若看到登录页即成功。3.2 MySQL初始化执行建库脚本并导入初始数据项目附带sql/init.sql内容包含建库、建表、插入默认管理员账号-- 创建数据库推荐utf8mb4避免emoji问题 CREATE DATABASE IF NOT EXISTS photo_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE photo_db; -- users表含默认admin账号密码为123456的MD5值 INSERT INTO users (username, password, role) VALUES (admin, e10adc3949ba59abbe56e057f20f883e, admin); -- albums表为admin创建默认相册 INSERT INTO albums (name, owner_id, created_time) VALUES (我的相册, 1, NOW());执行步骤# 登录MySQL mysql -u root -p # 执行脚本 source /path/to/init.sql; # 验证 SELECT username, role FROM users;注意e10adc3949ba59abbe56e057f20f883e是明文123456的MD5哈希值。生产环境务必修改可使用在线MD5工具生成新密码后更新users.password字段。3.3 关键配置文件解析web.xml与context.xml联动机制web.xml定义了Servlet映射与全局参数!-- web.xml 片段 -- servlet servlet-nameLoginServlet/servlet-name servlet-classcom.example.servlet.LoginServlet/servlet-class /servlet servlet-mapping servlet-nameLoginServlet/servlet-name url-pattern/login/url-pattern /servlet-mapping !-- 全局初始化参数 -- context-param param-nameuploadDir/param-name param-value/WEB-INF/images//param-value /context-paramcontext.xml位于META-INF/则配置数据库连接池!-- META-INF/context.xml -- Context Resource namejdbc/photoDB authContainer typejavax.sql.DataSource maxActive20 maxIdle10 minIdle5 usernameroot passwordyour_mysql_password driverClassNamecom.mysql.jdbc.Driver urljdbc:mysql://localhost:3306/photo_db?useUnicodetrueamp;characterEncodingutf8/ /Context联动逻辑BaseServlet中通过JNDI查找数据源Context initCtx new InitialContext(); Context envCtx (Context) initCtx.lookup(java:comp/env); DataSource ds (DataSource) envCtx.lookup(jdbc/photoDB); Connection conn ds.getConnection(); // 获取连接这种JNDI方式将数据库配置与代码解耦运维人员只需修改context.xml即可切换数据库地址无需动Java代码。4. 避坑指南5个血泪经验总结的高频翻车点4.1 现象上传中文文件名图片后original_name字段显示为??????原因Tomcat默认使用ISO-8859-1解码URL参数而JSP表单提交的中文文件名未经过UTF-8编码解决在web.xml中添加过滤器CharacterEncodingFilter修改UploadServlet中获取文件名的方式// 错误写法直接取getParameter String originalName request.getParameter(fileName); // ❌ ISO-8859-1解码 // 正确写法用Part API获取原始字节再UTF-8解码 Part filePart request.getPart(photo); String fileName Paths.get(filePart.getSubmittedFileName()).getFileName().toString(); String originalName new String(fileName.getBytes(ISO-8859-1), UTF-8); // ✅4.2 现象登录成功后跳转main.jsp但页面提示“用户未登录”原因request.getSession()创建的Session未设置超时时间某些浏览器或代理服务器主动丢弃了Session Cookie解决在LoginServlet登录成功后显式设置Session属性HttpSession session request.getSession(true); session.setMaxInactiveInterval(30 * 60); // 30分钟超时 session.setAttribute(user, user); // 必须在此处设置 // 关键重定向前不能调用response.sendRedirect()否则Session未提交 RequestDispatcher dispatcher request.getRequestDispatcher(/main.jsp); dispatcher.forward(request, response); // ✅ 使用forward保持Session4.3 现象view_album.jsp中图片无法显示浏览器控制台报404原因photo:thumb生成的URL路径错误或ThumbServlet未正确映射排查步骤查看JSP生成的HTML源码确认img src...中的URL是否为/photo-manager/thumb?...注意上下文路径检查web.xml中ThumbServlet映射servlet-mapping servlet-nameThumbServlet/servlet-name url-pattern/thumb/url-pattern !-- 必须是/thumb不是/thumb/* -- /servlet-mapping确认ThumbServlet中读取参数方式String photoId request.getParameter(photoId); // ✅ 不是getPathInfo()4.4 现象MySQL插入图片记录时报错Data truncation: Data too long for column original_name原因photos.original_name字段类型为VARCHAR(50)但用户上传了超长文件名如带完整路径的C:\Users\Name\Pictures\2023-06-15_会议合影_高清版_最终确定.jpg解决修改数据库字段ALTER TABLE photos MODIFY original_name VARCHAR(255);在UploadServlet中截断文件名String originalName part.getSubmittedFileName(); if (originalName.length() 255) { originalName originalName.substring(0, 252) ...; // 保留末尾扩展名 }4.5 现象管理员删除用户后albums表中仍有孤立相册记录原因albums.owner_id外键未设置ON DELETE CASCADEMySQL默认为RESTRICT解决执行SQL修复外键-- 先删除原外键 ALTER TABLE albums DROP FOREIGN KEY fk_albums_owner; -- 重建带级联删除的外键 ALTER TABLE albums ADD CONSTRAINT fk_albums_owner FOREIGN KEY (owner_id) REFERENCES users(id) ON DELETE CASCADE;提示此操作需先清空albums表或确保无数据冲突生产环境执行前务必备份。5. 二次开发实战给相册加水印、接入七牛云存储、实现批量下载5.1 给缩略图自动添加文字水印兼容JDK 1.7ThumbServlet是水印注入的最佳位置。在生成缩略图的Graphics2D绘制阶段插入水印逻辑// ThumbServlet.java 中生成缩略图后追加 BufferedImage thumbImage generateThumbnail(originalImage, width, height); Graphics2D g2d thumbImage.createGraphics(); // 设置水印字体使用系统字体避免缺失 Font font new Font(Microsoft YaHei, Font.BOLD, 12); g2d.setFont(font); g2d.setColor(new Color(255, 255, 255, 100)); // 半透明白色 // 计算水印位置右下角 String watermark © new SimpleDateFormat(yyyy).format(new Date()); FontMetrics metrics g2d.getFontMetrics(); int x thumbImage.getWidth() - metrics.stringWidth(watermark) - 10; int y thumbImage.getHeight() - metrics.getAscent() 5; g2d.drawString(watermark, x, y); g2d.dispose(); // 必须释放资源注意JDK 1.7不支持Graphics2D.setComposite()设置透明度此处用Color(int r, int g, int b, int alpha)替代alpha值100表示约40%不透明度。5.2 将本地存储切换为七牛云对象存储最小改动方案不重构DAO层仅替换文件写入逻辑。在UploadServlet中添加七牛SDK依赖qiniu-java-sdk-7.2.0.jar修改文件保存部分// 原逻辑FileOutputStream写入本地 // FileOutputStream fos new FileOutputStream(uploadDir uuidFilename); // 新逻辑上传至七牛 Auth auth Auth.create(your_access_key, your_secret_key); String upToken auth.uploadToken(your_bucket_name); Configuration cfg new Configuration(Region.region0()); UploadManager uploadManager new UploadManager(cfg); try { Response response uploadManager.put(inputStream, uuidFilename, upToken); // 上传成功response.bodyString()返回JSON } catch (QiniuException e) { // 处理上传失败 }关键改造photos.filename字段不再存本地路径改为存七牛Key即uuidFilenameoriginal_name仍存原始名。ThumbServlet中读取图片时改用七牛SDK生成临时下载链接String publicUrl http://your-bucket-domain/ photo.getFilename(); String downloadUrl auth.privateDownloadUrl(publicUrl, 3600); // 1小时有效期5.3 实现相册内图片批量下载ZIP打包新增DownloadAlbumServlet核心逻辑protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String albumId request.getParameter(albumId); ListPhoto photoList photoDAO.findByAlbumId(albumId); // 设置响应头 response.setContentType(application/zip); response.setHeader(Content-Disposition, attachment; filenamealbum_ albumId .zip); ZipOutputStream zos new ZipOutputStream(response.getOutputStream()); for (Photo p : photoList) { // 从数据库或七牛获取原始图片流 InputStream is getImageInputStream(p); ZipEntry entry new ZipEntry(p.getOriginalName()); zos.putNextEntry(entry); byte[] buffer new byte[4096]; int len; while ((len is.read(buffer)) ! -1) { zos.write(buffer, 0, len); } zos.closeEntry(); is.close(); } zos.close(); }前端view_album.jsp添加按钮form actiondownloadAlbum methodpost input typehidden namealbumId value${album.id} / button typesubmit批量下载本相册/button /form提示大相册100张图需增加异步任务机制避免HTTP超时。可引入java.util.concurrent.ExecutorService将ZIP打包放入线程池生成下载Token后返回前端轮询。6. 从那以后我每次接手老系统都强制走一遍“三查一测”流程三查查web.xml确认Servlet映射、过滤器顺序、上下文参数这是整个请求链路的总开关查数据库外键用SHOW CREATE TABLE xxx看所有约束尤其关注ON DELETE行为老系统常因外键缺失导致数据不一致查日志输出点在BaseServlet的processRequest开头加System.out.println(URI: request.getRequestURI())5分钟内摸清所有请求入口。一测测字符集穿透用Postman发一个含中文参数的POST请求检查request.getParameter()是否乱码再检查数据库字段值是否正确——这比看10页文档更快定位编码问题。这套相册系统最值得复用的不是某个算法而是它把“简单”二字刻进了每一层用JSP原生标签代替JSF组件树降低学习成本用JDBC直连代替ORM屏蔽掉不必要的抽象泄漏用auth:ifRole标签把权限判断压缩成一行JSP指令。它提醒我当业务逻辑足够清晰时过度设计反而是最大的技术债。希望帮到你。本文还有配套的精品资源点击获取