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

实现服务器版本的表白墙

news 2026/2/7 10:03:22

目录

初始前端代码

网页初始效果 

一、确定接口

 二、编写代码

2.1 创建项目七步走

1、创建Maven项目 

 2、引入依赖

3、构建目录

4、编写代码

5、打包、部署  ​编辑

7、验证代码 

三、具体的代码逻辑

3.1 服务器——两个服务接口

 3.2 前端页面的代码

3.2.1 前端存档代码

3.2.2  前端读档代码

初始前端代码

<!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>
</head>
<body>
<!-- 通过内部样式style标签，引入CSS样式 -->
<style>*{/* 首先先去除浏览器样式 *//* 将 内外边距设置为0,设置盒子模型为向内挤压 */margin: 0;padding: 0;box-sizing: border-box;}.containner{width: 100%;}h3{/* 文本居中 */text-align: center;/* 上下边距为 20px，左右边距为0 */padding: 20px 0;font-size: 24px;}p{text-align: center;color: #666;padding: 10px 0;}.row{width: 400px;height: 50px;/* 上下外边距为零，左右外边距自适应 *//* 就是元素水平居中操作 */margin: 0 auto;/* 弹性布局 */display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;}.row span{width: 60px;font-size: 17px;}.row input{width: 300px;height: 40px;line-height: 40px;font-size: 20px;text-indent: 0.5em;outline: none;}.row #submit{width: 360px;height: 40px;font-size: 20px;line-height: 40px;margin: 0 auto;color: white;background-color: orange;border: none;border-radius: 15px;outline: none;}/* 当鼠标点击按钮的时候，会改变按钮颜色 */.row #submit:active{background-color: grey;}</style>
<div class="container"><h3>表白墙</h3><p>输入后点击提交，会将信息显示在表格中</p><br><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><script>let submitBtn = document.querySelector('#submit');submitBtn.onclick = function(){// 1、获取 3个input 文本框中的数据let inputs = document.querySelectorAll('input');let from = inputs[0].value;let to = inputs[1].value;let say = inputs[2].value;if(from == ''|| to == '' || say == ''){// 用户填写的数据，并不完整。所以不提交。return;}// 2、生成一个新的 div，内容就是 三个 input 文本框的内容拼接// 再把这个 元素，挂在DOM树上。let newDiv = document.createElement('div');newDiv.innerHTML = from + "对" + to +"说：" + say;newDiv.className = 'row';// 将新建节点，挂在 container 这个节点下面let container = document.querySelector('.container');container.appendChild(newDiv);}</script>
</body>
</html>

网页初始效果 

之前已经写了表白墙页面.
有非常严重的问题:
        1.如果刷新页面/关闭页面重开,之前输入的消息就不见了!!
        2.如果一个机器上输入了数据,第二个机器上是看不到的(这些数据都是在本地浏览器中)

解决思路:

        让服务器来存储用户提交的数据. 由服务器保存当有新的浏览器打开页面的时候,从服务器获取数据。因为当下的信息记录，只是保存在 页面 / 内存 里，因此 信息记录是及其容易丢失的。想要做到真正持久化存储，我们需要将其信息记录 存入到 服务器 当中。

一、确定接口

首先我们要明白 这个页面（客户端） 该如何 与 服务器 进行交互。

进一步来说：约定前后端交互的接口。 

  • 请求是啥样的
  • 响应是啥样的
  • 浏览器啥时候发这个请求
  • 浏览器按照啥样的格式来解析.....

这个操作过程，其实就是在自定义应用层协议。
我们既然是搞一个服务器，服务器就得提供一些服务。 

哪些环节涉及到前后端交互 
        1.点击提交浏览器把表白信息发到服务器这里

        2.页面加载浏览器从服务器获取到表白信息

 第一个接口服务的触发条件：

当用户点击 “提交按钮” 的时候，就会给 发送一个 HTTP 请求。
让服务器 把这个信息 存下来。
 
约定好，为了实现这个效果，客户端发送一个什么样的 HTTP 请求，服务器返回一个什么样的 HTTP 响应。

第二个接口服务的触发条件：
当页面加载的时候，就需要从服务器获取到曾经存储的的消息内容。

 二、编写代码

确定好接口之后，就可以编写代码了。

现在的我们即需要编写后端代码，也需要编写前端代码。
在实际工作中，一个项目，前端和后端是“两个人 / 两个小组”分别负责的。
此时两个人就是在并行的开发，前端的负责前端，后端的负责后端。
两边代码一写完，放在一起，测试一下，俗称 “联调” 。
如果 联调的结果，没有问题，那么这个项目也就完成了。 

为了避免程序杂乱。我们新建一个项目来完成“表白墙”。
还记得那7个步骤嘛？

2.1 创建项目七步走

1、创建Maven项目 

 2、引入依赖

  <dependencies><!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.14.1</version></dependency></dependencies><packaging>war</packaging><build><finalName>MessageWall</finalName></build>

3、构建目录

<!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name>Archetype Created Web Application</display-name>
</web-app>

4、编写代码

@WebServlet("/message")
public class MessageServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.getWriter().write("dopost");}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.getWriter().write("doget");}
}

