JavaEE：Spring Web简单小项目实践一（加法计算器）

最新推荐文章于 2025-07-29 12:15:13 发布

原创最新推荐文章于 2025-07-29 12:15:13 发布 · 396 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#java #开发语言 #java-ee #学习 #后端 #spring

学习目的：

1、理解前后端交互过程

2、学习接口传参，数据返回以及页面展示

1、准备工作

创建SpringBoot项目，引入Spring Web依赖，添加前端页面到项目中。

前端代码：

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

</html>

2、约定前后端交互接口

“前后端分离”模式开发，前端和后端代码通常由不同的团队负责开发，双方团队在开发之前，会提前约定好交互的方式。客户端发起请求，服务器提供对应的服务。服务器提供的服务种类有很多种，客户端按照双方约定指定选择哪一个服务。

需求分析：

对两个整数进行相加，需要客户端提供参与计算的两个数，服务器端返回这两个整数计算的结果。

接口定义：

请求路径：calc/sum

请求方式：POST

接口描述：计算两个整数相加

请求参数：

示例：num1=2&num2=1

响应数据：

Content-Type：text/html

响应内容：计算机计算结果：3

3、服务器端代码

服务器端需要实现的功能是，返回两数相加的结果，所以只需要编写以下代码：

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

@RestController
@RequestMapping("/calc")
public class CalculatorController {
    @RequestMapping("/sum")
    public String sum(Integer num1, Integer num2) {
        Integer sum = num1 + num2;
        return "<h1>计算结果："+sum+"</h1>";
        //加上<h1></h1>标签，目的是让页面看上去更美观，不加也行
    }
}

4、调整前端页面代码

添加对应 url路径和请求方式：

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