[SpringMVC] Spring MVC 留言板开发实战

博客：从零实现一个 Web 留言板 ------ Spring MVC 开发全流程解析

## 一、场景铺垫：为什么我们需要一个留言板？

在 Web 开发的学习旅程中，如果说"Hello World"是第一步，那么留言板 就是连接前后端的第一个"实战哨所" 。它不仅包含基础的 HTTP 请求与响应，更深入涉及了异步交互（AJAX） 、数据持久化逻辑 以及前后端接口约定 。

想象一下，你正在为学校社团开发一个"表白墙"或"交流角"，用户输入想说的话，点击提交，瞬间信息就在下方实时展示。这背后，Spring MVC 是如何像指挥官一样调度数据的？让我们揭开它的面纱。

## 二、核心开发链路

### 1. 契约先行：前后端交互接口约定

在开发之前，前端和后端团队必须达成"共识"，即接口文档 。针对留言板，我们约定了两个核心服务：

获取全部留言 (GET) ：/message/getList。返回 JSON 格式的留言列表。
发表新留言 (POST) ：/message/publish。接收包含"谁"、"对谁说"、"内容"的请求。

最终我们的项目的大致界面如下:

获取留言接口,需要为我们返回一个类似于留言类型的对象,这个对象中自然包含多个属性, 一般返回的结果中包含两个或者多个参数我们就要需要来定义一个实体类来对其进行封装, 这里我定义一个MessageInfo的实体类

创建实体类的同时自然也要为其添加设置,获取类属性的一系列方法,即使可能也用不到,但还是需要为其添加

古法编程的方式自然就是手动添加,通过用右键 -> generate来按需选择需要添加的方法

### 2. 效率神器：引入 Lombok 简化开发

尽管我们可以通过ide自动为我们生成其属性对应的get,set等方法,但我们认为这还是太麻烦了这个时候就可以使用Lombok来简化这个添加流程

java 复制代码

import  lombok.*;  
@Data  
@NoArgsConstructor  
@AllArgsConstructor  
public class MessageInfo {  
    private String from;  
    private String to;  
    private String message;  
    }

在使用这个插件的前提还要在配置文件中引入对应的依赖,

xml 复制代码

<dependency>  
    <groupId>org.projectlombok</groupId>  
    <artifactId>lombok</artifactId>  
    <version>1.18.30</version> <scope>provided</scope>  
</dependency>

@Data 注解 ：只需在 MessageInfo 类上添加一个注解，Lombok 就会在编译期自动生成 Getter/Setter、toString、equals 等冗长代码。
原理探究 ：Lombok 并非在运行时起作用，而是在编译期根据注解修改字节码。

我们写的java代码会先经过编译转为字节码.class文件,随后jvm再把字节码加载,解析,执行,转为机器码. lombok就是在编译时期起作用的

数据存储 ：由于尚未引入数据库，我们使用内存集合 List<MessageInfo> 来暂存数据。
参数校验 ：使用 Spring 提供的 StringUtils.hasLength() 严谨地判断留言内容是否为空。

实体类已创建,首先就是来定义一个类,包含对应的接口来操作留言,同时要注意路径以及注解的定义,这里我简单创建了一个MessageController类

java 复制代码

package com.amadeus.springbootdemo;  
  
  
import ch.qos.logback.core.util.StringUtil;  
import org.springframework.util.StringUtils;  
import org.springframework.web.bind.annotation.*;  
  
import java.util.ArrayList;  
import java.util.List;  
  
@RequestMapping("/message")  
@RestController  
public class MessageController {  
    List<MessageInfo> messageInfoList = new ArrayList<>();  
  
    @GetMapping("/getList")  
    public List<MessageInfo> getInfoList(){  
        return  messageInfoList;  
    }  
  
    @PostMapping("/publish")  
    public String publish(@RequestBody MessageInfo messageInfo){  
        //messageInfo任意信息不全.返回OK : 0  
        if(!StringUtils.hasText(messageInfo.getFrom())  
                || !StringUtils.hasText(messageInfo.getTo())  
                || !StringUtils.hasText(messageInfo.getMessage())){  
            return "{/ok/ : 0}";  
        }  
        messageInfoList.add(messageInfo);//添加留言信息  
        return  "{/ok/ : 1}";  
    }  
}

由于还未涉及数据库操作,所以我们使用List链表来对于publish操作中提交的留言信息进行存储. 但是由于存储在内存中,服务重启也就会丢失了.

3. 前端交互逻辑(ajax异步)

利用 jQuery 的 AJAX 技术，我们实现了页面的"无刷新更新"：

Ajax 最核心的特点就是：**前端跟后端交互，不刷新整个页面，只局部更新内容

试想一下,你正在执行一个登录网站的操作,如果账号密码输入错误,网站并不会直接强制让你跳转到一个新的网页,在这个网页中呈现出"验证码或者账号错误"这样的提示字眼,而是局部更新前端页面,进行信息展示

比如我以力扣为例,在登录失败时也只会更新局部页面

点击提交时 (submit)：将输入框数据封装发送，成功后清空输入框并即时渲染新留言。

页面加载时 (load)：自动向后端请求已有留言并动态挂载到 DOM 树上。

但是如果我们刷新这个前端页面时,会发现留言内容被清空,之前的操作都看不到了,所以为了解决这一问题,就需要后端代码来参与了

为此我们需要依据先前的两个接口来修改部分前端逻辑

## 三、实操总结

通过留言板案例，我们可以复习以下关键注解：

@RestController ：组合了 @Controller 和 @ResponseBody，表示该类所有方法均返回 JSON 数据而非视图。
@RequestMapping：定义路由映射，将 URL 路径与后端方法绑定。
@RequestBody：用于接收请求正文中的 JSON 数据。
同时也能学习到如何把后端返回Content-Type: text/plain 数据转化为json对象的三种方式,以便于前端进行对象的属性校验,处理逻辑进行界面展示.

## 四、思考与延伸

在留言板的开发中，我们目前将数据存储在服务器内存 中（如 ArrayList）。

思考： 一旦重启服务器，现有的留言数据会发生什么？在生产环境中，我们应该如何优化这个设计，才能保证数据的永久可靠？

答案当然是通过数据库,把每次publish提交的留言存在数据库中,做到持久化存储

本文有关留言板的相关开发介绍就到这里了,如有纰漏还请指出~~

[SpringMVC] Spring MVC 留言板开发实战

博客：从零实现一个 Web 留言板 ------ Spring MVC 开发全流程解析

## 一、 场景铺垫：为什么我们需要一个留言板？

## 二、 核心开发链路