Spring Boot入门指南：留言板
一.留言板
1.输⼊留⾔信息,点击提交.后端把数据存储起来.
2.⻚⾯展⽰输⼊的表⽩墙的信息
规范：
1.写一个类MessageInfo对象，添加构造方法
虽然有快捷键，但是还是不够偷懒
项目添加Lombok。
Lombok是⼀个Java⼯具库，通过添加注解的⽅式，简化Java的开发。
2.添加Lombok 依赖
下载插件
Lombok通过⼀些注解的⽅式,可以帮助我们消除⼀些冗⻓代码,使代码看起来简洁⼀些 .
@Data注解会帮助我们⾃动⼀些⽅法,包含getter/setter,equals,toString等.
3.编写后端接口
3.编写后端接口（publish（），getList（）），将信息暂时存储到List中（内存）。
代码：
package com.example.demo;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping("/message")
public class MessageController {/*将留言保存* */private List<MessageInfo> messageInfos = new ArrayList<>();//初始化List@RequestMapping("/publish")public Boolean publish(MessageInfo messageInfo){//1.参数校验//暂时 将信息存储到List中（内存）if(!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())||!StringUtils.hasLength(messageInfo.getSay())){return false;}messageInfos.add(messageInfo);return true;}/** 获取留言信息*/@RequestMapping("/getList")public List<MessageInfo> getList(){return messageInfos;}
}
4.打开post进行测试后端接口有无问题
5.编写前端代码
5.编写前端代码（根据后端返回的布尔类型选择将信息打印在页面）
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$.ajax({url: "/message/getList",type: "get",success: function (messageInfos) {var finalHtml = "";for (var message of messageInfos) {finalHtml += '<div>' + message.from + ' 对 ' + message.to + ' 说: ' + message.message + '</div>';}$(".container").append(finalHtml);}});function submit() {console.log("发布留言");//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from == '' || to == '' || say == '') {return;}//发送ajax请求$.ajax({url: "/message/publish",type: "post",data: {from: $('#from').val(),to: $('#to').val(),say: $('#say').val()},success: function (result) {if (result) {//2. 构造节点var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";//3. 把节点添加到页面上 $(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}else{alert("输入不合法");}}});}</script>
</body></html>展示：
6.解决问题方式
无日志提示，说明请求没有到达后端，是前端代码出问题。
相关文章：
Spring Boot入门指南：留言板
一.留言板 1.输⼊留⾔信息,点击提交.后端把数据存储起来. 2.⻚⾯展⽰输⼊的表⽩墙的信息 规范： 1.写一个类MessageInfo对象，添加构造方法 虽然有快捷键，但是还是不够偷懒 项目添加Lombok。 Lombok是⼀个Java⼯具库，通过添加注…...
Docker 中安装和配置带用户名和密码保护的 Elasticsearch
在 Docker 中安装和配置带用户名和密码保护的 Elasticsearch 需要以下步骤。Elasticsearch 的安全功能（包括基本身份验证）在默认情况下是启用的，但在某些版本中可能需要手动配置。以下是详细步骤，包括如何设置用户名和密码。 1. …...
面试官：说说JVM内存调优及内存结构
1. JVM简介 JVM（Java虚拟机）是运行Java程序的平台，它使得Java能够跨平台运行。JVM负责内存的自动分配和回收，减轻了程序员的负担。 2. JVM内存结构 运行时数据区是JVM中最重要的部分，包含多个内存区域： …...
Ansible的脚本-----playbook剧本【下】
目录 实战演练六：tags 模块 实战演练七：Templates 模块 实战演练六：tags 模块 可以在一个playbook中为某个或某些任务定义“标签”，在执行此playbook时通过ansible-playbook命令使用--tags选项能实现仅运行指定的tasks。 playboo…...
Mysql开启远程控制简化版，亲测有效
首先关闭防火墙 改表法 打开上图的CMD，输入密码进入，然后输入一下指令 1.use mysql; 2.update user set host % where user root;//更新root用户的权限，允许任何主机连接 3.FLUSH PRIVILEGES;//刷新权限，使更改生效 具体参考…...
【MQTT协议与IoT通信】MQTT协议的使用和管理
MQTT协议与IoT通信：MQTT协议的使用和管理 目录 引言MQTT协议概述 什么是MQTTMQTT的工作原理 MQTT协议的关键特性 轻量级与高效性发布/订阅模式质量服务等级(QoS)持久会话安全性 MQTT协议的使用方法 设置MQTT Broker连接MQTT Client发布消息订阅主题断开连接 MQTT协…...
根据题意写出完整的css,html和js代码【购物车模块页面及功能实现】
🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收…...
AWS免费层之后：了解和管理您的云服务成本
Amazon Web Services (AWS) 为新用户提供了12个月的免费层服务，这是许多人开始使用云服务的绝佳方式。但是，当这一年结束后，您的AWS使用会如何变化？我们九河云通过本文将探讨免费层结束后的AWS成本情况，以及如何有效管…...
Linux定时同步系统时间到硬件时间
Linux定时同步系统时间到硬件时间 1. 系统时间、软件时间 系统时间 （System Time）： 一般说来就是我们执行 date命令看到的时间，linux系统下所有的时间调 用（除了直接访问硬件时间的命令）都是使用的这个时…...
网络编程——wireshark抓包、tcp粘包
目录 一、前言 1.1 什么是粘包 1.2 为什么UDP不会粘包 二、编写程序 文件树 客户端程序 服务器程序 tcp程序 头文件 makefile 三、 实验现象 四、改进实验 五、小作业 一、前言 最近在做网络芯片的驱动，验证功能的时候需要借助wireshark这个工具&…...
el-table合计行更新问题
说明：在使用el-table自带的底部合计功能时，初始界面不会显示合计内容 解决方案：使用 doLayout()方法 updated() {this.$nextTick(() > {this.$refs[inventorySumTable].doLayout();});},完整代码： // show-summary：…...
ChatGPT：数据库不符合第二范式示例
ChatGPT：数据库不符合第二范式示例 这张图片为什么不符合数据库第二范式 这个表格不符合数据库第二范式（2NF）的原因如下： 1. 数据库第二范式（2NF）定义 第二范式要求一个数据库表格在满足第一范式…...
27、美国国家冰雪中心（NSIDC）海冰密集度月数据下载与处理
文章目录 一、前言二、数据下载三、使用Ponply查看数据结构四、代码一、前言 处理美国国家冰雪中心（NSIDC）的海冰密集度月度数据时,坐标转换是一个重要的步骤。NSIDC提供的数据通常采用极地球面坐标系,需要将其转换为常用的地理坐标系（如经纬度）以便进行分析和可视化。 坐…...
vite环境下使用bootstrap
环境 nodejs 18 pnpm 初始化 pnpm init pnpm add -D vite --registry http://registry.npm.taobao.org pnpm add bootstrap popperjs/core --registry http://registry.npm.taobao.org pnpm add -D sass --registry http://registry.npm.taobao.org新建vite.config.js cons…...
Laravel视图渲染封装
第一种 app/Helpers/ViewHelper.php 创建一个辅助函数，用于动态确定视图路径： <?php if (!function_exists(fetchView)) {function fetchView($data []){$currentAction \Route::currentRouteAction();list($controller, $method) explode(, $c…...
C++学习补充2：MySQL select 查询
MySQL select 查询 MySQL 查询 select时， 不区分大小写的。 MySQL 在默认情况下是区分大小写的，但是它的行为可能因配置和使用的字符集而有所不同。以下是一些可能导致查询在 SELECT 语句中不区分大小写的原因： 字符集设置：如果…...
uni-app声生命周期
应用的生命周期函数在App.vue页面 onLaunch:当uni-app初始化完成时触发（全局触发一次） onShow:当uni-app启动，或从后台进入前台时显示 onHide:当uni-app从前台进入后台 onError:当uni-app报错时触发,异常信息为err 页面的生命周期 onLoad…...
排序算法--堆排序
基本思想 堆排序的基本思想是，将待排序的元素构建成一个最大堆或最小堆。对于最大堆来说，堆顶是整个堆中的最大元素；对于最小堆来说，堆顶是整个堆中的最小元素。然后，将堆顶元素与堆中最后一个元素交换，并…...
iPhone 在 App Store 中推出的 PC 模拟器 UTM SE
PC 模拟器是什么？PC 模拟器是一种软件工具，它模拟不同硬件或操作系统环境，使得用户可以在一台 PC 上运行其他平台的应用程序或操作系统。通过 PC 模拟器，用户可以在 Windows 电脑上体验 Android 应用、在 Mac 电脑上运行 Windows …...
FastAPI删除mongodb重复数据（数据清洗）
在 FastAPI 中删除 MongoDB 重复数据，你需要结合使用 MongoDB 查询和 FastAPI 的路由功能。以下是一个通用的例子，演示如何删除特定字段上的重复数据： 1. 定义数据模型: from pydantic import BaseModel, Field from bson import ObjectId …...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...