目录

🎍预期结果

🍀前端代码

🎄约定前后端交互接口

🚩需求分析

🚩接口定义

🌳实现服务器端代码

🚩lombok介绍

🚩代码实现

🌴运行测试

🎄前端代码实现

🚩获取列表

🚩实现"提交"

---

🎍预期结果

可以发布并显示

点击提交后，显示并清除输入框

并且再次刷新后，不会清除下面的缓存

🍀前端代码

由于本文章主要讲述后端相关内容，这里就不做过多讲解前端了

前端代码如下：

🎄约定前后端交互接口

🚩需求分析

后端需要提供两个服务

1. 提交留⾔:⽤⼾输⼊留⾔信息之后,后端需要把留⾔信息保存起来
2. 展⽰留⾔:⻚⾯展⽰时,需要从后端获取到所有的留⾔信息

🚩接口定义

• 1. 提交(发布留言，保存到后端)

请求：

url：/message/publish

type: post

参数：Json

响应：操作成功/失败

true/false

• 2. 获取留言(从后端获取留言信息，显示到列表)

注意：在接口设计中，尽量保持单一原则，例如不要当前接口做了提交留言又做返回留言

全部留⾔信息,我们⽤List来表⽰,可以⽤JSON来描述这个List数据.

请求：

url：/message/getList

type：get

响应：返回Json

浏览器给服务器发送⼀个GET /message/getList 这样的请求,就能返回当前⼀共有哪些留⾔记录.结果以 json 的格式返回过来

🌳实现服务器端代码

🚩lombok介绍

这个环节为大家推荐一个工具lombok,它的出现会使我们开发起来更加简单便捷

Lombok是⼀个Java⼯具库，通过添加注解的⽅式，简化Java的开发

首先我们需要在我们的pom.xml文件下面添加以下依赖

那它有什么作用呢？又怎么使用呢？

比如以下代码

我们在获取属性时要用大量的get和set，看起来非常的不好看。而当我们使用了lombok后，代码如下;

这样也可以达到相同的效果，不仅如此@Data 注解还会帮助我们⾃动⼀些⽅法,包含getter/setter,equals,toString等

如果觉得这样使用太粗暴了，lombok也提供了一些细化的方法

它们之间的关系可以理解为：

@Data=@Getter+@Setter+@ToString+@EqualsAndHashCode+@RequiredArgsConstructor+@NoArgsConstructor

但是呢，每一次都需要引入依赖，太麻烦了，所以我们可以下载相关的插件EditStarter，安装过程与使用如下：

• 第一步：安装插件EditStarter,重启Idea
• 第二步：在pom.xml⽂件中,单击右键,选择Generate - EditStarter

进⼊Edit Starters的编辑界⾯,添加对应依赖即可.

🚩代码实现

第一步：定义留⾔对象MessageInfo类

第二步：创建MessageController类

由于没有学习数据库内容，这里我们使用List来存储留⾔板信息

🌴运行测试

通过Postman进行测试

测试getList接口：测试当前没有留言信息，查看是否有空指针异常，发现并没有问题

测试publish接口：发布留言接口返回成功

再次测试getList接口：当前就能收到后端返回的信息了

那么经过以上测试，当前我们的后端代码是没有问题的

🎄前端代码实现

前端所要做的事情是"提交"按钮，以及在页面加载时从后端返回的结果显示在列表上

🚩获取列表

代码：后端返回结果加载到页面上

通过postman发起三次留言请求，发送一次获取留言结果(要点击刷新)：

🚩实现"提交"

在上述的前端代码中的submit方法是已经实现了提交按钮的，但是它不会走后端，就是说输入信息后点击提交，再次刷新，当前的留言信息是不存在的

当前要做的是，点击"提交"之后，让后端把这个数据保存下来

代码：在点击"提交"时，去调用后端的接口

测试：

若出现报错：

1. 按F12，若出现415，可能是页面缓存的问题，crtl+f5进行强刷

2. 若前端没有报错，页面列表不显示，查看请求是否到达后端，可通过打印日志来判断