完整教程：String留言板

 1.概念

2.接口约定

3.后端代码

package com.bite.springmvc;
import lombok.Data;
@Data
public class MessageInfo {
private String from;
private String to;
private String msg;
}

package com.bite.springmvc;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
@RequestMapping("/message")
@RestController
public class MessageController {
//存储留言信息
private List messageInfoList = new ArrayList<>();
@RequestMapping(value = "/publish", method = RequestMethod.POST)
public boolean publish(@RequestBody MessageInfo messageInfo){
messageInfoList.add(messageInfo);
return true;
}
@RequestMapping("/getList")
public List getList(){
return messageInfoList;
}
}

4.测试

5.前端代码

留言板
.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;
}
留言板
输入后点击提交, 会将信息显示下方空白处
谁:
对谁:
说什么:
A 对 B 说: hello -->
$.ajax({
type:"get",
url:"/message/getList",
success:function(messages){
if(messages!=null){
for(var message of messages){
var divE = ""+message.from+"对"+message.to+"说"+message.msg+"";
$(".container").append(divE)
}
}
}
})

apend把这个for循环添加到container这个div下面

6.结果