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

ops/2024/12/18 17:56:48/

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查看


http://www.ppmy.cn/ops/142971.html

相关文章

登陆harbor发现证书是错误的, 那么如何更新harbor的证书呢

Error response from daemon: Get "https://172.16.21.35/v2/": tls: failed to verify certificate: x509: certificate is valid for 127.0.0.1, ::1, 172.16.21.30, not 172.16.21.35 版本 v2.10.1-b7b88476 不需要从头看, 直接看最下面的成功的证书创建 这里面首…

23.DDD与微服务

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 DDD与微服务的关系1. DDD可以用微服务实现&#xff0c;也可以不用微服务实现2. DDD是微服务拆分的必须参考项之一3. 微服务架构…

el-select多选设置默认值且默认值不可删除

需求 <el-select>多选时&#xff0c;需要设置默认值&#xff0c;且默认值不可删除&#xff0c;但手动勾选的值可以删除。 实现原理 在el-select框中隐藏默认值的el-tag后面的叉在option中置灰默认值的选项使其不可被操作 代码实现 新建一个自定义指令&#xff0c;并在<…

学习笔记071——Java中的【线程】

文章目录 1、基础2、进程和线程3、什么是多线程4、Java 中线程的使用5、Java 中创建线程的方式5.1、继承 Thread 类5.2、实现 Runnable 接口5.3、继承 Thread 和实现 Runnable 接口的区别5.4、实现 Runnable 接口的优化 6、线程的状态7、线程调度7.1、线程休眠7.2、线程合并7.3…

selenium自动化测试基础知识

目录 一、概念知识 (一)三大核心组件 (二)Selenium 自动化测试的工作原理 (三)Selenium 支持的操作 (四)Selenium 自动化测试的优点 (五)Selenium 自动化测试的缺点 (六)Selenium 自动化测试的应用场景 总结 二、实操例子 使用前提--安装步骤 注意事项 (一)浏览器的…

LruCache(本地cache)生产环境中遇到的问题及改进

问题&#xff1a;单机qps增加时请求摘要后端&#xff0c;耗时也会增加&#xff0c;因为超过了后端处理能力&#xff08;最大qps&#xff0c;存在任务堆积&#xff09;。 版本一 引入LruCache。为了避免数据失效&#xff0c;cache数据的时效性要小于摘要后端物料的更新时间&…

高并发-缓存预热

缓存预热的必要性 缓存预热是为了在系统面临高并发请求时&#xff0c;确保热点数据已经被加载到缓存中&#xff0c;从而提高系统响应速度和稳定性。通过缓存预热&#xff0c;可以避免因数据未命中而导致的数据库压力激增。 典型应用场景 电商系统&#xff1a;在秒杀活动期间&…

火山引擎声音复刻API-2.0

火山引擎声音复刻API-2.0使用解释 付费模式解释&#xff1a; 1.字符版本按照字符付费 2.并发版 是按 并发连接数 或 同时使用量 来收费的付费模式&#xff0c;常见于软件、API 服务、云服务等产品中。 上传音频文件demo代码 import base64 import os import requestshost …