当前位置：首页 > news >正文

详细介绍：基于SpringBoot的留言板

news 2026/4/11 16:33:11

详细介绍：基于SpringBoot的留言板

文章目录

一、前端文件放置
二、约定前后端交互接口
- 1.需求分析
- 2.接口的定义
三、代码实现
- 1.服务器端代码实现
- 2.客户端代码实现
四、运行结果
总结

一、前端文件放置

在这里插入图片描述

二、约定前后端交互接口

1.需求分析

界面如下图所示
在这里插入图片描述

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

2.接口的定义

（1）获取全部留言
全部保留信息，我们用List来表示，可以用JSON来描述这个List数据
请求：

GET /message/getList

响应：JSON格式

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

（2）发表新留言
请求：body也为JSON格式

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

响应;JSON格式

{
ok:1
}

三、代码实现

1.服务器端代码实现

（1）控制器代码

package com.example.demo;
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;
@RestController
@RequestMapping("/message")
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;}}

（2）MessageInfo.java

package com.example.demo;
import lombok.Data;
@Data
public class MessageInfo {
private String from;
private String to;
private String message;
}

2.客户端代码实现

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;margin: 0 auto;text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}.container .row input {width: 260px;height: 30px;padding: 5px;box-sizing: border-box;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px 0;border-radius: 5px;font-size: 20px;cursor: pointer;}#submit:hover {background-color: darkorange;}#message-list {width: 350px;margin: 20px auto;text-align: left;}.message-item {padding: 10px;border-bottom: 1px solid #eee;margin-bottom: 5px;}</style></head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示在下方</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit"></div><div id="message-list"><!-- 留言会显示在这里 --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>// 页面加载时获取留言列表$(document).ready(function() {load();// 绑定提交按钮点击事件$('#submit').click(submit);// 按Enter键也可以提交$('#from, #to, #say').keypress(function(e) {if (e.which === 13) { // Enter键submit();}});});function load() {$.ajax({type: "GET",url: "/message/getList",success: function(result) {$('#message-list').empty(); // 清空现有内容if (result && result.length > 0) {for (var message of result) {var divE = "<div class='message-item'>" + message.from + " 对 " + message.to + " 说: " + message.message + "</div>";$('#message-list').append(divE);}} else {$('#message-list').html('<div class="message-item">暂无留言</div>');}},error: function() {$('#message-list').html('<div class="message-item" style="color: red;">加载留言失败，请检查网络连接</div>');}});}function submit() {// 获取输入框的值var from = $('#from').val().trim();var to = $('#to').val().trim();var say = $('#say').val().trim();// 验证输入if (!from) {alert('请输入"谁"');$('#from').focus();return;}if (!to) {alert('请输入"对谁"');$('#to').focus();return;}if (!say) {alert('请输入要说的内容');$('#say').focus();return;}$.ajax({type: "POST",url: "/message/publish",data: {from: from,to: to,message: say},success: function(result) {if (result && result.success !== false) {// 重新加载留言列表load();// 清空输入框$('#from').val("");$('#to').val("");$('#say').val("");// 将焦点设置回第一个输入框$('#from').focus();} else {alert("发表留言失败! " + (result.message || ""));}},error: function(xhr, status, error) {alert("发表留言失败! 错误: " + error);}});}</script></body></html>