SpringMVC 实现简易加法器

SpringMVC 实现简易加法器

一、前言

本文基于《Web编程技术》课程实验要求，使用 Eclipse、JDK 1.8、Tomcat 9.0、SpringMVC 框架，从零搭建带输入校验的网页加法器。项目可接收两个数字并完成加法运算，对空输入、字母、中文、特殊符号等非法内容做拦截并页面提示，同时通过 CSS 优化界面样式。

二、实验环境与技术栈

1. 运行环境

  • 操作系统：Windows 10 / Windows 11
  • JDK 版本：JDK 1.8
  • 服务器：Apache Tomcat 9.0
  • 开发工具：Eclipse Web Developer

2. 核心技术栈

  • 后端框架：SpringMVC
  • 前端页面：JSP + CSS
  • 配置文件：web.xml（Web全局配置）、springmvc.xml（SpringMVC核心配置）
  • 依赖包：Spring 核心 Jar 包 + commons-logging 日志包

3. 设计思想（MVC 模式）

遵循 MVC 分层思想实现代码解耦：

  1. View 视图层：index.jsp、add.jsp，负责页面展示、表单录入、信息回显
  2. Controller 控制层：AddController.java，接收请求、参数校验、业务处理、视图跳转
  3. Model 模型层：本项目通过 Model 对象完成前后端数据交互

整体流程：用户提交表单 → 请求分发至 SpringMVC 控制器 → 后端校验参数 → 合法则计算求和，非法则封装错误信息 → 跳转页面展示结果/提示。

三、项目整体目录结构

SpringMVC_AddDemo  // 项目根目录
├─ src/main/java                // 后端Java源码目录
│  └─ com
│     └─ controller             // 控制器包
│        └─ AddController.java   // 核心控制器类
├─ src/main/webapp              // Web资源根目录（浏览器可直接访问）
│  ├─ index.jsp                  // 项目首页，自动跳转加法页面
│  ├─ add.jsp                   // 加法器表单主页面
│  └─ WEB-INF                    // 受保护目录（浏览器禁止直接访问）
│     ├─ lib                     // 存放SpringMVC所有依赖Jar包
│     ├─ web.xml                 // Web项目全局配置
│     └─ springmvc.xml           // SpringMVC框架配置
└─ Servers                      // Eclipse Tomcat 服务器配置

说明：WEB-INF 是 JavaWeb 保护目录，仅服务器内部可调用，用于存放配置文件、Jar 包，提升安全性。

四、详细搭建步骤

步骤1：Eclipse 创建动态 Web 项目

  1. 打开 Eclipse，选择 File → New → Dynamic Web Project
  2. 项目名称填写：SpringMVC_AddDemo
  3. Target runtime 选择 Apache Tomcat v9.0
  4. Dynamic web module version 选择 4.0，点击 Finish 完成创建。

步骤2：导入 SpringMVC 依赖 Jar 包

  1. 进入目录 src/main/webapp/WEB-INF/lib
  2. 放入以下必备 Jar 包：
    • spring-core、spring-beans、spring-context、spring-expression
    • spring-web、spring-webmvc
    • commons-logging
  3. 全选所有 Jar 包（Ctrl+A），右键选择 Build Path → Add to Build Path
  4. 右键项目 → Refresh 刷新项目。

步骤3：创建后端控制器包与类

3.1 创建包 com.controller

  1. 右键 src/main/java → New → Other
  2. 展开 Java，选中 Package → Next
  3. 包名填写 com.controller，点击 Finish。

3.2 创建控制器 AddController.java

  1. 右键 com.controller → 新建 Java Class，类名：AddController
  2. 粘贴完整代码：
package com.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
@RequestMapping("/add")
public class AddController {

    // 跳转加法表单页面
    @RequestMapping("/toPage")
    public String toAddPage() {
        return "add";
    }

    // 处理加法计算请求
    @RequestMapping("/calc")
    public String calculate(
            @RequestParam(value = "num1", required = false) String num1,
            @RequestParam(value = "num2", required = false) String num2,
            Model model
    ) {
        // 非空校验
        if (num1 == null || num1.trim().isEmpty()) {
            model.addAttribute("msg1", "第一个数字不能为空！");
            model.addAttribute("num2", num2);
            return "add";
        }
        if (num2 == null || num2.trim().isEmpty()) {
            model.addAttribute("msg2", "第二个数字不能为空！");
            model.addAttribute("num1", num1);
            return "add";
        }

        double n1, n2;
        // 数字格式校验
        try {
            n1 = Double.parseDouble(num1.trim());
        } catch (NumberFormatException e) {
            model.addAttribute("msg1", "第一个输入不是有效数字，请重新输入！");
            model.addAttribute("num2", num2);
            return "add";
        }
        try {
            n2 = Double.parseDouble(num2.trim());
        } catch (NumberFormatException e) {
            model.addAttribute("msg2", "第二个输入不是有效数字，请重新输入！");
            model.addAttribute("num1", num1);
            return "add";
        }

        // 加法运算
        double sum = n1 + n2;
        model.addAttribute("num1", num1);
        model.addAttribute("num2", num2);
        model.addAttribute("sum", sum);
        return "add";
    }
}

步骤4：编写配置文件

4.1 web.xml（WEB-INF 目录下）

右键 WEB-INF 新建 File，命名 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_4_0.xsd"
         version="4.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>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 欢迎页 -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

4.2 springmvc.xml（WEB-INF 目录下）

