软件园学生在线

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

登录与注册

【后端一】 赵昱琨

  • Eclipse
  • 2022-10-13
  • 0

不是很好用的网页计算器

介绍

使用这款网页计算器进行一些简单的四则运算吧，这款网页计算器共计有八个运算框，前四个运算框分别支持整数的四则运算，后四个框分别支持浮点数的四则运算（最多支持到小数点后两位），心动不如行动，快来帮我测试bug上手试试吧！ ps：之所以有八个运算框纯纯是因为萌新的技术力不够了QAQ！ pps：因为学线博客会吞掉整行的单行html代码，所以使用《》来代替了大于小于号

用法

在IDEA中运行 CalculatorApplication 之后，在浏览器地址栏输入 localhost:8080/calculate.html 即可开始使用！！！

By calculate.html

  • 手动添加了 calculateh.html 前端页面以便进行更加便捷的参数键入！
  • 可以通过在输入框输入A和B的值使用对应的计算按钮，如 “使用整数加法喵” ，对A和B进行整数加法运算！
  • 在四个整数运算中，由于使用 int 数据类型，所以计算支持了对数据溢出的错误报告，您可以通过查看错误报告页面中的提示对该计算式使用推荐的更好方法！
  • 在四个浮点数的运算中，使用了 double 数据类型，最多支持两位小数的输入与运算（因为数据精度问题暂时只支持到小数点后两位）

By URL

  • 手动修改URL来获取计算结果！
    • 整数加法：修改URL为hello/Plus?a=%s&b=%s进行计算
    • 整数减法：修改URL为hello/Minus?a=%s&b=%s进行计算
    • 整数乘法：修改URL为hello/Times?a=%s&b=%s进行计算
    • 整数除法：修改URL为hello/Dividedby?a=%s&b=%s进行计算
    • 小数加法：修改URL为hello/DoublePlus?a=%s&b=%s进行计算
    • 小数减法：修改URL为hello/DoubleMinus?a=%s&b=%s进行计算
    • 小数乘法：修改URL为hello/DoubleTimes?a=%s&b=%s进行计算
    • 小数除法：修改URL为hello/DoubleDividedby?a=%s&b=%s进行计算
  • 其中%s表示传入的参数

异常处理

关于异常的处理方面，引入了 Themeleaf 引擎模板为计算网站添加了自定义错误页面

  • 整数计算的数据溢出问题：众所周知 int 数据类型占用4字节，数据范围为-2147483648~2147483647，当计算结超出这个范围就会发生数据溢出错误，网站引入400.html对该错误进行自定义报错
  • 除法除以0问题：当除法中分母为0时，网站引入了500.html对该错误进行自定义报错
  • 空白页面异常：当访问网站中未创建的空白页面是，网站引入了404.html对该错误进行自定义报错

已知BUG

  • 浮点数运算之所以支持到小数点后两位，是因为支持的小数位数越高，浮点数计算结果的精度越低，会出现类似 10.12-0.07=10.049999999999999 这样的误差

拓展思考

  • 关于数据类型有误：源HTML代码中规定了输入类型 typy=number ，所以在文本框中无法键入除数字和小数点以外的字符,似乎也就不需要判断数据类型了...?摸了QAQ
  • 关于防止通过Get请求的参数进行注入攻击：如果将注释语句由 @RequestMapping 和 @GetMapping 修改为 @PostMapping 只从前端传递参数是否可行呢？

学习历程

  • 首先是学习了科学的搜索引擎使用方法，如分步键入所需要的关键词“HTML input 文本框”、“Spring Boot 前后端传参”，通过简化提炼问题的关键词来大大提高搜索效率

  • Spring Boot相关

    • @RestController 注解，相当于 @Controller + @ResponseBody 两个注解的结合，返回json数据不需要在方法前面加 @ResponseBody 注解了，但使用 @RestController 这个注解，就不能返回HTML页面

    • @PostMapping 和 @GetMapping 请求的区别：@GetMapping 直接从请求Url上面拿需要的数据 @PostMapping 从请求body里面拿需要的数据

    • 前后端传参的几种常见方式

    • URL传参：http://域名/项目名/接口名?a=%s&b=%s

    • form表单请求： 

      《form action="path" method="post">/防吞/form》

    • 后端接收直接把表单的参数写在 Controller 相应的方法中，适用于 GET 和 POST 请求方式

      
