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>结果展示
