润宏斌后端第一次培训作业

产品说明

在四则运算前端页面中我设置了四个板块，分别是加减乘除这四个运算，每个运算是独立的输入框，用户使用该四则运算计算器时可根据运算符选择需要的运算板块输入需要计算的数进输入框，接着点击那个板块的提交键就可以得到计算的结果。
同时考虑到数据溢出的情况，我用BigDecimal类，可进行高精度运算，避免了数据溢出的情况

学习历程

一开始我写了一个基于Spring框架的RESTful API控制器，提供了四个数学运算的接口，但是在除法运算中，当除数为0时会计算出infinity的错误答案，于是我写了一个条件语句：
if (b == 0) { throw new IllegalArgumentException("除数不能为零");
,接着我开始查资料解决关于如何解决数据溢出，发现BigDecimal类能够进行精确的运算，从而避免数据溢出，于是我将double一一改成BigDecimal，但我原先写的那个条件语句便报错了，于是我通过询问chatgpt得到了正确写法：
if (b.equals(BigDecimal.ZERO)){
throw new IllegalArgumentException("除数不能为零");
}
此时我便避免了产生infinity的错误答案，当用户输入除数为0时则会跳转至Whitelabel Error Page的页面提示用户除数不能为0，但在我设想中我是想通过前端更直观的告诉用户除数不能为0，但我目前狂搜资料甚至问ai都没整出这个功能，还是得再今后更加深入得学习。
接着我便开始学习编写一个简单的前端代码，在学习了学长学姐在qq群里的示例后，我在idea的html上完善了四则运算计算器的前端代码，并在前端写了链接了后端的接口。
以下是我写的四则运算的前端和后端的代码：
后端：

package com.example.szys.controller;

import com.sun.source.tree.ReturnTree;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.math.BigDecimal;

@RestController
public class Main {
    @GetMapping("add")
    public BigDecimal add(@RequestParam BigDecimal a, @RequestParam BigDecimal b) {
        return a.add(b);
    }
    @GetMapping("minus")
    public BigDecimal minus(@RequestParam BigDecimal a, @RequestParam BigDecimal b) {
        return a.subtract(b);
    }

    @GetMapping("multiply")
    public BigDecimal multiply(@RequestParam BigDecimal a, @RequestParam BigDecimal b) {
        return a.multiply(b);
    }

    @GetMapping("divide")
    public BigDecimal divide(@RequestParam BigDecimal a, @RequestParam BigDecimal b) {
        if (b.equals(BigDecimal.ZERO)){
            throw new IllegalArgumentException("除数不能为零");
        }
        return a.divide(b);
    }
}

这是前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>四则运算计算器</title>
    <style>
        .box{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
    </style>

</head>
<body>
    <h2>加法</h2>
        <form action="http://localhost:8080/add"method="get">
            第一个数字：<input type = "number" name = "a"><br>
            第二个数字：<input type = "number" name = "b"><br>
            <input type="submit" value ="提交">
        </form>
    <h2>减法</h2>
        <form action="http://localhost:8080/minus"method="get">
        第一个数字：<input type = "number" name = "a"><br>
        第二个数字：<input type = "number" name = "b"><br>
        <input type="submit" value ="提交">
        </form>
    <h2>乘法</h2>
        <form action="http://localhost:8080/multiply"method="get">
        第一个数字：<input type = "number" name = "a"><br>
        第二个数字：<input type = "number" name = "b"><br>
        <input type="submit" value ="提交">
        </form>
    <h2>除法</h2>
        <form action="http://localhost:8080/divide"method="get">
        第一个数字：<input type = "number" name = "a"><br>
        第二个数字：<input type = "number" name = "b"><br>
            <input type="submit" value ="提交">
        </form>

</body>
</html>

rhb

软件园学生在线

后端第一次培训作业四则运算

润宏斌后端第一次培训作业

产品说明

学习历程