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

实现服务器版本的表白墙

news 2025/12/20 0:09:25

目录

初始前端代码

网页初始效果 

一、确定接口

 二、编写代码

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

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/12/13 20:03:16

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/12/19 13:41:56

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/12/19 22:49:25

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

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

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

编程新知 2025/11/25 4:59:47

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/12/15 11:10:54

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2025/12/13 7:11:33

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/12/14 1:46:19