【JavaEE进阶】Spring留言板实现

目录

🎍预期结果

🍀前端代码

🎄约定前后端交互接口

🚩需求分析

🚩接口定义

🌳实现服务器端代码

🚩lombok介绍

🚩代码实现

🌴运行测试

🎄前端代码实现

🚩获取列表

🚩实现"提交"


🎍预期结果

可以发布并显示

点击提交后,显示并清除输入框

并且再次刷新后,不会清除下面的缓存

🍀前端代码

由于本文章主要讲述后端相关内容,这里就不做过多讲解前端了

前端代码如下:

🎄约定前后端交互接口

🚩需求分析

后端需要提供两个服务

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

🚩接口定义

  • 1. 提交(发布留言,保存到后端)

请求:

url:/message/publish

type: post

参数:Json

响应:操作成功/失败

true/false

  • 2. 获取留言(从后端获取留言信息,显示到列表)

注意:在接口设计中,尽量保持单一原则,例如不要当前接口做了提交留言又做返回留言

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

请求:

url:/message/getList

type:get

响应:返回Json

浏览器给服务器发送⼀个GET /message/getList 这样的请求,就能返回当前⼀共有哪些留⾔记录.结果以 json 的格式返回过来

🌳实现服务器端代码

🚩lombok介绍

这个环节为大家推荐一个工具lombok,它的出现会使我们开发起来更加简单便捷

Lombok是⼀个Java⼯具库,通过添加注解的⽅式,简化Java的开发

首先我们需要在我们的pom.xml文件下面添加以下依赖

那它有什么作用呢?又怎么使用呢?

比如以下代码

我们在获取属性时要用大量的get和set,看起来非常的不好看。而当我们使用了lombok后,代码如下;

这样也可以达到相同的效果,不仅如此@Data 注解还会帮助我们⾃动⼀些⽅法,包含getter/setter,equals,toString等

如果觉得这样使用太粗暴了,lombok也提供了一些细化的方法

它们之间的关系可以理解为:

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

但是呢,每一次都需要引入依赖,太麻烦了,所以我们可以下载相关的插件EditStarter,安装过程与使用如下:

  • 第一步:安装插件EditStarter,重启Idea
  • 第二步:在pom.xml⽂件中,单击右键,选择Generate - EditStarter

进⼊Edit Starters的编辑界⾯,添加对应依赖即可.

🚩代码实现

第一步:定义留⾔对象MessageInfo类

第二步:创建MessageController类

由于没有学习数据库内容,这里我们使用List来存储留⾔板信息

🌴运行测试

通过Postman进行测试

测试getList接口:测试当前没有留言信息,查看是否有空指针异常,发现并没有问题

测试publish接口:发布留言接口返回成功

再次测试getList接口:当前就能收到后端返回的信息了

那么经过以上测试,当前我们的后端代码是没有问题的

🎄前端代码实现

前端所要做的事情是"提交"按钮,以及在页面加载时从后端返回的结果显示在列表上

🚩获取列表

代码:后端返回结果加载到页面上

通过postman发起三次留言请求,发送一次获取留言结果(要点击刷新):

🚩实现"提交"

在上述的前端代码中的submit方法是已经实现了提交按钮的,但是它不会走后端,就是说输入信息后点击提交,再次刷新,当前的留言信息是不存在的

当前要做的是,点击"提交"之后,让后端把这个数据保存下来

代码:在点击"提交"时,去调用后端的接口

测试:

若出现报错:

1. 按F12,若出现415,可能是页面缓存的问题,crtl+f5进行强刷

2. 若前端没有报错,页面列表不显示,查看请求是否到达后端,可通过打印日志来判断

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/69139.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HackTheBox靶机:Sightless;NodeJS模板注入漏洞,盲XSS跨站脚本攻击漏洞实战

HackTheBox靶机:Sightless 渗透过程1. 信息收集常规探测深入分析 2. 漏洞利用(CVE-2022-0944)3. 从Docker中提权4. 信息收集(michael用户)5. 漏洞利用 Froxlor6. 解密Keepass文件 漏洞分析SQLPad CVE-2022-0944 靶机介…

