对于 Spring Boot 入门者来说，掌握后端接口开发与前端页面交互方式，是学会 Web 开发和前后端联调的关键一步。本文将结合三个经典 Web 实战案例——表单提交、AJAX 登录与 Session 状态管理、以及 JSON 数据交互——帮助您系统理解 Spring Boot 常见接口写法、前后端联调流程以及核心注解的实际应用。

1. 案例一：表单提交与参数绑定（计算求和）

先来看一种最基础、也最典型的 Web 交互方式：HTML 表单提交。虽然这种方式相对传统，但它正是理解 Spring Boot 后端参数绑定机制和表单请求处理流程的起点。

1.1 后端代码：CalcController.ja va

通过 @RestController 可以快速编写接口，并直接使用方法参数接收表单提交的数据。Spring Boot 会自动完成请求参数绑定与类型转换，无需开发者手动解析参数。

package cn.overthinker.springboot;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RequestMapping("/calc")
@RestController
public class CalcController {
    /**
     * 求和接口：通过方法参数名自动接收前端表单提交的 num1 和 num2
     */
    @RequestMapping("/sum")
    public String sum(Integer num1, Integer num2) {
        // 使用 Integer 包装类进行非空判断，避免空指针异常
        if(num1 == null || num2 == null) {
            return "请求非法：请输入两个数字！";
        }
        // 计算并返回结果
        return "计算结果为：" + (num1 + num2);
    }
}

1.2 前端代码：calc.html

HTML 代码

    
    
    
    


    

        
简单求和计算器
        

            数字1：
            数字2：
            
        
    

1.3 联调重点解析：参数绑定

• 前端 Form 的 name 属性：前端 中的 name 必须与后端方法参数名 Integer num1 完全一致，这是 Spring Boot 表单参数绑定能否成功的核心细节。一旦名称拼写错误或不一致，后端接收到的值就会是 null。
• 后端自动类型转换：Spring Boot 会自动把 HTTP 请求中的字符串参数转换成 Ja va 方法所需的 Integer 类型。如果用户输入的是非数字内容，通常会触发类型转换异常，因此在真实项目中，建议增加参数校验，或者结合 @RequestParam 设置默认值和必填规则。

2. 案例二：AJAX 异步交互与 Session 状态管理（用户登录）

这个案例进一步引入了 AJAX 异步请求，实现无刷新登录，同时通过 Session 在服务器端保存用户登录状态。这也是 Spring Boot 用户登录功能中非常常见的一种实现方案。

2.1 后端代码：UserController.ja va 和 Person.ja va

UserController.ja va（核心逻辑）

package cn.overthinker.springboot;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RequestMapping("/user")
@RestController
public class UserController {
    /**
     * 登录接口：使用 HttpSession 存储用户信息
     */
    @PostMapping("/login")
    public boolean login(String userName, String password, HttpSession session) {
        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            return false;
        }
        // 硬编码校验（实际项目应查询数据库）
        if("admin".equals(userName) && "123456".equals(password)) {
            // **核心知识点：登录成功后，将用户名存入 Session**
            session.setAttribute("loginUser", userName);
            return true;
        }
        return false;
    }
    /**
     * 获取当前登录用户接口：从 Session 中读取用户信息
     */
    @GetMapping("/getLoginUser")
    public String getLoginUser(HttpServletRequest request) {
        // request.getSession(false)：如果 Session 不存在，则不创建
        HttpSession session = request.getSession(false);
        if(session != null) {
            String loginUser = (String) session.getAttribute("loginUser");
            return loginUser;
        }
        return "";
    }
}

Person.ja va（实体类）

虽然这个类没有直接参与登录接口处理，但它可以作为 Ja vaBean 参数绑定的示例。借助 @Data 注解，系统会自动生成 Getter/Setter 等常用方法，从而减少样板代码，提高开发效率。

package cn.overthinker.springboot;
// 略：包含 name, password, age 属性及其 Getter/Setter 和 toString 方法
public class Person {
    // ... 属性、Getter/Setter、toString ...
}

2.2 前端代码：login.html 和 index.html

这里通过 jQuery AJAX 发起异步登录请求。与传统表单提交相比，AJAX 登录不会刷新页面，能够即时提示登录结果，并在成功后跳转页面，整体用户体验更好。

login.html（登录页面）

  
  
  


  

    
用户登录
    用户名：
    密码：
    
  

  
  

index.html（首页 - 获取登录信息）

    
    
    


    
欢迎回来，登录人: 

    
    

2.3 联调重点解析：AJAX 与 Session

