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

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

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

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