Ansible入门学习之基础元素介绍

一、Ansible目录结构介绍 1.通过rpm -ql ansible获取ansible所有文件存放的目录 有配置文件目录 /etc/ansible/ 执行文件目录 /usr/bin/ 其中 /etc/ansible/ 该文件目录的主要功能是 inventory主机信息配置,ansible工具功能配置。 ansible自身的配置文件…

【pytorch 】miniconda python3.11 环境安装pytorch

ubuntu24.04 miniconda python3.11 环境安装pytorch 组件:langgraph本身不需要有一些模型是需要的:python3.11环境:报错ModuleNotFoundError: No module named ‘torchaudio’ ModuleNotFoundError: No module named ‘torchaudio’File "/root/miniconda3/envs/05_ep_…

Antd React Form使用Radio嵌套多个Select和Input的处理

使用Antd React Form使用Radio会遇到嵌套多个Select和Input的处理&#xff0c;需要多层嵌套和处理默认事件和冒泡&#xff0c;具体实现过程直接上代码。 实现效果布局如下图 代码 <Formname"basic"form{form}labelWrap{...formItemLayoutSpan(5, 19)}onFinish{on…

11 蚂蚁链技术特性

概览 蚂蚁链通过引入P2P网络、共识算法、虚拟机、智能合约、密码学、数据存储等技术特性&#xff0c;构建一个稳定、高效、安全的图灵完备智能合约执行环境&#xff0c;提供账户的基本操作以及面向智能合约的功能调用。 区块结构 一个区块包含区块头和区块体&#xff0c;区块…

如何使用 pytest-html 创建自定义 HTML 测试报告

关注开源优测不迷路 大数据测试过程、策略及挑战 测试框架原理&#xff0c;构建成功的基石 在自动化测试工作之前&#xff0c;你应该知道的10条建议 在自动化测试中&#xff0c;重要的不是工具 测试 Python 代码对于提高代码质量、检测漏洞或意外行为至关重要。 但测试结果又该…

【华为OD-E卷 - VLAN资源池 100分(python、java、c++、js、c)】

【华为OD-E卷 - VLAN资源池 100分&#xff08;python、java、c、js、c&#xff09;】 题目 VLAN是一种对局域网设备进行逻辑划分的技术&#xff0c;为了标识不同的VLAN&#xff0c;引入VLAN ID(1-4094之间的整数)的概念。 定义一个VLAN ID的资源池(下称VLAN资源池)&#xff0…

【C++高并发服务器WebServer】-5:内存映射与进程通信

本文目录 一、内存映射与进程通信二、匿名映射与进程通信 一、内存映射与进程通信 内存映射Memory-mapped I/O指的是将磁盘文件的数据映射到内存&#xff0c;用户通过修改内存就能够修改磁盘文件&#xff0c;如下图所示&#xff08;进程地址空间指的是虚拟地址空间&#xff09…

使用vscode + Roo Code (prev. Roo Cline)+DeepSeek-R1使用一句话需求做了个实验

摘要 使用vscode、Roo Code和deepseek-reasoner进行了一个实验&#xff0c;尝试使用一句话需求来生成小红书封面图片。工具根据需求提供了详细的架构方案&#xff0c;包括技术栈选择、核心模块划分、目录结构建议等。然后&#xff0c;工具自动化地完成了开发和测试&#xff0c;…

C语言初阶牛客网刷题—— JZ11 旋转数组的最小数字【难度:简单】

1. 题目描述 牛客网在线OJ链接 有一个长度为 n 的非降序数组&#xff0c;比如 [1,2,3,4,5] &#xff0c;将它进行旋转&#xff0c;即把一个数组最开始的若干个元素搬到数组的末尾&#xff0c;变成一个旋转数组&#xff0c;比如变成了 [3,4,5,1,2] &#xff0c;或者 [4,5,1,2,3…

