基于Spring MVC的三角形测试系统设计与实现

🌐 基于Spring MVC的三角形测试系统设计与实现

在本次Web编程实验中，我们基于Spring MVC框架，设计并实现了一个三角形测试系统。用户可以在网页中输入三条边长，系统会自动判断是否能构成三角形，并进一步判定三角形的类型（锐角/直角/钝角），同时计算其面积。

🧠 一、项目背景与目标

实验目的：

  • 掌握JavaBean技术在JSP页面中的应用
  • 理解MVC设计模式的思想
  • 熟悉Spring MVC框架的部署与使用

功能要求：

  • 客户端输入三个自然数作为边长
  • 判断是否能构成三角形，不能则提示原因
  • 能构成三角形时，输出类型（锐角/直角/钝角）并计算面积
  • 不能构成三角形时，面积统一设置为0

🛠️ 二、技术栈与环境

  • 操作系统：Windows XP SP2（兼容更高版本）
  • 开发环境：Eclipse IDE + JDK 1.8 + Tomcat 9.0
  • 技术框架：Spring MVC + JSP + JavaBean + CSS3

🧱 三、项目结构


src/
├── com.jmu.bean/
│   └── Triangle.java
├── com.jmu.controller/
│   └── TriangleController.java
WebContent/
├── view/
│   ├── triInput.jsp
│   └── triResult.jsp
├── css/
│   └── style.css
├── WEB-INF/
│   ├── web.xml
│   └── myspringmvc-servlet.xml

💻 四、核心代码实现

1. JavaBean（Triangle.java）

封装三边属性，实现判定逻辑与面积计算：

public void judge() {
    if (a <= 0 || b <= 0 || c <= 0) {
        result = "边长必须为自然数！";
        area = 0;
        return;
    }
    if (a + b <= c || a + c <= b || b + c <= a) {
        result = "不能构成三角形（两边之和不大于第三边）";
        area = 0;
        return;
    }
    // 判断三角形类型（锐角/直角/钝角）
    double aa = a * a, bb = b * b, cc = c * c;
    double max2 = Math.max(aa, Math.max(bb, cc));
    if (max2 == aa) {
        if (aa == bb + cc) result += "，直角三角形";
        else if (aa > bb + cc) result += "，钝角三角形";
        else result += "，锐角三角形";
    } else if (max2 == bb) {
        if (bb == aa + cc) result += "，直角三角形";
        else if (bb > aa + cc) result += "，钝角三角形";
        else result += "，锐角三角形";
    } else {
        if (cc == aa + bb) result += "，直角三角形";
        else if (cc > aa + bb) result += "，钝角三角形";
        else result += "，锐角三角形";
    }
    // 海伦公式计算面积
    double p = (a + b + c) / 2.0;
    double tempArea = Math.sqrt(p * (p - a) * (p - b) * (p - c));
    area = Math.round(tempArea * 100) / 100.0;
}
  1. 控制器（TriangleController.java）

继承AbstractController，接收请求参数，调用Bean处理，返回视图：

public class TriangleController extends AbstractController {
    private Triangle triangle;

    public void setTriangle(Triangle triangle) {
        this.triangle = triangle;
    }

    @Override
    protected ModelAndView handleRequestInternal(HttpServletRequest request,
                                                  HttpServletResponse response) {
        int a = 0, b = 0, c = 0;
        try {
            a = Integer.parseInt(request.getParameter("a"));
            b = Integer.parseInt(request.getParameter("b"));
            c = Integer.parseInt(request.getParameter("c"));
        } catch (Exception e) {}

        triangle.setA(a);
        triangle.setB(b);
        triangle.setC(c);
        triangle.judge();

        ModelAndView mav = new ModelAndView("triResult");
        mav.addObject("tri", triangle);
        return mav;
    }
}
  1. 输入页面（triInput.jsp）

