[SpringBoot]Spring MVC(5.0)----留言板

Spring留言板实现

预期结果

• 可以发布并显示
• 点击提交后，显示并清除输入框
• 并且再次刷新后，不会清除下面的缓存

约定前后端交互接口

Ⅰ 发布留言
url : /message/publish .
param(参数) : from,to,say .
return : true / false .

 Ⅱ 查询留言
url : /message/getList.
param : 无
return : form 对 to 说了 say

后端代码

MessageInfo类代码

import lombok.Data;

@Data
public class MessageInfo {
    private String from;
    private String to;
    private String say;
}

我们这里发现这样有个注释@Data ,

它的作用是可以让我们少写一些代码，我们通过反编译看看：

import lombok.Generated;

public class MessageInfo {
    private String from;
    private String to;
    private String say;

    @Generated
    public MessageInfo() {
    }

    @Generated
    public String getFrom() {
        return this.from;
    }

    @Generated
    public String getTo() {
        return this.to;
    }

    @Generated
    public String getSay() {
        return this.say;
    }

    @Generated
    public void setFrom(final String from) {
        this.from = from;
    }

    @Generated
    public void setTo(final String to) {
        this.to = to;
    }

    @Generated
    public void setSay(final String say) {
        this.say = say;
    }

    @Generated
    public boolean equals(final Object o) {
        if (o == this) {
            return true;
        } else if (!(o instanceof MessageInfo)) {
            return false;
        } else {
            MessageInfo other = (MessageInfo)o;
            if (!other.canEqual(this)) {
                return false;
            } else {
                label47: {
                    Object this$from = this.getFrom();
                    Object other$from = other.getFrom();
                    if (this$from == null) {
                        if (other$from == null) {
                            break label47;
                        }
                    } else if (this$from.equals(other$from)) {
                        break label47;
                    }

                    return false;
                }

                Object this$to = this.getTo();
                Object other$to = other.getTo();
                if (this$to == null) {
                    if (other$to != null) {
                        return false;
                    }
                } else if (!this$to.equals(other$to)) {
                    return false;
                }

                Object this$say = this.getSay();
                Object other$say = other.getSay();
                if (this$say == null) {
                    if (other$say != null) {
                        return false;
                    }
                } else if (!this$say.equals(other$say)) {
                    return false;
                }

                return true;
            }
        }
    }

    @Generated
    protected boolean canEqual(final Object other) {
        return other instanceof MessageInfo;
    }

    @Generated
    public int hashCode() {
        int PRIME = true;
        int result = 1;
        Object $from = this.getFrom();
        result = result * 59 + ($from == null ? 43 : $from.hashCode());
        Object $to = this.getTo();
        result = result * 59 + ($to == null ? 43 : $to.hashCode());
        Object $say = this.getSay();
        result = result * 59 + ($say == null ? 43 : $say.hashCode());
        return result;
    }

    @Generated
    public String toString() {
        String var10000 = this.getFrom();
        return "MessageInfo(from=" + var10000 + ", to=" + this.getTo() + ", say=" + this.getSay() + ")";
    }
}

那么如何使用这个注释呢？我们如果直接使用这个注释的话，我们自己电脑上是没有的，所以我们需要引入一个插件：lombok:

然后刷新一下maven；

当我们继续使用@Data的时候，我们发现还是不能进行使用

这是因为随着spring更新的原因，导致这个插件的失效，我们只要删除以下代码就行

然后我们就可以使用了

当然，如果我们只想使用个别的代码，比如setter，getter...，我们可以特别处理，我们这里先不予讲解，大家有兴趣的自己去了解一下即可

 MessageContraller代码

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;

@RequestMapping("/message")
@RestController
public class MessageController {
    List<MessageInfo> messageInfos = new ArrayList<>();

    @RequestMapping("/publish")
    public Boolean publish(MessageInfo messageInfo) {
        //校验信息
        if(!StringUtils.hasLength(messageInfo.getFrom())
                || !StringUtils.hasLength(messageInfo.getTo())
                || !StringUtils.hasLength(messageInfo.getSay())) {
            return false;
        }
        //把信息存起来方便下一个方法获取
        messageInfos.add(messageInfo);
        return true;
    }
    @RequestMapping("/getList")
    public List<MessageInfo> getList() {
        return messageInfos;
    }
}

前端代码 

<!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() {
            $.ajax({
                url: "/message/publish",
                type: "post",
                data: {
                    from: $("#from").val(),
                    to: $("#to").val(),
                    say: $("#say").val()
                },
                //http响应成功
                success:function(result) {
                    if(result == false) {
                        alert("输入不合法");
                    }else {
                        //展示信息
                        //1. 构造节点
                     

                        //3. 清空输入框的值
                        $("#from").val("");
                        $("#to").val("");
                        $("#say").val("");
                    }
                }
            });
            $.ajax({
                url: "/message/getList",
                type: "get",
                success: function(result) {
                    if(result!=null&&result.length>0) {
                        for(x of result) {
                            var divE = "<div>"+x.from+ "对" + x.to + "说:" + x.say + "</div>";
                            $(".container").append(divE);
                        }
                            
                    }
                }
            })
        }
    </script>
</body>

</html>

结果展示