怎么用SpringMvc实现简易计算器功能

发布时间:2022-07-22 10:14:37 作者:iii
来源:亿速云 阅读:196

怎么用SpringMvc实现简易计算器功能

1. 引言

在现代Web开发中,Spring MVC是一个非常流行的框架,它提供了强大的功能来构建灵活、可扩展的Web应用程序。本文将详细介绍如何使用Spring MVC框架来实现一个简易的计算器功能。我们将从环境搭建开始,逐步实现一个支持基本算术运算(加、减、乘、除)的Web应用。

2. 环境准备

在开始编写代码之前,我们需要确保开发环境已经配置好。以下是所需的环境和工具:

2.1 创建Maven项目

首先,我们需要创建一个Maven项目。可以使用IDE的Maven项目创建向导,或者手动创建一个pom.xml文件。

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>spring-mvc-calculator</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>

    <dependencies>
        <!-- Spring MVC Dependency -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.21</version>
        </dependency>

        <!-- Servlet API -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>

        <!-- JSTL for JSP -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.1</version>
            </plugin>
        </plugins>
    </build>
</project>

2.2 配置Spring MVC

接下来,我们需要配置Spring MVC。首先,创建一个web.xml文件来配置DispatcherServlet。

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>Spring MVC Calculator</display-name>

    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/spring-mvc-config.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

然后,创建一个spring-mvc-config.xml文件来配置Spring MVC的组件扫描和视图解析器。

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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.example.controller" />
    <mvc:annotation-driven />

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

3. 实现计算器功能

3.1 创建CalculatorController

首先,我们创建一个CalculatorController类来处理计算器的请求。

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class CalculatorController {

    @GetMapping("/calculator")
    public String showCalculatorForm() {
        return "calculator";
    }

    @PostMapping("/calculate")
    public String calculate(
            @RequestParam("num1") double num1,
            @RequestParam("num2") double num2,
            @RequestParam("operation") String operation,
            Model model) {

        double result = 0;

        switch (operation) {
            case "add":
                result = num1 + num2;
                break;
            case "subtract":
                result = num1 - num2;
                break;
            case "multiply":
                result = num1 * num2;
                break;
            case "divide":
                if (num2 != 0) {
                    result = num1 / num2;
                } else {
                    model.addAttribute("error", "Division by zero is not allowed.");
                    return "calculator";
                }
                break;
            default:
                model.addAttribute("error", "Invalid operation.");
                return "calculator";
        }

        model.addAttribute("result", result);
        return "calculator";
    }
}

3.2 创建JSP视图

接下来,我们创建一个calculator.jsp文件来显示计算器界面和结果。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Calculator</title>
</head>
<body>
    <h1>Simple Calculator</h1>
    <form action="/calculate" method="post">
        <input type="number" name="num1" required />
        <select name="operation">
            <option value="add">+</option>
            <option value="subtract">-</option>
            <option value="multiply">*</option>
            <option value="divide">/</option>
        </select>
        <input type="number" name="num2" required />
        <input type="submit" value="Calculate" />
    </form>

    <c:if test="${not empty result}">
        <h2>Result: ${result}</h2>
    </c:if>

    <c:if test="${not empty error}">
        <h2 style="color: red;">Error: ${error}</h2>
    </c:if>
</body>
</html>

3.3 运行应用

完成上述步骤后,我们可以将应用部署到Tomcat服务器上并运行。访问http://localhost:8080/calculator,你将看到一个简单的计算器界面。输入两个数字并选择操作,点击“Calculate”按钮,结果将显示在页面上。

4. 扩展功能

4.1 添加更多操作

我们可以轻松地扩展计算器功能,添加更多的操作,如幂运算、平方根等。只需在CalculatorController中添加相应的case分支即可。

case "power":
    result = Math.pow(num1, num2);
    break;
case "sqrt":
    if (num1 >= 0) {
        result = Math.sqrt(num1);
    } else {
        model.addAttribute("error", "Square root of a negative number is not allowed.");
        return "calculator";
    }
    break;

4.2 添加历史记录

我们可以添加一个历史记录功能,记录用户的计算历史。可以通过在CalculatorController中添加一个List来存储历史记录,并在JSP页面中显示。

private List<String> history = new ArrayList<>();

@PostMapping("/calculate")
public String calculate(
        @RequestParam("num1") double num1,
        @RequestParam("num2") double num2,
        @RequestParam("operation") String operation,
        Model model) {

    double result = 0;
    String operationSymbol = "";

    switch (operation) {
        case "add":
            result = num1 + num2;
            operationSymbol = "+";
            break;
        case "subtract":
            result = num1 - num2;
            operationSymbol = "-";
            break;
        case "multiply":
            result = num1 * num2;
            operationSymbol = "*";
            break;
        case "divide":
            if (num2 != 0) {
                result = num1 / num2;
                operationSymbol = "/";
            } else {
                model.addAttribute("error", "Division by zero is not allowed.");
                return "calculator";
            }
            break;
        default:
            model.addAttribute("error", "Invalid operation.");
            return "calculator";
    }

    String historyEntry = num1 + " " + operationSymbol + " " + num2 + " = " + result;
    history.add(historyEntry);

    model.addAttribute("result", result);
    model.addAttribute("history", history);
    return "calculator";
}

在JSP页面中添加历史记录显示部分:

<c:if test="${not empty history}">
    <h2>History:</h2>
    <ul>
        <c:forEach items="${history}" var="entry">
            <li>${entry}</li>
        </c:forEach>
    </ul>
</c:if>

5. 总结

通过本文,我们学习了如何使用Spring MVC框架来实现一个简易的计算器功能。我们从环境搭建开始,逐步实现了基本的算术运算,并扩展了更多功能。Spring MVC提供了强大的功能和灵活性,使得开发Web应用变得更加简单和高效。希望本文能帮助你更好地理解Spring MVC的使用,并为你的Web开发之旅提供帮助。

推荐阅读:
  1. js如何实现简易计算器功能
  2. 如何在Springmvc中实现ajax功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

springmvc

上一篇:Java中TypeReference怎么使用

下一篇:React UI怎么实现antd的按需引入和自定义主题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》