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

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

news 2026/6/13 10:46:05

🌐 基于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;
}

控制器（TriangleController.java）

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

public class TriangleController extends AbstractController {private Triangle triangle;public void setTriangle(Triangle triangle) {this.triangle = triangle;}@Overrideprotected 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;}
}

输入页面（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>

结果页面（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>

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/javaeehttp://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>

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>

样式设计（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);
}

✅ 五、运行效果展示