【Spring项目】表白墙,留言板项目的实现

阿华代码,不是逆风,就是我疯

你们的点赞收藏是我前进最大的动力!!

希望本文内容能够帮助到你!!

目录

一:项目实现准备

1:需求

2:准备工作

(1)加入前端代码

3:预期结果

二:约定前后端交互接⼝

1:需求分析

(1)提交留⾔

(2)展⽰留⾔

2:接口定义

[(1) 获取全部留⾔](#(1) 获取全部留⾔)

①路径和格式

②响应

③留言信息形式

④总结

(2)发表新留⾔

①路径和格式

②响应

③总结

三:服务器代码实现

1:定义留⾔对象MessageInfo类

2:创建MessageController类

四:完善前端代码

五:测试


一:项目实现准备

1:需求

(1)输⼊留⾔信息,点击提交.后端把数据存储起来.

(2)⻚⾯展⽰输⼊的表⽩墙的信息

2:准备工作

(1)加入前端代码

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;
            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>
 
        function submit(){
            //1. 获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }
            //2. 构造节点
            var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
            //3. 把节点添加到页面上    
            $(".container").append(divE);

            //4. 清空输入框的值
            $('#from').val("");
            $('#to').val("");
            $('#say').val("");
            
        }
        
    </script>
</body>

</html>

3:预期结果

二:约定前后端交互接⼝

1:需求分析

后端需要提供两个服务

(1)提交留⾔

⽤⼾输⼊留⾔信息之后,后端需要把留⾔信息保存起来

(2)展⽰留⾔

⻚⾯展⽰时,需要从后端获取到所有的留⾔信息

2:接口定义

(1) 获取全部留⾔

①路径和格式

请求路径:/message/getList

请求格式:GET

②响应

JSON格式返回

③留言信息形式

全部留⾔信息,我们⽤List来表⽰,可以⽤JSON来描述这个List数据

④总结

浏览器给服务器发送⼀个GET /message/getList这样的请求,就能返回当前⼀共有哪些留⾔

记录.结果以json的格式返回过来.

(2)发表新留⾔

①路径和格式

请求路径: /message/publish

请求格式:POST

②响应

JSON格式返回.

③总结

我们期望浏览器给服务器发送⼀个 POST /message/publish 这样的请求,就能把当前的留⾔提

交给服务器

三:服务器代码实现

1:定义留⾔对象MessageInfo类

java 复制代码
@Data
public class MessageInfo {
    //@Getter
    //@Setter
    private String from;
    private String to;
    private String message;
}

2:创建MessageController类

使⽤List<MessageInfo>来存储留⾔板信息

java 复制代码
@RestController
@RequestMapping("/message")
public class MessageController {
    //定义一个集合来存储留言信息
    private List<MessageInfo> messageInfos = new ArrayList<>();

    @RequestMapping("/publish")
    public boolean publish(MessageInfo messageInfo){
        System.out.println("打印publish日志"+messageInfo);
        //1:参数校验,存储结果
        if(!StringUtils.hasLength(messageInfo.getTo())
                || !StringUtils.hasLength(messageInfo.getFrom())
                || !StringUtils.hasLength(messageInfo.getMessage())){
            return false;
        }
        messageInfos.add(messageInfo);
        return true;
    }
    
    @RequestMapping("/getList")
    public List<MessageInfo> getList(){
        System.out.println("打印getList日志");
        return messageInfos;
    }
}

四:完善前端代码

(1)添加load函数,⽤于在⻚⾯加载的时候获取数据

(2)修改原来的点击事件函数.在点击按钮的时候给服务器发送添加留⾔请求

html 复制代码
    <script>
        load();
        function load(){
            $.ajax({
                type: "get",
                url: "/message/getList",
                success: function(result){
                    for(var message of result){//类似for(Message message : messageInfos)
                        var finalHtml = "<div>" + message.from +"对" + message.to + "说:" + message.message+"</div>";
                        $("#container").append(finalHtml);
                    }
                }
            });
        }
 
        function submit(){
            //测试:
            

            //1. 获取留言的内容,前端校验
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }

            //发送ajax请求
            $.ajax({
                url: "/message/publish",
                type: "post",
                data: { 
                    //左侧是后端参数,有点像给MessageInfo这个类进行初始化
                    from: $('#from').val(),
                    to: $('#to').val(),
                    message : $('#say').val()
                },
                success: function(result){
                    if(result){
                         //2. 构造节点
                        var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
                        //3. 把节点添加到页面上    
                        $(".container").append(divE);
                         //4. 清空输入框的值
                        $('#from').val("");
                        $('#to').val("");
                        $('#say').val("");
                    }else{
                        alert("输入不合法")
                    }
                }

            });

        }
        
    </script>

五:测试

此时在浏览器通过URL: http://127.0.0.1:8080/messagewall.html 访问服务器
此时我们每次提交的数据都会发送给服务器,每次打开⻚⾯的时候⻚⾯都会从服务器加载数据.,因此即使关闭⻚⾯,数据也不会丢失.

但是数据此时是存储在服务器的内存中List中,⼀旦服务器重启,数据仍然会丢失.要想数据不丢失,需要把数据存储在数据库中

相关推荐
太空漫步117 分钟前
逆序对个数
java·算法·排序算法
养佳工具人16 分钟前
Java各种排序
java·算法·排序算法
Fly_hao.belief28 分钟前
泛型的讲解(泛型类、泛型方法、泛型接口)
java
我命由我1234533 分钟前
15.Java 网络编程(网络相关概念、InetAddress、NetworkInterface、TCP 网络通信、UDP 网络通信、超时中断)
java·开发语言·网络·后端·tcp/ip·udp·java-ee
sunshine__sun35 分钟前
自动化测试报错:Exception managing chrome: error decoding response body
java·前端·chrome
蓝天星空1 小时前
spring boot 3集成swagger
java·spring boot
漫漫不慢.1 小时前
//需求:定义一个数组,存入1~5.要求打乱数组中所有数据的顺序
java
不修×蝙蝠1 小时前
搭建Tomcat(一)---Socket&ServerSocket
java·服务器·笔记·tomcat·socket·serversocket
小参宿1 小时前
【Stream流】
java·开发语言
ruleslol1 小时前
java基础概念49-数据结构2
java·数据结构