《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>
<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<>();中

当服务器一直运行时，数据就一直在。当然如果重启了，数据就没了。

因此实际上，我们总会把数据存在数据库中。

下一篇文章会讲解（简易对话留言板（数据存在数据库中））。