@RestController
@RequestMapping("/hello")
public class Main {
    @RequestMapping("/a")
    public String A(String a,String b) {
        System.out.println("a is:"+a);
        System.out.println("b is:"+b);
        return "success";
    }
}

    • 后端用注解 @RequestParam 绑定请求参数到方法入参，适用于 GET 和 POST 请求方式

      
@RestController
@RequestMapping("/hello")
public class Main {
    @RequestMapping(value="/a",method=RequestMethod.GET)
    public String a(@RequestParam("a") String x,@RequestParam("b") String y) {
        System.out.println("a:"+x);
        System.out.println("b:"+y);
        return "success";
    }
}

    • 用注解 @RequestBody 绑定请求参数到方法入参，用于 POST 请求

      
@RestController
@RequestMapping("/hello")
public class Main {

    @RequestMapping("/Plus")
    public int abc(int a, int b){
        System.out.println("a:"+x);
        System.out.println("b:"+y);
        return "success";
    }
}

    • Thymeleaf 模板引擎相关

    • 引入 Thymeleaf 相关依赖：

          《dependency》
        《groupId》org.springframework.boot《/groupId》
        《artifactId》spring-boot-starter-thymeleaf《/artifactId》
    《/dependency》

    • templates 目录下 HTML 网页引入 Thymeleaf 语法：《html lang="en" xmlns:th="http://www.thymeleaf.org"》

    • Thymeleaf语法

      1. th:text：文本替换；

      2. th:utext：支持html的文本替换。

      3. th:value：属性赋值

      4. th:each：遍历循环元素

      5. th:if：判断条件，类似的还有th:unless，th:switch，th:case

      6. th:insert：代码块引入，类似的还有th:replace，th:include，常用于公共代码块提取的场景

      7. th:fragment：定义代码块，方便被th:insert引用

      8. th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。

      9. th:attr：设置标签属性，多个属性可以用逗号分隔

      10. ${...} 变量表达式，Variable Expressions

      11. @{...} 链接表达式，Link URL Expressions

      12. #{...} 消息表达式，Message Expressions

源代码

目录结构

src
└───main
    └───java   
    |   └───com.example.Calculator
    |       └───Controller
    |       |   └───HelloController
    │       └───CalculatorApplication
    └───resources
        └───static
        │   └───calculate.html
        └───templates.error
        |   └───400.html
        |   └───404.html
        |   └───500.html
        └───application.properties

./src/main/java/com.example.Calculator/Controller/HelloController

package com.example.Calculator.Controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/hello")
public class HelloController {

    @RequestMapping("/Plus")
    public int zhengshujiafamiao(int a, int b) {int Right = a + b;
        if (((a ^ Right) & (b ^ Right)) < 0)
            throw new ArithmeticException("整数溢出喵");return Right;
    }

    @RequestMapping("/Minus")
    public int zhengshujianfamiao(int a, int b) {int Right = a - b;
        if (((a ^ b) & (a ^ Right)) < 0)
            throw new ArithmeticException("整数溢出谢谢喵");return Right;
    }

    @RequestMapping("/Times")
    public int zhengshuchengfamiao(int a, int b) {long Right = (long) a * b;
        if ((int)Right != Right) {
            throw new ArithmeticException("数据溢出喵");
        }
        return (int)Right;
    }

    @RequestMapping("/Dividedby")
    public int zhengshuchufamiao(int a, int b) {
        return a / b;
    }

    @RequestMapping("/DoublePlus")
    public double xiaoshijiafa(double a, double b) {
        return a + b;
    }

    @RequestMapping("/DoubleMinus")
    public double xiaoshujianfa(double a, double b) {
        return a - b;
    }

