案例续集留言板
前端没有保存数据的功能,后端把数据保存下来(内存,数据库等等......)
前端代码如下 :
<!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…...
72 内网安全-域横向CSMSF联动及应急响应初识
目录 演示案例:MSF&CobaltStrike联动ShellWEB攻击应急响应朔源-后门,日志WIN系统攻击应急响应朔源-后门,日志,流量临时给大家看看学的好的怎么干对应CTF比赛 涉及资源 权限维持留到后面在补充，先把后面的知识点给大家讲起来，因为权限维持它是我们前期…...
Leetcode—20.有效的括号【简单】
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] {)…...
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;…...
Mac电脑配置Flutter开发环境
1.进入官网下载页： Flutter SDK releases | Flutter 可以看到有 Windows、macOS、Linux三种系统的下载包 选择macOS，然后点击下载 Stable channel（稳定版）中的最新版本，下载完成后可以移动到资源库Library中。 2.下载…...
QTableView如何清空数据保留表头
QTableView如何清空数据保留表头 调用QAbstractItemModel中的removeRows或者removeColumns方法。 方法原型 bool removeRows(int column, int count, const QModelIndex &parent QModelIndex())在支持此功能的模型上，从模型中删除从父级父级下给定行开始的计…...
[工业自动化-17]：西门子S7-15xxx编程 - 软件编程 - PLC编程语言以及与嵌入式编程的比较
目录 一、博图编程语言 1.1 概述 1.2 三种编程语言之间的关系 二、PLC与嵌入式系统的类比 三、PLC编程与嵌入式系统编程的比较 3.1 不同点 3.2 相同点 3.3 PLC是一种专门用于工业控制系统的嵌入式系统 一、博图编程语言 1.1 概述 西门子（Siemens࿰…...
云原生微服务架构及实现技术
云原生是一种技术理念和架构方法，它充分利用云计算的优势，将应用程序和基础设施进行优化，以适应云环境的特性。云原生的设计原则主要包括弹性、韧性、安全性、可观测性、灰度等，旨在让企业在云环境中实现轻量、敏捷、高度自动化的…...
Uniapp语言切换动态修改Js文件
前言 续接上面两篇文章，第一篇文章是uniapp实现多语言切换，第二篇文章是i8n在js中的使用，由于我的菜单是在js文件中，所以我切换的时候除了菜单不实现效果，别的页面都可以实现，本篇文章主要是针对于怎么动态…...
GetSimple CMS忘记密码
GetSimple CMS是一个超简单的 CMS，适合建立个人网站等只需要极少数页面的网站。在站上百科上，是这么说的： GetSimple是一款基于XML存储数据的开源内容管理系统，且易于安装和定制，无需MySQL支持。提供撤销保护和备份功能…...
数据分析面试题1
1.右表为一组数据，尝试进行简单分析，并给出结论（使用公式和图表辅助） ①理解数据 userid：用户id神兽印记消耗数量 ②数据清洗 冻结首行，将列标题的英文字段转换成汉字字段检查是否有重复项：…...
数据跨领域应用实例—车辆通行大数据应用场景（二）
2023年10月25日，国家数据局正式揭牌。标志着我国数据基础制度正在不断完善，数据资源使用水平稳步提升，数据要素市场将进入发展快车道。当前，数字经济已成为我国经济高质量发展的新动能，国家数据局的成立，在…...
Dart笔记：build_runner-用于 Dart 代码生成和模块化编译的构建系统
Dart笔记 build_runner 用于 Dart 代码生成和模块化编译的构建系统 作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263 邮箱 ：291148484163.com 本文地址：https://blog.csdn.net/qq_28550263/artic…...
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谢谢...
模板——“C++”
各位CSDN的uu们你们好呀，今天，小雅兰的内容是C中的模板初阶的内容，下面，让我们进入C模板的世界吧！！！ 1. 泛型编程 2. 函数模板 3. 类模板 泛型编程 如何实现一个通用的交换函数呢？…...
分类预测 | Matlab实现PSO-BiLSTM粒子群算法优化双向长短期记忆神经网络的数据多输入分类预测
分类预测 | Matlab实现PSO-BiLSTM粒子群算法优化双向长短期记忆神经网络的数据多输入分类预测 目录 分类预测 | Matlab实现PSO-BiLSTM粒子群算法优化双向长短期记忆神经网络的数据多输入分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现PSO-BiLSTM粒子…...
Spring面试题：（六）Spring注解开发原理
ioc过程 发现只要将bean注册到BeanDefinitionMap中就可以创建bean对象 如何将xml配置的bean注册到BeanDefinitionMap 通过注解注册的bean过程一样 注册bean的接口：BeanDefinitionRegistryPostProcessor 开启组件扫描的两种方式：xml和注解 xml方式…...
ROS基础知识复习
【置顶】感谢参考：https://zhuanlan.zhihu.com/p/662074088 0.背景 工作一年多没有做 ROS 相关的开发了，最近找工作想做回这一块来，根据参考内容，抽时间给这边的基础知识敲一遍复习一下 1.环境检查 打开了之前的笔记本&#x…...
2390 高校实验室预约系统JSP【程序源码+文档+调试运行】
摘要 本文介绍了一个高校实验室预约系统的设计和实现。该系统包括管理员、教师和学生三种用户，具有基础数据管理、学生管理、教师管理、系统公告管理、实验室管理、实验室预约管理和系统管理等模块。通过数据库设计和界面设计，实现了用户友好的操作体验…...
C++进阶篇4---番外-红黑树
一、红黑树的概念 红黑树，是一种二叉搜索树，但在每个结点上增加一个存储位表示结点的颜色，可以是Red或 Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制，红黑树确保没有一条路 径会比其他路径长出俩倍࿰…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...
Go语言多线程问题
打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
: 一刀斩断视频片头广告)
快刀集(1): 一刀斩断视频片头广告
一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。 电影嘛，要沉浸，…...