当前位置: 首页 > news >正文

Spring MVC 加法计算器

View Post

Spring MVC 加法计算器

Spring MVC 加法计算器

项目结构

image
AddCalculator
├── src
│ └── com/calculator/controller
│ └── CalculatorController.java
└── WebContent
└── WEB-INF
├── web.xml
├── springmvc-servlet.xml
└── jsp
├── calculator.jsp
└── result.jsp


配置文件

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"version="3.1"><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping>
</web-app>

springmvc-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"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/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsd"><context:component-scan base-package="com.calculator.controller"/><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/jsp/"/><property name="suffix" value=".jsp"/></bean><mvc:annotation-driven/>
</beans>

核心代码
控制器:CalculatorController.java

package com.calculator.controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;@Controller
public class CalculatorController {@RequestMapping("/")public String index() {return "redirect:/calculator";}@RequestMapping("/calculator")public String showForm() {return "calculator";}@RequestMapping("/calculate")public String calculate(@RequestParam("num1") String num1Str,@RequestParam("num2") String num2Str,Model model) {// 非空校验if (num1Str == null || num1Str.trim().isEmpty()) {model.addAttribute("error", "第一个数字不能为空");return "calculator";}if (num2Str == null || num2Str.trim().isEmpty()) {model.addAttribute("error", "第二个数字不能为空");return "calculator";}double num1, num2;try {num1 = Double.parseDouble(num1Str.trim());} catch (NumberFormatException e) {model.addAttribute("error", "第一个输入不是有效数字: " + num1Str);return "calculator";}try {num2 = Double.parseDouble(num2Str.trim());} catch (NumberFormatException e) {model.addAttribute("error", "第二个输入不是有效数字: " + num2Str);return "calculator";}double sum = num1 + num2;model.addAttribute("num1", num1);model.addAttribute("num2", num2);model.addAttribute("sum", sum);return "result";}
}

输入页面:calculator.jsp
image

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>加法计算器</title><style>.error { color: red; }</style>
</head>
<body><h3>加法计算器</h3><form action="calculate" method="post"><p>数字1: <input type="text" name="num1" value="${param.num1}"></p><p>数字2: <input type="text" name="num2" value="${param.num2}"></p><p><input type="submit" value="计算"></p></form><p class="error" style="${empty error ? 'display:none;' : ''}">${error}</p>
</body>
</html>

结果页面:result.jsp
image

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>计算结果</title>
</head>
<body><h3>计算结果</h3><p>${num1} + ${num2} = ${sum}</p><p><a href="calculator">继续计算</a></p>
</body>
</html>

请求处理流程
用户访问 / → DispatcherServlet 接收请求。

HandlerMapping 映射到 CalculatorController.index(),返回 redirect:/calculator。

浏览器重定向到 /calculator,再次由 DispatcherServlet 处理,进入 showForm(),返回视图名 "calculator"。

ViewResolver 将 "calculator" 解析为 /WEB-INF/jsp/calculator.jsp,响应 HTML 表单。

用户输入两个数字并提交表单到 /calculate,DispatcherServlet 分发至 calculate() 方法。

控制器依次进行:

非空校验(isEmpty())

数字格式校验(Double.parseDouble() 捕获 NumberFormatException)

若校验失败,将错误信息 error 存入 Model,返回 "calculator" 视图,同时使用 value="${param.num1}" 保留已输入的值。
image
image
若校验通过,计算 num1 + num2,将数值与和存入 Model,返回 "result" 视图。

ViewResolver 定位 /WEB-INF/jsp/result.jsp 并渲染输出结果。

完全遵循 request → DispatcherServlet → HandlerMapping → Controller → ModelAndView → ViewResolver → JSP → response 标准流程。

验证示例
空值输入: 点击计算 → 显示红色提示 “第一个数字不能为空”

非数字: 输入 abc 和 5 → 提示 “第一个输入不是有效数字: abc”,输入框保留原值

正常计算: 输入 3.5 和 2.5 → 跳转显示 “3.5 + 2.5 = 6.0”

关键点

回显用户输入:value="${param.num1}" 保证校验失败后输入值不丢失。