MVC前后端交互案例--留言板

API-约定前后端交互接⼝

约定 " 前后端交互接⼝ " 是进⾏ Web 开发中的关键环节. 接⼝⼜叫 API（Application Programming Interface), 我们⼀般讲到 接⼝或者 API， 指的都是同⼀个东西。
是指应⽤程序对外提供的服务的描述, ⽤于 交换信息和执⾏任务(不同于SE中的类与接口)
简单来说, 就是 允许客⼾端给服务器发送哪些 HTTP 请求 , 并且 每种请求预期获取什么样的 HTTP 响应

在项⽬开发前, 根据需求先约定好前后端交互接⼝, 双⽅按照接⼝⽂档进⾏开发

1.需求分析

客⼾端提供，服务端返回， 基于分析, 来定义接⼝

2.接口定义

接口通常由服务端定义，服务端定义后，客户端(前端)进行review;定义接口，以接口文档来呈现

接口定义之后，不轻易改变;如果需要改变，必须要通知到每一个调用方，同步修改接口文档

接口设计：1.接受什么（看后端完成这个功能需要什么）2.返回什么（后端能提供什么；前端页面需要什么）

3.开发后端 接口测试

lombok

Lombok是⼀个 Java⼯具库 ，通过 添加注解的⽅式 ，简化Java的开发.
在编译期⽣成代码的⼯具包.

1. 引⼊依赖

<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <optional>true</optional>
</dependency>

2. 使⽤

lombok通过⼀些 注解的⽅式 , 可以帮助消除⼀些冗⻓代码, 使代码看起来简洁⼀些
⽐如之前的Person对象 就可以改为

@Data
public class Person {
private int id;
private String name;
private String password;
}

@Data 注解会⾃动⼀些⽅法, 包含 getter/setter, equals, toString等

3. 原理

加了 @Data 注解之后, Idea反编译的class⽂件
反编译是将 可执⾏的程序代码转换为某种形式的⾼级编程语⾔ , 使其具有更易读的格式. 反编译是⼀
种 逆向⼯程， 它的作⽤与编译器的作⽤相反.


让java 程序运行发生改变

4. 更多使⽤

注解	作用
@Getter	⾃动添加 getter ⽅法
@Setter	⾃动添加 setter ⽅法
@ToString	⾃动添加toString ⽅法
@EqualsAndHashCode	⾃动添加 equals 和 hashCode ⽅法
@NoArgsConstructor	⾃动添加⽆参构造⽅法
@AllArgsConstructor	⾃动添加全属性构造⽅法，顺序按照属性的定义顺序
@NonNull	属性不能为 null
@RequiredArgsConstructor	⾃动添加必需属性的构造⽅法，final + @NonNull 的属性为 必需

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

通过postman---测试通过,排除90%以上后端问题(剩余10%测试未通过

3.开发前端，联调

出现问题：后端---打日志，debug ;前端---打日志，抓包；缓存(F12-前端缓存-ctrl+F5--强刷浏览器；后端缓存--maven-clean)

留言板

1.需求分析

后端需要提供两个服务

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

接口定义

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

1.发布留言

url:/message/publish

param:from,to,say

return:成功/失败 true/fasle

{ok:1}

2.查询留言

url:/message/getList

param:无

return:[{},{},{}]包含--from,to,say
完成之后用postman测试后端代码:

上图对应的表示测试成功

问题解决思路

1.定位

判断是前后端哪个问题

（1).打日志

加上日志在第一行,然后运行--看请求是否已经进入到后端程序

 System.out.println("接受参数，messageInfo:"+messageIfno);//加上日志查看错误

没有提交反应，检查前端请求

在前端继续加日志，没有解决说明请求没有调用

function submit() {
            console.log("发表留言");

此时添加"οnclick="submit在末端

<input type="button" value="提交" id="submit" onclick="submit()"onclick="submit">

（2)postman测试后端

先观察日志，查看是否后端全都接收到信息

接收到观察Debug--不知道的时候在第一行和最后一行打断点(F8--下一步---重新启动---在postman查看