【SpringMVC】SpringMVC 小案例：加法计算器初步理解前后端接口交互与数据处理

文章目录

加法计算器
- [(一) 约定前后端交互接口](#(一) 约定前后端交互接口)
- [(二) 服务器代码](#(二) 服务器代码)
- [(三) 前端页面代码](#(三) 前端页面代码)
- [(四) 测试运行](#(四) 测试运行)

结合前两篇关于SpringMVC的学习,做一些小案例

1.理解前后端交互过程
2.接口传参,数据返回,以及页面展示

加法计算器

需求: 输入两个整数, 点击"点击相加"按钮, 显示计算结果

(一) 约定前后端交互接口

1.概念

约定"前后端交互接口"是进行 Web 开发中的关键环节.

接口又叫 API（Application Programming Interface),我们一般讲到接口或者 API，指的都是同一个东西.是指应用程序对外提供的服务的描述,用于交换信息和执行任务(与JavaSE阶段学习的 $类和接口$ 中的接口是两回事).

简单来说,就是允许客户端给服务器发送哪些 HTTP 请求,并且每种请求预期获取什么样的 HTTP 响应.

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

接口,其实也就是我们前面网络模块讲的的"应用层协议".把约定的内容写在文档上,就是"接口文档",接口文档也可以理解为是应用程序的"操作说明书".

在项目开发前,根据需求先约定好前后端交互接口,双方按照接口文档进行开发.

接口文档通常由服务提供方来写,交由服务使用方确认,也就是客户端.

接口文档一旦写好,尽量不要轻易改变.

如若需要改变,必须要通知另一方知晓.

2.需求分析

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

3.接口定义

基于以上分析,我们来定义接口

接口定义
请求路径: calc/sum
请求方式: GET/POST
接口描述: 计算两个整数相加

4.请求参数:

参数名	类型	是否必须	备注
num1	Integer	是	参与计算的第一个数
num2	Integer	是	参与计算的第二个数

示例: num1=5&num2=3

5.响应数据:

Content-Type: text/html

响应内容: 计算机计算结果: 8

服务器给浏览器返回计算的结果

(二) 服务器代码

(三) 前端页面代码

(四) 测试运行

完整代码

CalcController

java 复制代码

@RequestMapping("/calc")
//@RestController 表示返回数据 @Controller 表示返回视图
@RestController
public class CalcController {
    @RequestMapping("/sum")
    public String sum(Integer num1,Integer num2){
        if(num1 == null || num2 == null){
            return "参数不合法,请检查后再提交";
        }
        Integer sum = num1 + num2;
        return "<h1>计算结果为:" +sum + "</h1>";
    }
}

calc.html

java 复制代码

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