JSP音乐网站项目拆解：从环境搭建到部署排错全流程

简介基于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 importjava.sql.* %对编译器版本并不敏感真正出问题的往往是数据库驱动版本。这套方式建议固定以下版本组件版本说明JDK1.8毕设项目最稳旧语法零兼容问题Tomcat9.0.x支持Servlet 4.0同时保留JSP的兼容机制MySQL5.7或8.05.7对ORDER BY RAND()这类写法更友好8.0需要调整驱动MySQL Connector/J5.1.495.7或8.0.338.0注意连接串会自动感知驱动类名Maven3.6与IDEA 2020-2023都兼容依赖配置在pom.xml里最好加上Servlet API和JSTL但注意scope要设置为provided否则会和Tomcat自带的冲突dependencies dependency groupIdjavax.servlet/groupId artifactIdjavax.servlet-api/artifactId version4.0.1/version scopeprovided/scope /dependency dependency groupIdjavax.servlet/groupId artifactIdjstl/artifactId version1.2/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.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_idint歌曲主键自增singer_idint外键关联singer表play_urlvarchar播放地址相对路径cover_urlvarchar封面图相对路径durationint时长单位秒3.2 JDBC连接工具与DAO层封装数据库连接池在毕设里不强制可以用一个静态工具类顶替。注意MySQL 8.0需要带serverTimezoneAsia/Shanghai否则会报时区错误。public class DBUtil { private static final String URL jdbc:mysql://localhost:3306/music_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/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()每次调用返回一个物理连接适合查询量不大的音乐网站。参数useUnicodetruecharacterEncodingutf8保证中文写入读取一致serverTimezone只影响8.0驱动5.7驱动会忽略该参数。DAO层做歌曲查询时应该返回一个ListSong而不是在Servlet里写SQLpublic ListSong findByKeyword(String keyword) { ListSong 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.jspWebServlet(/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; } ListComment 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 contentTypetext/html;charsetUTF-8 % % taglib prefixc urihttp://java.sun.com/jsp/jstl/core % html headtitle个人信息/title/head body h3欢迎${sessionScope.loginUser.nickname}/h3 table border1 trth歌曲ID/thth评论内容/thth时间/th/tr c:forEach items${comments} varc tr td${c.songId}/td td${c.content}/td td${c.commentTime}/td /tr /c:forEach /table /body /htmlJSTL的c:forEach相当于Java里的for-eachitems是Servlet放入request的属性名var定义每轮循环变量。页面里直接通过${c.songId}访问Comment的getter方法注意属性名必须和getter名去掉get后首字母小写一致。如果你发现页面只显示一个空表格八成是Servlet里setAttribute的名字和JSP里items不一致。3.4 JSP JSONArray import 与搜索提示接口搜索框的自动补全常见做法是用AJAX请求ServletServlet返回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;charsetUTF-8); String keyword req.getParameter(kw); ListSong 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 groupIdorg.json/groupId artifactIdjson/artifactId version20240303/version /dependency或是用fastjson的com.alibaba.fastjson.JSONArray。最稳妥的检查方式是打开项目的lib目录或Maven依赖树确认依赖里实际存在哪个包。resp.setContentType(application/json;charsetUTF-8)这一行不能省否则浏览器会按text/html解析导致JS拿不到对象。4. 歌曲播放、上传与导出四个高频场景实战4.1 JSP页面里实现MP4视频播放标签与流式响应音乐网站不只放MP3很多上传的是MV因此“jsp实现mp4视频播放”在答辩演示时是加分项。JSP本身不负责解码只需输出正确的HTML和视频地址。关键在播放URL要能输出字节流否则点击播放会整文件下载到内存。video controls width640 height360 source src${song.playUrl} typevideo/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 typefile加了webkitdirectory属性可以一次性选择整个文件夹input typefile namefiles webkitdirectory multiple后端用Servlet 3.0的Part接口接收比Commons FileUpload省一个依赖。两个方案的对比可以帮助答辩时讲清选型对比项Servlet 3.0 PartCommons FileUpload依赖内置需要commons-fileupload.jar复杂度低需要DiskFileItemFactory文件大小限制MultipartConfig配置手动控制临时文件处理自动需手动清理对应的上传ServletWebServlet(/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); CollectionPart 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要注意它在每次表单提交时也会触发解决方式是给提交按钮加onclickwindow.onbeforeunloadnull。4.4 JSP实现数据导出为ExcelPOI与中文文件名编码“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 \); ListSong 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里有没有charsetUTF-8第二层Servlet里有没有req.setCharacterEncoding(UTF-8)尤其是POST请求第三层JDBC连接串是否带characterEncodingutf8。很多源码里三层只做了一层漏掉哪层就在哪层补。5.2 JSP不生效时不要盲目重启如果改了JSP刷新还是旧页面先做两个动作关闭浏览器缓存然后删除Tomcatwork目录下对应项目的JSP编译产物。这个操作比重启Tomcat快也能避免IDEA热部署偶尔不触发重编译。如果是Java代码改了不生效执行Build - Rebuild Project再看IDEA的Build输出是否有编译错误。5.3 按这个顺序回归一遍步骤操作预期结果1启动Tomcat控制台无异常2访问首页index.jsp歌曲列表正常显示3注册新用户user表新增记录密码是存储的值4上传一个MP4uploads目录生成文件页面可播放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看异常堆栈不要再靠控制台盲猜。本文还有配套的精品资源点击获取