资讯动态

Servlet+JSP+MySQL成绩管理系统源码实战:ECharts统计图与避坑指南

发布时间:2026/10/17 9:12:33 来源:尧图企业网站定制
简介这是一套面向JavaWeb初学者与课程设计开发者的学生成绩管理系统完整源码基于Servlet、JSP与MySQL技术栈实现在原项目基础上新增了ECharts统计图表功能可用于毕业设计、课程作业或框架入门练习。压缩包共344个文件约3.59MB其中86个Java源文件与86个class文件构成后端业务与DAO分层实现37个JSP页面负责视图展示62个JS与28个CSS文件支撑前端交互与样式另含6个jar依赖、1个sql建表脚本及字体、图片等静态资源目录结构完整可直接导入运行。资源已有6724人学习下载热度较高。读者可从中获取成绩录入、查询、修改、删除等核心模块的完整实现思路理解Servlet控制层、Service业务层与Dao数据层的分层设计并参考ECharts统计图的接入方式快速搭建可运行的学生成绩管理项目适合作为JavaWeb综合实践的参考范例。1. 从一份 ServletJSPMySQL 的成绩管理系统源码说起它到底能跑通什么如果你手头正压着一个 JavaWeb 课设或者实训任务要求做一套学生成绩管理系统还要带 ECharts 统计图那这份基于 ServletJSPMySQL 的源码包大概率能让你少熬两个通宵。它不是那种只放几张截图、代码缺胳膊少腿的“演示版”而是一套能完整跑通增删改查、分角色登录、成绩录入与统计图表渲染的传统 MVC 项目。技术栈很明确后端用原生 Servlet 处理请求JSP 负责视图渲染MySQL 存数据前端用 ECharts 把成绩分布、班级均分这类数据画成柱状图和饼图。适合谁正在学 JavaWeb 三件套、需要交课程设计、或者想拿一个“不依赖 Spring 全家桶”的干净项目练手的人。你拿到手最关心的无非三件事环境能不能快速搭起来、数据库脚本全不全、统计图的数据链路是不是真的从 SQL 查出来的。下面按我实际拆包复现的顺序把每一步和容易翻车的地方都摊开讲。2. 环境搭建与数据库初始化把 Tomcat、JDK、MySQL 版本对齐2.1 版本选型为什么这套源码不建议上 JDK 17传统 ServletJSP 项目对版本比较敏感。源码里用的是javax.servlet包不是jakarta.servlet这意味着你必须用 Tomcat 9.x 及以下版本JDK 建议 8 或 11。如果你头铁上了 Tomcat 10启动直接报ClassNotFoundException: javax.servlet.http.HttpServlet因为 Tomcat 10 把包名换成了jakarta.*。MySQL 用 5.7 或 8.0 都行但 8.0 要改驱动类名和连接串参数。我一般会先确认三件事java -version输出是不是 1.8 或 11Tomcat 的lib目录下有没有servlet-api.jarMySQL 服务能不能正常连。这三样对齐了后面 80% 的玄学问题都不会出现。2.2 导入数据库建库、建表、插初始数据源码包里通常有一个.sql文件我习惯先用命令行导入比图形化工具少踩编码坑。步骤是先建库再选库最后执行脚本。# 登录 MySQL注意 -p 后面直接跟密码有安全提示回车后再输入更稳妥 mysql -u root -p # 建库字符集用 utf8mb4避免中文姓名和课程名乱码 CREATE DATABASE student_score DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 切换到该库 USE student_score; # 导入表结构和初始数据路径换成你实际存放 sql 文件的位置 source /path/to/student_score.sql;执行完用SHOW TABLES;确认表都建出来了。常见的有student、teacher、course、score、user这几张。如果导入时报ERROR 1366 Incorrect string value说明脚本里的字符集和库不一致把建库语句的utf8mb4改成utf8再试或者用编辑器把 sql 文件转成 UTF-8 无 BOM 格式。这一步别偷懒编码问题拖到后面查会非常痛苦。2.3 改配置文件数据库连接串和项目上下文数据库通了之后去源码里找数据库连接配置。原生 Servlet 项目一般有两种写法一种是在src下放db.properties一种是把连接参数硬编码在某个DBUtil.java里。找到后重点改四个值URL、用户名、密码、驱动类。// 常见于 DBUtil.java 或 BaseDao.java 中 private static final String URL jdbc:mysql://localhost:3306/student_score?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse; private static final String USER root; private static final String PASSWORD 你的密码; private static final String DRIVER com.mysql.cj.jdbc.Driver; // MySQL 8.0 用 cj5.7 用 com.mysql.jdbc.DriverserverTimezone这个参数在 MySQL 8.0 下必须加否则报The server time zone value ?D1ú±ê×?ê±?? is unrecognized。useSSLfalse是关掉 SSL 警告本地开发无所谓。改完把项目部署到 Tomcat 的webapps目录或者直接在 IDE 里配 Tomcat 运行。访问路径一般是http://localhost:8080/项目名/login.jsp。如果 404检查web.xml里的url-pattern和你的访问路径是否一致。3. 核心功能链路拆解登录、成绩 CRUD 与 ECharts 数据接口3.1 登录与权限拦截Session 里到底存了什么这套系统的登录逻辑不复杂但它是理解整个请求链路的入口。用户在login.jsp提交表单LoginServlet拿到用户名密码去user表里查查到了就把用户信息塞进HttpSession然后根据角色跳转到不同页面。学生看到的是自己的成绩查询教师看到的是成绩录入和统计。关键代码在 Servlet 的doPost方法里// LoginServlet.java 核心逻辑 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username request.getParameter(username); String password request.getParameter(password); User user userService.login(username, password); // 底层就是一条 select if (user ! null) { HttpSession session request.getSession(); session.setAttribute(currentUser, user); // 存整个用户对象 session.setAttribute(role, user.getRole()); // 单独存角色方便 JSP 里判断 if (teacher.equals(user.getRole())) { response.sendRedirect(teacher/score_list.jsp); } else { response.sendRedirect(student/my_score.jsp); } } else { request.setAttribute(msg, 用户名或密码错误); request.getRequestDispatcher(login.jsp).forward(request, response); } }这里有个容易忽略的点sendRedirect和forward的区别。登录成功用重定向防止刷新页面重复提交表单登录失败用转发能把错误信息带回去。另外Session 里存了currentUser之后后续所有需要登录才能访问的 Servlet 都应该先检查session.getAttribute(currentUser)是否为空为空就踢回登录页。源码里如果没做这个拦截你自己加一个LoginFilter会更稳妥。3.2 成绩录入与查询一条 SQL 从表单到列表成绩管理的主体是score表通常包含student_id、course_id、score这几个字段。教师录入成绩时JSP 表单提交到ScoreServletServlet 调用 DAO 层执行INSERT或UPDATE。查询列表则是SELECT配合JOIN把学生姓名、课程名一起查出来。-- 成绩列表查询关联三张表拿到可读信息 SELECT s.id, st.name AS student_name, c.name AS course_name, s.score FROM score s JOIN student st ON s.student_id st.id JOIN course c ON s.course_id c.id ORDER BY s.id DESC;对应的 Servlet 里doGet根据action参数决定是查全部还是查个人。比如actionlist走全量查询actionmy走带student_id条件的查询。这里常见的坑是中文参数乱码。如果表单提交后收到的课程名是乱码在 Servlet 第一行加request.setCharacterEncoding(UTF-8);并且确保 JSP 页面顶部是% page contentTypetext/html;charsetUTF-8 languagejava %。Tomcat 8 以后 GET 请求默认 UTF-8但 POST 请求必须手动设。3.3 ECharts 统计图数据从 SQL 到前端的完整链路新增的 ECharts 统计图是这套源码的加分项。它的实现思路很直接后端提供一个返回 JSON 的 Servlet前端用 Ajax 请求这个接口拿到数据后交给 ECharts 渲染。以“班级成绩分布”为例后端 SQL 按分数段分组统计人数-- 按分数段统计人数用于柱状图 SELECT CASE WHEN score 90 THEN 优秀 WHEN score 80 THEN 良好 WHEN score 70 THEN 中等 WHEN score 60 THEN 及格 ELSE 不及格 END AS level, COUNT(*) AS count FROM score GROUP BY level;后端 Servlet 把结果集转成 JSON 字符串前端 JSP 里这样接// 在统计页面引入 echarts.min.js 后 var chart echarts.init(document.getElementById(scoreChart)); $.ajax({ url: ChartServlet?typedistribution, // 指向返回 JSON 的 Servlet type: GET, dataType: json, success: function (data) { var option { title: { text: 成绩分布统计 }, tooltip: {}, xAxis: { data: data.levels }, // 后端返回的等级数组 yAxis: {}, series: [{ name: 人数, type: bar, data: data.counts // 后端返回的人数数组 }] }; chart.setOption(option); }, error: function () { alert(统计图数据加载失败检查 ChartServlet 是否正常返回 JSON); } });这里的关键是后端返回的 JSON 格式必须和前端data.levels、data.counts对应上。我见过有人后端返回的是[{level:优秀,count:5},...]这种对象数组前端却按两个平行数组去取结果图是空的。排查时直接在浏览器地址栏访问ChartServlet?typedistribution看返回的 JSON 长什么样比在代码里猜快得多。另外 ECharts 的容器div必须给明确高度否则图渲染不出来这是新手最常翻的车。4. 避坑与排查这套源码跑不起来时先查这五处4.1 现象Tomcat 启动报 404项目根本没部署上原因通常是项目没有正确放到webapps目录或者 IDE 里配的 Artifact 有问题。解决检查 Tomcat 的webapps下有没有你的项目文件夹里面有没有WEB-INF和index.jsp。如果在 IDE 里跑去 Run Configuration 确认 Deployment 选项卡里 Artifact 已经添加。另一个隐蔽原因是web.xml里welcome-file配的首页文件不存在Tomcat 找不到默认页也会 404。4.2 现象数据库连不上报 Access denied 或 Communications link failure先确认 MySQL 服务在跑net start mysql或systemctl status mysql。然后确认用户名密码和DBUtil里写的一致。Communications link failure多半是端口不对或者 MySQL 没启动默认 3306如果你改过端口要同步改连接串。还有一种情况是 MySQL 8.0 的caching_sha2_password认证插件导致旧驱动连不上解决办法是改用户认证方式或者换用mysql-connector-java-8.0.x的驱动 jar。4.3 现象中文乱码学生姓名和课程名全是问号三个地方要同时设 UTF-8数据库建库时CHARACTER SET utf8mb4JSP 页面pageEncodingUTF-8Servlet 里request.setCharacterEncoding(UTF-8)。如果还乱检查 Tomcat 的server.xml里 Connector 有没有加URIEncodingUTF-8。另外用source命令导入 sql 文件时如果文件本身是 GBK 编码也会导致存进去就是乱码用file -i xxx.sql看一下编码转成 UTF-8 再导。4.4 现象ECharts 图不显示页面空白但控制台没报错最常见的原因是容器div没有设高度。ECharts 初始化时需要知道画布尺寸如果div高度是 0图就渲染不出来。给#scoreChart加stylewidth:100%;height:400px;即可。其次检查echarts.min.js的引入路径对不对F12 看 Network 里这个 js 是不是 404。最后确认 Ajax 请求的ChartServlet返回的Content-Type是application/json如果返回的是text/htmldataType:json解析会失败走 error 回调。4.5 现象修改代码后刷新页面没变化还是旧逻辑这是 Tomcat 缓存和 JSP 编译机制导致的。JSP 修改后一般会自动重新编译但 Java 类修改后必须重启 Tomcat 才生效。如果你在 IDE 里开了热部署但没生效去 Tomcat 的work目录把对应项目的缓存文件夹删掉重启。另外浏览器缓存也可能让你看到旧页面CtrlF5 强制刷新。我一般改完 Servlet 代码后直接重启 Tomcat比等热部署靠谱。5. 进阶技巧把统计图数据接口做成通用查询以及我的验证习惯这套源码的 ECharts 部分目前是写死的几个统计维度比如成绩分布、班级均分。如果你想让它更灵活可以把ChartServlet改成一个通用接口通过type参数决定执行哪条 SQL返回统一格式的 JSON。这样加新图表时只需要加一个case分支和对应的 SQL前端不用动。我一般会这样组织// ChartServlet 里根据 type 分发查询 String type request.getParameter(type); ListMapString, Object result; switch (type) { case distribution: result chartDao.getScoreDistribution(); break; case classAvg: result chartDao.getClassAverage(); break; case coursePass: result chartDao.getCoursePassRate(); break; default: result Collections.emptyList(); } // 统一转成 {categories:[], values:[]} 结构返回 response.setContentType(application/json;charsetUTF-8); response.getWriter().write(JSON.toJSONString(formatChartData(result)));这样前端所有图表都按同一套categories和values去取复用性高很多。验证方法也简单每加一个type先在浏览器直接访问ChartServlet?typexxx确认 JSON 结构对再去页面上看图表。我习惯在formatChartData里加一行日志把转换后的 JSON 打到控制台这样前端拿不到数据时一眼就能判断是后端没查出来还是前端解析错了。另外这套系统如果要拿去做课设答辩建议把web.xml里的 Servlet 配置改成注解方式WebServlet(/ChartServlet)少一层 XML 配置演示时更清爽。数据库连接池也可以从裸 JDBC 换成 Druid 或 C3P0虽然源码里没带但加进去之后并发查询成绩时不会频繁创建连接答辩时也是个加分项。从那以后我每次拿到这类传统 JavaWeb 项目都强制先跑通数据库连接和登录再去看业务代码顺序反了就会在环境问题上浪费大量时间。希望帮到你。本文还有配套的精品资源点击获取

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