当前位置：首页 > news >正文

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

news 来源：原创 2025/5/21 5:29:26

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;@Generatedpublic MessageInfo() {}@Generatedpublic String getFrom() {return this.from;}@Generatedpublic String getTo() {return this.to;}@Generatedpublic String getSay() {return this.say;}@Generatedpublic void setFrom(final String from) {this.from = from;}@Generatedpublic void setTo(final String to) {this.to = to;}@Generatedpublic void setSay(final String say) {this.say = say;}@Generatedpublic 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;}}}@Generatedprotected boolean canEqual(final Object other) {return other instanceof MessageInfo;}@Generatedpublic 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;}@Generatedpublic 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>