软件园学生在线

  • {{ item.name }}
  • 2023试用期

登录与注册

后端一-董凡清

  • dfq
  • 2023-10-29
  • 0

A Introduction to Math Operation

先来个英文提升一下档次(>_<)


“这是一个简单的小学生精英计算器,为大学生解决问题提供了宝贵的撰写Spring boot的经验。”

Ⅰ.How to Use?


  1. 首先要打开MATH文件,在目录下找到MathApplication.java文件并将其运行起来。

  2. 打开浏览器,访问http://localhost:8080/operation.html,就会看到以下界面:


这就算是进入了我们的Math Operation了!
接下来以1+2为例

  1. 根据提示Type the first number,在输入框内输入第一个数字,同理在Type the second number输入框内输入第二个数字。
    即在第一个输入框中输入1,第二个中输入2。

  2. 接下来选择你所要进行的运算,计算结果将会在result:后方出现。
    如要计算1+2的值,用鼠标点击add按钮,在result:后方则会出现3。

Ⅱ.Precautions


  • 进行除法计算时,除数为0会提示Division by zero is not allowed.以防止出错。

  • 该精英计算器只支持2个数进行1次加减乘除四则运算。

  • 请不要输入与运算无关的其他符号,请将该精英计算器用于正规用途。

Ⅲ.Code Implementation


考虑到除了守规矩的小学生外,还有调皮不守规矩的大学生,我将输入类型写为number,确保其输入内容为数字而不是其他各种奇怪符号以及伟大的汉字。

  • operation部分:为了防止手动输入URL的尴尬,我用html设计了简单的前端界面,使精英计算器能够与小学生和大学生更为方便地交互。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Math Operation</title>
    </head>
    <body>
    <h1>Math Operation</h1>
    
    <input type="number" id="num1" placeholder="Please type the first number">
    <input type="number" id="num2" placeholder="Please type the second number">
    <br>
    <button onclick="add()">add</button>
    <button onclick="subtract()">subtract</button>
    <button onclick="multiply()">multiply</button>
    <button onclick="divide()">divide</button>
    <br>
    <p id="result">result: </p >
    
    <script>
            function add() {
                var num1 = document.getElementById("num1").value;
                var num2 = document.getElementById("num2").value;
    
                fetch("/add?num1=" + num1 + "&num2=" + num2)
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById("result").innerText = "result= " + data;
                    });
            }
    
            function subtract() {
                var num1 = document.getElementById("num1").value;
                var num2 = document.getElementById("num2").value;
    
                fetch("/subtract?num1=" + num1 + "&num2=" + num2)
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById("result").innerText = "result= " + data;
                    });
            }
    
            function multiply() {
                var num1 = document.getElementById("num1").value;
                var num2 = document.getElementById("num2").value;
    
                fetch("/multiply?num1=" + num1 + "&num2=" + num2)
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById("result").innerText = "result= " + data;
                    });
            }
    
            function divide() {
                var num1 = document.getElementById("num1").value;
                var num2 = document.getElementById("num2").value;
    
                fetch("/divide?num1=" + num1 + "&num2=" + num2)
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById("result").innerText = "result= " + data;
                    });
            }
        </script>
    </body>
    </html>

在这里应该有人为我的努力而感动得落泪~~~

  • Controller部分:其中为防止出现除数为0的尴尬局面,聪明的开发者巧妙地用控制语句规避了尴尬的发生,点赞!
    package com.example.math.Controller;

    import com.example.math.Service.MainService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;

    @RestController

    public class MainController {
        @Autowired
        MainService MainService;

        @GetMapping("/add")
        public Double add(@RequestParam("num1") Double num1, @RequestParam("num2") Double num2) {
            return MainService.add(num1, num2);
        }

        @GetMapping("/subtract")
        public Double subtract(@RequestParam("num1") Double num1, @RequestParam("num2") Double num2) {
            return MainService.subtract(num1, num2);
        }

        @GetMapping("/multiply")
        public Double multiply(@RequestParam("num1") Double num1, @RequestParam("num2") Double num2) {
            return MainService.multiply(num1, num2);
        }

        @GetMapping("/divide")
        public Object divide(@RequestParam("num1") Double num1, @RequestParam("num2") Double num2) {
            if (num2 != 0) {
                return MainService.divide(num1, num2);
            } else {
                return ("Division by zero is not allowed.");
            }
        }
    }
  • Service部分:将加、减、乘、除四个方法写入其中。使用Double来让这个精英计算器支持小数运算,并扩大其运算范围(其功能之强大乃int所不能及)。
    package com.example.math.Service;

    import org.springframework.stereotype.Service;

    @Service

    public class MainService {
        public Double add(Double num1, Double num2) {
            return num1 + num2;
        }

        public Double subtract(Double num1, Double num2) {
            return num1 - num2;
        }

        public Double multiply(Double num1, Double num2) {
            return num1 * num2;
        }

        public Object divide(Double num1, Double num2) {
            return num1 / num2;
        }
    }

Ⅳ.Learning Process


  • 完成这则精英计算器耗费了我两天的时间,从周五下午到周日中午。
  • 首先感谢学长学姐的辛勤耐心付出,听了如此精品的培训后让我能够独立完成我的Controller和Service部分,解决了后端部分的运行问题。
  • 在这之后,我就一心致力于打造一个简单够用的前端交互界面,即operation.html部分。
    我通过SCDN、百度、B站、AI等多个平台学习和了解html和Javascript的知识,尽管有的我只是直接拿来使用,并不懂得他的深层含义和使用细则,但这也耗费了我绝大多数的精力。虽然一知半解,但是我终究还是把他写了出来。
  • 在分别完成前端和后端两部分的工作后,我又遇到了许多问题诸如前端的界面无法显示、除数为零是没有显示提前设定好的字符串而是报错、跨域问题、后端无法接受到参数等等,不胜枚举。同样,我除了通过以上途径之外,我还请教了学长,在此过程中,我不断提醒自己要坚持下去,不断调整心态,不过最后这个精英计算器终究还是健康地跑起来了。

写完这次作业后人已经死了~~

dfq
dfq
© 2025 软件园学生在线
Theme by Wing