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

【Java EE初阶二十五】简单的表白墙（一）

news 2025/10/29 2:04:15

1. 前端部分

1.1 前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>/* * 通配符选择器, 是选中页面所有元素 */* {/* 消除浏览器的默认样式. */margin: 0;padding: 0;box-sizing: border-box;}.container {width: 600px;margin: 20px auto;}h1 {text-align: center;}p {text-align: center;color: #666;margin: 20px 0;}.row {/* 开启弹性布局 */display: flex;height: 40px;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 */align-items: center;}.row span {width: 80px;}.row input {width: 200px;height: 30px;}.row button {width: 280px;height: 30px;color: white;background-color: orange;/* 去掉边框 */border: none;border-radius: 5px;}/* 点击的时候有个反馈 */.row button:active {background-color: grey;}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入内容后点击提交, 信息会显示到下方表格中</p><div class="row"><span>谁: </span><input type="text"></div><div class="row"><span>对谁: </span><input type="text"></div><div class="row"><span>说: </span><input type="text"></div><div class="row"><button id="submit">提交</button></div><!-- <div class="row">xxx 对 xx 说 xxxx</div> --></div><script>// 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. // 点击的时候, 获取到三个输入框中的文本内容// 创建一个新的 div.row 把内容构造到这个 div 中即可. let containerDiv = document.querySelector('.container');let inputs = document.querySelectorAll('input');let button = document.querySelector('#submit');button.onclick = function() {// 1. 获取到三个输入框的内容let from = inputs[0].value;let to = inputs[1].value;let msg = inputs[2].value;if (from == '' || to == '' || msg == '') {return;}// 2. 构造新 divlet rowDiv = document.createElement('div');rowDiv.className = 'row message';rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;containerDiv.appendChild(rowDiv);// 3. 清空之前的输入框内容for (let input of inputs) {input.value = '';}// 4. 把用户填写的内容, 发送给服务器. 让服务器来保存. //    $ 是 jquery 提供的全局变量. ajax 就是 $ 的一个方法. //    ajax 的参数是一个 js 对象, 可以有很多属性let requestBody = {"from": from,   // from 变量里的值, 就是第一个输入框的内容, "张三""to": to,       // to 变量的值, 就是第二个输入框的内容, "李四""message": msg  // msg 变量的值, 就是第三个输入框的内容, "我喜欢你很久了"};// 上述 body 是一个 js 对象, 还需要转成 json 字符串. let jsonString = JSON.stringify(requestBody);$.ajax({type: 'post',url: 'message',contentType: 'application/json; charset=utf8',data: jsonString,success: function(responseBody) {// 这个回调就是收到响应之后要执行的代码了. // 前端使用 console.log 打印日志到控制台. (chrome 开发者工具的控制台)console.log("responseBody: " + responseBody);}});}// 直接在 script 里面写的 js 代码, 就是在页面加载时被执行到的. // 发起一个 get 请求, 从服务器获取到数据// get 请求不需要 body, 也就不需要上述 data 和 contentType 属性了. $.ajax({type: 'get', url: 'message',success: function(body) {// 由于响应中已经有 Content-Type: application/json 了, 就不需要使用 parse 方法手动转换了.  // body = JSON.parse(body);// 拿到 container 这个元素let containerDiv = document.querySelector('.container');// 处理服务器返回的响应数据. (json 格式的数组了)for (let i = 0; i < body.length; i++) {// body 是一个数组, 此时 message 也就是 js 对象了. // 这个 message 对象里, 有三个属性, from, to, messagelet message = body[i];// 根据 message 对象构建 html 片段, 把这个片段给显示到网页上. // createElement 方法就能构造出一个 html 标签. // 此时就得到了 <div></div> let div = document.createElement('div');// 还需要往里面设置一个 属性 , class="row" (设置这个属性, 是为了让 css 能够给这个元素设置一些样式)// 此时就得到了 <div class="row"></div>div.className = 'row';// 给这个 div 里设置内容// 此时就得到了 <div class="row">张三 对 李四 说: 我喜欢你很久了</div>div.innerHTML = message.from + " 对 " + message.to + " 说: " + message.message;// 把 div 添加到 containerDiv 的末尾containerDiv.appendChild(div);}}});</script>
</body>
</html>

        页面效果展示：

        这个页面当前已经可以实现把输入的数据进行提交效果；

        

        如上图所示，这里的数据都是在浏览器里保存的，刷新页面/关闭页面之后，数据信息就会消失不见；引入服务器就是为了让我们输入的数据能够长久的保存，同时也希望不同的浏览器/页面中, 都可以看到我们输入的数据；

1.2 引入服务器的目的 

        此处，服务器要实现的功能,主要是两个方面：
        1、页面加载的时候,网页要从服务器这里获取到当前表白数据，(让网页端给服务器发起 http 请求,服务器返回响应里就带着刚才的这些数据)
        2、点击提交的时候，网页就要把用户输入的信息，发送到服务器这边，服务器负责保存；

        在一个网站中,服务器起到的最主要的效果,往往就是"存储数据”，因此服务器这边往往也就需要能够提供两种风格的接口来进行存数据和取数据；

1.3 简单了解前端代码

        1、页面中的 html，描述了网页上都有哪些内容；

        2、 Css

        3、js

         下面的代码 就是js 代码，该部分前端编写逻辑的核心部分；

        html 和 css 都属于“描述性"语言，能够描述一个东西，但是不能表示逻辑。 js 才能描述逻辑，通过这些逻辑主要做两件事：
1、网页和用户的交互；

2、网页和服务器的交互；

        上述这几行代码， 是要选中页面的元素；

        后续要操作元素如下：
1、获取元素中的内容, 对于 input 输入框来说, 就可以拿到用户输入的字符串
2、修改元素中的内容；

        综上所述，

        1、一个 html 中,包含了 html(页面的构成),css(页面样式),js(页面交豆)
        2、js 代码所谓的交互基本的流程，就是先找到 html标签(体现成 js 中的对象，进一步的通过 api 来操作对象的属性 (获得值,修改值....)，至于api 具体是啥也不必关注,但是可以看到,上面的一些“"变量定义",条件,循环,表达式,运算符,函数；

2. 后端服务器部分

2.1 服务器分析

        使用服务器,目的是为了能够在服务器这边存储用户提交的信息,并且能够把信息获取下来，服务器这边就需要给网页提供两个 http 的接口：

        1)、获取消息网页加载的时候, 给服务器发起一个ajax 请求：

        请求：

        GET /message

        响应：

        HTTP/1.1 200 OKContent-Type: application/json

        2)、提交消息

        用户点击提交按钮的时候， ajax 给服务器发一个请求，目的是为了把用户在输入框输入的内容,给发送到服务器

        正式编写代码之前,一定要把前后端交互的接口给确定下来，这个就是后续编写代码的依据：

