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

实现服务器版本的表白墙

news 2026/5/18 10:37:16

目录

初始前端代码

网页初始效果 

一、确定接口

 二、编写代码

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

10分钟掌握Autovisor：智慧树网课自动化学习的完整解决方案

10分钟掌握Autovisor&#xff1a;智慧树网课自动化学习的完整解决方案 【免费下载链接】Autovisor 2025智慧树刷课脚本 基于Python Playwright的自动化程序 [有免安装版] 项目地址: https://gitcode.com/gh_mirrors/au/Autovisor 还在为繁重的智慧树网课任务而烦恼吗&am…...

编程新知 2026/5/17 8:21:50

城通网盘高速解析终极指南：如何免费实现40倍下载提速

城通网盘高速解析终极指南&#xff1a;如何免费实现40倍下载提速 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 你是否厌倦了城通网盘那令人抓狂的蜗牛下载速度&#xff1f;每次下载大文件都要面对漫长…...

编程新知 2026/5/17 8:21:50

AI模型部署实战：基于FastAPI与Tauri构建OpenClaw模型GUI应用

1. 项目概述与核心价值最近在AI应用开发圈里&#xff0c;一个名为“GrahamMiranda-AI/openclaw-model-gui”的项目引起了我的注意。乍一看这个标题&#xff0c;它融合了“openclaw-model”和“gui”两个关键部分&#xff0c;这让我立刻联想到一个典型的场景&#xff1a;一个已经…...

编程新知 2026/5/17 7:29:46

AI驱动全栈开发：Cursor集成模板与高效协作实践

1. 项目概述&#xff1a;当AI代码助手遇上全栈开发最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Cursor-FullStack-AI-App”。光看名字&#xff0c;你大概能猜到它和Cursor这个AI编程工具&#xff0c;以及全栈应用开发有关。作为一个在前后端都摸爬滚打过多年的开发者…...

编程新知 2026/5/17 6:31:51

智能体开发实战：从框架选型到部署优化的完整指南

1. 项目概述&#xff1a;一个为智能体开发者准备的“军火库”如果你正在或打算踏入智能体&#xff08;Agent&#xff09;开发这个领域&#xff0c;那么你很可能已经体会过那种“万事开头难”的迷茫。从选择哪个框架开始&#xff0c;到如何设计一个有效的智能体工作流&#xff0…...

编程新知 2026/5/17 5:33:40

碳排放混合时间窗集装箱运输调度【附算法】

✨ 长期致力于集装箱运输VRP、混合时间窗、碳排放、多目标优化、NSGA-Ⅱ、蚁群算法研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;经济性与紧急性双目…...

编程新知 2026/5/18 9:26:45

从理论到实践：三维形状上下文(3DSC)如何构建鲁棒的点云局部描述符

1. 为什么我们需要三维形状上下文(3DSC) 想象一下你正在玩一个拼图游戏&#xff0c;但所有碎片都被随机撒上了胡椒粉&#xff0c;有些碎片还被书本盖住了一角。这就是计算机处理含噪声、遮挡的点云数据时的真实处境。在机器人导航、自动驾驶或者工业质检中&#xff0c;我们经常…...

编程新知 2026/5/17 5:04:27

量子误差缓解：Bhattacharyya距离与保形预测的应用

1. 量子噪声与误差缓解的核心挑战在当前的NISQ&#xff08;Noisy Intermediate-Scale Quantum&#xff09;时代&#xff0c;量子计算机面临的最大障碍就是噪声和误差问题。这些噪声主要来源于量子比特与环境之间的相互作用、门操作的不完美性以及测量误差等。以一个典型的超导量…...

编程新知 2026/5/17 4:20:16

java jvm知识点

下面给你一份 Java JVM 知识点全景总结&#xff08;面试 实战级&#xff09;&#xff0c; 覆盖 内存结构 → 垃圾回收 → 类加载 → 调优 → 面试高频&#xff0c;适合 中高级 Java 面试。一、JVM 是什么&#xff1f;JVM&#xff08;Java Virtual Machine&#xff09;是 Java …...

编程新知 2026/5/17 2:15:35

G-Helper终极指南：3分钟让你的华硕笔记本性能翻倍！

G-Helper终极指南&#xff1a;3分钟让你的华硕笔记本性能翻倍&#xff01; 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zen…...

编程新知 2026/5/17 1:07:01