• AJAX：AJAX 允许前端在不刷新页面的前提下与后端接口进行异步数据交互。在 login.html 中，通过 jQuery 的 $.ajax 发送登录请求，成功后直接跳转首页，失败时即时弹出提示，适合实现现代 Web 登录功能。
• Session 机制：Session 是服务器端保存用户状态的常用方案。当用户登录成功后，session.setAttribute("loginUser", userName); 会把当前登录用户名写入 Session。随后浏览器会通过 Cookie 自动携带 Session ID 再次访问服务器。当 index.html 请求 /user/getLoginUser 时，服务器就能根据这个 Session ID 找到对应 Session，并读取其中保存的 loginUser 信息，从而实现登录状态保持。这里的 getSession(false) 也非常重要，它表示如果 Session 不存在则不主动创建，适合避免用户未登录时产生不必要的 Session 对象。

3. 案例三：JSON 数据传输与 RESTful 接口（留言板）

这个案例展示的是现代 Web 开发中最常见的前后端通信方式：前端与后端通过 JSON 格式传输数据，后端则提供 RESTful 风格接口。这种模式在 Spring Boot 项目、前后端分离系统以及企业级应用中都非常普遍。

3.1 后端代码：MessageController.ja va 和 MesseageInfo.ja va

MessageController.ja va（核心逻辑）

package cn.overthinker.springboot;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import ja va.util.ArrayList;
import ja va.util.List;
@RequestMapping("/Message")
@RestController
public class MessageController {
    // 存储留言的列表（模拟数据库存储）
    private List messeageInfoList = new ArrayList<>();
    /**
     * 发布留言接口：使用 @RequestBody 接收 JSON 数据
     */
    @PostMapping("/publish")
    public Boolean publish(@RequestBody MesseageInfo messeageInfo) {
        // 参数校验
        if(!StringUtils.hasLength(messeageInfo.getFrom())
             || !StringUtils.hasLength(messeageInfo.getTo())
             || !StringUtils.hasLength(messeageInfo.getMessage())) {
            return false;
        }
        messeageInfoList.add(messeageInfo);
        return true;
    }
    /**
     * 获取留言列表接口：返回 JSON 数组
     */
    @GetMapping("/getList")
    public List getList() {
        return messeageInfoList;
    }
}

MesseageInfo.ja va（数据传输对象 DTO）

这里使用 Lombok 的 @Data 注解自动生成 Getter/Setter 等常用方法，可以显著减少重复代码，是 Spring Boot 开发中常见的 DTO 写法。

package cn.overthinker.springboot;
import lombok.Data;
@Data // Lombok 注解，自动生成 Getter/Setter, toString, equals等方法
public class MesseageInfo {
    private String from;
    private String to;
    private String message; // 注意：前端传的字段名是 message
}

3.2 前端代码：message.html

前端通过 AJAX 提交 JSON 格式数据到 Spring Boot 接口中。这里有一个关键点：contentType 必须设置为 application/json，否则后端无法按照 JSON 请求体正确解析数据。

HTML 代码

    
    
    


    

        
留言板
        
输入后点击提交，信息将显示在下方
        

            
谁:
 
        

        

            
对谁:
 
        

        

            
说什么:
 
        

        
        

            
    

    
    

3.3 联调重点解析：@RequestBody 与 JSON

• @RequestBody：这是 Spring Boot 接收 JSON 请求体时最关键的注解之一。它会告诉 Spring MVC：把 HTTP 请求体（Request Body）中的 JSON 字符串读取出来，并自动映射为方法参数中的 MesseageInfo messeageInfo 对象。如果请求体为空，或者 JSON 格式不合法，通常会直接报错。
• 前端 contentType: "application/json"：这个请求头必须显式设置，用来通知服务器当前提交的数据格式是 JSON。如果没有配置，Spring 默认可能按 application/x-www-form-urlencoded 方式处理，从而导致 @RequestBody 无法正确接收数据。
• 前端 JSON.stringify(...)：这是 Ja vaScript 原生方法，用于把 JS 对象转换成 JSON 字符串，例如把 {from: 'A', to: 'B', message: 'Hello'} 序列化后发送给后端。Spring Boot 收到后再通过 @RequestBody 自动完成反序列化。
• JSON 字段匹配：前端 JSON 的键名必须与后端 DTO（MesseageInfo）中的属性名完全一致，例如 message 对应 private String message;。字段名如果写错、大小写不一致，都会导致数据绑定失败或字段值为空。

4. 总结：前后端联调模式对比