2.2 代码编写

2.2.1 提交消息

        主要过程如下所示：

1)、先写前端代码,发送请求

2)、再写后端代码,解析请求,构造响应

3)、再写前端代码,解析响应

        刚才的网页给放到 webapp 目录里，tomcat 这样的一个项目，可以包含一些 html, css,js，这些内容都是在 webapp 目录中的；

        2.2.2 编写前端代码

        编写前端代码,发送 http post 请求，如下所示：

 

        ps：本次的学习就到这里了，如果大家感兴趣与的话就请一键三连哦！！！

相关文章：

【Java EE初阶二十五】简单的表白墙（一）

1. 前端部分 1.1 前端代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wid…...

编程日记 2024/2/27 9:10:14

人工智能的新浪潮：探索OpenAI的Sora视频模型及其对未来创作的影响

OpenAI的最新AI视频模型Sora&#xff0c;自发布以来&#xff0c;已成为科技界的热点。Sora的核心能力在于将文本描述转化为高清视频片段&#xff0c;标志着在视频生成领域的一次重大突破。Sora的特点包括使用深度理解语言的能力来准确解释提示&#xff0c;以及生成表达丰富情感…...

编程日记 2024/2/27 9:06:09

【c语言】字符函数和字符串函数(上)

前言 在编程的过程中&#xff0c;我们经常要处理字符和字符串&#xff0c;为了⽅便操作字符和字符串&#xff0c;C语⾔标准库中提供了⼀系列库函数~ 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 前言 1. 字符分…...

