《JavaEE进阶》----6.＜SpringMVC实践项目：【简易两整数加法计算器】＞

news2024/11/16 12:30:49

本篇博客简单的记录了我的第一个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>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易两整数加法计算器t</title>
</head>
<head>里面的代表这是文档的头部，包含元数据（metadata），如字符编码和页面标题。

<meta charset="UTF-8">

设置文档的字符编码为 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">
        <h1>计算器</h1>
        数字1：<input name="num1" type="text"><br>
        数字2：<input name="num2" type="text"><br>
        <input type="submit" value=" 点击相加 ">
    </form>
</body>
<body>中的文档的主体部分，包含网页的可见内容。

<form action="calc/sum" method="post"> 这里通过form表单可以进行前后端数据交互

这里创建一个 HTML 表单，用于将用户输入的数据提交到服务器：

action = "calc/cum"

这里设置表单提交的目标url，表示请求会发送到服务器的calc/sum路径。

method="post"

设置表单的提交方式为post，表示向服务器发送数据，而不是通过URL传递数据

<h1>计算器</h1> 在网页中设置一个一级标题显示：计算器

数字1：<input name="num1" type="text"><br>

在页面显示数字1：并且 input 元素用于接收用户的输入。

name="num1" 代表输入该数据的名称为num1，在提交时会把这个数据传递给服务器

type="text" 输入类型为文本

<br> 换行

<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;
    }
}