当前位置：首页 > news >正文

后端代码练习1——加法计算器

news 2026/2/21 2:51:33

1. 需求

输入两个整数，点击 “点击相加” 按钮，显示计算结果。

2.准备工作

创建Spring Boot项目，引入Spring Web依赖，把前端代码放入static目录下。

2.1 前端代码

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

目录结构如下所示：

2.2 约定前后端交互接口

2.2.1概念介绍

约定 “前后端交互接口” 是进行Web开发中的关键环节。接口又叫 API（Application Programming Interface），我们一般讲到接口或者API，指的都是同一个东西。

这里的接口是指应用程序对外提供的服务的描述，用于交换信息和执行任务（与JavaSE阶段学习的 [类和接口] 中的接口不一样，两个不同的概念）。即就是允许客户端给服务器发送哪些 HTTP 请求，并且每种请求预期获取什么样的HTTP响应。

当前由于“前后端分离” 模式开发，前端和后端代码通常由不同的团队负责开发。双方在开发之前，会提前约定好交互的方式。如下：

客户端发起请求 —> 服务器提供对应的服务。服务器提供的服务种类有很多，客户端按照双方约定，指定选择哪一个服务。

接口：就是前面网络模块讲的 “应用层协议”。把约定的内容写在文档上，就是 “接口文档”，接口文档也可以理解为应用程序的“操作说明书”。

2.2.2 需求分析

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

2.2.3 接口定义

请求路径：calculate / sum

请求方式：GET/POST

接口描述：计算机计算结果

请求参数：

示例：num1=11&num2=22

响应数据：

Content-Type：text/html

响应内容：相加计算结果为：33，同时服务器给计算机返回计算结果。

3. 服务器代码

@RestController@RequestMapping("/calculate")public class UserController{@RequestMapping("/sum")public String calculate(Integer num1,Integer num2) {int sum = num1 + num2;return "<h1>后端返回的计算结果：" +sum + "<h1>";}}

4. 运行测试

1、访问127.0.0.1:8080/calc.html.如下所示：

2、输入结果开始测试：

ps：本次的内容就到这里了，如果对你有所帮助的话，就请一键三连哦！！！

本文的封面来自：bilibili苏杉杉的pv，侵权删 url：https://www.bilibili.com/video/BV1vo4y167eh/?spm_id_from=333.999.0.0&vd_source=866da5be2ef0ddd213b053523da53138
————————————————

电子签名：上嘉路

查看全文

http://www.mrgr.cn/news/13.html