编程日记 2024/2/27 9:05:08

React18源码: schedule任务调度messageChannel

React调度原理(scheduler) 在React运行时中&#xff0c;调度中心&#xff08;位于scheduler包&#xff09;是整个React运行时的中枢&#xff08;其实是心脏&#xff09;&#xff0c;所以理解了scheduler调度&#xff0c;就基本掌握了React的核心React两大循环&#xff1a;从宏…...

编程日记 2024/2/27 9:03:06

Jmeter 学习目录

Jmeter 所有内容均以学习为主输出内容&#xff0c;按照最小单位和基础进行输出。 如果有看不懂&#xff0c;或者有不明确的内容&#xff0c;欢迎大家留言说明。 Jmeter系列&#xff08;1&#xff09;Mac Jmeter下载安装启动 Jmeter系列&#xff08;2&#xff09;Jmeter 目录介…...

编程日记 2024/2/27 9:01:04

计算机网络 数据链路层课后题

1.以太网帧有哪些不同的封装格式&#xff1f;他们有何区别和应用场景&#xff1f; 以太网II封装&#xff08;Ethernet II&#xff09;&#xff1a;以太网II封装是最常用的以太网封装格式&#xff0c;也被称为DIX封装。它在数据链路层首部使用6个字节的目的MAC地址和6个字节的源…...

编程日记 2024/2/27 8:55:58

实现验证码功能

Kaptcha 文章目录 Kaptcha介绍插件使用介绍原理引入依赖生成验证码 验证码小项目初始化前端代码约定前后端交互接口接口定义 介绍 Kaptcha 是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具 https://code.google.com/archive/p/kaptcha ⽹上有很多⼈甚⾄公司基于Google的kaptc…...

编程日记 2024/2/27 8:54:57

PyQt6的开发流程（密码生成小程序为例）

PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09; 文章目录 PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09;一、流程介绍与概览1. 界面与逻辑分离的开发流程2. PyQt6的开发流程 二、打开 designer.exe 创建文件三、用QT设计师绘制界面保存成ui1. QT常用…...

编程日记 2024/2/27 8:49:52

思腾云计算中心 | 5千平米超大空间，基础设施完善，提供裸金属GPU算力租赁业务

2021年&#xff0c;思腾合力全资收购包头市易慧信息科技有限公司&#xff0c;正式开启云计算业务。思腾云计算中心占地2400平米&#xff0c;位于包头市稀土高新区&#xff0c;毗邻多家知名企业&#xff0c;地理位置优越&#xff0c;交通便利&#xff0c;是区内重要的信息化产业…...

编程日记 2024/2/27 8:48:51

【Leetcode每日一题】二分查找 - 在排序数组中查找元素的第一个和最后一个位置（难度⭐⭐）（18）

1. 题目解析 Leetcode链接&#xff1a;34. 在排序数组中查找元素的第一个和最后一个位置 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 核心在于找到给定目标值所在的数组下标区间&#xff0c;设计一个O(logn)的算法。 2. 算法原…...

编程日记 2024/2/27 8:47:50

远程连接 vscode 出错 “远程主机可能不符合 glibc 和 libstdc++ VS Code 服务器的先决条件”

