简介：基于JSP的音乐网站完整毕业设计项目，面向计算机相关专业本科生，适用于课程设计或毕业论文答辩场景。项目采用SSH框架整合MVC分层思想，搭配MySQL数据库与Tomcat运行环境，覆盖从需求分析到界面实现的完整链路。压缩包内共有一千零八十四个文件，大小约二十二点五一兆字节，包含JSP页面、Java类、配置文件、数据库脚本、E-R图和数据流图，以及大量GIF演示图片、JS交互脚本、CSS样式和HTML静态页，其中动图用于展示页面效果，脚本负责交互逻辑，样式与静态页构建前端结构，便于直接部署运行或二次开发。同时配套论文文档为撰写毕业设计说明书提供参考，整体结构清晰，前端界面美观，适合需要快速搭建音乐类网站项目并完成论文撰写的同学。目前已有五百一十九人学习下载，可作为项目启动前的样板或排错参考。
1. 为什么2024年还要拆一个JSP音乐网站
很多人都在嘲讽JSP是上个世纪的产物，但打开这份基于JSP的音乐网站源码后，我反而觉得它是最适合毕业设计的脚手架。项目不是Spring Boot全家桶，而是经典的JSP + Servlet + JavaBean的MVC结构，带完整论文、E-R图、数据流图和数据库脚本。适合两类人：一类是计算机专业准备毕设、想用SSH/JSP过答辩的学生；另一类是刚入行想搞明白JSP编译、Session、文件上传底层逻辑的初级开发。解压包里有fckeditor的afp示例文件和几个asp残留文件，第一件事就是删掉它们，剩下的目录很干净。我会按环境搭建、数据库设计、播放上传导出、部署排错的顺序拆解，把论文里常写的“核心模块”变成能复现的代码。
2. 环境搭建与项目结构：从IDEA到Tomcat 9的部署链路
2.1 为什么是JSP + Servlet，而不是SSH全家桶
资源包关键词里挂着“SSH”，但绝大多数“基于JSP的音乐网站”毕设项目，实际落地都是JSP + Servlet + JavaBean，而不是Struts2 + Spring + Hibernate。原因很现实：SSH配置繁琐，struts.xml、applicationContext.xml、hibernate.cfg.xml三个文件相互引用，很多学生导包就崩。而Servlet 3.0之后，web.xml可以做到极简，用注解就能注册Servlet，代码可读性更高，也更容易在答辩时讲清MVC各层的职责。
我的建议是不要纠结资源名是否写了SSH，把精力放在MVC三个角色上。模型（JavaBean/DAO）负责数据库读写，视图（JSP）只做展示，控制器（Servlet）负责转发和逻辑控制。这个音乐网站里的歌曲列表、用户注册、评论模块都遵循这个模式，改起来很快。
2.2 IDEA + JDK 1.8 + Maven + Tomcat 9 的版本协调
环境版本是第一个坑。我见过太多项目在JDK 11上跑不起来，原因是Tomcat 9虽然支持Java 8，但IDEA的Maven插件默认用较新的JDK编译，而JSP老代码里的<%@ page import="java.sql.*" %>对编译器版本并不敏感，真正出问题的往往是数据库驱动版本。这套方式建议固定以下版本：
| 组件 | 版本 | 说明 |
|---|---|---|
| JDK | 1.8 | 毕设项目最稳，旧语法零兼容问题 |
| Tomcat | 9.0.x | 支持Servlet 4.0，同时保留JSP的兼容机制 |
| MySQL | 5.7或8.0 | 5.7对ORDER BY RAND()这类写法更友好，8.0需要调整驱动 |
| MySQL Connector/J | 5.1.49（5.7）或8.0.33（8.0） | 注意连接串会自动感知驱动类名 |
| Maven | 3.6+ | 与IDEA 2020-2023都兼容 |
依赖配置在pom.xml里，最好加上Servlet API和JSTL，但注意scope要设置为provided，否则会和Tomcat自带的冲突：
<dependencies> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.33</version> </dependency> </dependencies>这里把Servlet API设为provided，表示编译时需要、运行时不打包，因为Tomcat已经提供了实现。JSTL库则必须打进war，否则JSP里的<c:forEach>标签会报“Unable to find taglib”的错。MySQL驱动8.0版本会自动加载com.mysql.cj.jdbc.Driver，如果你的老代码还写com.mysql.jdbc.Driver，编译会警告，但不影响运行。
2.3 目录结构规划与JSP编译class文件保存位置
解压后建议按Maven标准目录重排，否则IDEA不识别源码根目录。常见结构如下：
src/main/java ├─ com.example.music.controller (Servlet) ├─ com.example.music.model (实体Bean) ├─ com.example.music.dao (JDBC操作) └─ com.example.music.util (DB连接、工具) src/main/webapp ├─ static/css ├─ static/js ├─ WEB-INF/web.xml └─ index.jsp这里需要先说清“jsp编译class文件保存在哪里”。JSP不是直接被Tomcat执行的，而是先被翻译成Java源文件，再编译成class文件。在Tomcat 9里，默认存放位置是tomcat安装目录/work/Catalina/localhost/项目名/org/apache/jsp/。如果你用IDEA集成的Tomcat，路径会变成CATALINA_BASE/work/Catalina/localhost/web_war_exploded/org/apache/jsp/。排错时如果发现修改了JSP不生效，第一反应不是重启，而是去这个目录把对应页面名称index_jsp.class删掉，Tomcat会在下一次请求时重新翻译。
# 强制清理Tomcat工作目录下的JSP编译产物 rm -rf $CATALINA_BASE/work/Catalina/localhost/你的项目名/org/apache/jsp/*这段命令的作用是清除JSP的中间产物，适用于“页面改了什么，刷新总是旧页面”的场景。如果你在Windows下，直接在资源管理器中删除work目录对应的项目文件夹也可以。注意命令行里的项目名要和IDEA右下角显示的Application context一致，否则删了错误目录。
3. 数据库设计与用户模块：把E-R图变成可跑的MVC代码
3.1 基于E-R图设计四张核心表
论文里的E-R图通常包含用户、歌手、歌曲、评论四个实体，落到MySQL就建四张表。下面是一个可以直接用的建库脚本：
CREATE DATABASE music_db DEFAULT CHARACTER SET utf8mb4; CREATE TABLE user ( user_id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(32) NOT NULL UNIQUE, password VARCHAR(64) NOT NULL, nickname VARCHAR(32), avatar VARCHAR(255), created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE singer ( singer_id INT PRIMARY KEY AUTO_INCREMENT, singer_name VARCHAR(64) NOT NULL, style VARCHAR(32), intro TEXT ); CREATE TABLE song ( song_id INT PRIMARY KEY AUTO_INCREMENT, song_name VARCHAR(64) NOT NULL, singer_id INT, album VARCHAR(64), play_url VARCHAR(255), cover_url VARCHAR(255), duration INT, upload_time DATETIME, FOREIGN KEY (singer_id) REFERENCES singer(singer_id) ); CREATE TABLE comment ( comment_id INT PRIMARY KEY AUTO_INCREMENT, user_id INT, song_id INT, content VARCHAR(500), comment_time DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES user(user_id), FOREIGN KEY (song_id) REFERENCES song(song_id) );表结构里有两个细节容易在答辩时被问到。第一，play_url存放的是相对路径，例如/uploads/songs/01.mp3，而不是完整http://地址，这样换域名不用改数据库。第二，duration字段用INT表示秒数，比如234表示3分54秒，如果论文里画了数据流图，这个字段会在“歌曲详情”数据流里出现。
四张表中，song表是核心，它的关键字段含义如下：
| 字段 | 类型 | 说明 |
|---|---|---|
| song_id | int | 歌曲主键，自增 |
| singer_id | int | 外键，关联singer表 |
| play_url | varchar | 播放地址相对路径 |
| cover_url | varchar | 封面图相对路径 |
| duration | int | 时长，单位秒 |
3.2 JDBC连接工具与DAO层封装
数据库连接池在毕设里不强制，可以用一个静态工具类顶替。注意MySQL 8.0需要带serverTimezone=Asia/Shanghai，否则会报时区错误。
public class DBUtil { private static final String URL = "jdbc:mysql://localhost:3306/music_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai"; private static final String USER = "root"; private static final String PASSWORD = "123456"; static { try { Class.forName("com.mysql.cj.jdbc.Driver"); } catch (ClassNotFoundException e) { e.printStackTrace(); } } public static Connection getConnection() throws SQLException { return DriverManager.getConnection(URL, USER, PASSWORD); } }这个工具类采用静态初始化块加载驱动，getConnection()每次调用返回一个物理连接，适合查询量不大的音乐网站。参数useUnicode=true&characterEncoding=utf8保证中文写入读取一致；serverTimezone只影响8.0驱动，5.7驱动会忽略该参数。DAO层做歌曲查询时，应该返回一个List<Song>，而不是在Servlet里写SQL：
public List<Song> findByKeyword(String keyword) { List<Song> list = new ArrayList<>(); String sql = "SELECT * FROM song WHERE song_name LIKE ?"; try (Connection conn = DBUtil.getConnection(); PreparedStatement ps = conn.prepareStatement(sql)) { ps.setString(1, "%" + keyword + "%"); ResultSet rs = ps.executeQuery(); while (rs.next()) { Song song = new Song(); song.setSongId(rs.getInt("song_id")); song.setSongName(rs.getString("song_name")); song.setPlayUrl(rs.getString("play_url")); list.add(song); } } catch (SQLException e) { e.printStackTrace(); } return list; }这里使用PreparedStatement而不是Statement，一为防SQL注入，二为参数绑定。注意LIKE的模糊匹配符%是拼在Java侧参数里的，写成ps.setString(1, "%" + keyword + "%")，很多新手直接WHERE song_name LIKE ?填keyword，结果查不到任何内容。
3.3 JSP个人信息展示页面：表单回显与JSTL
“jsp个人信息展示页面”是热搜词，也是每个音乐网站都有的模块。用户登录后需要展示昵称、头像、最近评论。这里用一个Servlet处理请求，转发到profile.jsp：
@WebServlet("/profile") public class ProfileServlet extends HttpServlet { protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { User user = (User) req.getSession().getAttribute("loginUser"); if (user == null) { resp.sendRedirect("login.jsp"); return; } List<Comment> comments = new CommentDao().findByUserId(user.getUserId()); req.setAttribute("comments", comments); req.getRequestDispatcher("/profile.jsp").forward(req, resp); } }session里的loginUser是登录时放入的，这里取出后继续查询评论列表，最后转发到JSP。转发和重定向的区别是：转发不会改变浏览器地址栏，req对象里的属性（如comments）可以带过去。如果写成sendRedirect，属性会丢，页面就必须再去查一次。
对应的profile.jsp用JSTL输出：
<%@ page contentType="text/html;charset=UTF-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head><title>个人信息</title></head> <body> <h3>欢迎，${sessionScope.loginUser.nickname}</h3> <table border="1"> <tr><th>歌曲ID</th><th>评论内容</th><th>时间</th></tr> <c:forEach items="${comments}" var="c"> <tr> <td>${c.songId}</td> <td>${c.content}</td> <td>${c.commentTime}</td> </tr> </c:forEach> </table> </body> </html>JSTL的<c:forEach>相当于Java里的for-each，items是Servlet放入request的属性名，var定义每轮循环变量。页面里直接通过${c.songId}访问Comment的getter方法，注意属性名必须和getter名去掉get后首字母小写一致。如果你发现页面只显示一个空表格，八成是Servlet里setAttribute的名字和JSP里items不一致。
3.4 JSP JSONArray import 与搜索提示接口
搜索框的自动补全，常见做法是用AJAX请求Servlet，Servlet返回JSON数组。这里的热搜词“jsp jsonarray import”坑就藏在import里。
@WebServlet("/searchTip") public class SearchTipServlet extends HttpServlet { protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); resp.setContentType("application/json;charset=UTF-8"); String keyword = req.getParameter("kw"); List<Song> songs = new SongDao().findByKeyword(keyword); JSONArray arr = new JSONArray(); for (Song s : songs) { JSONObject obj = new JSONObject(); obj.put("id", s.getSongId()); obj.put("name", s.getSongName()); arr.put(obj); } resp.getWriter().write(arr.toString()); } }很多人在这里写import net.sf.json.JSONArray，结果ClassNotFound。因为资源包里的项目大多用的是org.json，需要在pom中引入：
<dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20240303</version> </dependency>或是用fastjson的com.alibaba.fastjson.JSONArray。最稳妥的检查方式是打开项目的lib目录或Maven依赖树，确认依赖里实际存在哪个包。resp.setContentType("application/json;charset=UTF-8")这一行不能省，否则浏览器会按text/html解析，导致JS拿不到对象。
4. 歌曲播放、上传与导出：四个高频场景实战
4.1 JSP页面里实现MP4视频播放：
音乐网站不只放MP3，很多上传的是MV，因此“jsp实现mp4视频播放”在答辩演示时是加分项。JSP本身不负责解码，只需输出正确的HTML和视频地址。关键在播放URL要能输出字节流，否则点击播放会整文件下载到内存。
<video controls width="640" height="360"> <source src="${song.playUrl}" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>这个src可以指向项目内相对路径，也可以指向VideoServlet。如果指向Servlet，需要在Servlet里读取文件并用InputStream响应：
@WebServlet("/play") public class PlayServlet extends HttpServlet { protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String songId = req.getParameter("songId"); Song song = new SongDao().findById(Integer.parseInt(songId)); String realPath = getServletContext().getRealPath(song.getPlayUrl()); File f = new File(realPath); resp.setContentType("video/mp4"); resp.setHeader("Accept-Ranges", "bytes"); try (FileInputStream fis = new FileInputStream(f); OutputStream os = resp.getOutputStream()) { byte[] buf = new byte[1024 * 512]; int len; while ((len = fis.read(buf)) != -1) { os.write(buf, 0, len); } } } }这里实际上没有支持HTTP Range请求，只是伪流式。真正的断点续播需要解析Range头，并返回206 Partial Content。但做毕设时，面试官更在意你是否知道Accept-Ranges: bytes。参数1024*512是缓冲区大小，写太小网络慢，写太大内存占用高。另外注意FileInputStream要放在try-with-resources里，避免文件句柄泄漏。
4.2 JSP选择文件夹与文件上传：Servlet 3.0替代Commons FileUpload
“jsp选择文件夹”这个需求延伸自文件上传。HTML5给<input type="file">加了webkitdirectory属性，可以一次性选择整个文件夹：
<input type="file" name="files" webkitdirectory multiple>后端用Servlet 3.0的Part接口接收，比Commons FileUpload省一个依赖。两个方案的对比可以帮助答辩时讲清选型：
| 对比项 | Servlet 3.0 Part | Commons FileUpload |
|---|---|---|
| 依赖 | 内置 | 需要commons-fileupload.jar |
| 复杂度 | 低 | 需要DiskFileItemFactory |
| 文件大小限制 | @MultipartConfig配置 | 手动控制 |
| 临时文件处理 | 自动 | 需手动清理 |
对应的上传Servlet：
@WebServlet("/upload") @MultipartConfig(location = "/tmp", maxFileSize = 50 * 1024 * 1024) public class UploadServlet extends HttpServlet { protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); Collection<Part> parts = req.getParts(); String uploadDir = getServletContext().getRealPath("/uploads/songs"); new File(uploadDir).mkdirs(); for (Part part : parts) { String fileName = Paths.get(part.getSubmittedFileName()).getFileName().toString(); part.write(uploadDir + File.separator + fileName); } resp.sendRedirect("manageSongs.jsp"); } }@MultipartConfig的maxFileSize限制单个文件50MB，上传路径用getRealPath会指向发布后的项目目录，缺点是用IDEA热部署时目录会被重建。更稳的做法是把上传目录写到/data/music/这类固定路径，然后在数据库里存相对路径/uploads/songs/文件名，访问时用静态资源映射的方式暴露出来。
4.3 屏蔽JSP离开页面提示：beforeunload的正确用法
现在浏览器对beforeunload做了很多限制，直接return false并不总能生效。热词“屏蔽jsp离开页面提示”通常出现在两个场景：一个是播放音乐时切走标签页不想要弹窗，另一个是表单填到一半误关页面想加离开确认。
要屏蔽提示，最简单是从源头不绑定事件。如果页面里有一个刻意绑定的离开事件，想临时禁用可以这样做：
window.onbeforeunload = null; // 关闭提示 // 如果想重新开启离开提示 window.addEventListener('beforeunload', function (e) { e.preventDefault(); e.returnValue = ''; });这里e.returnValue = ''是旧浏览器要求的写法，新浏览器只要不设置preventDefault就不会弹窗。这个特性无法完全自定义弹窗文本，新Chrome只会显示系统默认文本，所以别在returnValue里塞自定义文案。在JSP里，如果用了window.onbeforeunload，要注意它在每次表单提交时也会触发，解决方式是给提交按钮加onclick="window.onbeforeunload=null"。
4.4 JSP实现数据导出为Excel：POI与中文文件名编码
“jsp实现数据导出为excel”是后台管理的老需求。用POI生成.xls文件，关键点是设置响应头的中文文件名。
@WebServlet("/exportSongs") public class ExportServlet extends HttpServlet { protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("application/vnd.ms-excel"); String fileName = URLEncoder.encode("歌曲列表.xls", "UTF-8").replaceAll("\\+", "%20"); resp.setHeader("Content-Disposition", "attachment;filename=\"" + fileName + "\""); List<Song> songs = new SongDao().findAll(); try (Workbook wb = new HSSFWorkbook(); ByteArrayOutputStream out = new ByteArrayOutputStream()) { Sheet sheet = wb.createSheet("songs"); Row header = sheet.createRow(0); header.createCell(0).setCellValue("歌曲ID"); header.createCell(1).setCellValue("歌名"); header.createCell(2).setCellValue("播放地址"); for (int i = 0; i < songs.size(); i++) { Row row = sheet.createRow(i + 1); row.createCell(0).setCellValue(songs.get(i).getSongId()); row.createCell(1).setCellValue(songs.get(i).getSongName()); row.createCell(2).setCellValue(songs.get(i).getPlayUrl()); } wb.write(out); resp.getOutputStream().write(out.toByteArray()); } } }这段代码用HSSFWorkbook生成Excel 97-2003格式，列少就够用。URLEncoder.encode是为了兼容Outlook和浏览器对中文文件名的解析，注意空格会被编码成+，所以替换成%20。如果导出后打开Excel提示文件损坏，优先检查是不是getOutputStream之前已经通过getWriter写入了内容，两个流不能混用。
5. 部署后的排错与验证清单
5.1 中文乱码从三层排查
音乐网站最常见的现象是前台歌曲名正常，后台列表乱码。三层都要查：第一层，JSP开头contentType里有没有charset=UTF-8；第二层，Servlet里有没有req.setCharacterEncoding("UTF-8")，尤其是POST请求；第三层，JDBC连接串是否带characterEncoding=utf8。很多源码里三层只做了一层，漏掉哪层就在哪层补。
5.2 JSP不生效时不要盲目重启
如果改了JSP刷新还是旧页面，先做两个动作：关闭浏览器缓存，然后删除Tomcatwork目录下对应项目的JSP编译产物。这个操作比重启Tomcat快，也能避免IDEA热部署偶尔不触发重编译。如果是Java代码改了不生效，执行Build -> Rebuild Project，再看IDEA的Build输出是否有编译错误。
5.3 按这个顺序回归一遍
| 步骤 | 操作 | 预期结果 |
|---|---|---|
| 1 | 启动Tomcat | 控制台无异常 |
| 2 | 访问首页index.jsp | 歌曲列表正常显示 |
| 3 | 注册新用户 | user表新增记录，密码是存储的值 |
| 4 | 上传一个MP4 | uploads目录生成文件，页面可播放 |
| 5 | 导出Excel | 浏览器下载歌曲列表.xls |
最后用curl验证搜索提示接口是否返回JSON而不是错误页：
curl -G 'http://localhost:8080/music/searchTip?kw=你' -H 'Accept: application/json'如果返回[{"id":1,"name":"你的名字"}]，说明搜索链路通了。如果返回500，去Tomcat的logs/localhost.<date>.log看异常堆栈，不要再靠控制台盲猜。
本文还有配套的精品资源，点击获取
