简介在JavaWeb开发领域Servlet、JSP和JDBC构成了Web应用开发的经典技术栈是理解HTTP请求/响应、会话管理等核心原理的基石。通过构建一个具备完整功能的小型音乐网站项目开发者可以深入掌握从数据库设计、文件上传处理到前后端数据交互的全流程实践。本项目采用经典的三层架构重点解析了文件上传与静态资源存储策略并集成了成熟的第三方播放器插件实现音频播放功能。这种从概念到落地的工程实践不仅巩固了JavaWeb基础知识也为后续学习Spring Boot等框架提供了扎实的底层认知。对于希望提升工程能力、丰富项目经验的开发者而言此类涵盖数据库设计、业务逻辑与前端展示的综合项目具有极高的学习价值。1. 项目概述从零到一构建一个能“响”的音乐网站最近几年我身边不少刚学完JavaWeb基础的朋友总想找个项目练手把Servlet、JSP、JDBC这些知识点串起来。网上的“学生管理系统”、“图书管理系统”都快被做烂了缺乏点新意和趣味性。于是一个想法就冒出来了为什么不自己动手做一个音乐网站呢它既有前端页面的展示又有后端数据的增删改查还涉及到文件上传、播放控制等稍微复杂一点的功能麻雀虽小五脏俱全是个绝佳的练手和巩固知识的项目。这个“基于JAVAWEB的小型音乐网站”核心目标就是实现一个基础的音乐在线播放与管理平台。用户可以在前端浏览音乐列表、搜索歌曲、在线播放管理员则在后台进行音乐文件的上传、歌曲信息的编辑、分类管理等操作。听起来简单但真做起来从数据库设计到前后端交互从文件存储到播放器集成每一步都藏着不少细节和“坑”。我结合自己多次带新人做项目的经验把这个过程完整地梳理一遍不仅告诉你“怎么做”更重点分享“为什么这么做”以及“怎么做得更好、更稳”。无论你是想丰富简历项目还是想深入理解JavaWeb开发流程这篇文章都能给你提供一条清晰的路径和一堆实用的“避坑指南”。2. 项目整体设计与核心思路拆解在动手写代码之前花点时间把整体架构想清楚能省去后期大量的返工时间。一个典型的JavaWeb项目我们通常采用经典的三层架构表现层、业务逻辑层、数据访问层。但对于这个音乐网站我们还需要额外考虑两个核心问题静态资源音乐文件、图片的存储与访问以及前端播放功能的实现。2.1 技术栈选型与理由为什么选择这些技术这里有个人的偏好也有基于项目复杂度和学习成本的考量。后端核心Servlet JSP JDBC。这是JavaWeb的经典组合也是理解Web开发原理的基石。虽然现在Spring Boot大行其道但直接从Servlet入手你能更清晰地理解HTTP请求/响应、会话、过滤器的本质。这对于打牢基础至关重要。我们不用任何重型框架就用最纯粹的技术栈。数据库MySQL。关系型数据库免费、流行、资料多。对于音乐信息歌名、歌手、专辑、时长这类结构化数据用MySQL存储和管理再合适不过。前端HTML CSS JavaScript 少量JSP标签。前端页面我们力求简洁重点放在功能实现上。播放器部分我们不会去造轮子而是选用成熟的第三方播放器插件比如APlayer它轻量、美观、API友好能极大降低我们的开发难度。服务器Tomcat。JavaWeb应用的标准“运行环境”无需多言。开发工具IntelliJ IDEA。高效的Java开发IDE对Web项目支持良好能方便地配置Tomcat和进行调试。注意有同学可能会问为什么不用Spring MVC或Spring Boot对于这个练手项目我们的首要目标是理解底层原理。用Servlet手写控制器你能清楚地看到一个请求是如何被接收、处理并返回结果的。当你以后再用框架时你会明白框架帮你做了什么而不是成为一个只会配置注解的“调参侠”。2.2 核心功能模块设计根据需求我们可以将系统划分为两个主要部分和几个核心模块前台用户端音乐展示模块首页音乐列表展示可按最新、最热、分类筛选。音乐播放模块集成网页播放器实现播放、暂停、上一首、下一首、进度条拖拽、音量控制。搜索模块根据歌名、歌手进行模糊查询。用户基础模块可选进阶用户登录/注册、个人收藏列表。后台管理端音乐管理模块音乐文件上传、歌曲信息标题、歌手、专辑、封面图的增删改查。分类管理模块对音乐进行分类如流行、摇滚、古典的增删改查。管理员登录模块简单的后台登录验证。2.3 数据库表结构设计数据库设计是项目的骨架设计得好后续编码会非常顺畅。这里给出最核心的三张表表1音乐表music字段名类型说明备注idINT主键自增歌曲唯一标识titleVARCHAR(100)歌曲标题非空singerVARCHAR(50)歌手albumVARCHAR(100)专辑durationVARCHAR(10)时长如 “04:32”music_urlVARCHAR(255)音乐文件存储路径相对路径如/music/xxx.mp3cover_urlVARCHAR(255)封面图片存储路径相对路径如/img/cover/xxx.jpgcategory_idINT分类ID外键关联分类表play_countINT播放次数默认0用于热门排序create_timeDATETIME创建时间默认当前时间表2分类表category字段名类型说明idINT主键自增nameVARCHAR(20)分类名称如“流行音乐”descriptionVARCHAR(200)分类描述表3管理员表admin(用于后台登录)字段名类型说明idINT主键自增usernameVARCHAR(20)用户名passwordVARCHAR(32)密码MD5加密存储实操心得music_url和cover_url存储的是相对路径而不是绝对路径。这是为了项目的可移植性。例如你的音乐文件实际存放在D:\project\webapps\ROOT\music\但在数据库中只存/music/song.mp3。这样当你的项目部署到服务器上时无论服务器的绝对路径是什么只要Web应用根目录下有music文件夹就能通过相对路径正确访问。同时务必为music_url字段建立索引因为这是播放时最常查询的字段之一。3. 核心细节解析与实操要点3.1 音乐文件上传与存储策略这是项目的第一个难点。用户管理员在后台上传一个MP3文件和一个封面图片我们需要安全地接收并保存到服务器。1. 前端表单设计必须使用enctypemultipart/form-data属性否则Servlet无法接收到文件内容。form action/yourApp/uploadMusic methodpost enctypemultipart/form-data input typetext nametitle placeholder歌曲名 input typetext namesinger placeholder歌手 input typefile namemusicFile acceptaudio/* !-- 音乐文件 -- input typefile namecoverFile acceptimage/* !-- 封面图片 -- button typesubmit上传/button /form2. 后端处理使用Apache Commons FileUploadServlet本身不直接处理文件上传我们需要引入commons-fileupload和commons-io这两个库。// 1. 检查请求是否为多媒体表单数据 boolean isMultipart ServletFileUpload.isMultipartContent(request); if (!isMultipart) { // 返回错误信息 return; } // 2. 创建文件上传处理器和配置 DiskFileItemFactory factory new DiskFileItemFactory(); // 设置内存缓冲区大小超过后会写入临时文件 factory.setSizeThreshold(1024 * 1024); // 1MB // 设置临时文件存储目录 File tempDir new File(System.getProperty(java.io.tmpdir)); factory.setRepository(tempDir); ServletFileUpload upload new ServletFileUpload(factory); // 设置单个文件最大大小例如50MB upload.setFileSizeMax(50 * 1024 * 1024); // 设置整个请求最大大小 upload.setSizeMax(100 * 1024 * 1024); try { // 3. 解析请求获取所有表单项包括普通字段和文件字段 ListFileItem items upload.parseRequest(request); String title null; String singer null; String musicFileName null; String coverFileName null; // 4. 遍历处理 for (FileItem item : items) { if (item.isFormField()) { // 普通表单字段 String fieldName item.getFieldName(); String value item.getString(UTF-8); // 注意编码 if (title.equals(fieldName)) { title value; } else if (singer.equals(fieldName)) { singer value; } } else { // 文件字段 String fileName new File(item.getName()).getName(); // 获取原始文件名 if (fileName ! null !fileName.isEmpty()) { // 生成唯一文件名防止覆盖 String savedFileName UUID.randomUUID().toString() _ fileName; // 确定存储目录例如 /upload/music/ 和 /upload/img/ String savePath ; if (musicFile.equals(item.getFieldName())) { savePath /upload/music/; musicFileName savePath savedFileName; } else if (coverFile.equals(item.getFieldName())) { savePath /upload/img/; coverFileName savePath savedFileName; } // 构建绝对路径 String realPath request.getServletContext().getRealPath(savePath); File storeFile new File(realPath, savedFileName); // 保存文件 item.write(storeFile); } } } // 5. 将 musicFileName, coverFileName 和 title, singer 等信息存入数据库 // ... JDBC 操作 ... } catch (Exception e) { e.printStackTrace(); // 处理异常返回上传失败信息 }3. 存储路径与访问绝对路径request.getServletContext().getRealPath(/upload/music/)获取的是在Tomcat的web应用目录下的绝对路径。文件实际保存在这里。相对路径存入数据库的是像/upload/music/uuid_song.mp3这样的路径。前端访问前端页面通过audio src/yourApp/upload/music/uuid_song.mp3或img src/yourApp/upload/img/uuid_cover.jpg即可直接访问。Tomcat会将这些请求当作静态资源处理。踩坑提醒文件名重复一定要用UUID或时间戳重命名上传的文件否则用户上传同名文件会相互覆盖。目录不存在保存文件前务必检查目标目录是否存在如果不存在要用file.mkdirs()创建。文件大小限制务必在代码中设置文件大小限制并在前端给予提示防止恶意上传大文件拖垮服务器。文件类型校验不能仅靠前端accept属性后端必须校验文件扩展名甚至MIME类型防止上传可执行脚本等危险文件。可以建立一个允许的文件后缀名白名单。3.2 集成前端播放器以APlayer为例自己写一个完整的播放器工作量巨大且兼容性难以保证。使用成熟的播放器插件是明智之举。1. 引入APlayer在HTML页面头部引入APlayer的CSS和JS文件可以从CDN获取。link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css script srchttps://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js/script !-- 如果需要歌词功能还需引入歌词解析库 -- script srchttps://cdn.jsdelivr.net/npm/aplayer-plugin-lrc/dist/APlayer.Lrc.min.js/script2. 准备播放器容器和初始化div idaplayer/div script // 从后端API获取音乐列表数据这里用假数据示例 const musicList [ { title: 歌曲名1, artist: 歌手1, url: /yourApp/upload/music/song1.mp3, // 这里就是数据库里存的music_url cover: /yourApp/upload/img/cover1.jpg, // 这里就是数据库里存的cover_url lrc: [00:00.00]这里是歌词... // 如果有歌词的话 }, // ... 更多歌曲 ]; const ap new APlayer({ container: document.getElementById(aplayer), audio: musicList, // 传入歌曲列表 fixed: true, // 开启吸底模式 autoplay: false, // 是否自动播放浏览器通常禁止 theme: #b7daff, loop: all, order: list, preload: auto, volume: 0.7, }); /script3. 动态数据绑定在实际项目中musicList不应该写死在JS里。我们需要通过Ajax从后端Servlet获取JSON格式的音乐列表。fetch(/yourApp/api/musicList) .then(response response.json()) .then(data { const musicList data.map(item ({ title: item.title, artist: item.singer, url: item.musicUrl, // 后端返回的字段名 cover: item.coverUrl, // ... 其他字段 })); // 用获取到的数据初始化播放器 new APlayer({ container: document.getElementById(aplayer), audio: musicList, // ... 其他配置 }); });对应的后端需要提供一个返回JSON的Servlet// MusicListServlet.java WebServlet(/api/musicList) public class MusicListServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setContentType(application/json;charsetUTF-8); PrintWriter out response.getWriter(); // 1. 查询数据库获取所有音乐信息列表 ListMusic musicList musicDao.findAll(); // 2. 将ListMusic转换为JSON字符串 // 可以使用Gson、Jackson等库这里简单拼接不推荐用于生产 StringBuilder json new StringBuilder([); for (int i 0; i musicList.size(); i) { Music m musicList.get(i); json.append({) .append(\id\:).append(m.getId()).append(,) .append(\title\:\).append(m.getTitle()).append(\,) .append(\singer\:\).append(m.getSinger()).append(\,) .append(\musicUrl\:\).append(m.getMusicUrl()).append(\,) .append(\coverUrl\:\).append(m.getCoverUrl()).append(\) .append(}); if (i musicList.size() - 1) { json.append(,); } } json.append(]); out.print(json.toString()); out.flush(); } }实操心得使用Gson或Jackson库来转换对象和JSON代码会简洁安全得多。手动拼接JSON容易出错且存在特殊字符如引号、换行转义的问题。另外播放器的url路径必须是浏览器可访问的。如果文件存储在Web应用目录外如D:/music/则需要配置一个专门的文件下载Servlet通过读取文件流写入response的方式提供访问而不能直接用静态路径。4. 实操过程与核心环节实现4.1 项目环境搭建与基础结构1. 创建IDEA项目选择创建Java Enterprise项目勾选Web Application。IDEA会自动生成标准的Web目录结构src用于放Java代码web目录下会有WEB-INF内含web.xml和index.jsp。2. 导入必要JAR包将以下JAR包复制到web/WEB-INF/lib目录下mysql-connector-java-*.jar(MySQL驱动)commons-fileupload-*.jarcommons-io-*.jargson-*.jar或jackson-*.jar(用于JSON处理推荐) 这些库文件需要你自行下载。3. 配置数据库连接通常我们会写一个DBUtil工具类来管理数据库连接。切忌在每次操作时都新建连接要用连接池对于小型项目可以使用DBCP或C3P0或者最简单的在Servlet上下文监听器ServletContextListener中初始化一个连接池。// 一个简单的数据库连接工具类示例未使用连接池仅用于演示生产环境务必用连接池 public class DBUtil { private static final String URL jdbc:mysql://localhost:3306/music_db?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai; private static final String USER root; private static final String PASSWORD yourpassword; 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); } public static void close(Connection conn, Statement stmt, ResultSet rs) { // ... 关闭资源的方法 } }4. 编写实体类JavaBean对应数据库的每张表创建一个实体类属性与字段对应并生成getter/setter方法。public class Music { private Integer id; private String title; private String singer; // ... 其他属性 // getter and setter ... }4.2 数据访问层DAO实现DAO层负责所有与数据库的交互。这里以音乐DAO为例。public class MusicDao { // 新增音乐 public boolean insert(Music music) { String sql INSERT INTO music(title, singer, album, duration, music_url, cover_url, category_id) VALUES(?,?,?,?,?,?,?); try (Connection conn DBUtil.getConnection(); PreparedStatement pstmt conn.prepareStatement(sql)) { pstmt.setString(1, music.getTitle()); pstmt.setString(2, music.getSinger()); // ... 设置其他参数 return pstmt.executeUpdate() 0; } catch (SQLException e) { e.printStackTrace(); return false; } } // 查询所有音乐用于前台列表 public ListMusic findAll() { ListMusic list new ArrayList(); String sql SELECT * FROM music ORDER BY create_time DESC; try (Connection conn DBUtil.getConnection(); Statement stmt conn.createStatement(); ResultSet rs stmt.executeQuery(sql)) { while (rs.next()) { Music music new Music(); music.setId(rs.getInt(id)); music.setTitle(rs.getString(title)); music.setSinger(rs.getString(singer)); // ... 设置其他属性 list.add(music); } } catch (SQLException e) { e.printStackTrace(); } return list; } // 根据ID查询用于播放或编辑 public Music findById(int id) { ... } // 更新音乐信息 public boolean update(Music music) { ... } // 根据ID删除注意删除记录时应考虑是否要删除服务器上的物理文件 public boolean delete(int id) { ... } // 根据关键词搜索 public ListMusic search(String keyword) { ... } }重要提醒PreparedStatement可以有效防止SQL注入务必在所有涉及用户输入的地方使用它而不是字符串拼接SQL。try-with-resources语法可以自动关闭资源避免内存泄漏。4.3 业务逻辑层与Servlet控制器Servlet充当控制器Controller接收请求调用DAO进行业务处理然后转发请求或重定向。1. 处理列表展示的ServletWebServlet(/music/list) public class MusicListServlet extends HttpServlet { private MusicDao musicDao new MusicDao(); protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1. 调用DAO获取数据 ListMusic musicList musicDao.findAll(); // 2. 将数据存入请求域 request.setAttribute(musicList, musicList); // 3. 转发到JSP页面进行展示 request.getRequestDispatcher(/music_list.jsp).forward(request, response); } }2. 处理音乐播放/详情页的ServletWebServlet(/music/detail) public class MusicDetailServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String idStr request.getParameter(id); if (idStr null || idStr.isEmpty()) { // 参数错误跳转到错误页或列表页 response.sendRedirect(request.getContextPath() /music/list); return; } int id Integer.parseInt(idStr); Music music musicDao.findById(id); if (music null) { // 音乐不存在 response.sendRedirect(request.getContextPath() /music/list); return; } // 播放次数1 (可以异步进行避免阻塞页面加载) new Thread(() - musicDao.increasePlayCount(id)).start(); request.setAttribute(music, music); request.getRequestDispatcher(/music_detail.jsp).forward(request, response); } }3. 处理搜索的ServletWebServlet(/music/search) public class MusicSearchServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding(UTF-8); // 处理中文搜索词 String keyword request.getParameter(keyword); ListMusic resultList; if (keyword null || keyword.trim().isEmpty()) { resultList musicDao.findAll(); // 关键词为空显示全部 } else { resultList musicDao.search(keyword.trim()); } request.setAttribute(musicList, resultList); request.setAttribute(keyword, keyword); request.getRequestDispatcher(/music_list.jsp).forward(request, response); } }4.4 前端JSP页面展示JSP页面负责渲染数据。以music_list.jsp为例% page contentTypetext/html;charsetUTF-8 languagejava % % taglib prefixc urihttp://java.sun.com/jsp/jstl/core % html head title音乐列表/title link relstylesheet hrefcss/style.css /head body h1音乐库/h1 !-- 搜索框 -- form actionmusic/search methodget input typetext namekeyword value${param.keyword} placeholder搜索歌名或歌手... button typesubmit搜索/button /form !-- 音乐列表 -- div classmusic-list c:forEach items${musicList} varmusic div classmusic-item img src${music.coverUrl} alt${music.title} width100 div classinfo h3a hrefmusic/detail?id${music.id}${music.title}/a/h3 p歌手${music.singer} | 专辑${music.album}/p p播放次数${music.playCount}/p audio controls preloadnone source src${music.musicUrl} typeaudio/mpeg 您的浏览器不支持 audio 元素。 /audio !-- 或者可以是一个播放按钮点击后调用全局播放器播放这首 -- button onclickplayThis(${music.musicUrl}, ${music.title}, ${music.singer})播放/button /div /div /c:forEach /div !-- 引入APlayer并初始化全局播放器 -- div idglobal-player/div script // 全局播放器逻辑... /script /body /html注意事项在JSP中直接使用${music.musicUrl}的前提是这个URL路径能被浏览器直接访问到即文件在Web应用目录内。如果用了文件下载Servlet这里的src就需要指向那个Servlet并带上文件ID参数如src/yourApp/download?id${music.id}。5. 常见问题与排查技巧实录做这个项目时几乎每个人都会踩一些相似的坑。我把它们整理出来希望能帮你快速定位问题。5.1 中文乱码问题这是JavaWeb开发中最常见的问题之一贯穿前后端。场景1表单提交后Servlet获取到的中文是乱码。原因POST请求的正文默认编码不是UTF-8。解决在Servlet的doPost方法中最先执行request.setCharacterEncoding(UTF-8);。对于GET请求参数在URL中Tomcat 8.5及以上版本默认是UTF-8如果还有问题可以修改Tomcat的server.xml中Connector的URIEncodingUTF-8属性。场景2从数据库读出的中文在JSP页面上显示乱码。原因数据库连接、JSP页面编码不统一。解决确保数据库、表、字段的编码是UTF-8通常是utf8mb4。数据库连接URL加上参数jdbc:mysql://...?useUnicodetruecharacterEncodingUTF-8。在JSP页面顶部设置% page pageEncodingUTF-8 contentTypetext/html; charsetUTF-8%。在Servlet向客户端输出前设置response.setContentType(text/html;charsetUTF-8);。场景3通过response输出JSON到前端中文变问号或乱码。解决在获取PrintWriter对象之前设置response.setContentType(application/json;charsetUTF-8);。5.2 文件上传失败或找不到问题文件上传后在指定目录找不到或者程序报错。排查步骤检查目录权限确保Tomcat进程有在目标目录如/upload/music/的写入权限。检查目录是否存在在保存文件前用File saveDir new File(realPath); if (!saveDir.exists()) { saveDir.mkdirs(); }创建目录。检查表单enctype确认前端表单是否设置了enctypemultipart/form-data。检查Servlet中解析代码确认使用了正确的ServletFileUpload解析方式并且正确区分了FileItem.isFormField()。查看临时文件如果文件过大会先存到临时目录。检查DiskFileItemFactory.setRepository()设置的临时目录是否存在且可写。5.3 播放器无法加载或播放音乐问题页面播放器显示但点击播放没声音或控制台报404错误。排查步骤检查音乐文件路径在浏览器地址栏直接输入http://localhost:8080/yourApp/upload/music/xxx.mp3看是否能直接下载或播放。如果不能说明文件路径不对或文件不存在。检查路径拼接确认存入数据库的路径是相对Web根目录的如/upload/music/xxx.mp3而不是绝对路径D:/xxx.mp3。检查文件权限确保音乐文件对Tomcat进程是可读的。检查MIME类型Tomcat的conf/web.xml中定义了常见文件的MIME类型。确保.mp3等格式被正确映射。通常Tomcat默认支持。浏览器控制台报CORS错误如果前端页面地址和后端文件地址不同源协议、域名、端口任一不同浏览器会因为同源策略阻止加载。对于本地开发这通常不是问题。如果遇到可以配置一个简单的CORS过滤器在Servlet中。5.4 数据库连接失败或操作异常问题Communications link failure或SQLException。排查步骤检查MySQL服务确保MySQL服务已启动。检查连接参数URL、用户名、密码是否正确。注意URL中的数据库名music_db是否已创建。检查驱动版本MySQL Connector/J的版本与你的MySQL服务器版本是否兼容。建议使用较新的版本如8.0.x。检查时区问题如果连接URL中没有设置serverTimezone可能会报错。加上serverTimezoneAsia/Shanghai或你所在的时区。检查是否忘记关闭连接务必在finally块或使用try-with-resources关闭Connection,Statement,ResultSet否则连接会很快耗尽。5.5 部署到服务器后路径失效问题在本地开发一切正常打包成WAR文件部署到Linux服务器上的Tomcat后文件上传功能失效或上传的文件找不到。原因与解决绝对路径问题getRealPath()在打WAR包部署时路径可能指向Tomcat的工作目录如webapps/yourApp/upload/但这个目录在Tomcat重启或重新部署时可能会被清理这是一个大坑。可靠方案不要将用户上传的文件保存在Web应用目录内。应该保存在一个固定的、独立于Web应用的位置例如/var/data/music_website/upload/。然后在代码中将这个根目录配置为一个系统属性或配置文件中的项。访问方案文件存在Web应用外浏览器无法直接通过URL访问。此时必须编写一个FileDownloadServlet。这个Servlet根据传入的文件ID或文件名从固定目录读取文件流写入response.getOutputStream()并设置正确的Content-Type响应头。这样前端播放器的src就指向这个Servlet如/yourApp/download?fileIdxxx。最后关于项目扩展你可以考虑加入用户系统实现收藏功能、音乐排行榜基于播放次数、分页加载、后台数据统计图表等。每一个功能的加入都会让你对JavaWeb的理解更深一层。这个小型音乐网站就像一块很好的基石掌握了它你再去学习Spring Boot、MyBatis等框架会感到更加得心应手因为你已经清楚了底层到底在发生什么。动手去实现吧遇到问题就回头来看看这些排查技巧祝你编码愉快本文还有配套的精品资源点击获取