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.需求分析
后端需要提供两个服务
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).打日志
加上日志在第一行,然后运行--看请求是否已经进入到后端程序
java"> 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查看