简单求和计算器

news2024/11/18 23:42:26

其实对于计算器的写法在C语言阶段就已经有了，但是，在目前阶段《前后端交互》，这算是一种全新的写法，毕竟将数据从前端返回给后端，然后再将数据返回给前端，都涉及到一些参数的交互，值得我们学习深思！

简单的前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form action="calc/sum" method="post">
    <h1>计算器</h1>
    数字1：<input name="num1" type="text"><br>
    数字2：<input name="num2" type="text"><br>
    <input type="submit" value=" 点击相加 ">
</form>
</body>

</html>

前端页面成果为：

在浏览器输入：http://localhost:8080/calc.html

简简单单的前端页面！！

那么，我们来看一下后端的代码吧！

@RequestMapping("/calc")
@RestController
public class calcController {
    @RequestMapping("sum")
    public String sum(Integer num1,Integer num2){
        Integer sum=num1+num2;
        return "计算结果为： "+ sum;
    }
    
}

最后运行结果为;

虽然上面的代码很是简洁，但是，有很多地方值得我们思索！

这几个地方要一一对应，否则程序不能正常执行！！

<form action="calc/sum" method="post">这段代码代表什么意思？

这段代码是HTML中的一个表单元素，用于收集用户数据。<form>标签定义了一个表单，允许用户在表单中输入内容。

action="calc/sum"：这是表单提交的目标URL，也就是当用户点击提交按钮后，表单数据将被发送到的地址。在这个例子中，数据将被发送到"calc/sum"这个路径。

method="post"：这是表单数据的提交方式。"post"意味着表单数据将被包含在HTTP请求体中发送，而不是作为URL的一部分。这种方式对于发送敏感或大量数据更为安全。

总的来说，这段代码创建了一个表单，用户可以在其中输入数据，然后点击提交按钮将数据发送到"calc/sum"这个路径。