Coze,Dify,FastGPT,对比

在当今 AI 技术迅速发展的背景下&#xff0c;AI Agent 智能体成为了关键领域&#xff0c;Coze、Dify 和 FastGPT 作为其中的佼佼者&#xff0c;各有千秋。 平台介绍 - FastGPT&#xff1a;由环界云计算公司发起&#xff0c;是基于大语言模型&#xff08;LLM&#xff09;的开源…

如何解压7z文件?8种方法(Win/Mac/手机/网页端)

7z 文件是一种高效的压缩文件格式&#xff0c;由 7 - Zip 软件开发者所采用。它运用独特的压缩算法&#xff0c;能显著缩小文件体积&#xff0c;便于存储与传输各类数据&#xff0c;像软件安装包、大型资料集等。但要使用其中内容&#xff0c;就必须解压&#xff0c;因为处于压…

【Docker】ubuntu中 Docker的使用

之前记录了 docker的安装 【环境配置】ubuntu中 Docker的安装&#xff1b; 本篇博客记录Dockerfile的示例&#xff0c;docker 的使用&#xff0c;包括镜像的构建、容器的启动、docker compose的使用等。   当安装好后&#xff0c;可查看docker的基本信息 docker info ## 查…

豆包MarsCode 蛇年编程大作战 | 高效开发“蛇年运势预测系统”

&#x1f31f; 嗨&#xff0c;我是LucianaiB&#xff01; &#x1f30d; 总有人间一两风&#xff0c;填我十万八千梦。 &#x1f680; 路漫漫其修远兮&#xff0c;吾将上下而求索。 豆包MarsCode 蛇年编程大作战 | &#x1f40d; 蛇年运势预测 在线体验地址&#xff1a;蛇年…

【转帖】eclipse-24-09版本后,怎么还原原来版本的搜索功能

【1】原贴地址&#xff1a;eclipse - 怎么还原原来版本的搜索功能_eclipse打开类型搜索类功能失效-CSDN博客 https://blog.csdn.net/sinat_32238399/article/details/145113105 【2】原文如下&#xff1a; 更新eclipse-24-09版本后之后&#xff0c;新的搜索功能&#xff08;CT…

求平均年龄(信息学奥赛一本通-1059)

【题目描述】 班上有学生若干名&#xff0c;给出每名学生的年龄&#xff08;整数&#xff09;&#xff0c;求班上所有学生的平均年龄&#xff0c;保留到小数点后两位。 【输入】 第一行有一个整数n&#xff08;1≤n≤100&#xff09;&#xff0c;表示学生的人数。其后n行每行有…

macos的图标过大,这是因为有自己的设计规范

苹果官方链接&#xff1a;App 图标 | Apple Developer Documentation 这个在官方文档里有说明&#xff0c;并且提供了sketch 和 ps 的模板。 figma还提供了模板&#xff1a; Figma

C++ —— 智能指针 unique_ptr (上)

C —— 智能指针 unique_ptr &#xff08;上&#xff09; 普通指针的不足普通指针的释放智能指针智能指针 unique_ptr智能指针初始化错误用法get()方法返回裸指针智能指针不支持指针的运算&#xff08;、-、、- -&#xff09; 普通指针的不足 new和new [] 的内存需要用delete和…

C++异步future

&#x1f30e; C11异步futrue 文章目录&#xff1a; C11异步futrue future介绍     应用场景     future操作       std::async函数模版       std::packaged_task类模版       std::promise类模版 &#x1f680;future介绍 std::future是C11标准库…

# AI绘图中的Embedding、CLIP、Flux中的Clip与LCM SDXL加速生成解析

AI绘图中的Embedding、CLIP、Flux中的Clip与LCM SDXL加速生成解析 在现代AI绘图和深度学习中&#xff0c;涉及了多个复杂的概念和技术&#xff0c;这些技术在图像生成、训练加速以及多模态学习等方面起着至关重要的作用。在这篇博客中&#xff0c;我们将讨论几个关键概念&…