API-约定前后端交互接⼝
约定 " 前后端交互接⼝ " 是进⾏ Web 开发中的关键环节. 接⼝⼜叫 API（Application Programming Interface), 我们⼀般讲到 接⼝或者 API， 指的都是同⼀个东西。
是指应⽤程序对外提供的服务的描述, ⽤于 交换信息和执⾏任务(不同于SE中的类与接口)
简单来说, 就是 允许客⼾端给服务器发送哪些 HTTP 请求 , 并且 每种请求预期获取什么样的 HTTP 响应
在项⽬开发前, 根据需求先约定好前后端交互接⼝, 双⽅按照接⼝⽂档进⾏开发
1.需求分析
客⼾端提供，服务端返回， 基于分析, 来定义接⼝
2.接口定义
接口通常由服务端定义，服务端定义后，客户端(前端)进行review;定义接口，以接口文档来呈现
接口定义之后，不轻易改变;如果需要改变，必须要通知到每一个调用方，同步修改接口文档
接口设计：1.接受什么（看后端完成这个功能需要什么）2.返回什么（后端能提供什么；前端页面需要什么）
3.开发后端 接口测试
lombok
Lombok是⼀个 Java⼯具库 ，通过 添加注解的⽅式 ，简化Java的开发.
在编译期⽣成代码的⼯具包.
1. 引⼊依赖
java
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>2. 使⽤
lombok通过⼀些 注解的⽅式 , 可以帮助消除⼀些冗⻓代码, 使代码看起来简洁⼀些
⽐如之前的Person对象 就可以改为
java
@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.需求分析
后端需要提供两个服务
- 提交留⾔: ⽤ ⼾输⼊留⾔信息 之后, 后端需要把 留⾔信息保存起来
- 展⽰留⾔: ⻚⾯展⽰时, 需要 从后端获取到所有的留⾔信息
接口定义
全部留⾔信息, 我们⽤ 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).打日志
加上日志在第一行,然后运行--看请求是否已经进入到后端程序
java
System.out.println("接受参数，messageInfo:"+messageIfno);//加上日志查看错误没有提交反应，检查前端请求
在前端继续加日志，没有解决说明请求没有调用
html
function submit() {
console.log("发表留言");此时添加"οnclick="submit在末端
html
<input type="button" value="提交" id="submit" onclick="submit()"onclick="submit">（2)postman测试后端
先观察日志，查看是否后端全都接收到信息
接收到观察Debug--不知道的时候在第一行和最后一行打断点(F8--下一步---重新启动---在postman查看