Web实验--基于动态Web工程框架的标准化考试系统的设计
实验博客：基于动态Web工程框架的标准化考试系统设计
本次Web编程技术课程实验，我们小组四人围绕基于动态Web工程框架的标准化考试系统设计主题，采用Spring MVC框架完成了C语言单选题在线考试与自动评分系统的开发。实验聚焦动态Web交互核心技术，将理论知识转化为实际工程能力，下面从实验概述、实现过程、小组分工、实验总结四方面记录本次实验过程。
一、实验概述
1. 实验目的
本次实验旨在深入理解动态Web开发核心原理，掌握Request、Response内置对象的交互机制；熟练搭建Spring MVC动态Web工程框架，熟悉控制器、视图解析器等核心组件的配置与应用；通过小组协作，实现标准化考试系统的答题、判分、成绩展示全流程，提升Web开发与团队协作能力。
2. 实验内容
设计并实现两个核心JSP页面与Spring MVC控制逻辑：一是考试页面，展示5道C语言单选题，提供单选答题选项，通过表单提交答题数据；二是评分页面，通过Request对象获取答题信息，与标准答案比对后自动计算得分，最终展示考试成绩。实验全程依托Spring MVC框架，实现客户端与服务器的动态数据交互。
3. 实验环境
- 操作系统：Microsoft Windows 10
- 开发工具：Eclipse Developer for JavaEE、DreamWeaver CS5
- 核心环境：JDK1.8、Tomcat 8
- 技术栈：Spring MVC、JSP、Maven
二、实验实现过程
1. 工程框架搭建
首先通过Maven创建Web项目，在pom.xml中引入Spring MVC、Servlet、JSP核心依赖，确保框架运行所需组件齐全。配置web.xml文件，注册Spring MVC核心控制器DispatcherServlet，关联框架配置文件，设置项目欢迎页为考试页面，简化项目访问入口。
随后编写springmvc-servlet.xml核心配置文件，开启组件扫描功能，指定控制器所在包路径；启用注解驱动，支持Spring MVC注解开发；配置视图解析器，统一JSP视图的前缀与后缀，实现控制器与视图页面的快速跳转，完成Spring MVC框架基础搭建。
2. 核心页面开发
（1）考试页面（exam.jsp）
页面标题为“C语言标准化测试”，依次展示5道C语言基础单选题，每道题设置A、B、C、D四个单选选项。页面设计简洁清晰，通过HTML表单包裹所有答题选项，表单提交方式为POST，提交地址映射至控制器处理路径，确保答题数据能准确发送至服务器。
点击查看代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标准化考试系统 - Spring MVC</title>
<style>
body { font-family: 微软雅黑; margin: 30px; }
.question { margin-bottom: 25px; }
.btn { margin-top: 20px; }
</style>
</head>
<body>
<h2>📝 Web编程技术 —— 单选题标准化考试（Spring MVC版）</h2>
<form action="${pageContext.request.contextPath}/submitExam" method="post">
<div class="question">
<b>1. 在 Java Web 中，用于获取客户端请求数据的对象是？</b><br>
<input type="radio" name="q1" value="A"> A. response<br>
<input type="radio" name="q1" value="B"> B. request<br>
<input type="radio" name="q1" value="C"> C. session<br>
<input type="radio" name="q1" value="D"> D. application<br>
</div>
<div class="question">
<b>2. Spring MVC 中，接收请求并返回数据的组件是？</b><br>
<input type="radio" name="q2" value="A"> A. Model<br>
<input type="radio" name="q2" value="B"> B. View<br>
<input type="radio" name="q2" value="C"> C. Controller<br>
<input type="radio" name="q2" value="D"> D. DispatcherServlet<br>
</div>
<div class="question">
<b>3. JSP 中，哪个指令用于导入 Java 包？</b><br>
<input type="radio" name="q3" value="A"> A. <jsp:include><br>
<input type="radio" name="q3" value="B"> B. <%@ taglib %><br>
<input type="radio" name="q3" value="C"> C. <%@ page import %><br>
<input type="radio" name="q3" value="D"> D. <%@ include %><br>
</div>
<div class="question">
<b>4. Tomcat 默认端口号是？</b><br>
<input type="radio" name="q4" value="A"> A. 8080<br>
<input type="radio" name="q4" value="B"> B. 80<br>
<input type="radio" name="q4" value="C"> C. 443<br>
<input type="radio" name="q4" value="D"> D. 3306<br>
</div>
<div class="question">
<b>5. HTTP 请求中，POST 方法的数据放在哪里？</b><br>
<input type="radio" name="q5" value="A"> A. URL 后面<br>
<input type="radio" name="q5" value="B"> B. 请求体<br>
<input type="radio" name="q5" value="C"> C. 请求头<br>
<input type="radio" name="q5" value="D"> D. 响应体<br>
</div>
<input type="submit" value="提交试卷" class="btn">
</form>
</body>
</html>
效果展示：
（2）评分页面（score.jsp）
页面用于展示考试结果，通过EL表达式获取控制器传递的成绩数据，以红色醒目字体显示最终得分（满分100分，每题20分）。页面布局简洁，核心突出成绩信息，完成服务器响应数据的客户端展示。
点击查看代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>考试成绩 - Spring MVC</title>
<style>
body { font-family: 微软雅黑; margin: 30px; }
.score-box { background: #f0f0f0; padding: 20px; width: 450px; }
.pass { color: green; }
.fail { color: red; }
</style>
</head>
<body>
<h2>📊 考试评分结果</h2>
<%
Integer scoreObj = (Integer) request.getAttribute("score");
Integer totalObj = (Integer) request.getAttribute("total");
String[] userAnswers = (String[]) request.getAttribute("userAnswers");
int score = (scoreObj != null) ? scoreObj : 0;
int total = (totalObj != null) ? totalObj : 5;
%>
<div class="score-box">
<p><b>你的得分：<%= score %> / <%= total %></b></p>
<p><b>百分比：</b> <%= (score * 100 / total) %>%</p>
<%
if (score >= 3) {
out.println("<p class='pass'>✅ 恭喜你，考试通过！</p>");
} else {
out.println("<p class='fail'>❌ 很遗憾，未通过，请继续努力。</p>");
}
%>
<hr>
<h3>📌 题目详情</h3>
<ul>
<li>第1题：你的答案 <%= (userAnswers != null && userAnswers[0] != null) ? userAnswers[0] : "未作答" %> | 正确答案 B</li>
<li>第2题：你的答案 <%= (userAnswers != null && userAnswers[1] != null) ? userAnswers[1] : "未作答" %> | 正确答案 C</li>
<li>第3题：你的答案 <%= (userAnswers != null && userAnswers[2] != null) ? userAnswers[2] : "未作答" %> | 正确答案 C</li>
<li>第4题：你的答案 <%= (userAnswers != null && userAnswers[3] != null) ? userAnswers[3] : "未作答" %> | 正确答案 A</li>
<li>第5题：你的答案 <%= (userAnswers != null && userAnswers[4] != null) ? userAnswers[4] : "未作答" %> | 正确答案 B</li>
</ul>
<a href="${pageContext.request.contextPath}/exam">重新考试</a>
</div>
</body>
</html>
效果展示：
3. 控制器逻辑开发
创建ExamController控制器类，使用@Controller与@RequestMapping注解实现请求映射。控制器核心逻辑分为三步：一是通过HttpServletRequest对象获取用户提交的5道题答案；二是预设标准答案数组，逐题比对用户答案与标准答案，统计正确题数并计算总分；三是将总分存入请求域，转发至评分页面，完成业务逻辑处理与视图跳转。
4. 调试与问题解决
开发调试阶段，我们遇到表单数据接收失败、视图跳转异常、分数计算错误等问题。通过逐一排查配置文件路径、核对表单参数与控制器接收参数一致性、逐行调试比对逻辑，最终解决所有问题。例如，因视图解析器路径配置错误导致页面404，修正路径参数后成功实现跳转；因数组下标错误导致分数计算偏差，调整下标逻辑后得到正确成绩，确保系统正常运行。
三、小组分工
本次实验共4人参与，我们合理分配任务，高效协同完成开发：
- 余思盈：负责Spring MVC框架搭建，完成Maven依赖配置、
web.xml与springmvc-servlet.xml编写，搭建基础运行环境； - 赵玉娇：负责考试页面（exam.jsp）开发，完成页面布局、题目编写、表单设计与样式调整；
- 庞希颖：负责评分页面（result.jsp）开发与控制器逻辑编写，实现成绩展示与答案比对、分数计算核心功能；
- 黄钰云：负责全系统功能测试、bug排查与调试协助，整理实验代码、运行截图，协助完成实验文档与博客撰写。
小组全程保持实时沟通，及时同步开发进度，共同攻克技术难点，高效完成实验任务。
四、实验总结
1. 实验收获
本次实验让我们切实掌握了动态Web工程框架的搭建流程，深入理解了Request、Response对象在客户端与服务器交互中的核心作用，熟练运用Spring MVC框架实现MVC模式开发，清晰认识到控制器、视图、模型的解耦优势。同时，通过实际开发，我们提升了代码编写、调试排错能力，小组协作过程也增强了团队沟通与配合意识，深刻体会到分工协作在项目开发中的重要性。
2. 不足与改进
本次实验设计的考试系统功能较为基础，仅支持单选题测试，缺少用户登录、错题复盘、题型扩展等功能；代码规范性有待提升，未添加完善的异常处理机制，容错性不足。后续将进一步优化系统，扩展多选题、判断题等题型，增加用户身份验证功能，完善异常处理逻辑，优化代码结构，让系统更完整、稳定。
3. 整体感悟
本次基于动态Web工程框架的标准化考试系统设计实验，是理论与实践深度融合的重要实践。从框架搭建到功能实现，从独立开发到团队协作，我们不仅夯实了Web编程技术基础，更培养了工程思维与解决实际问题的能力。未来，我们将把本次实验所学运用到更多Web项目开发中，不断探索动态Web技术的更多应用场景，持续提升自身专业能力。
浙公网安备 33010602011771号