SpringBoot + jQuery 实战：从零搭建留言板

需求分析

我们需要实现一个简单的表白墙功能，核心交互包括：

提交留言：用户输入信息后点击提交，后端接收并保存数据。
展示留言：页面加载时自动获取所有留言记录并渲染。

界面应包含发送者、接收者和留言内容的输入框，以及一个用于展示留言列表的容器。

接口设计

前后端约定采用 RESTful 风格进行交互，主要涉及两个接口：

1. 获取全部留言

请求方式：GET
路径：/message/getList
响应格式：JSON 数组

[
  { "from": "黑猫", "to": "白猫", "message": "喵" },
  { "from": "黑狗", "to": "白狗", "message": "汪" }
]

浏览器发起该请求后，服务器返回当前存储的所有留言记录。

2. 发表新留言

请求方式：POST
路径：/message/publish
请求体：JSON 对象

{ "from": "黑猫", "to": "白猫", "message": "喵" }

响应格式：JSON 对象

{ "ok": true }

前端将表单数据序列化后发送至该接口，服务器处理成功后返回确认信息。

后端开发

引入 Lombok 简化开发

Lombok 是一个通过注解在编译期生成代码的工具库，能显著减少 Getter、Setter 和 toString 等样板代码。它属于源码级注解（SOURCE），仅在编译阶段生效，不会增加运行时负担。

在 Maven 项目中引入依赖：

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

IDE 通常支持插件（如 IntelliJ 的 EditStarter）来快速生成此类配置。

定义实体类

使用 @Data 注解自动生成常用方法，保持代码简洁：

import lombok.Data;

@Data
public class MessageInfo {
    private String from;
    private String to;
    private String message;
}

编写控制器

创建 MessageController，使用 ArrayList 在内存中暂存消息。实际生产中建议替换为数据库持久化。

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

@RequestMapping("/message")
@RestController
public class MessageController {
    // 内存存储，重启服务后数据会丢失
    private List<MessageInfo> messageInfos = new ArrayList<>();

    @RequestMapping("/getList")
    public List<MessageInfo> getList() {
        return messageInfos;
    }

    @RequestMapping("/publish")
    public boolean publish(MessageInfo messageInfo) {
        System.out.println(messageInfo);
        // 校验必填字段
        if (StringUtils.hasLength(messageInfo.getFrom()) 
            && StringUtils.hasLength(messageInfo.getTo()) 
            && StringUtils.hasLength(messageInfo.getMessage())) {
            messageInfos.add(messageInfo);
            return true;
        }
        return false;
    }
}

前端开发

修改 messagewall.html，利用 jQuery 的 Ajax 功能实现异步交互。

页面加载初始化

监听 DOM 加载事件，调用 load() 函数拉取历史留言：

$(document).ready(function() {
    load();
});

function load() {
    $.ajax({
        type: "get",
        url: "/message/getList",
        success: function(result) {
            // 清空旧内容避免重复渲染
            $("#messageList").empty();
            for (var message of result) {
                var divE = "<div>" + message.from + "对" + message.to + "说:" + message.message + "</div>";
                $("#messageList").append(divE);
            }
        }
    });
}

提交留言逻辑

绑定按钮点击事件，收集表单数据并发送 POST 请求：

function submit() {
    var from = $("#from").val();
    var to = $("#to").val();
    var say = $("#say").val();

    if (from == '' || to == '' || say == '') {
        alert("请填写完整信息");
        return;
    }

    $.ajax({
        type: "post",
        url: "/message/publish",
        data: { from: from, to: to, message: say },
        contentType: "application/json; charset=utf-8",
        success: function(result) {
            if (result) {
                // 动态追加新留言到页面
                var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
                $("#messageList").append(divE);
                // 清空输入框
                $('#from').val("");
                $('#to').val("");
                $('#say').val("");
            } else {
                alert("发表留言失败!");
            }
        }
    });
}

注意：虽然示例中使用了默认 data 格式，但在生产环境中若后端严格解析 JSON Body，需配合 JSON.stringify() 及设置 contentType。

测试与局限

启动 SpringBoot 应用，访问 http://127.0.0.1:8080/messagewall.html 即可看到效果。

局限性说明：当前方案使用 private List<MessageInfo> 在内存中存储数据。这意味着：

刷新页面前，已提交的留言会保留。
一旦服务器重启或进程结束，所有数据将丢失。
多用户并发场景下，内存共享可能带来一致性问题。

后续扩展建议引入 MySQL 或 Redis 进行持久化存储，确保数据安全可靠。