    @RequestMapping("/DoubleTimes")
    public double xiaoshuchengfa(double a, double b) {
        return a * b;
    }

    @RequestMapping("/DoubleDividedby")
    public double xiaoshuchufa(double a, double b) {
        return a / b;
    }
}

./src/main/resources/static/calculate.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>太湖之光！</title>
</head>
<body>
<form action="/hello/Plus" method="post">
  <p>
    请输入A：<input type="number" name="a">
  </p>
  <p>
    请输入B：<input type="number" name="b">
  </p>
  <p>
    <input type="submit" value="使用整数加法喵">
  </p>
</form>
<form action="/hello/Minus" method="post">
  <p>
    请输入A：<input type="number" name="a">
  </p>
  <p>
    请输入B：<input type="number" name="b">
  </p>
  <p>
    <input type="submit" value="使用整数减法喵">
  </p>
</form>
<form action="/hello/Times" method="post">
  <p>
    请输入A：<input type="number" name="a">
  </p>
  <p>
    请输入B：<input type="number" name="b">
  </p>
  <p>
    <input type="submit" value="使用整数乘法喵">
  </p>
</form>
<form action="/hello/Dividedby" method="post">
  <p>
    请输入A：<input type="number" name="a">
  </p>
  <p>
    请输入B：<input type="number" name="b">
  </p>
  <p>
    <input type="submit" value="使用整数除法喵">
  </p>
</form>
<form action="/hello/DoublePlus" method="post">
  <p>
    请输入A：<input type="number" step="0.01" name="a">
  </p>
  <p>
    请输入B：<input type="number" step="0.01" name="b">
  </p>
  <p>
    <input type="submit" value="使用小数加法喵">
  </p>
</form>
<form action="/hello/DoubleMinus" method="post">
  <p>
    请输入A：<input type="number" step="0.01" name="a">
  </p>
  <p>
    请输入B：<input type="number" step="0.01" name="b">
  </p>
  <p>
    <input type="submit" value="使用小数减法喵">
  </p>
</form>
<form action="/hello/DoubleTimes" method="post">
  <p>
    请输入A：<input type="number" step="0.01" name="a">
  </p>
  <p>
    请输入B：<input type="number" step="0.01" name="b">
  </p>
  <p>
    <input type="submit" value="使用小数乘法喵">
  </p>
</form>
<form action="/hello/DoubleDividedby" method="post">
  <p>
    请输入A：<input type="number" step="0.01" name="a">
  </p>
  <p>
    请输入B：<input type="number" step="0.01" name="b">
  </p>
  <p>
    <input type="submit" value="使用小数除法喵">
  </p>
</form>
</body>
</html>

./src/main/resources/templates.error/400.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<h1>数据溢出了QAQQQQQQQQQQ</h1>
<p>Status：<span th:text="${status}"></span></p>
<p>Error：<span th:text="${error}"></span></p>
<p>Timestamp：<span th:text="${timestamp}"></span></p>
<p>Message：整点小的捏，或者对计算式使用卡西欧计算器吧！<span th:text="${message}"></span></p>
<p>Path：<span th:text="${path}"></span></p>
</body>
</html>

./src/main/resources/templates.error/404.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<h1>还没有创建这个页面捏~~~</h1>
<p>Status：<span th:text="${status}"></span></p>
<p>Error：<span th:text="${error}"></span></p>
<p>Timestamp：<span th:text="${timestamp}"></span></p>
<p>Message：你来创创这个页面罢！<span th:text="${message}"></span></p>
<p>Path：<span th:text="${path}"></span></p>
</body>
</html>

./src/main/resources/templates.error/500.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<h1>再除以0就不礼貌了！</h1>
<p>Status：<span th:text="${status}"></span></p>
<p>Error：<span th:text="${error}"></span></p>
<p>Timestamp：<span th:text="${timestamp}"></span></p>
<p>Message：不可以除以零喵<span th:text="${message}"></span></p>
<p>Path：<span th:text="${path}"></span></p>
</body>
</html>
Eclipse
Eclipse
© 2025 软件园学生在线
Theme by Wing