软件园学生在线

  • {{ 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
© 2024 软件园学生在线
Theme by Wing