企业网站首页flash网络营销的概念和特点
目录
🎍预期结果
🍀前端代码
🎄约定前后端交互接口
🚩需求分析
🚩接口定义
🌳实现服务器端代码
🚩lombok介绍
🚩代码实现
🌴运行测试
🎄前端代码实现
🚩获取列表
🚩实现"提交"
🎍预期结果
可以发布并显示
点击提交后，显示并清除输入框
并且再次刷新后，不会清除下面的缓存
🍀前端代码
由于本文章主要讲述后端相关内容，这里就不做过多讲解前端了
前端代码如下：
🎄约定前后端交互接口
🚩需求分析
后端需要提供两个服务
- 提交留⾔:⽤⼾输⼊留⾔信息之后,后端需要把留⾔信息保存起来
- 展⽰留⾔:⻚⾯展⽰时,需要从后端获取到所有的留⾔信息
🚩接口定义
- 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. 若前端没有报错，页面列表不显示，查看请求是否到达后端，可通过打印日志来判断