提供表单，限制输入为自然数：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<link rel="stylesheet" href="css/style.css">
<html>
<head>
    <title>三角形判定系统</title>
</head>
<body>
    <div class="triangle-box">
        <h2>输入三角形三边（自然数）</h2>
        <form method="post" action="tri.do">
            <div class="triangle-item">
                <p>边长 a：<br><br> <input type="number" name="a" required min="1"></p >
            </div>
            <div class="triangle-item">
                <p>边长 b：<br><br> <input type="number" name="b" required min="1"></p >
            </div>
            <div class="triangle-item">
                <p>边长 c：<br><br> <input type="number" name="c" required min="1"></p >
            </div>
            <input type="submit" class="btn" value="判定三角形">
        </form>
    </div>
</body>
</html>
  1. 结果页面（triResult.jsp）

使用EL表达式展示结果：

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<link rel="stylesheet" href="css/style.css?v=6">
<html>
<head>
    <title>三角形判定结果</title>
</head>
<body>
    <div class="triangle-box">
        <div class="result-wrapper">
            <p class="result-text">您输入的三边：a = ${tri.a}，b = ${tri.b}，c = ${tri.c}</p >
            <p class="result-text">${tri.result}</p >
            <p class="area-text">面积：${tri.area}</p >
            <button class="btn return-btn" onclick="location.href='triInput.jsp'">返回重新输入</button>
        </div>
    </div>
</body>
</html>
  1. web.xml 配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         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">
    <display-name>springmvc001</display-name>
    <welcome-file-list>
        <welcome-file>triInput.jsp</welcome-file>
    </welcome-file-list>
    <servlet>
        <servlet-name>myspringmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/myspringmvc-servlet.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>myspringmvc</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
</web-app>
  1. Spring MVC 配置（myspringmvc-servlet.xml）
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       ...>
    <bean class="org.springframework.web.servlet.mvc.support.ControllerBeanNameHandlerMapping"></bean>
    <bean id="triangle" class="com.jmu.bean.Triangle"/>
    <bean name="/tri.do" class="com.jmu.controller.TriangleController">
        <property name="triangle" ref="triangle"/>
    </bean>
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/view/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>
  1. 样式设计（style.css）

实现了蓝紫渐变动态背景、响应式输入面板、按钮交互效果：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", sans-serif;
}
html, body {
    height: 100%;
    background: linear-gradient(135deg, #74c0f8, #5b3cb8);
    background-size: 400% 400%;
    animation: gradientFlow 14s ease-in-out infinite;
}
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.triangle-box {
    width: 550px;
    padding: 0;
    background: transparent;
    border-radius: 20px;
    text-align: center;
}
.btn {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #6fb6f5, #6744c9);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.btn:hover {
    background: linear-gradient(135deg, #58a3e8, #5332b8);
    transform: scale(1.02);
}

✅ 五、运行效果展示

微信图片_20260531130525_22224_4

正常三角形判定：

· 输入：3, 4, 5 → 直角三角形，面积 6.0

微信图片_20260531130841_22227_4

非三角形输入：

· 输入：3, 4, 7 → 提示“不能构成三角形”

微信图片_20260531130750_22226_4

异常输入：

· 输入：5, -3, 4 → 提示“边长必须为自然数”

微信图片_20260531130706_22225_4

所有结果页面均通过EL表达式动态展示，支持返回重新输入。

📘 六、实验小结

通过本次实验，我们小组深入理解了MVC架构的设计思想，掌握了Spring MVC的基本配置与开发流程。主要收获包括：

· ✅ 明确了模型、视图、控制器之间的职责划分
· ✅ 掌握了JavaBean封装业务逻辑的方法
· ✅ 熟练使用了EL表达式和JSP视图渲染
· ✅ 提升了前后端协同开发与问题调试能力

本次实验为我们后续开发更复杂的Web应用打下了坚实的基础。

posted @ 2026-05-31 13:10  ying9  阅读(14)  评论(0)    收藏  举报