Spring MVC 加法计算器

公告

View Post

项目结构

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/javaee
         http://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/beans
           http://www.springframework.org/schema/beans/spring-beans.xsd
           http://www.springframework.org/schema/context
           http://www.springframework.org/schema/context/spring-context.xsd
           http://www.springframework.org/schema/mvc
           http://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

<%@ 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

<%@ 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}" 保留已输入的值。

若校验通过，计算 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}" 保证校验失败后输入值不丢失。

posted on 2026-06-14 11:10 YyB123 阅读(0) 评论(0) 收藏举报

刷新页面返回顶部

gsq123

公告

View Post