Spring MVC Web 开发实战：接口约定与前后端交互 | 极客日志

Java大前端java

Spring MVC Web 开发实战：接口约定与前后端交互

Spring MVC 接口约定与前后端交互实战。涵盖加法计算器、用户登录及留言板案例，详解 RESTful 接口定义、Session 管理及 Lombok 简化代码技巧。

咸鱼开飞机发布于 2026/2/13更新于 2026/4/251 浏览

Spring MVC Web 开发实战：接口约定与前后端交互

一、加法计算器

1. 准备工作

首先创建一个 Spring Boot 项目，引入 spring-web 依赖。前端页面直接放在项目的静态资源目录下即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</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>

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

参数名	类型	是否必须	备注
num1	Integer	是	第一个加数
num2	Integer	是	第二个加数

package com.yang.test1_19_5;

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

@RequestMapping("/calc")
@RestController
public class CalController {

    @RequestMapping("/sum")
    public String sum(Integer num1, Integer num2) {
        if (num1 == null || num2 == null) {
            return "输入的数据不合法";
        }
        Integer sum = num1 + num2;
        return "计算结果：" + sum;
    }
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录首页</title>
</head>
<body>
    登录人：<span id="user"></span>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        // 页面加载时获取当前用户信息
        $(function() {
            $.get('/user/getLoginUser', function(data) {
                $('#user').text(data);
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <h1>用户登录</h1>
    用户名：<input name="userName" type="text"><br>
    密码：<input name="password" type="password"><br>
    <input type="button" value="登录" onclick="login()">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        function login() {
            var userName = $('input[name="userName"]').val();
            var password = $('input[name="password"]').val();
            $.post('/user/login', { userName: userName, passWord: password }, function(res) {
                if (res === true) {
                    alert('登录成功');
                    location.href = '/index.html'; // 跳转首页
                } else {
                    alert('账号或密码错误');
                }
            });
        }
    </script>
</body>
</html>

package com.yang.test1_20_1;

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 {

    /**
     * 校验用户名和密码是否正确
     */
    @PostMapping("/login")
    public Boolean login(String userName, String password, HttpSession session) {
        if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            return false;
        }
        // 模拟校验逻辑，常量放前面避免 NPE
        if ("Bruce".equals(userName) && "12345".equals(password)) {
            // 存储 Session
            session.setAttribute("loginUser", userName);
            return true;
        }
        return false;
    }

    @GetMapping("/getLoginUser")
    public String getLoginUser(HttpServletRequest request) {
        // 参数为 false，获取的 session 为 null 时，不会创建 session
        HttpSession session = request.getSession(false);
        if (session != null) {
            String loginUser = (String) session.getAttribute("loginUser");
            return loginUser != null ? loginUser : "";
        }
        return "";
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style>
        .container { width: 350px; height: 300px; margin: 0 auto; text-align: center; }
        .row { width: 350px; height: 40px; display: flex; justify-content: space-between; align-items: center; }
        .row input { width: 260px; height: 30px; }
        #submit { width: 350px; height: 40px; background-color: orange; color: white; border: none; margin: 10px; border-radius: 5px; font-size: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>留言板</h1>
        <p>输入后点击提交，会将信息显示下方空白处</p>
        <div class="row"><span>谁:</span><input type="text" id="from"></div>
        <div class="row"><span>对谁:</span><input type="text" id="to"></div>
        <div class="row"><span>说什么:</span><input type="text" id="say"></div>
        <input type="button" value="提交" onclick="submit()">
        <!-- 留言展示区 -->
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        function submit(){
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') { return; }
            
            // 构造节点
            var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
            // 添加到页面
            $('.container').append(divE);
            // 清空输入框
            $('#from').val(""); $('#to').val(""); $('#say').val("");
        }
    </script>
</body>
</html>

获取全部留言：GET /message/getList
- 响应：JSON 数组
```
[{ "from":"黑猫", "to":"白猫", "message":"喵" }]
```
发表新留言：POST /message/publish
- 请求体：JSON 对象
```
{ "from":"黑猫", "to":"白猫", "message":"喵" }
```
- 响应：{"OK":1}

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.32</version>
    <scope>compile</scope>
</dependency>

注解	作用
`@Getter`	自动生成 getter 方法
`@Setter`	自动生成 setter 方法
`@Data`	组合了 Getter, Setter, ToString, Equals, HashCode
`@NoArgsConstructor`	生成无参构造
`@AllArgsConstructor`	生成全参构造

package com.yang.test1_21_1;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.List;

// 假设 MessageInfo 类使用了 @Data 等注解

@RequestMapping("/message")
@RestController
public class MessageController {

    List<MessageInfo> messageInfoList = new ArrayList<>();

    @PostMapping("/publish")
    public Boolean publish(@RequestBody MessageInfo messageInfo) {
        if (!StringUtils.hasLength(messageInfo.getFrom()) || 
            !StringUtils.hasLength(messageInfo.getTo()) || 
            !StringUtils.hasLength(messageInfo.getMessage())) {
            return false;
        }
        messageInfoList.add(messageInfo);
        return true;
    }

    @GetMapping("/getList")
    public List<MessageInfo> getList() {
        return messageInfoList;
    }
}

Spring MVC Web 开发实战：接口约定与前后端交互

Spring MVC Web 开发实战：接口约定与前后端交互

一、加法计算器

1. 准备工作

更多推荐文章

相关免费在线工具

2. 接口约定

需求与接口分析

3. 后端实现

二、用户登录

1. 准备工作

2. 接口设计

校验接口

查询登录用户接口

3. 后端实现

三、留言板

1. 准备工作

2. 接口定义

3. Lombok 简介

4. 后端实现

更多推荐文章

相关免费在线工具

Spring MVC Web 开发实战：接口约定与前后端交互

Spring MVC Web 开发实战：接口约定与前后端交互

一、加法计算器

1. 准备工作

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2. 接口约定

需求与接口分析

3. 后端实现

二、用户登录

1. 准备工作

2. 接口设计

校验接口

查询登录用户接口

3. 后端实现

三、留言板

1. 准备工作

2. 接口定义

3. Lombok 简介

4. 后端实现

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具