5、打包、部署  

注意：
Smart Tomcat 并不是真的把 项目 打包了！！！
其实是把 webapp 目录 作为 Tomcat 启动的一个参数，给设定进去了。
让Tomcat 直接从这个指定目录中加载 webapp。
 
这么说吧：让Tomcat直接从 webapps 中 加载 war包，不是唯一的出路！
Smart Tomcat 相当于是走了一个捷径，从而节省了打包的过程。
 
就比如现在，我使用了 Smart Tomcat 进行 打包 和 部署。
照理来说：此时 MessageWall的 war包，应该处于 Tomcat目录中的 webapps 路径底下存在？ 

你会发现 MessageWall 的 war 包，压根就不在这个 目录底下！！！ 
 
其实 这两步是可以省略的至于 Context Path，配置 Smart Tomcat 的时候，不是有默认的路径吗？
直接用就行了！只要你输入上下文路径的时候，别输入错误就行！！
至于 第一行的名字，这个你可以随便去个名字，它不影响代码的执行！ 

7、验证代码 

三、具体的代码逻辑

既然代码执行起来没有问题，我们实现具体的代码逻辑

3.1 服务器——两个服务接口

 

 3.2 前端页面的代码

3.2.1 前端存档代码

此时，服务器的两个服务接口，我们就完成了。 

下面，我们就来编写前端页面的代码:

1、把前面写的前端页面代码拷贝过来

  2、再在之前的代码基础上，加上ajax的操作。(关键操作)

引入jquery：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

 但是这里网页一刷新，下面的内容还是会消失

这是因为我们只有客户端发给服务器的代码（存档），没有服务器写给客户端的代码（读档）

3.2.2  前端读档代码

接下来让我们实现一下读档的代码~~~

让浏览器ajax发送一个GET请求

问题： 

当前数据是在内存(变量) 中保存的，只要重启服务器数据就又没了
要想持久化保存,就需要写入文件中(硬盘)

        1.直接使用 流对象 写入文本文件

        2.借助数据库.（后面再写一篇博客~~）

相关文章：

实现服务器版本的表白墙

目录 初始前端代码 网页初始效果 一、确定接口 二、编写代码 2.1 创建项目七步走 1、创建Maven项目 2、引入依赖 3、构建目录 4、编写代码 5、打包、部署 ​编辑 7、验证代码 三、具体的代码逻辑 3.1 服务器——两个服务接口 3.2 前端页面的代码 3.2.1 前端存档…...

编程日记 2023/4/21 15:37:57

TensorFlow 2 和 Keras 高级深度学习：6~10

原文&#xff1a;Advanced Deep Learning with TensorFlow 2 and Keras 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 深度学习 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 不要担心自己的形象&#x…...

