当前位置：首页 > news >正文

案例续集留言板

news 2026/2/8 20:15:19

前端没有保存数据的功能,后端把数据保存下来(内存,数据库等等......)

前端代码如下 :

<!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>function submit(){//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}//2. 构造节点var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";//3. 把节点添加到页面上    $(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}</script>
</body></html>

我们将其复制到 idea 的 static 里面,然后运行代码,再用浏览器进行访问看看会不会出错,如下图没毛病

接口定义:

1.提交留言

/message/public

参数:MessageInfo (from,to,message)

返回结果:true / false

2.查看所有留言

/message/getMessageList

参数: 无

返回结果: List<Message>

然后我们引入 lombok 工具包

我们不要选太新的工具包,选使用的次数多的工具包,放进 pom.xml 里面

这样我们就不需要也一串 get和set方法了,这样我们的代码就更加清晰了

但是如果我们不想给所有属性都加上的话,可以单独进行注释

但是上面这种引入包的方式太麻烦了,我们还有别的方法

安装插件

安装完之后重启就能生效了

然后在 pom.xml 里面右键选择 generate

这样就完成了

然后我们继续上面留言板的代码

后端代码如下 :

package com.example.demo1.controller;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 MessageController {private List<MessageInfo> messageInfos = new ArrayList<>();@RequestMapping("/publish")public Boolean publishMessage(MessageInfo messageInfo){//进行参数的校验if (!StringUtils.hasLength(messageInfo.getFrom())||!StringUtils.hasLength(messageInfo.getTo())||!StringUtils.hasLength(messageInfo.getMessage())){return false;}//添加留言messageInfos.add(messageInfo);return true;}//返回留言@RequestMapping("/getMessageInfo")public List<MessageInfo> getMessage(){return messageInfos;}
}

package com.example.demo1.controller;import javax.xml.crypto.Data;@lombok.Data
public class MessageInfo {private String from;private String to;private String message;private Data CreateTime;
}

用 postman 测试后端代码,结果为true,没问题

再打开一个页面看看能不能获取到信息

哪怕添加了多个也是可以获取到的

由此可见后端代码是没有问题的

然后我们对前端代码进行补充

<!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/getMessageInfo",type:"get",success:function(message){for(var m of message){//拼接//2. 拼接节点的htmlvar divE = "<div>" + m.from + "对" + m.to + "说:" + m.message + "</div>";//3. 把节点添加到页面上    $(".container").append(divE);}}});function submit() {//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from == '' || to == '' || say == '') {return;}//提交留言$.ajax({url: "/message/publish",type: "post",data: {"from": from,"to": to,"message": say},success:function(result){if(result) {//添加成功//2. 拼接节点的htmlvar divE = "<div>" + from + "对" + to + "说:" + say + "</div>";//3. 把节点添加到页面上    $(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}else{//添加失败alert("留言发布失败");}}});}</script>
</body></html>

案例续集留言板

前端没有保存数据的功能,后端把数据保存下来(内存,数据库等等......) 前端代码如下 : <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initia…...

编程日记 2023/11/13 6:16:08

72 内网安全-域横向CSMSF联动及应急响应初识

目录演示案例:MSF&CobaltStrike联动ShellWEB攻击应急响应朔源-后门,日志WIN系统攻击应急响应朔源-后门,日志,流量临时给大家看看学的好的怎么干对应CTF比赛涉及资源权限维持留到后面在补充，先把后面的知识点给大家讲起来，因为权限维持它是我们前期…...

编程日记 2023/11/13 6:15:06

2023每日刷题（二十七） Leetcode—20.有效的括号 C实现代码 class Solution { public:bool isValid(string s) {stack<char> arr;int len s.size();if(len 1) {return false;}for(int i 0; i < len; i) {if(s[i] ( || s[i] [ || s[i] {)…...

编程日记 2023/11/13 6:13:05

Leetcode—剑指OfferII LCR 019.验证回文串II【简单】

2023每日刷题（二十七） Leetcode—剑指OfferII LCR 019.验证回文串II 实现代码 class Solution { public:bool judgeFunc(string s, int left, int right) {while(left < right) {if(s[left] ! s[right]) {return false;}left;right--;}return true;…...

编程日记 2023/11/13 6:12:04

Mac电脑配置Flutter开发环境

1.进入官网下载页： Flutter SDK releases | Flutter 可以看到有 Windows、macOS、Linux三种系统的下载包选择macOS，然后点击下载 Stable channel（稳定版）中的最新版本，下载完成后可以移动到资源库Library中。 2.下载…...

编程日记 2023/11/13 6:11:03

QTableView如何清空数据保留表头

QTableView如何清空数据保留表头调用QAbstractItemModel中的removeRows或者removeColumns方法。方法原型 bool removeRows(int column, int count, const QModelIndex &parent QModelIndex())在支持此功能的模型上，从模型中删除从父级父级下给定行开始的计…...

编程日记 2023/11/13 6:10:02

[工业自动化-17]：西门子S7-15xxx编程 - 软件编程 - PLC编程语言以及与嵌入式编程的比较

目录一、博图编程语言 1.1 概述 1.2 三种编程语言之间的关系二、PLC与嵌入式系统的类比三、PLC编程与嵌入式系统编程的比较 3.1 不同点 3.2 相同点 3.3 PLC是一种专门用于工业控制系统的嵌入式系统一、博图编程语言 1.1 概述西门子（Siemens&#xff0…...

编程日记 2023/11/13 6:09:01

云原生微服务架构及实现技术

云原生是一种技术理念和架构方法，它充分利用云计算的优势，将应用程序和基础设施进行优化，以适应云环境的特性。云原生的设计原则主要包括弹性、韧性、安全性、可观测性、灰度等，旨在让企业在云环境中实现轻量、敏捷、高度自动化的…...

编程日记 2023/11/13 6:06:59

Uniapp语言切换动态修改Js文件

前言续接上面两篇文章，第一篇文章是uniapp实现多语言切换，第二篇文章是i8n在js中的使用，由于我的菜单是在js文件中，所以我切换的时候除了菜单不实现效果，别的页面都可以实现，本篇文章主要是针对于怎么动态…...

编程日记 2023/11/13 6:03:57

GetSimple CMS忘记密码

GetSimple CMS是一个超简单的 CMS，适合建立个人网站等只需要极少数页面的网站。在站上百科上，是这么说的： GetSimple是一款基于XML存储数据的开源内容管理系统，且易于安装和定制，无需MySQL支持。提供撤销保护和备份功能…...

编程日记 2023/11/13 6:01:54

数据分析面试题1

1.右表为一组数据，尝试进行简单分析，并给出结论（使用公式和图表辅助） ①理解数据 userid：用户id神兽印记消耗数量 ②数据清洗冻结首行，将列标题的英文字段转换成汉字字段检查是否有重复项：…...

编程日记 2023/11/13 6:00:53

数据跨领域应用实例—车辆通行大数据应用场景（二）

2023年10月25日，国家数据局正式揭牌。标志着我国数据基础制度正在不断完善，数据资源使用水平稳步提升，数据要素市场将进入发展快车道。当前，数字经济已成为我国经济高质量发展的新动能，国家数据局的成立，在…...

编程日记 2023/11/13 5:59:52

Dart笔记：build_runner-用于 Dart 代码生成和模块化编译的构建系统

Dart笔记 build_runner 用于 Dart 代码生成和模块化编译的构建系统作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263 邮箱 ：291148484163.com 本文地址：https://blog.csdn.net/qq_28550263/artic…...

编程日记 2023/11/13 5:58:51

Ubuntu显示毫秒级时间

Ubuntu显示毫秒级时间 1. 打印当前时间 1. 打印当前时间 date 时间，转化成毫秒级 $ date # Mon 03 Apr 2023 11:09:47 PM CST$ echo -e "$(date %T).$((10#$(date %N)/1000000))" # 23:09:55.552谢谢...

编程日记 2023/11/13 5:57:50

模板——“C++”

各位CSDN的uu们你们好呀，今天，小雅兰的内容是C中的模板初阶的内容，下面，让我们进入C模板的世界吧！！！ 1. 泛型编程 2. 函数模板 3. 类模板泛型编程如何实现一个通用的交换函数呢？…...

编程日记 2023/11/13 5:56:49

分类预测 | Matlab实现PSO-BiLSTM粒子群算法优化双向长短期记忆神经网络的数据多输入分类预测

分类预测 | Matlab实现PSO-BiLSTM粒子群算法优化双向长短期记忆神经网络的数据多输入分类预测目录分类预测 | Matlab实现PSO-BiLSTM粒子群算法优化双向长短期记忆神经网络的数据多输入分类预测分类效果基本描述程序设计参考资料分类效果基本描述 1.Matlab实现PSO-BiLSTM粒子…...

编程日记 2023/11/13 5:55:48

Spring面试题：（六）Spring注解开发原理

ioc过程发现只要将bean注册到BeanDefinitionMap中就可以创建bean对象如何将xml配置的bean注册到BeanDefinitionMap 通过注解注册的bean过程一样注册bean的接口：BeanDefinitionRegistryPostProcessor 开启组件扫描的两种方式：xml和注解 xml方式…...

编程日记 2023/11/13 5:54:47

ROS基础知识复习

【置顶】感谢参考：https://zhuanlan.zhihu.com/p/662074088 0.背景工作一年多没有做 ROS 相关的开发了，最近找工作想做回这一块来，根据参考内容，抽时间给这边的基础知识敲一遍复习一下 1.环境检查打开了之前的笔记本&#x…...

编程日记 2023/11/13 5:53:46

2390 高校实验室预约系统JSP【程序源码+文档+调试运行】

摘要本文介绍了一个高校实验室预约系统的设计和实现。该系统包括管理员、教师和学生三种用户，具有基础数据管理、学生管理、教师管理、系统公告管理、实验室管理、实验室预约管理和系统管理等模块。通过数据库设计和界面设计，实现了用户友好的操作体验…...

编程日记 2023/11/13 5:52:46

C++进阶篇4---番外-红黑树

一、红黑树的概念红黑树，是一种二叉搜索树，但在每个结点上增加一个存储位表示结点的颜色，可以是Red或 Black。通过对任何一条从根到叶子的路径上各个结点着色方式的限制，红黑树确保没有一条路径会比其他路径长出俩倍&#xff0…...

编程日记 2023/11/13 5:51:45

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...

编程新知 2026/2/8 4:37:15

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程新知 2025/12/14 17:38:17

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2026/2/3 7:43:45

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制指定固定的延迟级别通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/5 5:03:16

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍软件包管理工具dpkg dpkg核心指令详解安装软件包卸载软件包查询软件包状态验证软件包完整性手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核的 Linux 发行版&#xff…...

编程新知 2026/2/1 13:41:09