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

前端开发 -- 自动回复机器人【附完整源码】

news 来源：原创 2025/7/2 12:55:10

一：效果展示

本项目实现了一个简单的网页聊天界面，用户可以在输入框中输入消息，并点击发送按钮或按下回车键来发送消息。机器人会根据用户发送的消息内容，通过关键字匹配来生成自动回复。

二：源代码分享

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>关键字自动回复</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;overflow: hidden;}.chat-title {text-align: center;padding: 10px;font-weight: bold;border-bottom: 2px solid #ccc;}.chat-container {width: 300px;border: 2px solid #ccc;border-radius: 5px;background-color: #fff;display: flex;flex-direction: column;max-height: 90vh;}.chat-window {flex: 1;padding: 10px;overflow-y: auto;border-bottom: 2px solid #ccc;}.chat-window div {display: flex;margin-bottom: 10px;}.user-message {justify-content: flex-end;color: #007bff;}.bot-message {justify-content: flex-start;color: #28a745;}.message-content {display: flex;align-items: center;}.message-content img {width: 30px;height: 30px;border-radius: 50%;margin-right: 5px; }.message-text {max-width: 200px; padding: 5px;border-radius: 5px;word-wrap: break-word; white-space: normal; }.user-message .message-content {gap: 5px;}.user-message .message-text {background-color: #e9f5ff;}.bot-message .message-text {background-color: #d1f9d1;}.input-container {display: flex;padding: 10px;}#userInput {flex: 1;padding: 5px;border: 1px solid #ccc;border-radius: 3px;}#sendButton {padding: 5px 10px;margin-left: 5px;border: 1px solid #ccc;background-color: #007bff;color: #fff;border-radius: 3px;cursor: pointer;}</style>
</head>
<body><div class="chat-container"><div class="chat-title">自动回复机器人</div><div class="chat-window" id="chatWindow"></div><div class="input-container"><input type="text" id="userInput" placeholder="请输入......"><button id="sendButton">发送</button></div></div><script>document.addEventListener('DOMContentLoaded', () => {const chatWindow = document.getElementById('chatWindow');const userInput = document.getElementById('userInput');const sendButton = document.getElementById('sendButton');sendButton.addEventListener('click', sendMessage);userInput.addEventListener('keypress', (e) => {if (e.key === 'Enter') {sendMessage();}});function sendMessage() {const userMessage = userInput.value.trim();if (userMessage) {addMessage(userMessage, 'user');// 使用本地生成的回复const reply = generateAIReply(userMessage);addMessage(reply, 'bot');userInput.value = '';}}function generateAIReply(message) {message = message.toLowerCase();if (message.includes("你好") || message.includes("hi")) {return "你好！有什么我可以帮助你的吗？";} else if (message.includes("你想我吗")) {return "我当然想和你聊天啦！";} else if (message.includes("你在干嘛")) {return "我正在用人类的语言和你聊天呢！";} else if (message.includes("现在几点")) {return "当前时间为：" + new Date().toLocaleTimeString();} else {return "我不太明白你的意思，可以说得更清楚一些吗？";}}function addMessage(message, sender) {const messageElement = document.createElement('div');messageElement.className = sender === 'user' ? 'user-message' : 'bot-message';const messageContent = document.createElement('div');messageContent.className = 'message-content';const text = document.createElement('span');text.className = 'message-text';text.textContent = message;messageContent.appendChild(text);const avatar = document.createElement('img');if (sender === 'user') {avatar.src = '头像1.jpg'; // 用户头像链接messageContent.appendChild(avatar); } else {avatar.src = '头像2.jpg'; // 机器人头像链接messageContent.insertBefore(avatar, text); }messageElement.appendChild(messageContent);chatWindow.appendChild(messageElement);chatWindow.scrollTop = chatWindow.scrollHeight;}});</script>
</body>
</html>

三：代码分析

1.`HTML`结构

<!DOCTYPE html>
<!-- 定义HTML文档的语言为英文 -->
<html lang="en">
<head><meta charset="UTF-8"><!-- 设置视口，使页面在移动设备上以合适的比例显示，宽度等于设备宽度，初始缩放比例为1 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置网页的标题 --><title>关键字自动回复</title><style>/* CSS样式在这里定义,用于美化页面 */</style>
</head>
<body><!-- 定义一个容器，用于包含聊天界面的所有元素 --><div class="chat-container"><!-- 定义聊天窗口的标题 --><div class="chat-title">自动回复机器人</div><!-- 定义聊天窗口，用于显示聊天内容，设置id以便JS操作 --><div class="chat-window" id="chatWindow"></div><!-- 定义一个容器，包含输入框和发送按钮 --><div class="input-container"><!-- 定义一个文本输入框，用户在此输入信息 --><input type="text" id="userInput" placeholder="请输入......"> <!-- 定义一个按钮，用户点击后发送输入框中的内容 --><button id="sendButton">发送</button>            </div></div><script>// JavaScript代码在这里，用于实现页面的交互功能</script>
</body>
</html>

<head>部分：定义了文档的元数据，包括窗口设置和标题，以及内嵌的CSS样式。
<body>部分：包含一个聊天容器，其中包括聊天标题、聊天窗口和输入容器。

2.`CSS`结构


body {font-family: Arial, sans-serif;/* 设置页面整体字体为Arial，如果Arial不可用则使用sans-serif作为备用 */display: flex;/* 使用Flexbox布局，使子元素能够灵活排列 */justify-content: center;/* 水平方向上居中对齐子元素 */align-items: center;/* 垂直方向上居中对齐子元素 */height: 100vh;/* 设置页面高度为视口高度的100%，确保页面占满整个屏幕 */margin: 0;/* 移除默认的页面外边距 */background-color: #f0f0f0;/* 设置页面背景颜色为浅灰色 */overflow: hidden;/* 隐藏超出视口的内容，防止滚动条出现 */
}.chat-title {text-align: center;/* 标题文本居中对齐 */padding: 10px;/* 在标题周围添加内边距，使其与边框有一定距离 */font-weight: bold;/* 设置标题字体为粗体 */border-bottom: 2px solid #ccc;/* 在标题下方添加一条2像素宽的灰色边框 */
}.chat-container {width: 300px;/* 设置聊天容器的宽度为300像素 */border: 2px solid #ccc;/* 为聊天容器添加2像素宽的灰色边框 */border-radius: 5px;/* 设置聊天容器的边框圆角为5像素 */background-color: #fff;/* 设置聊天容器背景颜色为白色 */display: flex;/* 使用Flexbox布局，使聊天窗口和输入框能够灵活排列 */flex-direction: column;/* 设置Flexbox方向为垂直，使子元素垂直排列 */max-height: 90vh;/* 设置聊天容器的最大高度为视口高度的90% */
}.chat-window {flex: 1;/* 使聊天窗口占据可用空间的剩余部分 */padding: 10px;/* 在聊天窗口内部添加内边距 */overflow-y: auto;/* 如果内容超出可视区域，允许垂直滚动 */border-bottom: 2px solid #ccc;/* 在聊天窗口底部添加一条2像素宽的灰色边框 */
}.chat-window div {display: flex;/* 使用Flexbox布局，使消息能够灵活排列 */margin-bottom: 10px;/* 在每个消息下方添加10像素的外边距 */
}.user-message {justify-content: flex-end;/* 将用户消息右对齐 */color: #007bff;/* 设置用户消息文本颜色为蓝色 */
}.bot-message {justify-content: flex-start;/* 将机器人消息左对齐 */color: #28a745;/* 设置机器人消息文本颜色为绿色 */
}.message-content {display: flex;/* 使用Flexbox布局，使头像和文本能够水平排列 */align-items: center;/* 垂直居中对齐头像和文本 */
}.message-content img {width: 30px;/* 设置头像宽度为30像素 */height: 30px;/* 设置头像高度为30像素 */border-radius: 50%;/* 设置头像为圆形 */margin-right: 5px;/* 给头像右边添加5像素的外边距 */
}.message-text {max-width: 200px;/* 控制消息文本的最大宽度 */padding: 5px;/* 在消息文本周围添加内边距 */border-radius: 5px;/* 设置消息文本的边框圆角为5像素 */word-wrap: break-word;/* 确保长单词也能换行 */white-space: normal;/* 允许文本内的空白符正常显示，允许换行 */
}.user-message .message-content {gap: 5px;/* 使用gap属性增加头像和文本之间的间距 */
}.user-message .message-text {background-color: #e9f5ff;/* 设置用户消息背景颜色为浅蓝色 */
}.bot-message .message-text {background-color: #d1f9d1;/* 设置机器人消息背景颜色为浅绿色 */
}.input-container {display: flex;/* 使用Flexbox布局，使输入框和按钮能够水平排列 */padding: 10px;/* 在输入容器内部添加内边距 */
}#userInput {flex: 1;/* 使输入框占据可用空间的剩余部分 */padding: 5px;/* 在输入框内部添加内边距 */border: 1px solid #ccc;/* 为输入框添加1像素宽的灰色边框 */border-radius: 3px;/* 设置输入框的边框圆角为3像素 */
}#sendButton {padding: 5px 10px;/* 在按钮内部添加内边距，上下5像素，左右10像素 */margin-left: 5px;/* 在按钮左边添加5像素的外边距，与输入框保持一定距离 */border: 1px solid #ccc;/* 为按钮添加1像素宽的灰色边框 */background-color: #007bff;/* 设置按钮背景颜色为蓝色 */color: #fff;/* 设置按钮文本颜色为白色 */border-radius: 3px;/* 设置按钮的边框圆角为3像素 */cursor: pointer;/* 当鼠标悬停在按钮上时，显示为手型光标，表示可点击 */
}

布局与对齐：使用Flexbox布局来实现元素的居中对齐和分布，使得聊天界面在不同设备上都能保持良好的显示效果。
样式与主题：通过颜色和背景的设置，区分用户消息和机器人消息，增强用户体验。使用圆角、边距和内边距来增加视觉层次和舒适度。
响应式设计：通过设置最大高度和允许滚动，确保聊天窗口在内容过多时不会破坏页面的整体布局。

3.`JavaScript`结构

document.addEventListener('DOMContentLoaded', () => {// 当DOM内容加载完毕后，执行以下代码const chatWindow = document.getElementById('chatWindow');// 获取页面中ID为'chatWindow'的元素，用于显示聊天消息const userInput = document.getElementById('userInput');// 获取页面中ID为'userInput'的元素，用于用户输入消息const sendButton = document.getElementById('sendButton');// 获取页面中ID为'sendButton'的元素，即发送消息的按钮sendButton.addEventListener('click', sendMessage);// 为发送按钮添加点击事件监听器，点击时调用sendMessage函数userInput.addEventListener('keypress', (e) => {// 为用户输入框添加键盘按键事件监听器if (e.key === 'Enter') {// 如果按下的键是'Enter'（回车键）sendMessage();// 调用sendMessage函数发送消息}});function sendMessage() {// 定义sendMessage函数，用于处理消息发送逻辑const userMessage = userInput.value.trim();// 获取用户输入框的值，并去除首尾空白if (userMessage) {addMessage(userMessage, 'user');// 调用addMessage函数，将用户消息添加到聊天窗口const reply = generateAIReply(userMessage);// 调用generateAIReply函数，生成AI的回复addMessage(reply, 'bot');// 调用addMessage函数，将AI的回复添加到聊天窗口userInput.value = '';// 清空用户输入框}}function generateAIReply(message) {// 定义generateAIReply函数，用于生成AI的回复message = message.toLowerCase();// 将用户消息转换为小写，以便进行不区分大小写的匹配if (message.includes("你好") || message.includes("hi")) {// 如果消息包含"你好"或"hi"return "你好！有什么我可以帮助你的吗？";// 返回AI的问候语}// 其他关键字回复else {// 如果消息不包含上述关键字return "我不太明白你的意思，可以说得更清楚一些吗？";// 返回AI的不理解回复}}function addMessage(message, sender) {// 定义addMessage函数，用于将消息添加到聊天窗口const messageElement = document.createElement('div');// 创建一个div元素，作为消息容器messageElement.className = sender === 'user' ? 'user-message' : 'bot-message';// 根据发送者（用户或AI）设置消息容器的类名const messageContent = document.createElement('div');// 创建一个div元素，作为消息内容的容器messageContent.className = 'message-content';// 设置消息内容容器的类名const text = document.createElement('span');// 创建一个span元素，用于显示消息文本text.className = 'message-text';// 设置消息文本的类名text.textContent = message;// 设置消息文本的内容messageContent.appendChild(text);// 将消息文本添加到消息内容容器中const avatar = document.createElement('img');// 创建一个img元素，用于显示发送者的头像if (sender === 'user') {avatar.src = '头像1.jpg';// 设置头像的图片源为用户头像messageContent.appendChild(avatar);} else {avatar.src = '头像2.jpg';// 设置头像的图片源为AI头像messageContent.insertBefore(avatar, text);}messageElement.appendChild(messageContent);// 将消息内容容器添加到消息容器中chatWindow.appendChild(messageElement);// 将消息容器添加到聊天窗口中chatWindow.scrollTop = chatWindow.scrollHeight;// 将聊天窗口滚动到最底部，以便显示最新消息}
});

前端开发 -- 自动回复机器人【附完整源码】

一：效果展示本项目实现了一个简单的网页聊天界面，用户可以在输入框中输入消息，并点击发送按钮或按下回车键来发送消息。机器人会根据用户发送的消息内容，通过关键字匹配来生成自动回复。二：源代码分享 <!DOCTYP…...

编程日记 2025/7/2 12:55:10

离散数学群（半群，群，交换群,循环群，对称群，置换群,置换,交代群,轮换）详细,复习笔记

半群: 设G是一个非空集合，若为G上的二元代数运算，且满足结合律，则称该代数系统(G,)为半群性质:非空,封闭,结合律独异点: 含有单位元的半裙练习题： 例:设S是一个非空集合，p(S)是S的幂集，∩和U是p(S…...

编程日记 2025/7/1 19:17:35

Android Java 版本的 MSAA OpenGL ES 多重采样

最近多次被小伙伴问到 OpenGL 多重采样，其实前面文章里多次讲过了，就是构建2个缓冲区，多重采样缓冲区和目标解析缓冲区。代码流程 // Framebuffer IDs private int msaaFBO; private int msaaColorBuffer; private int msaaDepthBuffer;pr…...

编程日记 2025/7/2 12:37:04

学习笔记之初识HALCON

目录一、概要二、数据结构 1、图像Image 2、Region区域 3、XLD 三、图像预处理 1、图像的变换与校正 2、图像增强四、图像的形态学处理 1、边界提取 2、孔洞填充 3、骨架五、图像金字塔六、区域分割 1、区域生长 2、区域分裂与合并七、边缘检测 1、Pre…...

编程日记 2025/7/1 15:59:59

嵌入式硬件杂谈（七）IGBT MOS管三极管应用场景与区别

引言：在现代嵌入式硬件设计中，开关元件作为电路中的重要组成部分，起着至关重要的作用。三种主要的开关元件——IGBT（绝缘栅双极型晶体管）、MOSFET（金属氧化物半导体场效应晶体管）和三极管&#…...

编程日记 2025/6/30 23:54:37

【Rust自学】7.1. Package、Crate和定义Module

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 7.1.1. Rust的代码组织代码组织主要包括： 那些细节可以对外暴露，而哪些细节是私有的在作用域内哪些名称有效… …...

编程日记 2025/6/29 16:19:58

【已解决】pyinstaller打包ico图片报错：OSError: [WinError 225] 无法成功完成操作，因为文件包含病毒或潜在的垃圾软件。

起因： pyinstaller加上 --icon 参数打包时报错。命令如下： 解决： 关闭 Windows 的病毒防护即可，步骤如下。点屏幕右下角通知栏，进入“病毒和威胁防护”： 打开： 关闭实时保护&#xff08…...

编程日记 2025/6/28 16:45:11

广东粤万润与时序数据库TDengine携手打造智慧酒店新未来：数据驱动智能化转型

在智能化转型浪潮席卷全球的当下，智慧酒店行业已然成为推进智能生活应用的先锋领域。从智能照明到环境监测，从安防系统到沉浸式影音娱乐，智慧酒店通过技术赋能为用户提供了更加舒适、高效且个性化的服务体验。然而，随着设备的增多…...

编程日记 2025/6/30 3:38:34

基于云计算的分布式文件存储系统设计与实现

基于云计算的分布式文件存储系统设计与实现第一章绪论 1.1 研究背景及意义随着互联网技术的飞速发展，云计算作为一种新兴的计算模式，以其弹性伸缩、按需分配和成本效益高等特点，逐渐成为信息技术领域的研究热点。它为大数据处理、高性能…...

编程日记 2025/6/29 19:15:09

基于顺序表实现队列循环队列的处理

文章目录 1.假溢出的现象2.循环队列3.顺序表实现队列架构4.顺序表模拟实现队列5.设计循环队列（校招难度） 1.假溢出的现象下面的这个就是我们的假溢出的这个现象的基本的来源： 我们的这个队列里面是有9个位置的，我们知道这个队列…...

编程日记 2025/7/2 4:42:07

leecode377.组合总和IV

本题其实是多重背包问题，对于价值和重量都是nums[i]的的物品，求装满这个容量为4的背包共有多少种排列方式如果是组合问题，那么遍历顺序是先物品后背包，这样能保证物品按从小到大顺序依次放置，对于实例1求出来为4&…...

编程日记 2025/7/2 4:44:35

变量与数据类型 - 整型、浮点型、字符型等

引言在编程中，变量和数据类型是基础中的基础。理解它们如何工作以及如何正确使用它们对于编写高效且无误的代码至关重要。本文将详细介绍 C 中的几种基本数据类型：整型、浮点型、字符型等，并通过实例帮助读者更好地理解和掌握这些概念。一…...

编程日记 2025/6/28 13:33:31

selenium学习笔记（二）

文章目录前言设计模式POMPOM概念POM优势POM设计原则POM的实现 selenium的常用操作处理动态元素截图操作勾选复选框多层框架/窗口定位操作下拉框上传文件操作处理弹窗切换窗口拖拽操作如何处理浏览器驱动更新导致的问题selenium与网站监控监听网页内容变化监控网络请求 seleni…...

编程日记 2025/6/28 15:07:49

vue和uniapp中，点击按钮传递当前item对象，并从selectData数组中删除该条item数据

在 Vue 中，可以通过点击按钮传递 item 对象，并从 selectData 数组中删除该条数据。可以使用 Array.prototype.filter() 方法来实现这一点。以下是一个示例：说明数据结构：selectData 是一个包含多个对象的数组，每个对象都有 id 和 name 属性。渲染列表：使用 v-for 指令…...

编程日记 2025/6/28 15:11:24

option {backgroundColor: #1b2735,tooltip: {//提示框组件trigger: axis,//触发类型柱状图axisPointer:{type:shadow} //触发效果移动上去背景效果}, xAxis: [//x轴{type: category,//坐标轴类型离散data: [1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月],//数据axisTick:f…...

编程日记 2025/6/28 16:21:57

OpenHarmony怎么修改DPI密度值？RK3566鸿蒙开发板演示

本文介绍在开源鸿蒙OpenHarmony系统下，修改DPI密度值的方法，触觉智能Purple Pi OH鸿蒙开发板演示，搭载了瑞芯微RK3566四核处理器，Laval鸿蒙社区推荐开发板，已适配全新开源鸿蒙OpenHarmony5.0 Release系统，适…...

编程日记 2025/6/27 21:13:27

KylinOS V10 SP3下编译openGauss与dolphin插件

编译环境 KylinOS v10 sp3gcc 7.3.0make 4.3opengauss 5.0.0 mkdir -p /data/opengauss cd /data/opengauss git clone https://gitee.com/opengauss/openGauss-server.git git clone https://gitee.com/opengauss/Plugin.git wget -c https://opengauss.obs.cn-south-1.myhu…...

编程日记 2025/7/1 8:07:50

【入门】买杯子

描述小明去商店买杯子，他想买价格在 10 到 20 元之间的杯子（含 10 元和 20 元），他看到货架上有 3 个不同价格的杯子，请问最终他买了几个杯子，总共花了多少钱？ 比如：货架上有如下的…...

编程日记 2025/6/28 14:51:46

VIVO C++开发面试题及参考答案

面向过程与面向对象的区别，面向对象后的好处面向过程编程主要关注的是程序的流程，它将一个问题分解为一系列的步骤，通过函数来实现这些步骤，数据和操作这些数据的函数是分离的。例如，在一个简单的计算学生成绩平均值的程序中，我们可能会有一些函数来输入成绩、计算总和、…...

编程日记 2025/7/2 11:35:33

虚拟化 | Proxmox VE 8.x 开源的虚拟化平台快速上手指南

[ 知识是人生的灯塔，只有不断学习，才能照亮前行的道路 ] 0x00 简介说明前言简述描述：作为一个爱折腾的IT打工佬，时刻以学习各类新技术新知识为目标，这不正好有一台部署了VMware vSphere ESXi 虚拟化环境的服务器，由于正好安装其系统的磁盘有坏道，经常导致使用 ESXi 异…...

编程日记 2025/7/1 15:11:59

【原创学习笔记】近期项目中使用的西门子V20变频器总结（下篇）

上一篇我们简单介绍了下现场的变频器，现在我们来聊聊如何用手机控制变频器。手机控制变频器的前提是变频器上必须安装智能模块，现场并为安装此模块，故不作考虑。下面介绍一下如何实现手机或者电脑控制变频器首先如果存在485通信&#x…...

编程日记 2025/6/28 15:01:40

idea 8年使用整理

文章目录前言idea 8年使用整理1. 覆盖application配置2. 启动的时候设置编辑空间大小，并忽略最大空间3. 查询类的关系4. 查看这个方法的引用关系5. 查看方法的调用关系5.1. 查看被调用关系5.2. 查看调用关系 6. 方法分隔线7. 选择快捷键类型8. 代码预览插件9. JReb…...

编程日记 2025/7/1 11:30:03

Bluetooth Spec【0】蓝牙核心架构

蓝牙核心系统由一个主机、一个主控制器和零个或多个辅助控制器组成蓝牙BR/ EDR核心系统的最小实现包括了由蓝牙规范定义的四个最低层和相关协议，以及一个公共服务层协议；服务发现协议（SDP）和总体配置文件要求在通用访问配置文件&a…...

编程日记 2025/6/28 16:52:17

PlantUML 入门使用指南

PlantUML 入门使用指南一、PlantUML介绍二、PlantUML的用途三、PlantUML的语法及示例3.1 用例图（Use Case Diagram）3.2 类图（Class Diagram）3.3 对象图（Object Diagram）3.4 序列图（Sequence Di…...

编程日记 2025/7/1 1:23:15

QT:一个TCP客户端自动连接的测试模型

版本 1:没有取消按钮测试效果： 缺陷： 无法手动停止测试代码 CMakeLists.txt cmake_minimum_required(VERSION 3.19) project(AutoConnect LANGUAGES CXX)find_package(Qt6 6.5 REQUIRED COMPONENTS Core Widgets Network)qt_standard_project_setup(…...

编程日记 2025/6/27 21:03:07

IOS safari 播放 mp4 遇到的坎儿

起因事情的起因是调试 IOS 手机下播放服务器接口返回的 mp4 文件流失败。对于没调试过移动端和 Safari 的我来说着实费了些功夫，网上和AI也没有讲明白。好在最终大概理清楚了，在这里整理出来供有缘人参考。问题因为直接用 IOS 手机的浏览器打开页面…...

编程日记 2025/7/2 4:34:09

LLM常见面试题（26-30题）--langchain篇

26，什么是langchain? 一个局域语言模型的框架，用于构建聊天机器人、生成式回答、摘要等功能。核心思想是将不同的组件“链”在一起，连接大语言模型和外部资源，以创建更高级的语言模型应用。使得开发人员可以快速开发原型系统和…...

编程日记 2025/6/28 16:49:19

【Python运维】构建基于Python的自动化运维平台：用Flask和Celery

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界在现代IT运维中，自动化运维平台扮演着至关重要的角色，它能够显著提高运维效率，减少人为错误，并且增强系统的可维护性。本文将引导读者如…...

编程日记 2025/7/2 4:25:42

socket编程(C++/Windows)

相关文章推荐： Socket 编程基础面试官，不要再问我三次握手和四次挥手 TCP的三次握手与四次挥手参考视频： https://www.bilibili.com/video/BV1aW4y1w7Ui/?spm_id_from333.337.search-card.all.click TCP通信流程服务端 #include<…...

编程日记 2025/7/2 5:10:14

Spring Boot介绍、入门案例、环境准备、POM文件解读

文章目录 1.Spring Boot(脚手架)2.微服务3.环境准备3.1创建SpringBoot项目3.2导入SpringBoot相关依赖3.3编写一个主程序；启动Spring Boot应用3.4编写相关的Controller、Service3.5运行主程序测试3.6简化部署 4.Hello World探究4.1POM文件4.1.1父项目4.1.2父项目的父…...

编程日记 2025/6/28 16:08:05

【hackmyvm】deba靶机wp

tags: HMVnodejs反序列化CVE-2017-5941wine命令定时任务 1. 基本信息^toc 文章目录 1. 基本信息^toc2. 信息收集2.1. 端口扫描2.2. 目录扫描 3. nodejs反序列化 (CVE-2017-5941)4. www-data提权low用户5. 定时任务提权6. wine命令提权root6.1. 利用CS获取root 靶机链接 http…...

编程日记 2025/7/2 8:38:12

新浪微博大数据面试题及参考答案（数据开发和数据分析）

介绍一下你所掌握的计算机网络和操作系统相关知识计算机网络：计算机网络是将地理位置不同的具有独立功能的多台计算机及其外部设备，通过通信线路连接起来，在网络操作系统，网络管理软件及网络通信协议的管理和协调下，实现资源共享和信息传递的计算机系统。我掌握了网络协议…...

编程日记 2025/7/1 21:20:21

去除 el-input 输入框的边框（element-ui@2.15.13）

dgqdgqdeMac-mini spid-admin % yarn list --pattern element-ui yarn list v1.22.22 └─ element-ui2.15.13 ✨ Done in 0.23s.dgqdgqdeMac-mini spid-admin % yarn list vue yarn list v1.22.22 warning Filtering by arguments is deprecated. Please use the pattern opt…...

编程日记 2025/6/30 23:45:33

一：效果展示

二：源代码分享

三：代码分析

1.HTML结构

2.CSS结构

3.JavaScript结构

相关文章：

1.`HTML`结构

2.`CSS`结构

3.`JavaScript`结构