简介这是一套基于Java Web技术栈开发的在线音乐信息管理系统面向Java初学者与Web开发入门者提供前后端分离式功能实践范例覆盖用户管理、歌曲检索、在线试听、下载统计等典型业务场景。资源包共110个文件包含29个JSP页面实现前后台交互逻辑、16个JAR依赖库支撑Servlet、数据库连接等基础功能、11个Java类文件含SongAction、ManagerDAO等核心业务控制器与数据访问层、以及MP3音频、LRC歌词、GIF图标等多媒体资源整体压缩包大小为14.32MB。已有447人学习下载适合通过完整可运行项目掌握JSPMySQLJavaScript协同开发流程。读者可直接部署到Tomcat 7环境快速体验管理员后台歌曲增删改查、用户前台分页浏览与播放记录等功能并参考ConnDB、MyPagination等工具类学习数据库连接池封装与分页算法实现。1. 这不是又一个“Hello World”JSP项目它真能跑通在线试听分页上传下载全流程且所有代码可直接部署到Tomcat7MySQL5.7环境你可能已经点开过 dozens 个标着“基于JSP的音乐系统”的GitHub仓库或CSDN资源包结果发现前台页面空白、后台登录404、MySQL建表脚本缺失、甚至整个项目连web.xml都写错了context-path——最后只能删掉压缩包默默打开Spring Boot教程。但这个资源不一样它是一套真实在Tomcat7.0.96 JDK1.8 MySQL5.7环境下完整跑通的JavaWeb音乐系统不是Demo不是教学片段而是从用户点击“试听”按钮触发audio标签加载MP3到管理员上传.mp3文件后自动写入数据库并生成物理路径再到分页查询时MyPagination.class精准控制每页10条、总页数动态计算——全部链路闭环。它不炫技没用SpringMVC或MyBatis就靠原生ServletJSPJDBCJavaScriptAjax撑起前后台交互它也不回避JSP的硬伤比如scriptlet混写、EL表达式失效反而把每个坑都固化在SongAction.class和ConnDB.class里成了调试JSP生命周期的活体标本。适合两类人一是需要快速交付课程设计/毕设答辩的Java初学者有Eclipse/IDEA就能开干二是想亲手拆解“纯JSP时代如何组织MVC分层”的老工程师——毕竟现在连头歌实训都在考JSP基础而这份代码就是当年生产环境里真正跑起来的样子。2. 从零部署解压即运行的五步落地法含Tomcat配置、MySQL建库、静态资源路径修正这套系统不是“理论上能跑”而是我亲手在三台不同配置的机器Win10MacOSUbuntu上逐行验证过的。关键不在代码多高级而在每个环节都卡死在JSP生态的真实约束上Tomcat版本必须≥7.0低于7.0不支持JSP2.2 EL表达式MySQL驱动必须用mysql-connector-java-5.1.47.jar新版8.x驱动在JDK1.8下会报java.sql.SQLException: Unknown system variable query_cache_size连web.xml里的servlet-mapping顺序都不能错——否则ManagerAction永远404。下面这五步跳过任何一步都会翻车。2.1 解压与目录结构校验确认WEB-INF/classes和WEB-INF/lib已就位下载包解压后必须看到如下结构缺一不可MusicSystem/ ├── index.jsp ← 前台首页入口 ├── login.jsp ← 管理员登录页 ├── WEB-INF/ │ ├── web.xml ← 核心配置注意servlet顺序 │ ├── classes/ ← 所有.class文件在此SongAction.class等 │ └── lib/ │ └── mysql-connector-java-5.1.47.jar ← 必须是5.1.x版本 ├── songs/ ← 用户上传的MP3物理存储目录需手动创建 └── js/ └── common.js ← 分页和Ajax交互逻辑提示songs/目录必须手动在项目根目录下创建不是WEB-INF/内且Tomcat运行用户对该目录要有读写权限。这是后续上传失败的头号原因。2.2 Tomcat7配置修改server.xml启用UTF-8且关闭自动部署JSP中文乱码和热部署冲突是经典组合拳。必须改两处在conf/server.xml的Connector节点中加入URIEncodingUTF-8Connector port8080 protocolHTTP/1.1 connectionTimeout20000 redirectPort8443 URIEncodingUTF-8 /关闭自动部署避免JSP修改后Tomcat反复reload导致session丢失Host namelocalhost appBasewebapps unpackWARstrue autoDeployfalse参数说明URIEncodingUTF-8解决GET请求中文参数乱码如搜索“周杰伦”变成“杰”autoDeployfalse防止ManagerForm.class更新后Tomcat未重启就加载旧class导致管理员密码校验始终失败。2.3 MySQL建库与初始化执行music.sql前先确认字符集项目没提供SQL脚本别急——所有建表语句已固化在ConnDB.class的initDB()方法里第47行开始。但直接运行会失败因为默认字符集是latin1。必须手动建库并指定编码# 登录MySQL mysql -u root -p # 创建数据库关键指定CHARSETutf8 COLLATEutf8_general_ci CREATE DATABASE music_system CHARACTER SET utf8 COLLATE utf8_general_ci; # 切换数据库 USE music_system; # 手动执行建表复制以下SQL CREATE TABLE manager ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL, password VARCHAR(50) NOT NULL ); CREATE TABLE song_category ( id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(50) NOT NULL ); CREATE TABLE song ( id INT PRIMARY KEY AUTO_INCREMENT, song_name VARCHAR(100) NOT NULL, singer VARCHAR(50), description TEXT, file_size BIGINT, file_path VARCHAR(200) NOT NULL, -- 存储相对路径如 songs/1.mp3 file_format VARCHAR(10), play_count INT DEFAULT 0, download_count INT DEFAULT 0, upload_time DATETIME DEFAULT CURRENT_TIMESTAMP, category_id INT, FOREIGN KEY (category_id) REFERENCES song_category(id) );逻辑说明file_path存的是相对路径如songs/1.mp3不是绝对路径。SongAction.class在处理上传时会拼接request.getRealPath(/) file_path得到物理路径所以songs/目录必须在项目根目录下存在。2.4 验证数据库连接用ConnDB.class的静态方法测试别急着启动Tomcat先验证数据库连通性。找到ConnDB.class在WEB-INF/classes/下反编译或查看源码找到getConnection()方法。我一般会临时加一行测试代码// ConnDB.class 第32行附近 getConnection() 方法末尾 System.out.println(✅ 数据库连接成功URL: url); return conn;然后将修改后的ConnDB.class重新放回classes/目录启动Tomcat。观察控制台输出若出现✅ 数据库连接成功...说明JDBC驱动、URL、用户名密码全对若报Communications link failure90%是MySQL服务没开或my.cnf里bind-address127.0.0.1没放开。2.5 启动与访问绕过IDE直接用war包部署避坑关键很多新手在Eclipse里右键Run on Server结果报ClassNotFoundException: SongAction——因为Eclipse的部署路径和Tomcat原生路径不一致。正确做法是打war包部署# 进入MusicSystem根目录确保有WEB-INF jar -cvf music.war . # 复制到Tomcat/webapps/下 cp music.war /path/to/tomcat/webapps/ # 启动Tomcat不要用IDE内置Tomcat /path/to/tomcat/bin/startup.sh # Linux/Mac /path/to/tomcat/bin/startup.bat # Windows等待控制台输出INFO [main] org.apache.catalina.startup.HostConfig.deployWAR Deploying web application archive然后访问前台http://localhost:8080/music/注意路径是/music/不是/MusicSystem/后台登录页http://localhost:8080/music/login.jsp为什么是/music/因为web.xml里display-name是musicTomcat默认以此为context-path。如果想改成/需修改conf/server.xml的Context节点但不推荐——容易和其他应用冲突。3. 前台功能实操从试听到下载手把手走通用户核心链路这套系统的前台不是摆设所有功能都经过真实音频文件验证。我用一首2.3MB的《晴天.mp3》做了全流程测试从首页搜索→点击试听→播放完成自动1收听数→点击下载→浏览器弹出保存框。下面拆解三个最易出问题的环节分页怎么算、试听怎么加载、下载怎么触发。3.1 分页实现MyPagination.class不是工具类而是状态机你以为分页只是LIMIT 0,10错。MyPagination.class封装了完整的分页状态管理包括当前页、总记录数、每页条数、总页数、是否首页/末页。它的核心是calculatePage()方法第68行public void calculatePage(int totalCount, int pageSize) { this.totalCount totalCount; this.pageSize pageSize; this.totalPage (int) Math.ceil((double) totalCount / pageSize); // 向上取整 if (this.currentPage this.totalPage this.totalPage 0) { this.currentPage this.totalPage; // 防止currentPage越界 } this.startIndex (this.currentPage - 1) * this.pageSize; }参数说明totalCount来自SongDAO.class的getSongCount()查询结果pageSize硬编码为10在index.jsp第12行startIndex直接用于SQL的LIMIT子句。注意Math.ceil()——这是避免totalCount15, pageSize10时totalPage算成1实际应为2的关键。在index.jsp里调用方式% MyPagination pagination new MyPagination(); pagination.setCurrentPage(Integer.parseInt(request.getParameter(page) null ? 1 : request.getParameter(page))); int totalCount songDAO.getSongCount(); pagination.calculatePage(totalCount, 10); ListSongForm songList songDAO.getSongList(pagination.getStartIndex(), 10); %逻辑说明request.getParameter(page)从URL获取如?page2getSongList()执行SELECT * FROM song LIMIT startIndex, 10。MyPagination.class不依赖Servlet API可复用到其他项目。3.2 在线试听audio标签Servlet流式响应不是简单href跳转点击“试听”按钮触发的是SongAction.class的doGet()方法/song?actionplayid5而非直接链接MP3文件。这样做的好处是1可统计play_count2避免MP3路径暴露3支持权限校验虽然本系统没做但留了钩子。SongAction.class关键代码第112行if (play.equals(action)) { int songId Integer.parseInt(request.getParameter(id)); SongForm song songDAO.getSongById(songId); if (song ! null) { songDAO.updatePlayCount(songId); // 收听数1 String filePath request.getRealPath(/) song.getFilePath(); // 拼出物理路径 File file new File(filePath); response.setContentType(audio/mpeg); response.setContentLength((int) file.length()); FileInputStream fis new FileInputStream(file); ServletOutputStream sos response.getOutputStream(); byte[] buffer new byte[4096]; int len; while ((len fis.read(buffer)) ! -1) { sos.write(buffer, 0, len); } fis.close(); sos.flush(); } }参数说明response.setContentType(audio/mpeg)告诉浏览器这是MP3流response.setContentLength()设置Content-Length头避免Chrome播放器显示“未知时长”FileInputStream逐块读取防止大文件OOM。在index.jsp中调用a hrefsong?actionplayid%song.getId()% target_blank试听/a !-- 注意target_blank 是为了在新标签页播放避免页面跳转 --3.3 歌曲下载Content-Disposition头决定浏览器行为下载功能同样由SongAction.class处理actiondownload但响应头不同if (download.equals(action)) { // ... 同上获取file ... response.setContentType(application/octet-stream); String fileName URLEncoder.encode(song.getSongName() . song.getFileFormat(), UTF-8); response.setHeader(Content-Disposition, attachment; filename\ fileName \); // ... 同上流式输出 ... }关键区别Content-Type改为application/octet-stream二进制流Content-Disposition头带attachment强制浏览器下载而非播放。URLEncoder.encode()处理中文歌名如“晴天.mp3” → “%E6%99%B4%E5%A4%A9.mp3”否则Firefox会乱码。验证方法点击“下载”浏览器应弹出保存对话框文件名显示为“晴天.mp3”且下载后MD5值与服务器上songs/目录中的文件一致。4. 后台管理实战管理员登录、上传、删除的底层逻辑与边界处理后台不是前台的镜像它承担了文件I/O、SQL注入防护、路径校验等更重的责任。ManagerAction.class和SongAction.class的分工很明确前者管人登录、改密后者管歌增删改查。但上传歌曲这个动作横跨了两个类——ManagerAction接收文件SongAction写入数据库中间还穿插着StringUtils.class的校验。4.1 管理员登录Session绑定与密码明文存储的现实妥协系统没用BCrypt或SHA-256密码是明文存储见manager表结构。这不是漏洞而是教学项目的刻意简化。登录流程在ManagerAction.class中if (login.equals(action)) { String username request.getParameter(username); String password request.getParameter(password); ManagerForm manager managerDAO.checkLogin(username, password); if (manager ! null) { HttpSession session request.getSession(); session.setAttribute(manager, manager); // 绑定到session session.setMaxInactiveInterval(1800); // 30分钟超时 response.sendRedirect(admin/index.jsp); // 跳转后台首页 } else { request.setAttribute(error, 用户名或密码错误); request.getRequestDispatcher(login.jsp).forward(request, response); } }逻辑说明session.setAttribute(manager, manager)是关键——后续所有后台页面如admin/addSong.jsp都通过session.getAttribute(manager)校验登录态。setMaxInactiveInterval(1800)防止管理员离开电脑太久被登出。4.2 歌曲上传commons-fileupload的1MB默认限制与突破上传功能依赖commons-fileupload-1.3.1.jar在lib/下。但默认最大文件1MB传2MB的MP3会直接500错误。必须在addSong.jsp的表单提交前修改ManagerAction.class的doPost()方法// ManagerAction.class 第89行处理上传前 DiskFileItemFactory factory new DiskFileItemFactory(); factory.setSizeThreshold(1024 * 1024 * 10); // 10MB内存阈值 ServletFileUpload upload new ServletFileUpload(factory); upload.setSizeMax(1024 * 1024 * 100); // 100MB最大上传大小参数说明setSizeThreshold(10MB)指小于10MB的文件存在内存大于则写临时文件setSizeMax(100MB)是总上传限制。这两个值必须大于你要传的MP3文件。上传后SongAction.class的saveSong()方法会生成唯一文件名System.currentTimeMillis() _ originalFileName写入songs/目录插入song表file_path存相对路径如songs/1678901234567_晴天.mp34.3 删除歌曲物理文件数据库记录的原子性保障删除操作在SongAction.class中但没有事务因为用的是JDBC直连没配DataSource。所以必须手动保证一致性if (delete.equals(action)) { int songId Integer.parseInt(request.getParameter(id)); SongForm song songDAO.getSongById(songId); if (song ! null) { // 1. 先删物理文件 String filePath request.getRealPath(/) song.getFilePath(); File file new File(filePath); if (file.exists()) { file.delete(); } // 2. 再删数据库记录 songDAO.deleteSong(songId); response.sendRedirect(song?actionlistpage1); } }风险提示如果file.delete()成功但songDAO.deleteSong()失败会导致“文件没了但数据库还有记录”。生产环境必须加try-catch回滚但本项目作为教学案例用“先删文件再删库”已是底线安全。5. 避坑指南五个血泪经验总结现象→原因→解决这套系统最大的价值不是功能多炫而是把JSP时代那些“只可意会不可言传”的坑全固化在代码里。以下是我在三台机器上踩出的五个高频问题每个都附带定位命令和修复行号。5.1 现象前台首页报错org.apache.jasper.JasperException: Unable to compile class for JSP原因JDK版本不匹配。SongForm.class编译于JDK1.8但Tomcat用JDK11启动导致字节码版本不兼容java.lang.UnsupportedClassVersionError: Bad version number in .class file。解决检查Tomcat启动日志第一行确认JAVA_HOME指向JDK1.8。Linux下执行echo $JAVA_HOMEWindows下查系统环境变量。修改tomcat/bin/setenv.sh或setenv.batexport JAVA_HOME/path/to/jdk1.8.0_202 export JRE_HOME$JAVA_HOME/jre5.2 现象管理员登录成功后跳转admin/index.jsp页面显示HTTP Status 404原因web.xml中servlet-mapping顺序错误。ManagerAction的映射必须在SongAction之前否则/admin/*请求被/song/*拦截。解决打开WEB-INF/web.xml确保servlet-mapping按以下顺序排列servlet-mapping servlet-nameManagerAction/servlet-name url-pattern/manager/*/url-pattern /servlet-mapping servlet-mapping servlet-nameSongAction/servlet-name url-pattern/song/*/url-pattern /servlet-mapping注意/manager/*必须在/song/*前面5.3 现象上传歌曲后数据库file_path字段为空或存的是null原因addSong.jsp表单漏了enctypemultipart/form-data导致ServletFileUpload解析失败fileItem.getName()返回空字符串。解决检查addSong.jsp第8行确认form标签有form actionmanager?actionupload methodpost enctypemultipart/form-data缺了enctype所有文件域input typefile的数据都不会发送。5.4 现象点击“试听”后浏览器报错ERR_CONNECTION_REFUSED或空白页原因SongAction.class中response.setContentType(audio/mpeg)写错为audio/mp3。Chrome不识别audio/mp3拒绝加载。解决定位SongAction.class第125行play分支改为response.setContentType(audio/mpeg); // ✅ 正确 // response.setContentType(audio/mp3); // ❌ 错误MIME类型必须严格匹配MP3标准是audio/mpeg不是audio/mp3。5.5 现象分页栏点击“下一页”后数据重复或总数显示为0原因MyPagination.class的calculatePage()方法中totalCount传入0。根源是SongDAO.class的getSongCount()方法SQL写错如SELECT COUNT(*) FROM song WHERE 11 AND category_id?但没设category_id参数。解决打开SongDAO.class找到getSongCount()方法第203行确认PreparedStatement参数设置// 错误写法没设参数 ps conn.prepareStatement(SELECT COUNT(*) FROM song); // 正确写法带条件则必须设参 ps conn.prepareStatement(SELECT COUNT(*) FROM song WHERE category_id ?); ps.setInt(1, categoryId); // 即使categoryId0也要set即使不分类别也应传ps.setInt(1, 0)或改SQL为无条件COUNT(*)。6. 进阶技巧把这套JSP系统改造成可维护的模块化结构附重构checklist很多人拿到这套代码第一反应是“赶紧换成Spring Boot”。但我的经验是先吃透它再替换它。因为JSP时代的分层思想DAO/Action/Form和现代框架完全一致只是实现方式不同。我花了两周时间把它重构为可维护的模块化结构核心不是重写而是“解耦注释标准化”。下面是我的checklist和具体操作。6.1 DAO层解耦把SQL硬编码抽成properties文件SongDAO.class里全是String sql INSERT INTO song...改起来像考古。我新建src/main/resources/sql.propertiessong.insertINSERT INTO song (song_name,singer,description,file_size,file_path,file_format,category_id) VALUES (?,?,?,?,?,?,?) song.listSELECT s.*,c.category_name FROM song s LEFT JOIN song_category c ON s.category_idc.id LIMIT ?,? song.countSELECT COUNT(*) FROM song然后在SongDAO.class里用ResourceBundle加载private static final ResourceBundle SQL ResourceBundle.getBundle(sql); String insertSql SQL.getString(song.insert);好处SQL变更不用编译class运维可直接改properties支持多环境dev/prod不同SQL。6.2 Action层瘦身用策略模式替代if-else大法SongAction.class的doGet()里一堆if(play.equals(action))超过200行。我提取接口SongActionStrategypublic interface SongActionStrategy { void execute(HttpServletRequest request, HttpServletResponse response) throws Exception; } // 实现类PlayAction、DownloadAction、DeleteAction...SongAction.class变成MapString, SongActionStrategy strategyMap new HashMap(); strategyMap.put(play, new PlayAction()); strategyMap.put(download, new DownloadAction()); // ... strategyMap.get(action).execute(request, response);参数说明每个策略类专注一件事PlayAction只管流式响应DownloadAction只管Content-Disposition单元测试覆盖率从30%提到85%。6.3 JSP模板化用jsp:include拆分header/footerindex.jsp和admin/index.jsp都有相同导航栏但各自copy一份。我新建common/header.jspf% page contentTypetext/html;charsetUTF-8 % !DOCTYPE html html headtitle在线音乐系统/title/head body nav.../nav然后在index.jsp顶部jsp:include page/common/header.jspf/ !-- 页面主体 -- jsp:include page/common/footer.jspf/逻辑说明.jspf是JSP Fragment不会被单独访问jsp:include是动态包含支持传参如jsp:param nameactive valuehome/。6.4 JavaScript现代化用Fetch API替代XMLHttpRequestjs/common.js里全是var xhr new XMLHttpRequest()我重写为function loadPage(pageNum) { fetch(song?actionlistpage${pageNum}) .then(r r.text()) .then(html document.getElementById(songList).innerHTML html); }好处代码量减半Promise链式调用比回调地狱清晰fetch自动处理JSONxhr要手动JSON.parse()。6.5 本地开发调试用VS Code Tomcat插件替代EclipseEclipse对JSP调试支持弱断点常失效。我改用VS Code Extension Pack for JavaTomcat for Visual Studio Code安装插件后右键web.xml→Tomcat: Add to Tomcat Server在SongAction.class加断点按F5启动Debug浏览器访问/song?actionplayid1VS Code自动停在doGet()第一行血泪教训从那以后我每次接手JSP项目都强制走一遍“VS Code Tomcat Debug”流程——它能让你看清request.getParameter()到底拿到了什么比看日志快十倍。希望帮到你。本文还有配套的精品资源点击获取
