SpringMVC动态网站开发实验基于SpringMVC的加法器设计一、实验概述1. 实验目的理解MVC 设计模式掌握SpringMVC框架的基本应用掌握SpringMVC框架技术在JSP项目开发中的应用2.实验内容与设计思想本次实验基于SpringMVC框架设计实现一个简易加法器具体要求如下视图层采用JSP页面用于渲染加法器界面表单需在页面中水平居中显示输入框设置占位符提示文字后端通过SpringMVC框架接收请求、传递计算结果与错误信息前端通过JSTL实现结果与提示的动态展示。核心设计思想MVC架构Model模型层核心数据为用户输入的两个数字、计算结果与错误提示信息由后端控制器封装并传递给视图层View视图层JSP页面作为视图载体通过HTML/CSS实现表单居中布局与渐变背景美化结合JSTL标签实现结果与错误信息的动态渲染Controller控制层SpringMVC的Controller类负责接收浏览器请求、执行非空与数字合法性校验、完成加法运算、跳转至加法器JSP页面并传递数据实现前后端交互。2. 实验环境操作系统Windows 10开发工具Eclipse JavaEE IDE服务器Apache Tomcat 8.5框架SpringMVC 4.3.7JDK1.8前端JSP CSS JSTL二、项目整体架构MVC 分层Model模型层本实验模型层较简单数据由 Controller 直接处理数字、和、错误信息通过Model对象传递到视图。核心组件为Model对象。View视图层JSP 页面负责展示输入表单、计算结果或错误信息。页面采用 CSS 居中布局并提供用户友好的交互。核心组件为adder.jsp。Controller控制层AdderController.java负责接收表单请求执行非空和数字校验计算和并将结果或错误存入 Model最后返回视图。核心组件为AdderController。配置层web.xml配置前端控制器DispatcherServletspringmvc-servlet.xml配置组件扫描、视图解析器、注解驱动。核心组件为web.xml、springmvc-servlet.xml。项目文件结构三、关键代码展示1. 后端控制器AdderController.javapackagecom.jmu.controller;importorg.springframework.stereotype.Controller;importorg.springframework.ui.Model;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;ControllerpublicclassAdderController{RequestMapping(/adder)publicStringshowAdderPage(){returnadder;}RequestMapping(/compute)publicStringcompute(RequestParam(valuenum1,requiredfalse)Stringnum1Str,RequestParam(valuenum2,requiredfalse)Stringnum2Str,Modelmodel){// 非空校验if(num1Strnull||num1Str.trim().isEmpty()||num2Strnull||num2Str.trim().isEmpty()){model.addAttribute(error,输入不能为空请填写两个数字);model.addAttribute(num1,num1Str);model.addAttribute(num2,num2Str);returnadder;}// 数字校验doublenum1,num2;try{num1Double.parseDouble(num1Str.trim());num2Double.parseDouble(num2Str.trim());}catch(NumberFormatExceptione){model.addAttribute(error,请输入有效的数字);model.addAttribute(num1,num1Str);model.addAttribute(num2,num2Str);returnadder;}// 计算和doublesumnum1num2;// 存入Model并返回model.addAttribute(num1,num1Str);model.addAttribute(num2,num2Str);model.addAttribute(sum,sum);model.addAttribute(success,true);returnadder;}}2. 前端视图adder.jsp% page contentTypetext/html;charsetUTF-8 languagejava % % taglib prefixc urihttp://java.sun.com/jsp/jstl/core % !DOCTYPE html html langzh-CN head meta charsetUTF-8 titleSpringMVC 加法器/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea, #764ba2); font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } .container { background: rgba(255,255,255,0.95); padding: 40px; border-radius: 20px; width: 400px; text-align: center; } h1 { color: #5a67d8; margin-bottom: 30px; font-size: 28px; } .input-group { margin-bottom: 20px; text-align: left; } .input-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #4a5568; } .input-group input { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 16px; outline: none; transition: 0.2s; } .input-group input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.2); } .input-group input::placeholder { color: #cbd5e0; font-weight: normal; } button { background: #667eea; color: white; border: none; padding: 12px 30px; border-radius: 30px; cursor: pointer; font-size: 18px; transition: 0.2s; } button:hover { background: #5a67d8; transform: scale(1.02); } .result { margin-top: 25px; padding: 15px; border-radius: 12px; font-size: 16px; } .success { background: #c6f6d5; color: #22543d; border-left: 5px solid #38a169; } .error { background: #fed7d7; color: #742a2a; border-left: 5px solid #e53e3e; } .back-link { display: inline-block; margin-top: 20px; color: #667eea; text-decoration: none; } .back-link:hover { text-decoration: underline; } /style /head body div classcontainer h1✨ 简易加法器 ✨/h1 form action${pageContext.request.contextPath}/compute methodpost div classinput-group label数字 A/label input typetext namenum1 value${num1} placeholder例如 3.14 或 42 /div div classinput-group label数字 B/label input typetext namenum2 value${num2} placeholder例如 2.71 或 58 /div button typesubmit计算和 ➕/button /form c:if test${success} div classresult success strong计算结果/strong ${num1} ${num2} ${sum} /div /c:if c:if test${not empty error} div classresult error strong⚠️ 错误/strong ${error} /div /c:if ↻ 重新计算 /div /body /html3. 配置文件web.xml关键部分servletservlet-namespringmvc/servlet-nameservlet-classorg.springframework.web.servlet.DispatcherServlet/servlet-classinit-paramparam-namecontextConfigLocation/param-nameparam-value/WEB-INF/springmvc-servlet.xml/param-value/init-paramload-on-startup1/load-on-startup/servletservlet-mappingservlet-namespringmvc/servlet-nameurl-pattern//url-pattern/servlet-mapping4. 配置文件springmvc-servlet.xmlcontext:component-scanbase-packagecom.jmu.controller/mvc:annotation-driven/beanclassorg.springframework.web.servlet.view.InternalResourceViewResolverpropertynameprefixvalue/WEB-INF/views//propertynamesuffixvalue.jsp//beanmvc:resourcesmapping/css/**location/css//四、核心功能与设计1. 功能需求用户在表单中输入两个数字支持整数、小数。点击“计算和 ➕”按钮提交数据到后端。后端校验任一输入为空 → 提示“输入不能为空”。输入非数字如字母 → 提示“请输入有效的数字”。校验通过 → 计算两数之和并在下方显示结果。页面提供“重新计算”链接可清空结果并返回初始状态。五、运行效果与截图启动 Tomcat访问http://localhost:9090/springmvc-adder/adder。页面居中显示背景为蓝紫渐变白色圆角卡片。正常计算输入53和24.4点击“计算和 ➕”下方显示“计算结果53 24.4 77.4”空值校验不输入内容直接提交提示“输入不能为空请填写两个数字”。非数字校验输入字母如a提示“请输入有效的数字”。六、实验中遇到的问题与解决问题一访问 /adder 页面出现404错误原因项目视图解析器配置的前缀路径为 /WEB-INF/views/但编写好的 adder.jsp 页面文件未放置在该指定目录下导致框架无法匹配到对应视图资源页面访问失败。解决方法调整项目文件目录将 adder.jsp 移动到 WEB-INF/views/文件夹中重启Tomcat服务器后404问题解决页面可正常访问。问题二Tomcat启动报错提示 ClassNotFoundException: DispatcherServlet原因Spring框架的核心jar包仅添加到了项目的Build Path编译路径中并未复制到项目运行生效的 WEB-INF/lib 目录服务器运行时无法加载Spring核心调度器类引发类找不到异常。解决方法手动将Spring所需的7个核心jar包复制粘贴到 WebContent/WEB-INF/lib 目录下重新部署项目并启动Tomcat异常消失服务器正常启动七、实验小结与收获1. 实验总结本次实验基于 SpringMVC 框架成功实现了一个具有完整校验功能的加法器。项目严格遵循 MVC 分层Controller 负责请求处理和业务逻辑View 负责展示配置层负责框架调度。通过实践我掌握了Controller、RequestMapping、RequestParam等注解的使用理解了 Model 对象在前后端数据传输中的作用。2. 个人收获加深了对 SpringMVC 运行流程的理解从浏览器请求 →DispatcherServlet→Controller→ 处理逻辑 → 返回视图 → 渲染页面的完整链路。掌握了输入校验的常见方法非空判断、try-catch数字转换、错误信息回显。学会了独立解决 Web 项目部署中的典型问题404 路径错误、ClassNotFoundExceptionjar 包未发布到lib、JSTL 标签库缺失等。提升了前端布局与样式能力使用 Flexbox 实现居中通过::placeholder定制提示文字样式使界面更友好。3. 不足与改进目前仅支持加法可以扩展为四则运算计算器。可增加历史记录功能将每次计算结果保存到 session 或数据库。八、附录参考资料《Web编程技术》第二版余元辉主编清华大学出版社2024.8