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

server/2024/12/18 19:38:40/

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/server/151254.html

相关文章

《探索C++在3D重建中的算法与技术要点》

3D重建作为计算机视觉领域的重要技术&#xff0c;在诸多行业有着广泛应用&#xff0c;而C以其高效性和对底层硬件的良好控制&#xff0c;成为实现3D重建算法的常用语言。以下是利用C进行3D重建的一些常见算法和技术要点。 多视图立体视觉算法 多视图立体视觉是3D重建的基础算…

C语言实验 结构体一

时间:2024.12.17 6-1 按等级统计学生成绩 代码 // 根据成绩设置等级,并返回不及格人数 int set_grade(struct student *p, int n) {int count = 0;for (int i = 0; i < n; i++) {if (p[i].score >= 85 && p[i].score <= 100) {p[i].grade = A;} else if (…

Spring Boot教程之二十五: 使用 Tomcat 部署项目

Spring Boot – 使用 Tomcat 部署项目 Spring Boot 是一个基于微服务的框架&#xff0c;在其中创建可用于生产的应用程序只需很少的时间。Spring Boot 建立在 Spring 之上&#xff0c;包含 Spring 的所有功能。如今&#xff0c;它正成为开发人员的最爱&#xff0c;因为它是一个…

stm32-- 存储-flash和ram

本文中的程序都是伪代码&#xff0c;没经过验证使用。 keil编译完成&#xff0c;会得到一个.map文件&#xff0c;详细列出空间占用情况。 示例如下&#xff1a; Total RO Size (Code RO Data) 39888 ( 38.95kB) Total RW Size (RW Data ZI Data) …

【网络】传输层协议UDP/TCP网络层IP数据链路层MACNAT详解

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;计算机网络原理_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.传输层协议 UDP 1.1 传输层 1.2 端口号 1.3 UDP 协议 1.3.1 UDP 协议端格式 1.3.2 UDP 的特点 1.3.3 面向数据报 1…

【鸿蒙实战开发教程】HarmonyOS next开发网络请求封装(Api11Release)

前言 根据研究机构Counterpoint Research发布的最新数据&#xff0c;2024年第一季度&#xff0c;鸿蒙OS份额由去年一季度的8%上涨至17%&#xff0c;iOS份额则从20%下降至16%。 这意味着&#xff0c;华为鸿蒙OS在中国市场的份额超越苹果iOS&#xff0c;已成中国第二大操作系统。…

2024年华为OD机试真题-找终点-C++-OD统一考试(E卷)

最新华为OD机试考点合集:华为OD机试2024年真题题库(E卷+D卷+C卷)_华为od机试题库-CSDN博客 每一题都含有详细的解题思路和代码注释,精编c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看,持续跟新。 题目描述 给定一个正整数数组,设为…

Liquibase结合SpringBoot使用实现数据库管理

Liquibase概述 Liquibase 是一个开源的数据库变更管理工具&#xff0c;用于跟踪、版本化、和管理数据库结构&#xff08;如表、字段、索引等&#xff09;的变更。它的目的是使数据库变更的过程更加透明、可控制、自动化&#xff0c;避免开发团队在多个环境中手动执行相同的数据…