脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → SpringBoot jQuery留言板

基于SpringBoot+jQuery实现留言板功能

 更新时间：2025年12月30日 09:36:31   作者：Han.miracle  
本文详细介绍了基于SpringBoot和jQuery实现留言板功能的全过程,包括需求分析、接口定义、服务器端代码实现、前端页面代码修改以及运行测试,需要的朋友可以参考下

1 留言板

需求:界面如下图所示

  1. 输入留言信息，点击提交。后端把数据存储起来.
  2. 页面展示输入的表白墙的信息

1.1 约定前后端交互接口

需求分析

后端需要提供两个服务

  1. 提交留言：用户输入留言信息之后，后端需要把留言信息保存起来
  2. 展示留言：页面展示时，需要从后端获取到所有的留言信息

接口定义

  1. 获取全部留言全部留言信息，我们用 List 来表示，可以用 JSON 来描述这个 List 数据.

请求:

GET /message/getList

响应：JSON 格式

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

浏览器给服务器发送一个 GET /message/getList 这样的请求，就能返回当前一共有哪些留言记录。结果以 json 的格式返回过来.

  1. 发表新留言
  2. 发表新留言请求:body 也为 JSON 格式.
POST /message/publish
{
  "from": "黑猫",
  "to": "白猫",
  "message": "喵"
}

响应：JSON 格式.

{
  ok: 1
}

我们期望浏览器给服务器发送一个 POST /message/publish 这样的请求，就能把当前的留言提交给服务器.

1.2实现服务器端代码

1.2.1 lombok 介绍

在这个环节，我们介绍一个新的工具包 lombokLombok 是一个 Java 工具库，通过添加注解的方式，简化 Java 的开发.简单来学习下它的使用

1.引入依赖

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

第二种：

2.使用

lombok 通过一些注解的方式，可以帮助我们消除一些冗长代码，使代码看起来简洁一些比如之前的 Person 对象 就可以改为

@Data
public class Person {
    private int id;
    private String name;
    private String password;
}

@Data 注解会帮助我们自动一些方法，包含 getter/setter, equals, toString 等

原来需要些这个getter和setter

target里面是加载的maven后产生的核心目录

原来需要些这个getter和setter

现在只需要加入一个@data 就可以了

target里的

这个的生命周期只是source阶段的，所以我们看的这个target就不存在了

Lombok 等编译期工具的注解（如@Data）仅在源码阶段生效

创建项目的话，与之前的对比：

这个是原来的

变化的

有的时候就会失效所以我们需要改动一下

把这个之间全部删除就生效了

3.原理解释

1. SOURCE （源码级）：仅存在于源码中，编译后就被丢弃，完全由编译器处理（比如  @Override 、 @SuppressWarnings ），用于编译期语法检查、提示，运行时无法获取。

2.  CLASS （字节码级）：编译后保留在字节码文件中，但 JVM 加载类时不会将其载入内存，默认生命周期，运行时无法通过反射获取，通常用于类加载前的字节码增强（如 ASM 框架处理）。

3.  RUNTIME （运行时级）：保留到运行时，可通过反射（ Class.getAnnotation() ）获取，是开发中最常用的（如 Spring 的  @Autowired 、 @RequestMapping ），由 JVM 和框架共同处理。

可以观察加了 @Data 注解之后，Idea 反编译的.

class 文件这不是真正的字节码文件，而是 Idea 根据字节码进行反编译后的文件反编译是将可执行的程序代码转换为某种形式的高级编程语言，使其具有更易读的格式。反编译是一种逆向工程，它的作用与编译器的作用相反.

可以看出来,lombok是⼀款在编译期⽣成代码的⼯具包.

Java 程序的运行原理

Lombok的作用如下图所示：

4.更多使用

如果觉得 @Data 比较粗暴 (生成方法太多),lombok 也提供了一些更精细粒度的注解

@Data = @Getter + @Setter + @ToString + @EqualsAndHashCode + @RequiredArgsConstructor + @NoArgsConstructor

1.2更快捷的引入依赖

上述引入 lombok 依赖，需要去找 lombok 的坐标接下来介绍更简单引入依赖的方式

  1. 安装插件 EditStarter, 重启 Idea

2. 在pom.xml⽂件中,单击右键,选择Generate,操作如下图所示

进⼊EditStarters的编辑界⾯,添加对应依赖即可

1.3 服务器代码实现

定义留言对象 MessageInfo 类

import lombok.Data;

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

创建 MessageController 类使用List<MessageInfo>来存储留言板信息

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

1.4 调整前端页面代码修改messagewall.html

  1. 添加 load 函数，用于在页面加载的时候获取数据
load();
function load() {
    $.ajax({
        type: "get",
        url: "/message/getList",
        success: function (result) {
            for (var message of result) {
                var divE = "<div>" + message.from + "对" + message.to + "说:" + message.message + "</div>";
                $(".container").append(divE);
            }
        }
    });
}
  1. 修改原来的点击事件函数。在点击按钮的时候给服务器发送添加留言请求
