在Springboot下实现一个计算器实现简单的加减乘除功能

最新推荐文章于 2023-10-19 21:35:32 发布

原创最新推荐文章于 2023-10-19 21:35:32 发布 · 6.8k 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#简单实现计算器功能 #springboot

SpringBoot 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了一个基于SpringBoot框架的前后端分离计算器应用。前端使用Ajax实现异步请求，展示输入框及计算结果；后端负责计算逻辑，通过接收前端发送的请求参数，完成加减乘除运算并返回结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求描述：

前台显示一个基本的输入框和显示计算结果的框，用户输入基本的数据，选择相应的计算方式后，向后台发送请求；

后台获取相应的数据进行计算，向前台返回相应的结果。

1、项目框架内容

springboot项目

2、前台技术实现

使用ajax实现异步操作显示计算结果；

ajax的基本使用方式：https://www.cnblogs.com/caifenglin/p/7797811.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<form action="/calculate" method="post">-->
    <table border="1">
        <tr>
            <td><input type="text" id="num1" placeholder="请输入第一个数"/></td>
            <td>
                <select id="operation">
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>
            </td>
            <td><input type="text" id="num2" placeholder="请输入第二个数"/></td>
            <td><input type="button" value="=" onclick="calculate();"/></td>
            <td><input type="text" name="result" id="result" />
            <!--<input th:text="${result}" />-->
            </td>
        </tr>
    </table>
    <input type="button" onclick="getResult()" value="获得结果"  />
<!--</form>-->
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">

   /*function calculate() {

       var a = parseInt(document.getElementById("num1").value);
       var b = document.getElementById("operation").value;
       var c = parseInt(document.getElementById("num2").value);
       var result = '';
        switch (b) {
            case '+':
                result = a + c;
                alert(result);
                break;
            case '-':
                result = a - c;
                alert(result);
                break;
            case '*':
                result = a * c;
                alert(result);
                break;
            case '/':
                if (c != 0) {
                    result = a / c;
                    alert(result);
                }else{
                    alert("除法运算分母不能为0！");
                }
                break;
        }
       //设置输入框的计算结果
       document.getElementById("result").value = result;
    }*/
    function getResult() {
        var a = parseInt(document.getElementById("num1").value);
        var b = document.getElementById("operation").value;
        var c = parseInt(document.getElementById("num2").value);

        $.ajax({
            url:"/calculate",    //请求的url地址
            dataType:"json",   //返回格式为json
            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
            data:{
                a:a,
                b:b,
                c:c
            },    //参数值
            type:"POST",   //请求方式
            success:function(req){
                //请求成功时处理
                // console.log(req)
                alert(req);
                document.getElementById("result").value=req;
            },
            error:function () {
                console.log("error");
            }
        });

    }

</script>

</html>

3、后台实现

将计算表达式对应的每一项，提取出来封装成一个类Expression

public class Expression implements Serializable {

    private Integer numOne;
    private Character operation;
    private Integer numTwo;
    
    //.....
}

在web层实现接收请求的方法，获取请求的参数并计算，向前台返回相应的结果。

@Controller
public class CalculateController {

    @PostMapping("/calculate")
    @ResponseBody
//    public Model calculate
    public String calculate( String a,Character b,String c/*, Model model*/){

        int num1 = Integer.parseInt(a);
        char oper = b;
        int num2 = Integer.parseInt(c);
        Expression expression = new Expression(num1,oper,num2);

        Integer result = 0;
        switch(oper){
            case '+':
                result = expression.getNumOne() + expression.getNumTwo();
                break;
            case '-':
                result = expression.getNumOne() - expression.getNumTwo();
                break;
            case '*':
                result = expression.getNumOne() * expression.getNumTwo();
                break;
            case '/':
                try{
                    if(expression.getNumTwo() != 0){
                        result = expression.getNumOne() / expression.getNumTwo();
                    }else{
                        throw new RuntimeException("除法运算，分母不能为0！");
                    }
                }catch(Exception e){
                    e.printStackTrace();
                }
                break;
        }
//        model.addAttribute("result",result);
//        System.out.println(a);
        return result.toString();
//        return model;
    }

拓展：

spring、springmvc中Model返回类型的方式？

参考链接：https://blog.youkuaiyun.com/qq_21223653/article/details/81365770

https://blog.youkuaiyun.com/Wanger_tt/article/details/50846912

什么是json？以及阿里巴巴fastjson的详细使用方式（maven下导入依赖坐标）

参考链接：https://blog.youkuaiyun.com/srj1095530512/article/details/82529759

spring mvc标单数据的获取：https://www.cnblogs.com/ChromeT/p/9964768.html