编程日记 2023/4/21 15:32:56

unity，制作一个环状滑动条

介绍 unity&#xff0c;制作一个环状滑动条 方法 1.导入png图片素材2.新建一个滑动条&#xff0c;两者图片都设置为图片3.调节slider的参数4.调节backgroud的参数5.fill area、fill的参数同上。 得到两个叠加的圆环。6.设置fill的背景颜色为红色7.设置fill填充方式&#xff0…...

编程日记 2023/4/21 15:27:54

2023-04-17 算法面试中常见的树和递归问题

二叉树和递归 0 LeetCode297 二叉树的序列化和反序列化 序列化是将一个数据结构或者对象转换为连续的比特位的操作&#xff0c;进而可以将转换后的数据存储在一个文件或者内存中&#xff0c;同时也可以通过网络传输到另一个计算机环境&#xff0c;采取相反方式重构得到原数据…...

编程日记 2023/4/21 15:22:53

3分钟通过日志定位bug，这个技能测试人必须会

♥ 前 言 软件开发中通过日志记录程序的运行情况是一个开发的好习惯&#xff0c;对于错误排查和系统运维都有很大帮助。 Python 标准库自带了强大的 logging 日志模块&#xff0c;在各种 python 模块中得到广泛应用。 一、简单使用 1. 入门小案例 import logging logging.ba…...

编程日记 2023/4/21 15:17:52

【论文总结】V-Shuttle：可扩展和语义感知的 Hypervisor 虚拟设备模糊测试

介绍 这是来自2021 CCS的一篇论文&#xff0c;作者有GaoningPan, Xingwei Lin, Xuhong Zhang, Yongkang Jia, Shouling Ji, Chunming Wu, Xinlei Ying, Jiashui Wang, Yanjun Wu。该论文提出V-shuttle的新框架来执行管控程序的模糊测试&#xff0c;该框架执行可扩展和语义感知…...

编程日记 2023/4/21 15:12:51

一篇文章让你搞懂TypeScript中的typeof()、keyof()是什么意思

TypeScript中的typeof&#xff08;&#xff09;、keyof&#xff08;&#xff09;是什么意思&#xff1f; 知识回调&#xff08;不懂就看这儿&#xff01;&#xff09;场景复现核心干货&#x1f447;&#x1f447;&#x1f447;举例引入字面量类型&#xff08;literal types&…...

编程日记 2023/4/21 15:07:49

【机会约束、鲁棒优化】机会约束和鲁棒优化研究优化【ccDCOPF】研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/4/21 15:02:48

4月想跳槽的同学，没有更好的选择，可以去美团

在美团干了半年&#xff0c;说一下自己的感受&#xff0c;美团是一家福利中等&#xff0c;工资待遇中上&#xff0c;高层管理团队强大&#xff0c;加班强度一般&#xff0c;技术不错&#xff0c;办公环境一般&#xff0c;工作氛围中上&#xff0c;部门差距之间工作体验差距巨大…...

编程日记 2023/4/21 14:57:47

从输入url到页面展现（一）从浏览器解析url开始

前端面试有一道很考验人的问题&#xff0c;那就是&#xff1a;请你说一下从用户从输入url到页面展现的过程是怎样的&#xff1f;在接下来的一段时间呢&#xff0c;狗哥会从这一问题出发&#xff0c;开始剖析这个过程&#xff0c;希望可以让更多的小伙伴掌握到这个过程&#xff…...

编程日记 2023/4/21 14:52:45

购物 · 礼物

标题 前言必学场景词汇及用法书店花店玩具店讨价还价情境常用单词书店花店玩具店前言 加油 必学场景词汇及用法 书店 1.book store / book shop 书店 I browsed through the book store, but I didn’t find the book I was looking for. 我把书店里的书浏览了一番，但是没…...

编程日记 2023/5/31 10:32:50

可视化图表API格式要求有哪些？Sugar BI详细代码示例（2）

