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

案例续集留言板

news 2026/4/9 15:07:40

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

前端代码如下 :

<!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