简介基于ServletJSPMySQL构建的JavaWeb学生成绩管理系统是原项目升级版重点新增ECharts统计图功能适用于正在学习JavaWeb的学生以及进行课程设计、毕业设计的开发者。系统围绕学生成绩管理核心场景涉及教师、学生、课程、成绩等业务对象提供成绩录入、查询、修改、删除及可视化统计展示能力可帮助理解Servlet与JSP协作方式、数据库连接与操作、前端交互和图表渲染等关键知识点。资源包共包含344个文件压缩包仅3.59MB其中以86个Java源文件及对应class编译文件、37个JSP页面、62个JS脚本、28个CSS样式、6个Jar依赖包为主另含SQL建表脚本与XML配置Java用于业务逻辑JSP负责页面生成JS/CSS完善前端交互与样式SQL脚本可直接导入MySQL。已有6723人学习/下载。除源码外资源还展示了ECharts统计图在成绩分析中的具体用法可将学生成绩转换为柱状图、饼图、折线图等便于直观查看班级或课程分布Java部分按Dao、Servlet等分层组织导入数据库后即可运行并二次修改是期末大作业或毕业设计的实用参考。1. 如果接到“一周内上线学生成绩管理系统”的需求我不会先上 Spring Boot如果接到“一周内上线一个学生成绩管理系统”的需求我不会第一反应就搬出 Spring Boot而是先评估 Servlet JSP MySQL 的传统 JavaWeb 组合统计图表用 ECharts 直接嵌进页面里。这套项目就是这么搭的登录、权限拦截、学生信息维护、成绩增删改查、按课程统计平均分与及格率JSP 负责页面展示Servlet 负责接收请求并调用 DAO数据全部落在 MySQL。对课程设计、毕业设计来说这个体量刚好能把 MVC 分层讲清楚对刚学完 JavaWeb、想找一个完整链路练手的人它也是一个能跑、能改、能断点跟进去的起点。代码在自己手里每一层都看得见出了问题不像在 Spring 容器里那样摸不着头脑。2. 架构与技术选型ServletJSPMySQL 的组合到底好在哪里这块项目不需要微服务、不需要注册中心甚至不需要 MyBatis 这类 ORM 框架。Servlet 负责接收请求JSP 负责输出动态页面MySQL 负责持久化ECharts 负责图表渲染四个组件拼起来就是一套完整的成绩管理闭环。尤其适合放大学生管理系统这类角色单一、接口数量在二十个以内的系统。在真正动手改代码之前我建议先把工程里每一个目录的作用搞清楚否则会出现“知道怎么写但不知道放哪”的问题。这一章就按项目的真实结构拆一遍 Servlet 生命周期和包划分相当于先看地图再进门。2.1 三层职责与 Servlet 生命周期请求从 URL 到业务方法的完整路径先把整个请求链路线性走一遍浏览器发请求 → Tomcat 读取web.xml或WebServlet注解上的 URL 匹配 → 找到对应的 Servlet → 首次访问时执行init()初始化 → 之后每次请求都会调用service()→ 按 GET/POST 自动派发到doGet()或doPost()→ 方法里调用 DAO 查数据库 → 把结果放进 request 或 session → 转发到 JSP → JSP 渲染成 HTML 返回浏览器。Servlet 生命周期说透了就是这三步init只做一次适合建立连接和读取配置service每次请求都会触发Tomcat 内部会根据请求方法自动分派destroy在容器卸载时执行适合释放连接资源。很多 JSP 入门教程讲完这几个方法就停了但这个项目把整条链路完整地串了起来——你在 IDE 里给 Servlet 打断点可以看到请求怎么一步步走到数据库再原路返回页面中间任何一个环节出错都能在调用栈里定位。传统项目里有两种注册 Servlet 的方式。一种是在类上直接写注解WebServlet(/login) public class LoginServlet extends HttpServlet { // doGet / doPost 处理逻辑... }另一种是在web.xml里声明映射?xml version1.0 encodingUTF-8? web-app xmlnshttp://xmlns.jcp.org/xml/ns/javaee xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd version4.0 welcome-file-list welcome-filelogin.jsp/welcome-file /welcome-file-list servlet servlet-nameLoginServlet/servlet-name servlet-classcom.student.controller.LoginServlet/servlet-class /servlet servlet-mapping servlet-nameLoginServlet/servlet-name url-pattern/login/url-pattern /servlet-mapping /web-app建议新手两种方式都认识注解方式写起来快web.xml方式在旧项目和某些部署环境里仍然会遇到。这个项目中welcome-file设成了login.jsp意思是访问项目根路径时自动打开登录页url-pattern写/login浏览器请求http://localhost:8080/项目名/login就会进入 LoginServlet。注意两处路径必须完全一致否则 Tomcat 启动时可能直接报 mapper 冲突。2.2 包结构划分controller、dao、entity、filter 各管一摊我拿到一个 JSP 项目第一件事就是看包结构。这个项目的目录划分比较规整是典型的三层分包方式src/main/java/com/student ├── controller/ # Servlet只做参数接收、调用和跳转 │ ├── LoginServlet.java │ ├── ScoreServlet.java │ └── StatsServlet.java ├── dao/ # 数据访问层负责 JDBC 和 SQL │ ├── UserDao.java │ ├── ScoreDao.java │ └── BaseDao.java ├── entity/ # 实体类与表结构对应 │ ├── User.java │ └── Score.java ├── filter/ # 过滤器统一做登录拦截 │ └── AuthFilter.java src/main/webapp ├── login.jsp ├── index.jsp ├── score/ │ └── list.jsp ├── stats/ │ └── chart.jsp └── static/ ├── css/ └── js/ └── echarts.min.js这套分层的约定并不复杂controller 层不写 SQL只负责从 request 里取参数、调 DAO、往 request 里放数据、决定跳转到哪个 JSPdao 层不关心页面长什么样只负责拿连接、执行 SQL、把 ResultSet 转成实体对象entity 层就是纯属性加 getter/setter字段尽量与数据库列一一对应filter 层统一拦截请求判断用户有没有登录。静态资源单独放static目录避免和 JSP 页面混在一起。数据流向同样很直观。用户提交表单到/loginLoginServlet 用req.getParameter(username)拿到用户名调到 UserDao 执行 SELECT比对密码成功之后把 User 对象放进 session页面跳转到index.jsp。成绩列表页也是同样套路ScoreServlet 接收pageNum和keywordScoreDao 拼分页 SQL查询得到ListScoreVO调用setAttribute(pageBean, ...)后转发到score/list.jspJSP 里用 JSTL 的c:forEach循环渲染成表格。有一点需要提前记住在 IDEA 里部署这种传统项目时项目的 Web Facet 必须把src/main/webapp配置为 Web Resource Directory否则 Tomcat 找不到 JSP启动后访问全是 404。这个问题在后面避坑章节还会展开。3. 数据库设计与初始化三张表加一个连接池先把数据底座打好成绩管理系统的业务逻辑不复杂但数据库设计如果偷懒后面写 DAO 时会非常难受。常见做法是拆成四张表用户表、学生表、课程表、成绩表成绩表作为关联核心把学生和课程连起来。这一章给出表结构设计、初始化 SQL以及 JDBC 连接池的关键参数。3.1 表结构设计登录用户、学生、课程与成绩怎么落表先看整体关系。sys_user表存登录账号student表存学生基础信息course表存课程信息score表存成绩记录一行为“某个学生在某门课上的某次成绩”。四张表的关系如下表名关键字段说明sys_userid, username, password, role登录与权限判断role 可区分管理员/学生studentid, stu_no, name, class_name学号唯一class_name 用于按班级统计courseid, course_name, teacher课程维度挂授课教师scoreid, student_id, course_id, score, exam_time学生与课程多对多关系的落地点成绩表里的student_id和course_id建议加上外键约束从数据库层面保证不会插入一段不存在的学生成绩。class_name字段在校内系统里查询频率很高可以单独建索引按班级筛选成绩时就不会全表扫描。score字段用DECIMAL(5,1)能存 0.0 到 999.9对学生成绩足够用还保留一位小数。3.2 初始化 SQL 脚本建库、建表、插入测试数据建库和建表脚本建议一次执行完字符集统一用utf8mb4避免后面中文乱码问题CREATE DATABASE IF NOT EXISTS student_db DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci; USE student_db; CREATE TABLE sys_user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(64) NOT NULL UNIQUE, password VARCHAR(64) NOT NULL, role VARCHAR(16) DEFAULT admin ) ENGINEInnoDB; CREATE TABLE student ( id INT PRIMARY KEY AUTO_INCREMENT, stu_no VARCHAR(32) NOT NULL UNIQUE, name VARCHAR(64) NOT NULL, class_name VARCHAR(128), INDEX idx_class_name (class_name) ) ENGINEInnoDB; CREATE TABLE course ( id INT PRIMARY KEY AUTO_INCREMENT, course_name VARCHAR(128) NOT NULL, teacher VARCHAR(64) ) ENGINEInnoDB; CREATE TABLE score ( id INT PRIMARY KEY AUTO_INCREMENT, student_id INT NOT NULL, course_id INT NOT NULL, score DECIMAL(5,1), exam_time DATE, FOREIGN KEY (student_id) REFERENCES student(id), FOREIGN KEY (course_id) REFERENCES course(id) ) ENGINEInnoDB; INSERT INTO sys_user (username, password, role) VALUES (admin, 123456, admin); INSERT INTO student (stu_no, name, class_name) VALUES (2023001, 张伟, 计科2201), (2023002, 李娜, 计科2201); INSERT INTO course (course_name, teacher) VALUES (JavaWeb, 陈老师), (数据结构, 王老师); INSERT INTO score (student_id, course_id, score, exam_time) VALUES (1, 1, 85.5, 2024-06-20), (2, 1, 92.0, 2024-06-20);脚本里NOT NULL和UNIQUE是最值得关注的约束。学号stu_no加上唯一约束从数据库层面杜绝重复学号用户名username加唯一约束登录冲突问题直接消失。外键约束保证成绩记录引用的学生和课程必须真实存在但注意后续删除学生时会被外键挡住所以业务里删除学生前需要先处理成绩记录。连接数据库的方式传统 JSP 项目普遍用连接池。这里用 c3p0 配置做示例c3p0-config.xml放在src/main/resources下c3p0-config default-config property namejdbcUrljdbc:mysql://localhost:3306/student_db?useUnicodetrueamp;characterEncodingutf8amp;serverTimezoneAsia/Shanghaiamp;useSSLfalseamp;allowPublicKeyRetrievaltrue/property property namedriverClasscom.mysql.cj.jdbc.Driver/property property nameuserroot/property property namepassword123456/property property nameinitialPoolSize3/property property nameminPoolSize2/property property namemaxPoolSize15/property /default-config /c3p0-config这份配置里最容易被忽略的是 URL 参数组合。serverTimezoneAsia/Shanghai解决 MySQL 8 的时区报错useSSLfalse关掉 SSL 握手本地开发能明显减少连接耗时allowPublicKeyRetrievaltrue是为了兼容 MySQL 8 默认的caching_sha2_password认证插件不加的话可能报Public Key Retrieval is not allowed。驱动类必须写com.mysql.cj.jdbc.Driver而不是 MySQL 5 时代的com.mysql.jdbc.Driver否则直接 ClassNotFoundException。连接池数值按课设项目体量来即可初始 3 个连接、最大 15 个连接已经足够。不要把maxPoolSize调得很大本机 MySQL 默认连接数有限学生机房这种共享数据库环境里连接池过大反而会拖垮服务。4. 核心功能与可视化登录、成绩 CRUD 与 ECharts 统计图这一章进入代码主干。前半部分讲登录和 Session 控制中间讲成绩查询分页与增删改查最后落地 ECharts 统计图。这三块是整个项目最核心的可复用代码能直接抄进你自己的课设里。4.1 Session 登录控制从 LoginServlet 到 AuthFilter 的两层保护登录逻辑不复杂核心是“查库比对 写入 Session”。以 LoginServlet 为例WebServlet(/login) public class LoginServlet extends HttpServlet { private final UserDao userDao new UserDao(); Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding(UTF-8); resp.setCharacterEncoding(UTF-8); String username req.getParameter(username); String password req.getParameter(password); if (username null || username.isEmpty() || password null || password.isEmpty()) { req.setAttribute(msg, 用户名或密码不能为空); req.getRequestDispatcher(/login.jsp).forward(req, resp); return; } User user userDao.findByUsernameAndPassword(username, password); if (user ! null) { // 登录成功把用户对象放进 Session后续页面靠它判断身份 req.getSession().setAttribute(loginUser, user); resp.sendRedirect(req.getContextPath() /index.jsp); } else { req.setAttribute(msg, 用户名或密码错误); req.getRequestDispatcher(/login.jsp).forward(req, resp); } } }这里有几个细节值得注意。setCharacterEncoding(UTF-8)必须放在第一次读取参数之前否则 POST 参数中文会乱码req.getSession()如果 Session 不存在会自动创建不需要先判断登录成功用sendRedirect而不是forward目的是让浏览器地址栏变成index.jsp用户刷新页面不会重复提交登录表单req.getContextPath()取到项目上下文路径部署时如果项目名变化代码不用跟着改。光有登录还不能拦截未登录访问需要一个过滤器统一把关WebFilter(/*) public class AuthFilter implements Filter { Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest req (HttpServletRequest) request; HttpServletResponse resp (HttpServletResponse) response; // 放行登录页、登录接口、静态资源避免死循环 String path req.getRequestURI().substring(req.getContextPath().length()); if (path.equals(/login.jsp) || path.equals(/login) || path.startsWith(/static/) || path.equals(/favicon.ico)) { chain.doFilter(request, response); return; } Object user req.getSession().getAttribute(loginUser); if (user null) { // 未登录强制回登录页 resp.sendRedirect(req.getContextPath() /login.jsp); return; } // 已登录放行到目标资源 chain.doFilter(request, response); } }过滤器里最容易翻车的是静态资源拦截。如果/*把 CSS、JS、ECharts 文件全部拦截未登录时访问登录页会连带把样式表拦截掉页面丑陋不说加载 ECharts 也会失败图表渲染不出来第一反应往往以为是 ECharts 本身的问题。所以路径判断里必须放行/static/。chain.doFilter(request, response)放行之后后面的 Servlet 或 JSP 才会被执行。4.2 成绩分页查询与增删改PageBean 加 PreparedStatement 的常规写法成绩列表不能一次性把几千行全查出来一般用 PageBean 封装分页数据。分页查询的通用结构如下public class PageBeanT { private int pageNum; // 当前页码 private int pageSize; // 每页显示条数 private long total; // 总记录数 private ListT list; // 当前页的数据 public int getOffset() { // MySQL 分页从 0 开始所以页码要减 1 return (pageNum - 1) * pageSize; } // getter / setter 省略 }ScoreDao 里的分页查询方法核心是“先查总数再查当前页”public PageBeanScoreVO findPage(int pageNum, int pageSize, String keyword) { PageBeanScoreVO pageBean new PageBean(); pageBean.setPageNum(pageNum); pageBean.setPageSize(pageSize); String countSql SELECT COUNT(*) FROM score; String listSql SELECT s.stu_no, s.name, c.course_name, sc.score, sc.exam_time FROM score sc JOIN student s ON sc.student_id s.id JOIN course c ON sc.course_id c.id ; // 关键词不为空时按学生姓名或学号模糊筛选 StringBuilder where new StringBuilder( WHERE 11 ); if (keyword ! null !keyword.trim().isEmpty()) { where.append( AND (s.name LIKE ? OR s.stu_no LIKE ?) ); } // 第一步查总数 long total queryCount(countSql where); pageBean.setTotal(total); // 第二步查当前页数据LIMIT 两个参数分别是偏移量和条数 listSql where ORDER BY sc.exam_time DESC, sc.id DESC LIMIT ?, ?; ListScoreVO list queryList(listSql, keyword, pageBean.getOffset(), pageSize); pageBean.setList(list); return pageBean; }我一般建议分页 SQL 加上排序字段比如ORDER BY sc.exam_time DESC, sc.id DESC否则数据相同时间时翻页顺序会乱。LIMIT ?, ?里第一个是偏移量第二个是每页条数查询总数和查询列表分两步执行成绩系统数据量不大不需要额外加事务但如果做订单类系统这两条 SQL 就应该放进同一个事务里保证一致性。新增、修改、删除的方法结构基本一致重点看这一组// 新增成绩 public int insertScore(Score score) { String sql INSERT INTO score (student_id, course_id, score, exam_time) VALUES (?, ?, ?, ?); // 用 PreparedStatement 传参防止 SQL 注入 return update(sql, score.getStudentId(), score.getCourseId(), score.getScore(), score.getExamTime()); } // 修改成绩 public int updateScore(Score score) { String sql UPDATE score SET score ?, exam_time ? WHERE id ?; return update(sql, score.getScore(), score.getExamTime(), score.getId()); } // 删除成绩 public int deleteById(int id) { String sql DELETE FROM score WHERE id ?; return update(sql, id); }我一般会把update方法抽到 BaseDao 里统一处理它内部创建 PreparedStatement、执行 executeUpdate、关闭资源。所有传参一律用?占位符杜绝字符串拼接 SQL这已经是传统 JSP 项目里最基本的底线。新增或修改完成后Servlet 里再搞一次resp.sendRedirect(list?pageNum1)页面刷新后回到列表第一页不会出现表单重复提交。4.3 ECharts 统计图后端返回 JSON前端配置柱状图、饼图和折线图成绩系统里最提气的功能是统计图这也是这个项目新增的部分。后端不直接渲染图表而是返回 JSON 数据前端用 ECharts 配置项去画图两边解耦想改图表样式不用动 Java 代码。后端统计接口的 Servlet 大致是这样WebServlet(/stats/score) public class ScoreStatsServlet extends HttpServlet { Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { // 指定返回 JSON并强制 UTF-8否则前端拿到的中文会是乱码 resp.setContentType(application/json;charsetUTF-8); // scoreDao.countByScoreRange() 返回 // [{range: 90-100, count: 5}, {range: 80-89, count: 12}, ...] ListMapString, Object stats scoreDao.countByScoreRange(); // 简单手动拼 JSON字段少时够用 StringBuilder json new StringBuilder(); json.append({\ranges\:[); for (int i 0; i stats.size(); i) { if (i 0) json.append(,); json.append(\).append(stats.get(i).get(range)).append(\); } json.append(],\counts\:[); for (int i 0; i stats.size(); i) { if (i 0) json.append(,); json.append(stats.get(i).get(count)); } json.append(]}); resp.getWriter().write(json.toString()); } }统计页面chart.jsp里先用script引入本地 ECharts 文件再用fetch请求这个接口% page contentTypetext/html;charsetUTF-8 languagejava % ! DOCTYPE html html head meta charsetUTF-8 title成绩统计/title !-- 路径前必须拼 contextPath部署后项目名变化也不会错 -- script src%request.getContextPath()%/static/js/echarts.min.js/script /head body div idscoreChart stylewidth: 760px; height: 420px;/div script // 1. 请求后端统计接口 fetch(%request.getContextPath()%/stats/score) .then(res res.json()) .then(data { // 2. 初始化图表 var chart echarts.init(document.getElementById(scoreChart)); chart.setOption({ title: { text: 成绩分数段分布, left: center }, tooltip: { trigger: axis }, xAxis: { type: category, data: data.ranges // [90-100,80-89,70-79,60-69,60以下] }, yAxis: { type: value }, series: [{ name: 人数, type: bar, data: data.counts, itemStyle: { // 按分数段设置不同颜色 color: function (params) { var colors [#1E90FF, #91CC75, #FAC858, #EE6666, #888]; return colors[params.dataIndex % colors.length]; } } }] }); }) .catch(err console.error(统计图数据加载失败:, err)); /script /body /html这段逻辑说明三点。echarts.init一定要在 DOM 元素渲染完成后执行所以脚本放在图表 div 后面比较稳fetch返回的是 Promise数据到达后再调用setOption不能在外面直接用data.ranges否则拿到的是 undefined。柱状图的itemStyle.color返回一个函数ECharts 会为每个数据项调用它从而让不同分数段显示不同颜色。如果想把柱状图换成饼图或折线图只需要改series这一节// 饼图把 series.type 改成 pie并把 data 换成数组对象 series: [{ name: 成绩占比, type: pie, radius: [40%, 70%], // 这样得到环形图效果 data: data.pieData // [{name: 优秀, value: 12}] 结构 }] // 折线图把 series.type 改成 line并加 smooth 平滑曲线 series: [{ name: 历次考试平均分, type: line, smooth: true, data: data.averageTrend // [78.5, 81.2, 84.0, 83.5] }]饼图的radius数组前一个值是内半径后一个是外半径内半径不为 0 就变成环形折线图的smooth控制曲线是否平滑。后端只需要按对应字段返回符合结构的 JSON前端配置就能直接复用。ECharts 的官方示例很多字段命名也稳定拿到一个示例改成自己的数据字段即可不需要背配置项。5. 避坑实录环境、驱动、乱码、路径四组卡点的排查记录这套项目我在不同机器上反复部署过踩过的坑基本集中在环境创建、数据库驱动、中文字符集、资源路径四块。下面按“现象 → 原因 → 解决”的方式整理几乎可以当一份排错清单用。5.1 环境卡点新版本 IDEA 里建不出 JavaWeb 项目现象新版 IDEA 的 New Project 面板里找不到 Java Enterprise 选项创建出来的普通 Java 项目没有src/main/webapp目录手动补上后 Tomcat 启动找不到 JSP。原因新版 IDEA 默认不再把 Web 项目作为独立模板展示只有项目被识别为 Web Facet 后webapp目录才会被编译进部署包。还有一个常见原因是项目创建时选了普通 Java 而不是 Maven Web 骨架导致连web.xml都没有。解决在项目上按CtrlShiftAltS打开 Project Structure选中 Modules点加号添加 Web Facet然后把 Web Resource Directory 指到src/main/webapp。另有一种更省事的方式新建工程时选择 Maven Archetype 里的maven-archetype-webapp它会自动生成web.xml和src/main/webapp。最后在 Run Configuration 里配置 TomcatDeployment 里添加war exploded而不是war否则每次改 JSP 都要重新打包。5.2 数据库卡点MySQL 8 驱动的 ClassNotFoundException 与 SSL 报错现象项目启动后执行查询控制台报ClassNotFoundException: com.mysql.jdbc.Driver或者连接时抛The server time zone value异常有时还夹杂Communications link failure。原因MySQL 5.x 时代驱动类是com.mysql.jdbc.DriverMySQL 8.x 换成了com.mysql.cj.jdbc.Driver同时 MySQL 8 默认时区不是本地东八区连接 URL 不带serverTimezone就会报错。如果用的是本地 MySQL 8 且连接 URL 没加allowPublicKeyRetrievaltrue还会遇到公钥检索被拒。解决换用mysql-connector-java-8.x.jar并把连接 URL 调整成下面这个标准写法jdbc:mysql://localhost:3306/student_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalseallowPublicKeyRetrievaltrue注意在c3p0-config.xml里要写成amp;在 Java properties 或代码字符串里写就行。我没有刻意去背参数记住三类即可编码类、时区类、SSL 类。MySQL 8 默认走 SSL 加密握手本地开发用useSSLfalse关掉能省掉证书配置的麻烦。5.3 乱码卡点页面问号、参数乱码、入库乱码其实是三件事现象登录用户名输入中文后查询无结果成绩列表页面看到“????”MySQL 表里中文变成乱码。原因一个请求从浏览器到数据库要经过多个编码环节任何一个环节不一致就出问题。最常见的是 JSP 页面pageEncoding没有指定 UTF-8其次是 Servlet 读取 POST 参数前没有设置请求编码第三是 MySQL 表建成默认的 latin1 字符集。解决按三个环节分别处理。第一JSP 头部写pageEncodingUTF-8HTML 的meta charsetUTF-8也写上。第二在 Filter 里统一设置request.setCharacterEncoding(UTF-8)和response.setCharacterEncoding(UTF-8)这个 Filter 必须最先执行因为参数一旦被读取再设置编码就不生效了。第三建库建表时统一DEFAULT CHARSET utf8mb4注意utf8mb4和utf8的区别前者才完整支持中文及 emoji。5.4 路径卡点JSP 页面样式丢失与 Servlet 404现象首页能打开但完全没有样式echarts.min.js引入后浏览器控制台报 404访问 Servlet 地址报 404 或 500。原因JSP 在子目录下引用了相对路径比如list.jsp在score/下里面写../static/css可能碰巧能用但部署到不同项目上下文之后路径全断了。Servlet 404 的另一个常见原因是WebServlet注解和web.xml里的映射同时存在Tomcat 启动就报冲突。解决统一使用上下文路径拼接。JSP 里的写法是${pageContext.request.contextPath}script src${pageContext.request.contextPath}/static/js/echarts.min.js/script link relstylesheet href${pageContext.request.contextPath}/static/css/style.cssServlet 侧用req.getContextPath()。检查 404 时先看是不是过滤器拦截了路径再看注解与 web.xml 是否冲突最后确认浏览器地址栏大小写——Linux 服务器上ScoreServlet和scoreservlet是不同路径。这个检查顺序基本能覆盖 90% 的路径问题。6. 部署与验证打一个 WAR 包把整套流程从开发态走到发布态开发环境跑通只是第一步真正能交出去的是打成 WAR 包放到 Tomcat 里还能正常跑的状态。传统 JSP 项目有两种打包方式如果项目用 Maven 管理直接执行mvn clean package -Dmaven.test.skiptrue执行完成后target/目录下会出现一个javaweb-student-score.war这就是可部署文件。如果项目不用 Maven可以在 IDEA 的 Project Structure → Artifacts 里新建 Web Application: Archive构建后同样产出一个 WAR。把 WAR 复制到 Tomcat 的webapps/目录下启动 Tomcat控制台输出一行“Deployment of web application archive ... has finished”就说明部署成功。默认访问地址是http://localhost:8080/javaweb-student-score/login.jsp这个路径里的javaweb-student-score就是 WAR 包文件名如果文件名改了路径第一段也要跟着变。到这里部署环节全部完成下面是我的固定验证顺序照着过一遍就能判定这个系统能不能交付第一步访问登录页输入错误密码看是否提示错误输入正确密码确认能进入首页。第二步不登录直接访问index.jsp浏览器应被重定向回login.jspSession 拦截生效。第三步新增一条成绩、修改分数、删除一条记录回列表页确认数据与数据库一致。第四步打开成绩统计页在浏览器开发者工具 Network 面板里查看/stats/score请求是否返回 JSON并确认柱状图、饼图与数据库查询结果对得上。如果统计页一片空白优先看 Network 接口而不是先调 ECharts 配置。图表空白绝大多数不是 ECharts 的问题而是后端 JSON 没返回或者请求被过滤器拦截了。这套部署验证流程是从头到尾踩出来的。从那以后我每次交付 JSP 项目都强制自己走一遍完整验证清单先跑登录、再测增删改、再看图表接口最后才打 WAR 包发给对方。在本地怎么改都能跑的环境里交付到对方机器上就出事多半是因为只验证了功能没验证部署过程。把这个流程钉死你交付的就不是一段能跑的代码而是一个能落地的项目。希望帮到你。本文还有配套的精品资源点击获取