新建文件 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/beans
        https://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd">

    <!-- 扫描控制器包 -->
    <context:component-scan base-package="com.controller"/>
    <!-- 开启MVC注解驱动 -->
    <mvc:annotation-driven/>
    <!-- 放行静态资源 -->
    <mvc:default-servlet-handler/>
    <!-- 视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

步骤5：编写前端 JSP 页面

页面统一放在 src/main/webapp 根目录。

5.1 index.jsp（首页跳转）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>加法计算器首页</title>
</head>
<body>
    <% response.sendRedirect("add/toPage"); %>
</body>
</html>

5.2 add.jsp（计算器主页面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>SpringMVC简易加法器</title>
    <style>
        *{margin:0;padding:0;box-sizing: border-box;font-family: "微软雅黑"}
        .container{
            width: 420px;
            margin: 80px auto;
            padding:30px;
            border-radius: 12px;
            box-shadow: 0 0 12px #ccc;
        }
        h2{text-align: center;color:#333;margin-bottom:25px}
        .item{margin:15px 0;}
        label{display:block;margin-bottom:6px;font-weight:500}
        input{
            width:100%;
            height:42px;
            padding:0 12px;
            border:1px solid #ddd;
            border-radius:6px;
            font-size:16px;
        }
        .err{color:red;font-size:14px;margin-top:4px}
        .submit-btn{
            width:100%;
            height:45px;
            background:#007aff;
            color:white;
            border:none;
            border-radius:6px;
            font-size:17px;
            cursor:pointer;
            margin-top:10px;
        }
        .submit-btn:hover{background:#0060d0}
        .result{
            margin-top:20px;
            text-align:center;
            font-size:18px;
            color:#28a745;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>简易加法计算器</h2>
        <form action="${pageContext.request.contextPath}/add/calc" method="post">
            <div class="item">
                <label>数字一：</label>
                <input type="text" name="num1" value="${num1}">
                <div class="err">${msg1}</div>
            </div>
            <div class="item">
                <label>数字二：</label>
                <input type="text" name="num2" value="${num2}">
                <div class="err">${msg2}</div>
            </div>
            <button class="submit-btn" type="submit">计算两数之和</button>
        </form>
        <% if(pageContext.findAttribute("sum") != null){ %>
            <div class="result">计算结果：${num1} + ${num2} = ${sum}</div>
        <% } %>
    </div>
</body>
</html>

步骤6：部署并运行项目

  1. 打开 Eclipse Servers 面板，右键 Tomcat → Add and Remove，将项目添加至服务器
  2. 右键 Tomcat → Start 启动服务
  3. 浏览器访问地址：
http://localhost:8080/SpringMVC_AddDemo

五、功能测试用例

测试场景 预期效果
两个输入框全部留空 对应位置红字提示「不能为空」
单个输入框留空，另一个输入合法数字 空输入框弹出提示，已输入内容保留
输入字母、中文、特殊符号 提示「不是有效数字，请重新输入」
输入整数、小数、负数 正常计算并展示求和结果
合法数字提交 输入内容保留，展示计算结果

六、常见报错与调试方案

问题1：springmvc.xml 出现大量红色报错

现象：XML 命名空间、xsd 约束标红，已有 Jar 包仍报错。
解决：

  1. 将 lib 下所有 Jar 包添加到 Build Path
  2. Project → Clean 清理项目缓存，刷新文件
  3. 离线环境：右键项目 Properties → Validation，取消勾选 XML Validator，关闭XML校验。

问题2：提交表单 404，路径出现 /add/add/calc

现象：路径重复多一层 /add，访问失败。
原因：表单使用相对路径，浏览器自动拼接地址。
解决：统一使用动态绝对路径：

<form action="${pageContext.request.contextPath}/add/calc" method="post">

重启 Tomcat 即可。

问题3：单独右键运行 JSP，功能失效

现象：页面可打开，提交表单无后端逻辑。
原因：单独运行 JSP 不会初始化 Spring 容器与前端控制器。
解决：必须通过 Servers 启动 Tomcat，访问项目根地址运行。

问题4：非法输入无错误提示

现象：空值、非数字提交后页面无提示。
解决：

  1. 核对控制器 model.addAttribute 键名与页面 EL 表达式一致
  2. 重启 Tomcat，清除浏览器缓存。

问题5：右键新建找不到 Package 选项

解决：点击 New → Other，搜索 Package 进行创建。

七、实验总结

  1. 本项目基于 MVC 设计模式分层开发，视图、控制器、业务逻辑解耦，结构清晰，便于维护与扩展。
  2. SpringMVC 完整请求流程：请求 → 前端控制器 → 控制器处理 → 视图解析器 → 页面渲染。
  3. Web 项目表单提交建议使用 ${pageContext.request.contextPath} 动态路径，避免相对路径拼接造成 404 错误。
  4. 数据校验采用「非空判断 + 异常捕获」组合方式，是 Web 开发通用的数据校验思路。
  5. 配置文件中包扫描路径必须与 Java 包名严格一致，否则控制器无法被框架识别。

八、附录

  1. 参考教材：《Web编程技术》（第二版），余元辉主编，清华大学出版社，2024.8
  2. 参考书籍：《JSP设计》（第三版），Hans Bergsten主编，林琪、朱涛江翻译，O'Reilly Media,Inc 2013年
  3. 工具版本：JDK 1.8、Apache Tomcat 9.0、Eclipse Web Developer、Spring 5.x
posted @ 2026-06-14 01:22  才知风自由  阅读(3)  评论(0)    收藏  举报