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
————————————————
电子签名：上嘉路
