一、实验目的
理解MVC 设计模式，掌握SpringMVC框架的基本应用，掌握SpringMVC框架技术在JSP项目开发中的应用；
二、实验内容与设计思想
基于SpringMVC框架编写实现一个简单的加法器，要求任意输入两个数字，输出它们的和。要求可以判断输入的非空、非数字等情况并给出合理的提示，界面友好。
三、项目结构
四、实验源码
1.index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加法计算器</title>
<style>
html,body{height: 100%;margin: 0;
}
body{display: flex;justify-content: center;align-items: center;background: #f0f2f5;
}
.calc-box{border: 1px solid #ddd;padding: 35px;border-radius: 10px;background: #ffffff;
}
.item{margin: 12px 0;display: flex;align-items: center;gap:10px;
}
input{padding: 5px;
}
.err-tip{color: red;font-size:13px;display: none;
}
.result{color: green;font-size: 17px;margin-top: 15px;text-align:center;
}
</style>
</head>
<body><div class="calc-box"><h3 align="center">加法计算器</h3><form id="calcForm" action="add" method="post"><div class="item"><label>数字1：</label><input type="text" id="num1" name="num1" value="${num1}"><span class="err-tip" id="tip1">请输入有效数字</span></div><div class="item"><label>数字2：</label><input type="text" id="num2" name="num2" value="${num2}"><span class="err-tip" id="tip2">请输入有效数字</span></div><div style="text-align:center;margin-top:10px"><input type="submit" value="开始计算"></div><div class="result">${sum}</div></form></div><script>
// 判断是否为合法数字
function isNumber(val){return !isNaN(Number(val)) && val.trim()!=='';
}const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const tip1 = document.getElementById('tip1');
const tip2 = document.getElementById('tip2');
const form = document.getElementById('calcForm');// 输入框失去焦点校验
num1.onblur = function(){if(!isNumber(this.value)){tip1.style.display='inline';}else{tip1.style.display='none';}
}
num2.onblur = function(){if(!isNumber(this.value)){tip2.style.display='inline';}else{tip2.style.display='none';}
}// 输入时立刻隐藏提示
num1.oninput = ()=>tip1.style.display='none';
num2.oninput = ()=>tip2.style.display='none';// 提交前整体校验，非法阻止提交
form.onsubmit = function(e){let flag = true;if(!isNumber(num1.value)){tip1.style.display='inline';flag=false;}if(!isNumber(num2.value)){tip2.style.display='inline';flag=false;}if(!flag){e.preventDefault(); // 阻止表单跳转提交}
}
</script>
</body>
</html>
2.AddController.java
package com.controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
public class AddController {@RequestMapping("/add")public String add(String num1, String num2, Model model) {// 非空校验if(num1 == null || num1.trim().isEmpty() || num2 == null || num2.trim().isEmpty()){model.addAttribute("msg", "输入不能为空！");model.addAttribute("num1", num1);model.addAttribute("num2", num2);return "index";}try {double n1 = Double.parseDouble(num1.trim());double n2 = Double.parseDouble(num2.trim());double sum = n1 + n2;model.addAttribute("sum", n1 + " + " + n2 + " = " + sum);model.addAttribute("msg", "");} catch (NumberFormatException e) {model.addAttribute("msg", "请输入合法数字！");model.addAttribute("num1", num1);model.addAttribute("num2", num2);return "index";}return "index";}
}
3.web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"id="WebApp_ID" version="3.0"><!-- SpringMVC前端控制器 --><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>/WEB-INF/springmvc.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping><!-- 编码过滤器 --><filter><filter-name>encodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param></filter><filter-mapping><filter-name>encodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>
</web-app>
4.springmvc.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:context="http://www.springframework.org/schema/context"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd"><!-- 扫描Controller包 --><context:component-scan base-package="com.controller"/><!-- 开启MVC注解驱动 --><mvc:annotation-driven/><!-- 视图解析器 --><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/"/><property name="suffix" value=".jsp"/></bean></beans>
五、实验原理
1.MVC 分层思想
Model：SpringMVC 的Model对象，存储运算结果、错误提示等数据，实现后端向视图传值；同时包含用户输入参数、数值运算业务数据。
View：JSP 视图页面，负责展示输入框、提交按钮、运算结果，通过 EL 表达式读取 Model 中的数据渲染页面。
Controller：Java 控制器类，使用@Controller、@RequestMapping注解接收表单请求，完成非空、数字合法性校验与加法运算，控制页面跳转。
2.SpringMVC 执行流程
浏览器提交表单请求 → Tomcat 接收请求 → DispatcherServlet 统一拦截 → 根据注解匹配对应 Controller 方法 → 执行业务逻辑，数据存入 Model → 视图解析器拼接 JSP 路径跳转页面 → 页面渲染数据返回浏览器。
3.双重校验机制
JavaScript 前端即时校验，在用户输入时就近提示错误，无需页面刷新，优化交互体验；后端 Java 代码保留校验逻辑，防止前端校验被绕过，保障数据安全。