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

【SpringMVC】深入解析 API 概念及接口定义方法和 SpringMVC 综合实战—简单加法计算器

article 2025/3/26 1:11:54

在这里插入图片描述

综合性练习

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

加法计算器

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

在这里插入图片描述

使用 Postman 来发送 JSON 请求参数

1. 准备工作

创建SpringBoot项目：引入Spring Web依赖，把前端页面放在项目中

码云地址： JavaEE进阶课程资料包

在这里插入图片描述

<!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.1 概念介绍

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

接口又叫 API（Application Programming Interface），我们一般讲到接口或者 API，指的都是同一个东西。

是指应用程序对外提供的服务的描述，用于交换信息和执行任务（与JavaSE阶段学习的[类和接口]中的接口是两回事）。

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

现在“前后端分离”模式开发，前端和后端代码通常由不同的团队负责开发。

双方团队在开发之前，会提前约定好交互的方式。

客户端发起请求，服务器提供对应的服务。

服务器提供的服务种类有很多，客户端按照双方约定指定选择哪一个服务。

接口，其实也就是我们前面网络模块讲的“应用层协议”。

把约定的内容写在文档上，就是“接口文档”，接口文档也可以理解为是应用程序的“操作说明书”。

比如儿童电话玩具

按1：响应儿歌
按2：响应钢琴乐曲
按3：安抚睡眠
按4：交通工具音效
…

但是这些操作说明，如果没有一个文档来说明，用户就不太清楚哪个按键对应哪个，所以商品一般会带一个说明书。

这些按键，就是接口。
这个“说明书”，就是应用程序的“接口文档”。

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

接口文档通常由服务提供方来写，交由服务使用方确认，也就是客户端。
接口文档一旦写好，尽量不要轻易改变。
如若需要改变，必须要通知另一方知晓。

2.2 需求分析

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

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

2.3 接口定义

在这里插入图片描述

2.4 请求参数

在这里插入图片描述

示例：num1=5 & num2=3

2.5 响应数据

在这里插入图片描述

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

3. 服务器代码

在这里插入图片描述

package com.example.springmvc_demo;

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

@RequestMapping("/calc")
@RestController
// @RestController 表示返回数据, @Controller 表示返回视图

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

运行程序，使用 Postman 发送请求：

在这里插入图片描述

4. 调整前端页面代码

添加访问 url 和请求方式

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