function submit() {
    //1. 获取留言的内容
    var from = $("#from").val();
    var to = $("#to").val();
    var say = $("#say").val();
    if (from == '' || to == '' || say == '') {
        return;
    }
    $.ajax({
        type: "post",
        url: "/message/publish",
        data: {
            from: from,
            to: to,
            message: say
        },
        success: function (result) {
            if (result) {
                //2. 构造节点
                var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
                //3. 把节点添加到页面上
                $(".container").append(divE);
                //4. 清空输入框的值
                $('#from').val("");
                $('#to').val("");
                $('#say').val("");
            } else {
                alert("发表留言失败!");
            }
        }
    });
}
  • contentType: "application/json"：必须和JSON.stringify()配合用 —— 因为后端要接收 JSON 格式的请求体，所以前端要把 JS 对象（{from:..., to:...}）转成 JSON 字符串（JSON.stringify()的作用），同时告诉后端 “我发的是 JSON”。
  • data的格式：如果contentType是application/json，data必须是JSON 字符串（所以用JSON.stringify()转换）；如果是默认的application/x-www-form-urlencoded，data可以直接传 JS 对象（不用转字符串）。

1.5运行测试

此时在浏览器通过 URL http://127.0.0.1:8080/messagewall.html 访问服务器，即可看到

此时我们每次提交的数据都会发送给服务器，每次打开页面的时候页面都会从服务器加载数据。因此及时关闭页面，数据也不会丢失.

但是数据此时是存储在服务器的内存中（private List<Message> messages = new ArrayList<Message>();）, 一旦服务器重启，数据仍然会丢失.

要想数据不丢失，需要把数据存储在数据库中，后面再讲

刷新后数据就丢失了，我们保存的到List里面，没有重启服务器，就不会丢，但是页面不显示，是因为我们前端没有获取后端的数据

前端页面获得后端的数据

 // 页面加载时获取留言列表
    getMessage();

    // 获取留言列表的方法
    function getMessage() {
      $.ajax({
        url: "message/getList",
        type: "get",
        success: function (messageInfos) {
          // 先清空列表，避免重复渲染
          $("#messageList").empty();
          // 遍历留言列表
          for (let messageInfo of messageInfos) {
    
            let divE = `<div>${messageInfo.from}对${messageInfo.to}说：${messageInfo.content}</div>`;
  
            $("#messageList").append(divE);
          }
        }
      });
    }

$("#messageList").empty(); 的唯一作用是：清空选中元素（这里是 id 为 messageList 的 div）内部的所有子元素和内容，不留任何痕迹。

是Java的for- each循环

以上就是基于SpringBoot+jQuery实现留言板功能的详细内容，更多关于SpringBoot jQuery留言板的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • MyBatis流式查询的使用详解

    MyBatis流式查询的使用详解

    流式查询指的是查询成功后不是返回一个集合而是返回一个迭代器，应用每次从迭代器取一条查询结果。流式查询的好处是能够降低内存使用
    2022-08-08
  • Java中队列Queue和Deque的区别与代码实例

    Java中队列Queue和Deque的区别与代码实例

    学过数据结构的,一定对队列不陌生,java也实现了队列,下面这篇文章主要给大家介绍了关于Java中队列Queue和Deque区别的相关资料,需要的朋友可以参考下
    2021-08-08
  • java基础详解之数据类型知识点总结

    java基础详解之数据类型知识点总结

    这篇文章主要介绍了java基础详解之数据类型知识点总结,文中有非常详细的代码示例,对正在学习java基础的小伙伴们有很大的帮助,需要的朋友可以参考下
    2021-04-04
  • RocketMQ特性Broker存储事务消息实现

    RocketMQ特性Broker存储事务消息实现

    这篇文章主要为大家介绍了RocketMQ特性Broker存储事务消息实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • springboot框架中如何整合mybatis框架思路详解

    springboot框架中如何整合mybatis框架思路详解

    这篇文章主要介绍了springboot框架中如何整合mybatis框架,本文通过示例图文相结合给大家介绍的非常详细，需要的朋友可以参考下
    2022-12-12
  • java语言基础之标识符和命名规则详解

    java语言基础之标识符和命名规则详解

    这篇文章主要给大家介绍了关于java语言基础之标识符和命名规则的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Spring内存泄漏异常分析与解决详解

    Spring内存泄漏异常分析与解决详解

    文章介绍了基于Spring框架的企业级应用开发中常见的内存泄漏问题,通过分析和使用jstack、Arthas、MAT、jmap等工具,定位内存泄漏的原因,并提供了优化缓存策略和排查无用引用的解决方案
    2025-11-11
  • 解决警告:No archetype found in remote catalog. Defaulting to internal catalog.问题

    解决警告:No archetype found in remote c

    新建Maven项目时,若提示远程archetype未找到,可通过以下两种方式解决：一是检查网络或仓库配置；二是设置VMOptions参数-DarchetypeCatalog=internal,强制使用内部目录
    2025-08-08
  • java byte数组转String的几种常用方法

    java byte数组转String的几种常用方法

    在Java中数组是一种非常常见的数据结构,它可以用来存储多个相同类型的数据,有时候,我们需要将数组转换为字符串,以便于输出或者传递给其他方法,这篇文章主要给大家介绍了关于java byte数组转String的几种常用方法,需要的朋友可以参考下
    2024-09-09
  • springboot中实现上传文件的功能简单示例

    springboot中实现上传文件的功能简单示例

    这篇文章主要给大家介绍了关于springboot中实现上传文件功能的相关资料,在Spring Boot中实现文件上传下载功能相对简单,文中给出了代码示例,需要的朋友可以参考下
    2023-09-09

最新评论