表白墙项目（JAVA实现）
1、在html里
class使用.
id使用#
2、记得引入响应依赖（举例lombok）
3、messageController
package com.example.demo.demos.web;
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;
@RequestMapping("/message")
@RestController
public class massageController {//学过数据库的可以将这里改为数据库操作public List<MessageInfo> messageInfos=new ArrayList<>();//提交留言@RequestMapping("/publish")public boolean publishMessage(MessageInfo messageInfo){if(!StringUtils.hasLength(messageInfo.getMessage())||!StringUtils.hasLength(messageInfo.getTo())||!StringUtils.hasLength(messageInfo.getFrom())){return false;}//暂时存放在内存中messageInfos.add(messageInfo);return true;}@RequestMapping("/getlist")public List<MessageInfo> getlist(){return messageInfos;}
}4、MessageInfo
package com.example.demo.demos.web;import lombok.Data;
import lombok.Getter;//可以省去我们的get和set方法，其他类可以直接调用
@Data
public class MessageInfo {private String from;private String to;private String message;
}5、messagewall前端代码
<!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({type:"get",url:"/message/getlist",success:function(messages){for(var message of messages){var html="<div>"+message.from+"对 "+message.to+" 说: "+message.message+"</div> "$(".container").append(html);}}});function submit(){//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}$.ajax({type:"post",url:"/message/publish",data:{from:from,to:to,message:say},success:function(result){if(result==true){//添加成功//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、前端代码中涉及到的后端代码部分说明
（1）前端获取留言内容部分
（2）防止页面刷新之后我们上次写的话消失，我们对其进行一下保存
7、效果展示
相关文章：
表白墙项目（JAVA实现）
1、在html里 class使用. id使用# 2、记得引入响应依赖（举例lombok） 3、messageController package com.example.demo.demos.web; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; i…...
openGauss 高级分析函数支持
高级分析函数支持 可获得性 本特性自openGauss 1.1.0版本开始引入。 特性简介 无。 客户价值 我们提供窗口函数来进行数据高级分析处理。窗口函数将一个表中的数据进行预先分组，每一行属于一个特定的组，然后在这个组上进行一系列的关联分析计算。这…...
【Java面试题系列】基础篇
目录 基本常识标识符的命名规则八种基本数据类型的大小，以及他们的封装类3*0.10.3返回值是什么short s1 1; s1 s1 1;有什么错? short s1 1; s1 1;有什么错?简述&&与&的区别？简述break与continue、return的区别？Arrays类的…...
Ubuntu 23.04 安装es
在Ubuntu 23.04上安装Elasticsearch的过程可能与之前版本类似，以下是基于最新稳定版Elasticsearch的一般安装步骤： 准备工作： 确保系统已更新至最新版本： sudo apt update && sudo apt upgrade安装Java Development Kit (…...
gradle 7.0 + 配置
Maven 镜像地址的设置 原来在项目根目录的 build.gradle 中进行设置，但是现在里面只有plugins。 工程的build.gradle的dependencies修改为plugins，替代了引用原来的Gradle版本。 // Top-level build file where you can add configuration options com…...
vue3的ref和reactive对比
一，ref 作用: 定义一个 ref 响应式的数据语法: const xxx ref(initValue) 用法 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value࿰…...
是否应该升级到ChatGPT 4.0？深度对比ChatGPT 3.5与4.0的差异
如果只是想简单地体验AI的魅力，感受大模型的独特之处，或是玩一玩文字游戏，那么升级至ChatGPT 4.0可能并非必需。然而，若你期望将AI作为提升工作学习效率的得力助手，那么我强烈建议你升级到ChatGPT 4.0。 如果你不知道…...
C++刷题篇——04找等值元素
一、题目 二、解题思路 1、分割后放进二维数组 2、使用map，key为数值，value为其坐标 3、遍历二维数组元素，再在map中找该元素对应的value值（二维数组形式），倘若value.size为1，那直接返回-1&…...
2024年最新服装erp软件排名！（建议收藏）
随着数字经济时代的到来，传统服装生产企业正在经历深刻的变革。如何实现产业数字化升级，是众多服装企业面临的共同课题。当前，服装类的企业管理软件已经成为企业实现智能化转型的关键。面对已经发生深刻改变的商业竞争环境，传统的…...
Radash一款JavaScript最新的实用工具库，Lodash的平替！
文章目录 Lodash 的痛点进入正题--Radash特点 举例几个常用的api 一说lodash应该大部分前端同学都知道吧，陪伴我们好多年的JavaScript工具库，但是自从 ES6 出现后就慢慢退出前端人的视线，能ES6写的代码绝对不会用Lodash，也不是完全…...
使用node爬取视频网站里《龙珠》m3u8视频
1. 找到视频播放网站 百度一下 龙珠视频播放 精挑细选一个可以播放的网站。 如：我在网上随便找了一个播放网站，可以直接在线播放 https://www.xxx.com/play/39999-1-7.html 这里不具体写视频地址了，大家可以自行搜索 2.分析网页DOM结…...
搜索与图论——Prim算法求最小生成树
在最小生成树问题里，正边和负边都没问题 朴素版prim算法 时间复杂度O(n^2) 生成树：每一次选中的t点，它和集合的距离对应的那条边，就是生成树的一条边 算法流程和dijkstra算法非常相似 #include<iostream> #include<cs…...
sqlmap基础知识
一、sqlmap简介 sqlmap是一个开源的渗透测试工具，可以自动检测和利用SQL注入漏洞以及接管数据库服务器的过程。 官网： sqlmap.org 核心功能 漏洞检测漏洞利用 学习关键点 基于sqlmap进行sql注入漏洞的检测，注入利用和攻击基于sqlmap进…...
读《C Primer Plus》
1、汇编语言是为特殊的中央处理单元设计的一系列内部指令，使用助记符来表示；不同的CPU系列使用不同的汇编语言。 2、C语言充分利用计算机优势，使它具有汇编语言才有的微调控能力，可移植性极好。 3、C语言可以访问硬件、操作内存…...
深入理解计算机系统 家庭作业 2.66
/* 前置条件:无符号整数右移不产生1 调用函数是为了可以查看整个过程,不影响结果. 思路是让x在右移的过程中,把最高位之前的位全部填满. 填满后的结果右移一位(即x的最高位变为0,其他为1),再异或x得到最高位 以此类推知道覆盖到32位. */ #include <stdio.h> #inclu…...
【服务端】node.js详细的配置
👨💻个人主页：开发者-曼亿点 👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨💻 本文由 曼亿点 原创 👨💻 收录于专栏：…...
二、CentOS基础配置（1.网络与包管理）
文章目录 二、基础配置操作1、网络管理（配置静态地址并进行ssh远程连接）（1.）静态地址配置（2.）IP配置注释（3.）配置SSH远程连接 2、包管理（1.）yum软件包管理器1…...
Golang基础-5
Go语言基础 介绍 基础 切片 切片声明 切片初始化 切片基础操作 多维切片 介绍 本文介绍Go语言中切片(slice)(切片声明、切片初始化、切片基础操作、多维切片)等相关知识。 基础 切片 切片（slice）是对数组的一个连续片段的引用，切…...
Mysql数据库：故障分析与配置优化
目录 前言 一、Mysql逻辑架构图 二、Mysql单实例常见故障 1、无法通过套接字连接到本地MySQL服务器 2、用户rootlocalhost访问被拒绝 3、远程连接数据库时连接很慢 4、无法打开以MYI结尾的索引文件 5、超出最大连接错误数量限制 6、连接过多 7、配置文件/etc/my.cnf权…...
常见的图像分析算法
图像分析算法是计算机视觉领域中的一个重要分支，它通过使用预先训练的人工智能模型从图像中提取和分析视觉信息。这些算法可以应用于多种场景，如物体识别、图像分类、图像增强、缺陷检测等。北京木奇移动技术有限公司，专业的软件外包开发公司…...
智慧工地起重机吊钩检测数据集VOC+YOLO格式1138张1类别
数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：1138标注数量(xml文件个数)：1138标注数量(txt文件个数)：1138标注类别…...
交完Essay才发现Turnitin更新了AI检测？我是这么应对的
上学期我的一个朋友被约谈了。 教授发邮件说："你的Essay和AI生成文本相似度过高，请来办公室解释。" 他确实用了AI——谁没用呢——但他也认真改写了好几遍。问题是，Turnitin在2025年更新了AI检测模型，现在它不只看词汇…...
与时间参数STmin)
从CANoe实战出发：深度解析UDS网络层诊断中的流控帧(FC)与时间参数STmin
从CANoe实战解析UDS流控帧：FC与STmin参数调优指南 在汽车电子测试领域，UDS诊断协议的网络层流控机制直接影响着ECU通信的可靠性与效率。当测试工程师在CANoe环境中模拟诊断会话时，经常会遇到因流控帧参数配置不当导致的报文丢失、响应超时等问…...
032随机链表的复制
随机链表的复制 题目链接：https://leetcode.cn/problems/copy-list-with-random-pointer/description/?envTypestudy-plan-v2&envIdtop-100-liked 我的解答： public Node copyRandomList(Node head) {Node dummy new Node(-1);Node curhead, newCu…...
量子网络远程纠缠生成技术及其应用
1. 量子网络中的远程纠缠生成技术解析量子纠缠作为量子计算与量子通信的核心资源，其非局域特性为分布式系统提供了经典方法无法实现的协调能力。在金融高频交易、智能电网调度等对延迟极度敏感的领域，量子纠缠带来的协调优势尤为显著。基于腔量子电动力学…...
Next.js App Router 实战：从官方 Playground 探索现代 Web 开发最佳实践
1. 项目概述与定位最近在捣鼓 Next.js 的几个新特性，比如 Server Actions、并行路由、拦截路由这些，光看文档总觉得隔靴搔痒，想找个能上手实操、快速验证想法的环境。这时候，Vercel 官方维护的next-app-router-playground项目就成…...
基于MCP协议构建AI知识库：解决会话失忆，实现知识持久化
1. 项目概述：让AI拥有自己的“亚历山大图书馆”如果你和我一样，长期与Claude Code、Cursor这类AI编程助手打交道，一定会遇到一个核心痛点：会话失忆。每次开启一个新对话，AI助手就像一张白纸，它对你项目的历…...
Mali-400 MP OpenGL ES DDK核心问题与解决方案
## 1. Mali-400 MP OpenGL ES DDK核心问题解析作为ARM经典的移动GPU架构，Mali-400 MP在Symbian平台的OpenGL ES驱动开发套件(DDK)中存在三类典型问题。这些问题的根源往往涉及GPU硬件特性与图形API规范的微妙交互，开发者需要深入理解其底层机制才能有效规…...
5个简单步骤实现iOS虚拟定位：iFakeLocation终极解决方案
5个简单步骤实现iOS虚拟定位：iFakeLocation终极解决方案 【免费下载链接】iFakeLocation Simulate locations on iOS devices on Windows, Mac and Ubuntu. 项目地址: https://gitcode.com/gh_mirrors/if/iFakeLocation 你是否曾经需要在不同城市测试应用的位…...
紧急预警：Midjourney即将下架Nihonga相关风格标签？（内部消息+已存档的5类不可再生提示词组合，仅限今日开放获取）
更多请点击： https://intelliparadigm.com 第一章：Nihonga风格在Midjourney中的历史定位与美学内核 Nihonga（日本画）作为明治维新后确立的现代民族绘画体系，以天然矿物颜料、金箔银箔、胶质媒介及传统和纸为物质基础&…...