原因&#xff1a; vscode 版本是 1.86&#xff0c;服务器上的 glibc 和 libstdc 版本不满足 要求(2.28 和 3.4.25)。 解决&#xff1a; 1、下载 1.85.2&#xff0c;解压直接运行 Code.exe。 2、回退 Remote-ssh 到 0.107.1。 参考&#xff1a; vscode 1.86版本远程ssh不兼容旧…...

编程日记 2024/2/27 8:45:48

Maven入门：Java项目构建和管理的利器

Maven入门&#xff1a;Java项目构建和管理的利器 Maven 是一个项目管理和综合工具&#xff0c;它基于项目对象模型&#xff08;POM&#xff09;概念。Maven 可以管理项目的构建、报告和文档。以下是一篇介绍 Maven 配置和应用的教程文章。 Maven简介 Maven 使用其核心概念 POM…...

编程日记 2024/2/27 8:44:47

《游戏引擎架构》 -- 学习4

资源及文件系统 文件系统 游戏引擎的文件系统API通常提供以下功能&#xff1a; 搜需路径&#xff1a;是含一串路径的字符串&#xff0c;各路径之间以特殊字符&#xff08;如冒号或分号&#xff09;分隔&#xff0c;找文件时就会从这些路径进行搜寻。例如在命令行下执行程序&a…...

编程日记 2024/2/27 8:41:44

Wagtail安装运行并结合内网穿透实现公网访问本地网站界面

文章目录 前言1. 安装并运行Wagtail1.1 创建并激活虚拟环境 2. 安装cpolar内网穿透工具3. 实现Wagtail公网访问4. 固定的Wagtail公网地址 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xf…...

编程日记 2024/2/27 8:36:39

10分钟快速开始SkyWalking结合Springboot项目

10分钟快速开始SkyWalking结合Springboot项目 实习期间&#xff0c;公司让我去学习一下链路追踪如何集成到Springboot项目中。 为此有两个方案&#xff1a; 1.opentelementryjaegerprometheus opentelementry 收集器收集线上的metrics和traces&#xff0c;然后发送给jaeger和p…...

编程日记 2024/2/27 8:34:37

STM32—触摸键

目录 1 、 电路构成及原理图 2 、编写实现代码 3、代码讲解 4、烧录到开发板调试、验证代码 5、检验效果 此笔记基于朗峰 STM32F103 系列全集成开发板的记录。 1 、 电路构成及原理图 触摸键简单的了解就是一次电容的充放电过程。从原理图可以看出&#xff0c;触摸键 …...

编程日记 2024/2/27 8:33:36

python中字典（dict）原理及其操作

原理 Python中的字典&#xff08;Dictionary&#xff09;是一种基于哈希表&#xff08;Hash Table&#xff09;的实现&#xff0c;提供了高效的键值对&#xff08;Key-Value Pair&#xff09;存储和访问机制。了解字典的工作原理有助于更好地理解其性能特性以及为什么在某些情…...

编程日记 2024/2/27 8:32:35

​​​​​​​​​​​​​​.NET Core Web API实现微服务集群部署

​​​​​​​.NET Core Web API实现微服务集群部署 在.NET Core Web API中实现微服务集群部署通常涉及多个步骤&#xff0c;包括服务拆分、容器化、服务注册与发现、负载均衡等。以下是一个简化的步骤指南&#xff0c;用于在.NET Core中构建和部署微服务集群&#xff1a; 服…...

编程日记 2024/2/27 8:29:31

网络安全与信创产业发展：构建数字时代的护城河

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…...

编程日记 2024/2/27 8:20:21

外包干了3个月，技术倒退1年。。。

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…...

编程日记 2024/2/27 8:17:18

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/10/22 23:35:38

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/8/16 7:00:37

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/10/21 0:37:39

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/10/21 23:40:19

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/10/28 1:03:16

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/10/23 16:56:42

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/10/17 7:32:32

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2025/10/29 1:49:43