《JavaEE进阶》----8.＜SpringMVC实践项目：【简易对话留言板（数据存在内存中）】＞
本篇博客讲解设计的一个网页版简易对话留言板。这个是将数据存在内存中。
创建了一个集合
List<MessageInfo> messageInfos = new ArrayList<>();
在这里面存入的数据。当服务器重新加载的时候，数据就消失了，下一个版本，是将数据存入数据库。
一、前端代码
注：当数据在内存中存储的，服务器刷新，数据就没有了。
重新加载url时，如果数据存在submit函数中，刷新的时候，不会去执行，只有在点击提交的时候才会执行这个函数。因此我们还需要在submit外面，<script>里面写一段代码。
<!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;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</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" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>//页面加载时显示信息，从后端获取留言信息$.ajax({type: "get",url: "message/getMessage",success:function(messages){for(var message of messages){var html = "<div>"+"'"+message.from+"'"+" 对"+"'"+message.to+"'"+"说："+message.message+"</div>"$(".container").append(html);}}});//点击提交时显示留言信息function submit() {//1. 获取留言的内容var from = $("#from").val();var to = $("#to").val();var say = $("#say").val();$.ajax({type: "post",url: "/message/publish",data: {from: from,to: to,message: say,},success: function (result) {if (result == true) {//2. 构造节点var divE = "<div>"+"'"+from+"'"+" 对 " +"'"+to+"'" + " 说: " + say+"</div>";//3. 把节点添加到页面上$(".container").append(divE);//4. 清空输入框的值$("#from").val("");$("#to").val("");$("#say").val("");} else {alert("输入错误！");}},});}</script>
</body></html>剖析语法
我们发现，这段代码还挺长的，一共有114行。
来逐一剖析我们之前没遇到过的 语法吧。
我们首先看文档的头部也就是head中的style。
style标签
用于在 HTML 文档中定义内部 CSS 样式。它可以让你在同一个 HTML 文件中编写样式规则，控制页面中元素的外观和布局。
CSS 规则：由选择器和声明块组成。例如：
body { background-color: lightblue; }：为body设置背景颜色。h1 { color: navy; text-align: center; }：为h1标签设置文本颜色为海军蓝，文本居中。p { font-size: 20px; }：为段落设置字体大小。.container 类
<style> .container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}</style>
width: 350px;和height: 300px;：定义容器的宽度为 350 像素，高度为 300 像素。margin: 0 auto;：设置容器的上、下外边距为 0，左右居中对齐（即水平居中）。text-align: center;：将容器内的文本内容居中对齐。/* border: 1px black solid; */：注释掉的边框样式，如果取消注释，会给容器加一个 1 像素的黑色实线边框。.grey类
<style>.grey {color: grey;}</style>.grey这是一个类，
color: grey;设置文本的颜色为灰色。可以用于任何需要灰色文本的元素。
.container.row类
<style>.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}</style>
display: flex;：使用 Flexbox 布局，使元素可以灵活地排列。justify-content: space-between;：在主轴（水平）方向上，元素之间的空间均匀分布，两端对齐。align-items: center;：在交叉轴（垂直）方向上，元素垂直居中对齐。.container.row input类
<style>.container .row input {width: 260px;height: 30px;}</style>
- 这些样式用于设置
input输入框的大小。width: 260px;height: 30px;：输入框的宽度为 260 像素，高度为 30 像素。#submit ID
<style>#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
#submit：用于一个带有id="submit"的按钮或元素。background-color: orange;：设置按钮的背景颜色为橙色。color: white;：设置按钮的文本颜色为白色。border: none;：去掉按钮的边框。margin: 10px;：设置按钮外部的上下左右外边距为 10 像素。border-radius: 5px;：设置按钮的圆角半径为 5 像素，使按钮有轻微的圆角效果。font-size: 20px;：设置按钮的文本大小为 20 像素。<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" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div>
<div>标签是 HTML 中的一个块级元素（block-level element），用于将内容分组和布局。它本身并没有特定的语义，仅用于将页面中的内容划分为逻辑部分，是网页布局和样式控制的基础元素。这段代码实现了一个简单的留言板界面，用户可以输入信息并提交，提交的信息将会显示在页面的下方。以下是对代码的简单解释：
<div class="container">：这是一个容器（container）元素，用来包裹整个留言板的内容，并通过 CSS 进行样式设置。
<p class="grey">：这是一个描述文本，带有grey类，提示用户在输入后点击“提交”按钮，会将信息显示在下方空白处。输入区域：有三组输入字段（
from、to和say），分别用于输入留言的发送者、接收者和内容。
- 第一行：
谁:，用户输入“谁”（发送者）在输入框中，id="from"用于 JavaScript 或 CSS 定位和操作。- 第二行：
对谁:，用户输入“对谁”（接收者），id="to"。- 第三行：
说什么:，用户输入“说什么”（留言内容），id="say"。提交按钮：一个提交按钮，用于将用户输入的内容提交。
name属性：用于表单数据提交。建议设置为有意义的值，便于后端接收数据。$.ajax()
$.ajax({type: "get",url: "message/getMessage",success:function(messages){for(var message of messages){var html = "<div>"+"'"+message.from+"'"+" 对"+"'"+message.to+"'"+"说："+message.message+"</div>"$(".container").append(html);}}});这段代码使用了 jQuery 的
$.ajax()方法发起一个GET请求，从服务器端获取留言数据，并将每条留言动态添加到页面的.container元素中。以下是对代码的详细解释：
success: function(messages){ ... }：当请求成功时，会调用success回调函数，并将返回的数据作为参数传递给该函数。
success回调函数：当 AJAX 请求成功完成时执行该函数。
messages：代表从服务器返回的数据。假设它是一个数组，每个元素代表一条留言。
for (var message of messages) { ... }：使用for...of循环遍历messages数组中的每条留言。
message：每次迭代时，message都是数组中的一个元素，对应一条留言。- 生成 HTML：
var html = "<div>" + "'" + message.from + "'" + " 对" + "'" + message.to + "'" + "说：" + message.message + "</div>";这一行代码构建了一个 HTML 字符串，用于显示每条留言的内容。它将留言的发送者、接收者和内容拼接成一个字符串格式的
<div>元素。
message.from：留言的发送者。message.to：留言的接收者。message.message：留言的具体内容。
$(".container").append(html)：将生成的 HTML 添加到页面上的.container元素中。
$(".container")：使用 jQuery 选择页面上的class为container的元素。append(html)：将新生成的 HTML 内容追加到.container的末尾。//1. 获取留言的内容var from = $("#from").val();var to = $("#to").val();var say = $("#say").val();
$("#from").val();：
- 使用 jQuery 的
$()函数选择id为from的元素。#from表示 HTML 元素的id选择器。.val()方法用于获取输入框的当前值。返回的值会存储在from变量中。- 上述代码是对应的 HTML 元素，通过
$("#from").val()就能获取用户输入的内容。
二、前端页面
我们发现这个页面可以成功提交并显示信息。但是存在的问题是点击刷新之后
留言记录就不见了。
因此要存储这些留言，就还需要后端来操作。
三、后端代码
3.1 完整代码
Controller
package com.qiyangyang.messageboard.demos.controller;import com.qiyangyang.messageboard.demos.model.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;@RestController
@RequestMapping("/message")
public class MessageController {List<MessageInfo> messageInfos = new ArrayList<>();@RequestMapping("/publish")public Boolean publishMessage(MessageInfo messageInfo){if(!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getMessage())||!StringUtils.hasLength(messageInfo.getTo())){//打印失败return false;}//临时存放在内存中messageInfos.add(messageInfo);//打印成功return true;}@RequestMapping("/getMessage")public List<MessageInfo> getMessage(){return messageInfos;}}
model
package com.qiyangyang.messageboard.demos.model;import lombok.Data;import java.util.Date;@Data
public class MessageInfo {private String from;private String to;private String message;}
项目结果
此时我们再点击刷新，数据就会从集合中再加载出来。而不是消失了。
通过加入后端代码，我们成功将数据存入内存。
也就是集合List<MessageInfo> messageInfos = new ArrayList<>();中
当服务器一直运行时，数据就一直在。当然如果重启了，数据就没了。
因此实际上，我们总会把数据存在数据库中。
下一篇文章会讲解（简易对话留言板（数据存在数据库中））。