Sugar BI中的每个图表可以对应一个数据 API&#xff0c;用户浏览报表时&#xff0c;选定一定的过滤条件&#xff0c;点击「查询」按钮将会通过 API 拉取相应的数据&#xff1b;前面说过&#xff0c;为了确保用户数据的安全性&#xff0c;Sugar BI上的所有数据请求都在Sugar BI的…...

编程日记 2023/4/21 14:42:43

153. 寻找旋转排序数组中的最小值

已知一个长度为 n 的数组&#xff0c;预先按照升序排列&#xff0c;经由 1 到 n 次 旋转 后&#xff0c;得到输入数组。例如&#xff0c;原数组 nums [0,1,2,4,5,6,7] 在变化后可能得到&#xff1a; 若旋转 4 次&#xff0c;则可以得到 [4,5,6,7,0,1,2] 若旋转 7 次&#xff0…...

编程日记 2023/4/21 14:37:42

Linux 文件描述符

Linux 文件描述符 Linux 中一切皆文件&#xff0c;比如 C 源文件、视频文件、Shell脚本、可执行文件等&#xff0c;就连键盘、显示器、鼠标等硬件设备也都是文件。 一个 Linux 进程可以打开成百上千个文件&#xff0c;为了表示和区分已经打开的文件&#xff0c;Linux 会给每个…...

编程日记 2023/5/30 6:17:28

第17章_反射机制

第17章_反射机制 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 本章专题与脉络 1. 反射(Reflection)的概念 1.1 反射的出现背景 Java程序中&#xff0c;所有的对象都有两种类型&#xff1a;编…...

编程日记 2023/4/21 14:27:39

使用VBA小程序提高资产清查效率

资产清查是一件相当烦人的工作&#xff0c;去年使用LayUIPHPMS SQL Server 2014写了一个资产清查的程序&#xff0c;可惜写完了&#xff0c;LayUI已经停止更新了&#xff0c;就没有再完善下去&#xff0c;数据也没有更新&#xff0c;等于就废了。 今年又要进行资产清查&#xf…...

编程日记 2023/5/31 20:10:30

JavaSE学习进阶day07_02 异常

第三章 异常 3.1 异常概念 异常&#xff0c;就是不正常的意思。在生活中:医生说,你的身体某个部位有异常,该部位和正常相比有点不同,该部位的功能将受影响.在程序中的意思就是&#xff1a; 异常 &#xff1a;指的是程序在执行过程中&#xff0c;出现的非正常的情况&#xff0…...

编程日记 2023/4/21 14:17:36

操作系统学习笔记

文章目录 操作系统虚拟内存锁缓存机制CPU性能指标进程、线程文件管理系统 操作系统 操作系统是控制应用程序的执行&#xff0c;并充当应用程序和计算机硬件之间的接口。在计算机系统中&#xff0c;处于最外层的是&#xff08;应用软件&#xff09; 。 面向用户的就是外层的&am…...

编程日记 2023/5/31 20:23:20

【Spring Boot】SpringBoot设计了哪些可拓展的机制？

文章目录 前言SpringBoot核心源码拓展Initializer拓展监听器ApplicationListenerBeanFactory的后置处理器 & Bean的后置处理器AOP其他的拓展点 前言 当我们引入注册中心的依赖&#xff0c;比如nacos的时候&#xff0c;当我们启动springboot&#xff0c;这个服务就会根据配置…...

编程日记 2023/4/21 14:07:33

《程序员面试金典（第6版）》面试题 10.10. 数字流的秩

题目描述 假设你正在读取一串整数。每隔一段时间&#xff0c;你希望能找出数字 x 的秩(小于或等于 x 的值的个数)。请实现数据结构和算法来支持这些操作&#xff0c;也就是说&#xff1a; 实现 track(int x) 方法&#xff0c;每读入一个数字都会调用该方法&#xff1b; 实现 g…...

编程日记 2023/5/31 2:09:36

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2026/2/5 4:49:43

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/2/5 4:39:34

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/10/16 14:46:22