需求分析：

提交留言：用户输入留言信息后，后端需要把留言信息保存起来

展示留言：页面展示时，需要从后端获取到所有的留言信息

1、获取全部留言

接口定义：

请求路径：message/getList

响应：JSON格式

          [

              {

                  "from":"猫咪“,

                  "to":"小狗",

                  "message":"喵喵喵"

              }，{

                  "from":"小狗“,

                  "to":"猫咪",

                  "message":"汪汪汪"

              }，

             //……

         ]

        浏览器给服务器发送一个 message/getList 请求，就能返回当前一共有哪几个留言记录。结果以json的格式返回。

2、发表新留言

接口定义：

请求路径：message/publish

请求：JSON格式

           {

               "from":"小牛“,

               "to":"小羊",

               "message":"哞哞哞"

           }

我们期望浏览器给服务器发送一个请求，把当前的留言提交给服务器

3、实现服务器端代码

定义留言对象 MessageInfo 类：

import lombok.Data;

@Data

public class MessageInfo {

private String from;

private String to;

private String msg;

}

@Data 是Lombok工具类中的内容，相当于自动创建了构造方法和getter/setter等，使代码更简洁明了。

Lombok工具类详解：http://t.csdnimg.cn/TAE27

创建 MessageController 类：

        因为没有引入数据库，想实现存储留言板信息的话，可以使用 List<MessageInfo> 来存储。

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;

@RestController

@RequestMapping("/message")

public class MessageWallController {

//存储留言信息

private List<MessageInfo> messageInfoList = new ArrayList<>();

@RequestMapping(value = "/publish",method = RequestMethod.POST)

public Boolean publish(@RequestBody MessageInfo messageInfo) {

messageInfoList.add(messageInfo);

return true;

}

//获取留言信息

@RequestMapping("/getList")

public List<MessageInfo> getList() {

return messageInfoList;

}

}

4、调整前端页面代码

1、即使不进行任何操作的前提下，我们也希望留言板能显示已有的留言。

        我们使用ajax请求来实现，且要将其放在<script>标签的最前面，让其在页面加载的时候就能获取到数据：

$.ajax({

type: "get",

url: "/message/getList",

success: function (messages) {

if (messages != null) {

for (var message of messages) {

var divE = "<div>" + message.from + "对" + message.to + "说:" + message.msg + "</div>";

$(".container").append(divE);

}

}

}

});

2、在点击“提交”按钮的时候，我们希望能发布留言到留言板上，给服务器发送添加留言请求

function submit() {

//1. 获取留言的内容

var from = $('#from').val();

var to = $('#to').val();

var say = $('#say').val();

if (from == '' || to == '' || say == '') {

return;

}

//2.留言内容不为空，将其添加到列表中

$.ajax({

type: "post",

url: "/message/publish",

contentType: "application/json",

data: JSON.stringify({

"from": from,

"to": to,

"msg": say

}),

success: function (result) {

if (result) {

if (result) {

//成功

//1、构造节点

var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";

//2、把节点添加到页面上

$(".container").append(divE);

//3、清空输入框的值

$('#from').val("");

$('#to').val("");

$('#say').val("");

} else {

//失败则弹出警告，告知客户端

alert("发布失败");

}

}

}

});

}

5、运行测试

        启动程序，通过URL 127.0.0.1:8080/messagewall.html 访问服务器即可看到：

        此时我们每次提交的数据都会发给服务器，存储在 List中，每次打开页面的时候，都会从服务器加载数据，所以只要服务器不重启，即使刷新页面，数据也不会丢失。