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 …...
移动UI：排行榜单页面如何设计，从这五点入手，附示例。
移动UI的排行榜单页面设计需要考虑以下几个方面： 1. 页面布局： 排行榜单页面的布局应该清晰明了，可以采用列表的形式展示排行榜内容，同时考虑到移动设备的屏幕大小，应该设计合理的滚动和分页机制，确保用户…...
如何解决 uni-app 项目中 “文件查找失败：‘crypto-js‘“ 的问题
在开发使用 uni-app 框架的项目时，遇到依赖问题是常见的。本文将介绍如何解决编译过程中出现的 “文件查找失败：‘crypto-js’” 错误，并说明这种错误为什么会发生以及如何避免。 问题背景 在对 uni-app 项目进行编译时，我们可能…...
Apache DolphinScheduler 3.2.2 版本正式发布！
Apache DolphinScheduler 3.2.2 版本正式发布！ 近日，Apache DolphinScheduler 发布了 3.2.2 版本。此版本主要基于 3.2.1 版本进行了 bug 修复，新增若干特性，并进行了众多改进和 Bug 修复，以及文档修复等。 …...
汇川CodeSysPLC教程03-2-6 ModBus TCP
什么是ModBus TCP？ ModBus TCP是一种基于TCP/IP协议的工业网络通信协议，常用于工业自动化和控制系统。它是ModBus协议的一个变种，ModBus协议最初由Modicon（现在是施耐德电气的一部分）在1979年开发。 以下是ModBus TC…...
【Python机器学习】决策树的构造——划分数据集
分类算法除了需要测量信息熵，还需要划分数据集，度量划分数据集的熵，以便判断当前是否正确划分了数据集。 我们将对每个特征划分数据集的结果计算一次信息熵，然后判断按照哪个特征划分数据集是最好的划分方式。 想象一个分部在二…...
Pip换源使用帮助
PyPI 镜像使用帮助 PyPI 镜像帮助提高包安装的速度，特别是当默认源访问较慢时。镜像每次同步成功后，每隔 5 分钟进行更新，确保镜像内容尽量与官方源保持一致。 pip 临时使用 如果您只想在一次安装中使用镜像，可以使用以下命令&…...
力扣1089复写0
1089. 复写零 - 力扣（LeetCode） 我们的思路是利用类似双指针的方式去解答，来看下代码 class Solution { public:void duplicateZeros(vector<int>& arr){int cur 0, dest -1, n arr.size();while (cur < n){if (arr[cur])d…...
10 VUE Element
文章目录 VUE1、概述2、快速入门3、Vue 指令4、生命周期5、案例 Elemant1、快速入门2、Element 布局3、常用组件-案例 VUE 1、概述 Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写基于MVVM(Model-View-ViewModel)思想，实现数据…...
独立游戏《星尘异变》UE5 C++程序开发日志8——实现敏感词过滤功能（AC自动机）
在游戏中经常会有需要玩家输入一些内容的功能，例如聊天，命名等，这款游戏只有在存档时辉用到命名功能，所以这个过滤也只是一个实验性的功能，我们将使用AC自动机来实现，这是在我们把“csdn”这个词设置为屏蔽…...
使用 Swagger 在 Golang 中进行 API 文档生成
Swagger 是一款强大的 API 文档生成工具，可以帮助开发者轻松创建、管理和展示 RESTful API 文档。在本文中，我们将介绍如何在 Golang 项目中使用 Swagger 来生成 API 文档。 官网地址 ： gin-swagger 前提条件 Golang 开发环境（…...
Pip换源实战指南：加速你的Python开发
1. Pip换源的重要性 在使用Python进行软件开发或数据分析时，pip 是Python的包管理工具，用于安装和管理第三方库。然而，由于网络环境的差异，特别是在某些国家，访问默认的PyPI（Python Package Indexÿ…...
【数据结构】常用数据结构的介绍：理解与应用
文章目录 前言一、介绍二、使用场景三、总结 前言 在计算机科学中，数据结构是我们组织和存储数据的方式，它可以帮助我们高效地执行各种操作，如搜索、插入和删除。从数组和链表，到树和图，不同的数据结构有着不同的优点…...
【优秀python系统毕设】基于Python flask的气象数据可视化系统设计与实现，有LSTM算法预测气温
第一章 绪论 1.1 研究背景 在当今信息爆炸的时代，气象数据作为重要的环境信息资源，扮演着关键的角色。然而，传统的气象数据呈现方式存在信息量庞大、难以理解的问题，限制了用户对气象信息的深入理解和利用。因此，基…...
【康复学习--LeetCode每日一题】2951. 找出峰值
题目： 给你一个下标从 0 开始的数组 mountain 。你的任务是找出数组 mountain 中的所有 峰值。 以数组形式返回给定数组中 峰值 的下标，顺序不限 。 注意： 峰值 是指一个严格大于其相邻元素的元素。 数组的第一个和最后一个元素 不 是峰值。…...
PYTHON学习笔记（八、字符串及的使用）
目录 1、字符串 1.1、字符串的常用操作 1.2、格式化字符串 1.2.1、占位符格式化字符串 1.2.2、f-string格式化字符串 1.2.3、str.format( )格式化字符串 1.3、数据的验证 1.4、正则表达式 1.5.1元字符 1.5.2限定符 1.5.3其他字符 1.5.4re模块 1、字符串 1.1、字符…...
文件共享功能无法使用提示错误代码0x80004005【笔记】
环境情况： 其他电脑可以正常访问共享端，但有一台电脑访问提示错误代码0x80004005。 处理检查： 搜索里输入“启用或关闭Windows功能”按回车键，在“启用或关闭Windows功能”里将“SMB 1.0/CIFS文件共享支持”勾选后（故…...
FTP（File Transfer Protocal，文件传输协议）
文章目录 引言FTP管理工具FTP客户端FTP连接模式控制连接数据连接FTP命令/响应FTP命令FTP响应FTPSSFTP引言 FTP（File Transfer Protocal，文件传输协议）用于建立两台主机间的数据文件传输下载。使用客户/服务器（Client/Server）架构，基于TCP协议，服务端口为21。 FTP链接…...
DevEco Studio中使用Qt，编写HarmonyOS程序
文章目录 1.操作2.注意事项2.1.adapter_ts2.1.手机插到电脑后，DevEco无法识别 1.操作 最近需要尝试把之前在Windwos下用Qt实现的程序移植到鸿蒙（HarmonyOS）系统上。 我使用的DevEco版本是5.03.501 找了一下资料，官方࿰…...
基于单文档的MFC图像增强
目录 function.h ColorEnhanceDib.h ColorEnhanceDib.cpp Dib.h Dib.cpp FrequencyFilterDib.h FrequencyFilterDib.cpp GrayTransformDib.h GrayTransformDib.cpp HistogramDib.h HistogramDib.cpp SharpenProcessDib.h SharpenProcessDib.cpp SmoothProcessDib.h Sm…...
云计算实训13——DNS域名解析、ntp时间服务器配置、主从DNS配置、多区域DNS搭建
一、DNS域名解析 1.正向解析 将域名解析为IP地址 DNS正向解析核心配置 (1)安装bind [rootdns ~]# yum -y install bind (2)编辑配置文件 编辑named.conf文件，限定访问权限 [rootdns ~]# vim /etc/named.conf 编辑named.rfc文件，指定要访问的域名 [ro…...
【C#】Visual Studio2022打包依赖第三方库的winForm程序为exe
0.简介 IDE：VS2022 平台：C# .NetFramework4.7.2 WinForm界面 有GDAL、EEplus第三方库的依赖，所以在其他未安装环境的电脑中功能无法使用。 1. 安装 1.1 运行文件输出 在VS扩展中选择管理扩展，安装：Microsoft Visua…...
《算法笔记》总结No.11——数字处理（上）欧拉筛选
机试中存在部分涉及到较复杂数字的问题，这是编码的基本功，各位一定要得心应手。 目录 一.最大公约数和最小公倍数 1.最大公约数 2.最小公倍数 二.素数 1.判断指定数 2.输出所有素数 3.精进不休——埃拉托斯特尼筛法 4.达到更优！——…...
DP学习——享元模式
学而时习之，温故而知新。 享元模式 名词解析 有必要解释下“享元”两字，英文原文是flyweight pattern——轻量级模式，但是翻译过来的“享元”两字太牛逼了——褒贬不一，翻译的他妈都不认识。 享元的高雅在于: 享:共享/共用 元:…...
无人机10公里WiFi图传摄像模组，飞睿智能超清远距离无线监控，智能安防新潮流
在这个科技日新月异的时代，我们对影像的捕捉和传播有了更高的要求。从传统的有线传输到无线WiFi图传，每一次技术的飞跃都为我们带来了全新的视觉体验。今天，我们要探讨的，正是一款具有划时代意义的科技产品——飞睿智能10公里WiFi…...
SAP S/4HANA Cloud Public Edition
即装即用的云ERP软件。借助SaaS模式为企业提供完备、现代化的ERP 云套件，为企业带来新的技术突破，如自动化的业务流程与基于数据的商业分析。企业可选择这款智能云ERP软件，快速实现自身价值。 什么是 SAP S/4HANA Cloud Public Edition&#…...
LabVIEW汽车动态信号模拟系统
随着汽车工业的快速发展，对汽车电子控制单元（ECU）的测试与仿真需求日益增加。开发了一种基于LabVIEW软件开发的汽车动态信号模拟系统，该系统能有效模拟ECU在实车环境下的工作状态，为ECU的开发和测试提供了一个高效、经…...
chrome 插件:content-script 部分逻辑在页面无法生效,可考虑插入 script 到页面上
背景: 某页面有个输入框, 用的应该是什么库里的组件, 直接修改内容不生效/机制不明确, 于是使用 paste event 粘贴到输入框, 结果发现也不行 定位: 使用 mutationObserver , 发现事件确实触发了, 输入框内容变了, 但马上又变回来了, 于是怀疑是输入框组件有做 mutationObers…...
【前端 10】初探BOM
初探BOM：浏览器对象模型 在JavaScript的广阔世界中，BOM（Browser Object Model，浏览器对象模型）扮演着举足轻重的角色。它为我们提供了一套操作浏览器窗口及其组成部分的接口，让我们能够通过编写JavaScript…...
PostgreSQL入门与进阶学习，体系化的SQL知识，完成终极目标高可用与容灾，性能优化与架构设计，以及安全策略
专栏内容： postgresql使用入门基础手写数据库toadb并发编程 个人主页：我的主页 管理社区：开源数据库 座右铭：天行健，君子以自强不息；地势坤，君子以厚德载物. 文章目录 概述基础篇初级篇进阶篇…...
ODBC+FreeTDS从Linux访问Windows SqlServer数据库
提示 \color{red}{提示} 提示： 《Linux系统上编译安装FreeTDS库文件》中讲述了如何编译FreeTDS源码，并安装。 本文部分内容会在上述文章的基础上深入。 本文内容所使用的环境 Windows系统：Windows 10 企业版 64位操作系统；IP&a…...