本篇博客简单的记录了我的第一个JavaEE实践项目
网页版
简易两整数加法计算器
的前段代码，前端页面，后端代码、及计算结果的展示。
使用了form表单来进行前后端的交互
前端代码：
<!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>
代码分析（详细！）：
由于是第一次接触前端html代码，因此把每一个代码的意思都详细的记录一下
如果后续碰到了类似的代码，就不再多说了。
<!DOCTYPE html>这里声明文档类型为HTML5
<html lang="en">HTML 文档的根元素，
lang="en"表示页面的语言是英语。
<head>里面的 代表这是文档的头部，包含元数据（metadata），如字符编码和页面标题。 <meta charset="UTF-8"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简易两整数加法计算器t</title> </head>设置文档的字符编码为 UTF-8，确保网页能正确显示各种字符。
<meta name="viewport" 用于响应式设计，使页面在不同设备上正确显示content="width=device-width, initial-scale=1.0">
对页面进行设计。设置视口的宽度为设备宽度，并且设置初始缩放级别为 1.0
<title>简易两整数加法计算器t</title>设置网页的标题，显示在浏览器的标签栏上
<body>中的 文档的主体部分，包含网页的可见内容。 <form action="calc/sum" method="post"> 这里通过form表单可以进行前后端数据交互<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 表单，用于将用户输入的数据提交到服务器：
action = "calc/cum"
这里设置表单提交的目标url，表示请求会发送到服务器的calc/sum路径。
method="post"
设置表单的提交方式为post，表示向服务器发送数据，而不是通过URL传递数据
计算器
在网页中设置一个一级标题显示：计算器数字1：<input name="num1" type="text">
在页面显示 数字1：并且 input 元素用于接收用户的输入。
name="num1" 代表输入该数据的名称为num1，在提交时会把这个数据传递给服务器
type="text" 输入类型为文本
<input type="submit" value=" 点击相加 ">
换行type="submit" 输入类型为提交按钮
value=" 点击相加 " 按钮上面显示的字为点击相加
代码执行过程
- 用户访问页面时：会看到一个带有两个输入字段和一个提交按钮的简单计算器界面。
- 输入数字并提交表单：用户在“数字1”和“数字2”中输入两个数字，然后点击“点击相加”按钮。
- 提交请求：表单的数据（两个数字）会被发送到服务器的
calc/sum路径，并通过POST方法进行处理。- 服务器处理：假设服务器端有一个
calc/sum路径可以处理这个请求，它会获取这两个数字并进行相加运算，最终返回一个结果页面给用户
前端页面：
后端代码：
@RestController
@RequestMapping("/calc")
public class CalcController {
@RequestMapping("/sum")
public String sum(Integer num1,Integer num2){
Integer sum = num1+num2;
return "计算机计算结果是："+sum;
}
}
前后端交互计算后的页面
本文转载自: https://blog.csdn.net/m0_73456341/article/details/141576084
版权归原作者 祁思妙想 所有， 如有侵权，请联系我们删除。
版权归原作者 祁思妙想 所有， 如有侵权，请联系我们删除。