表白墙项目(JAVA实现)

news/2025/2/6 10:02:52/

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、效果展示


http://www.ppmy.cn/news/1405235.html

相关文章

Linux 内核的构建块:深入探索 C 结构体的应用

Linux 内核的构建块&#xff1a;深入探索 C 结构体的应用 Linux 内核&#xff0c;作为操作系统的中心和基础&#xff0c;承担着调度处理器、管理内存、处理输入/输出&#xff08;I/O&#xff09;等各种底层任务。要实现这些复杂的功能&#xff0c;内核的编写借助了 C 语言强大…

npm 常用命令详解

概要 npm是一个node包管理和分发工具&#xff0c;已经成为了非官方的发布node模块&#xff08;包&#xff09;的标准。 有了npm&#xff0c;可以很快的找到特定服务要使用的包&#xff0c;进行下载、安装以及管理已经安装的包。 1、npm install moduleNames&#xff1a; 安…

Golang和Java对比

其实我是Javaer转的Golang&#xff0c;我谈谈自己对Java和Golang的体会 我先讲讲我认为Golang的优点 1、Golang是一门新语言&#xff0c;相比于Java&#xff0c;他的生态要小很多&#xff0c;优点很明显&#xff0c;自由度高&#xff0c;学习成本低&#xff0c;能快速拉起一个…

建立统一网络身份认证平台,赋能用户信息安全

“近年来&#xff0c;层出不穷的网络谣言、网络暴力事件以及网络水军、网络黑灰产犯罪屡禁不止、屡打不绝&#xff0c;其主要原因是网络实名制落实不到位。”全国人大代表、黑龙江省大庆市公安局网络警察分局副局长贾晓亮接受记者采访时表示&#xff0c;网络信息安全问题是我们…

C++核心高级编程 --- 3、函数提高

文章目录 第三章&#xff1a;3.函数提高3.1 函数默认参数3.2 函数占位参数3.3 函数重载3.3.1 函数重载概述3.3.2 注意事项 第三章&#xff1a; 3.函数提高 3.1 函数默认参数 语法结构&#xff1a;返回值类型 函数名 (参数 默认值){} #include <iostream> using name…

深入理解数据结构(1):复杂度详解

文章主题&#xff1a;复杂度详解&#x1f331;所属专栏&#xff1a;深入理解数据结构&#x1f4d8;作者简介&#xff1a;更新有关深入理解数据结构知识的博主一枚&#xff0c;记录分享自己对数据结构的深入解读。&#x1f604;个人主页&#xff1a;[₽]的个人主页&#x1f525;…

[Errno 2] No such file or directory: ‘g++‘

报错解释: 这个错误表明系统试图访问名为g++的文件或目录,但没有找到。g++是GNU编译器集合(GNU Compiler Collection)中的C++编译器。如果系统中没有安装g++或者g++不在环境变量的路径中,就会出现这个错误。 解决方法: 确认g++是否已安装: 在Linux上,可以尝试运行g+…

股票价格预测 | Python使用BP神经网络预测股票价格

文章目录 效果一览文章概述代码设计效果一览 文章概述 使用反向传播(Backpropagation,BP)神经网络进行股票价格预测是一种常见的方法。下面是一个简单的步骤指南: 数据准备:收集和整理用于训练和测试的股票价格数据。确保数据具有一定的时间顺序,并包含与预测相关的特征…