文章目录
一、前端文件放置
二、约定前后端交互接口
1.需求分析
界面如下图所示
（1）输入留言信息，点击提交，后端把数据存储起来
（2）页面展示输入的表白墙的信息
2.接口的定义
（1）获取全部留言
全部保留信息，我们用List来表示，可以用JSON来描述这个List数据
请求：
c
GET /message/getList响应：JSON格式
c
[
{
"from":"黑猫",
"to":"白猫",
"message":"喵",
}
]（2）发表新留言
请求：body也为JSON格式
c
POST /message/publish
{
"from":"黑猫",
"to":"白猫",
"message":"喵",
}响应;JSON格式
c
{
ok:1
}三、代码实现
1.服务器端代码实现
（1）控制器代码
java
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
java
package com.example.demo;
import lombok.Data;
@Data
public class MessageInfo {
private String from;
private String to;
private String message;
}2.客户端代码实现
html
<!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>四、运行结果
总结
上述小项目是基于SpringBoot开发的，注重前后端交互，各位大佬一键三连，欢迎评论区讨论！