常见问题QA的前端代码
这个的后端代码参见此文
使用语言向量建立常见问题的模糊搜索-CSDN博客https://blog.csdn.net/chenchihwen/article/details/144207262?spm=1001.2014.3001.5501
这段代码实现了一个简单的问答页面,页面分为左右两部分,左侧用于展示对话记录,右侧用于用户输入问题并提交,获取答案后在对应区域显示答案,同时会将每一轮的问答信息添加到对话记录中进行展示,整体通过 HTML 结构定义页面布局,结合 JavaScript 实现交互功能。
HTML 部分详细分析
- 文档结构与头部设置(
<head>
部分):
<head><meta charset="UTF-8"><title>问答测试</title><style>...(内联CSS样式,后续单独分析)</style>
</head>
- 首先通过
<meta charset="UTF-8">
指定了文档的字符编码为 UTF-8,确保能正确显示各种字符。 <title>
标签定义了页面的标题为 “问答测试”,会显示在浏览器的标题栏。- 内联的
<style>
标签中定义了页面的样式规则,用于控制页面元素的外观呈现。
- 页面主体结构(
<body>
部分):
<body><div class="main-container"><div class="conversation-log-container"><h2 class="conversation-title">对话记录</h2><div id="conversationDiv"></div></div><div class="question-answer-container"><h1 class="qa-title">提交问题与答案显示</h1><form id="questionForm" action="/process_question" method="post"><label for="user_question">请输入你的问题:</label><br><input type="text" id="user_question" name="user_question" required><br><input type="submit" value="提交"></form><div id="answerDiv"></div></div></div>
</body>
<body>
标签内是页面的主体内容,整体采用了flex
布局(由外层的.main-container
类样式控制),将页面划分为左右两部分来展示不同的功能区域。- 左侧对话记录区域(
.conversation-log-container
):- 包含一个
<h2>
标题标签,显示 “对话记录” 字样,用于提示该区域的作用。 - 有一个空的
<div>
元素,其id
为conversationDiv
,后续通过 JavaScript 动态往里面添加对话记录的具体内容。
- 包含一个
- 右侧提交问题与答案显示区域(
.question-answer-container
):- 首先有一个
<h1>
标题标签,显示 “提交问题与答案显示”,表明该区域功能。 - 包含一个
<form>
表单元素,其id
为questionForm
,action
属性指向"/process_question"
(对应后端处理问题的接口,和之前 Python 代码中的服务器路由相关联),method
属性为"post"
表示以 POST 方式提交表单数据。表单内有一个<label>
标签用于提示用户输入问题,一个<input>
文本框用于用户输入具体问题(设置了required
属性要求用户必须输入内容),还有一个<input>
提交按钮用于提交表单。 - 还有一个空的
<div>
元素,其id
为answerDiv
,用于在提交问题后通过 JavaScript 获取后端返回的答案并展示在此处。
- 首先有一个
CSS 样式部分详细分析(<style>
内联样式)
- 页面整体样式(
body
选择器):
body {font-family: Arial, sans-serif;background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;padding: 0;
}
- 设置了页面整体的字体为
Arial
或无衬线字体(sans-serif
作为备选),背景颜色为浅灰色(#f4f4f4
)。 - 利用
flex
布局将页面内容在水平和垂直方向上进行居中对齐,设置最小高度为视口高度(100vh
),并去除了页面默认的外边距和内边距。
- 主容器样式(
.main-container
选择器):
.main-container {display: flex;width: 1000px;
}
定义了主容器采用flex
布局,宽度为1000px
,用于划分左右两部分的功能区域。
3. 左侧对话记录容器样式(.conversation-log-container
选择器):
.conversation-log-container {background-color: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);width: 450px;/* height: 1000px; */
}
- 将对话记录容器的背景色设置为白色(
#fff
),添加了内边距为20px
,设置了圆角边框(半径为5px
)以及一个淡淡的阴影效果(box-shadow
属性),使其在页面上有一定的立体感和视觉区分度。 - 宽度设置为
450px
,可以根据实际需求调整这个宽度值,注释掉的height
属性若启用可固定容器高度,目前采用默认高度由内容撑开的方式。
- 对话记录标题样式(
h2.conversation-title
选择器):
h2.conversation-title {color: #333;
}
设置对话记录标题的字体颜色为深灰色(#333
),使其与整体页面风格协调且有一定的视觉层次。
5. 对话记录展示区域样式(#conversationDiv
选择器):
#conversationDiv {margin-top: 20px;max-height: 450px;overflow-y: auto;font-family: Arial, sans-serif;
}
- 给对话记录展示区域添加了顶部外边距为
20px
,设置了最大高度为450px
,并当内容超出这个高度时启用垂直滚动条(overflow-y: auto
)来查看更多对话记录内容,字体同样遵循页面整体设置的Arial
或无衬线字体风格。
- 对话记录单项样式(
.conversation-item
选择器):
.conversation-item {margin-bottom: 10px;padding: 10px;border-bottom: 1px solid #ccc;white-space: pre-line; /* 让对话记录中的内容也能折行显示 */
}
.conversation-item:last-child {border-bottom: none;
}
- 每个对话记录单项有底部外边距为
10px
,内边距为10px
,并且底部有一条浅灰色(#ccc
)的边框用于区分不同的对话记录项,最后一项通过:last-child
伪类去除了底部边框,使其视觉上更简洁。 white-space: pre-line
属性设置让对话记录中的文本内容可以按照正常的文本换行规则进行折行显示,方便展示较长的问答内容。
- 问题文本样式(
.question
选择器):
.question {font-weight: bold;
}
将对话记录中的问题文本设置为加粗字体,便于区分问题和答案部分,增强可读性。
8. 右侧提交问题与答案显示容器样式(.question-answer-container
选择器):
.question-answer-container {background-color: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);width: 550px;margin-left: 50px;
}
和左侧对话记录容器类似,设置了白色背景、内边距、圆角边框、阴影效果等,宽度设置为550px
,并且通过margin-left
属性设置了与左侧容器的间距为50px
,使其在页面上合理布局。
9. 右侧标题样式(h1.qa-title
选择器):
h1.qa-title {color: #333;
}
设置右侧区域标题的字体颜色为深灰色(#333
),保持页面整体视觉风格的一致性。
10. 表单样式(form#questionForm
选择器):
form#questionForm {text-align: center;
}
将表单内的元素在水平方向上进行居中对齐,让页面布局看起来更整齐美观。
11. 标签样式(label
选择器):
label {display: block;margin-bottom: 10px;
}
使每个<label>
标签单独占一行显示,并设置了底部外边距为10px
,方便页面排版和阅读提示信息。
12. 输入框样式(input[type="text"]
选择器):
input[type="text"] {width: 100%;padding: 10px;margin-bottom: 20px;border: 1px solid #ccc;border-radius: 3px;
}
定义了文本输入框的样式,宽度占满父容器(100%
),添加了内边距为10px
,底部外边距为20px
,设置了浅灰色的边框以及较小的圆角边框效果,使其外观简洁且符合常见的输入框设计风格。
13. 提交按钮样式(input[type="submit"]
选择器):
input[type="submit"] {background-color: #007BFF;color: #fff;padding: 10px 20px;border: none;border-radius: 3px;cursor: pointer;
}
将提交按钮的背景色设置为蓝色(#007BFF
,常见的按钮强调色),字体颜色为白色,添加了内边距,去除了边框,设置了小的圆角边框效果,并添加了鼠标指针悬停变为手型(cursor: pointer
)的交互效果,使其在页面上很容易被识别和操作。
14. 答案显示区域样式(#answerDiv
选择器):
#answerDiv {white-space: pre-line;margin-top: 20px;word-break: break-all; /* 确保长文本能正常换行显示 */
}
和对话记录展示区域类似,设置了顶部外边距为20px
,white-space: pre-line
让内容可以按正常文本换行规则显示,同时添加了word-break: break-all
属性确保长文本能在合适的位置正常换行,避免出现文本超出容器宽度而显示不全的情况。
JavaScript 部分详细分析
- 全局变量定义与表单提交事件监听:
// 用于存储对话记录的数组
var conversation = [];document.getElementById('questionForm').addEventListener('submit', function (e) {e.preventDefault();var questionInput = document.getElementById('user_question');var questionText = questionInput.value;var xhr = new XMLHttpRequest();xhr.open('POST', '/process_question', true);xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {var answerDiv = document.getElementById('answerDiv');// 使用 innerHTML 将响应文本当作 HTML 内容解析,使图片、超链接等能正确显示answerDiv.innerHTML = xhr.responseText;// 将本次的问题和答案添加到对话记录数组中conversation.push({question: questionText,answer: xhr.responseText});// 清空输入框,方便继续提问questionInput.value = "";// 重新渲染对话记录展示区域renderConversation();}};xhr.send('user_question=' + encodeURIComponent(questionText));
});
- 首先定义了一个名为
conversation
的全局数组,用于存储每一轮问答的信息(问题和对应的答案)。 - 通过
document.getElementById
获取到页面中的表单元素,并给其添加submit
事件监听器。当用户提交表单时:- 调用
e.preventDefault()
阻止表单默认的提交行为,避免页面刷新。 - 获取用户在输入框中输入的问题文本内容。
- 创建一个
XMLHttpRequest
对象用于发送 HTTP 请求到后端("/process_question"
这个接口,对应后端 Python 代码中处理问题的路由),设置请求方式为POST
,并设置请求头的Content-Type
为"application/x-www-form-urlencoded"
。 - 给
xhr
对象的onreadystatechange
事件绑定回调函数,当请求的状态变为4
(表示请求已完成)且状态码为200
(表示成功)时:- 获取页面中用于显示答案的
<div>
元素,将后端返回的响应文本通过innerHTML
属性赋值给该元素,这样可以解析响应文本中的 HTML 内容(比如如果答案中有图片、超链接等元素能正确显示)。 - 将本次的问题和答案以对象的形式添加到
conversation
数组中。 - 清空输入框内容,方便用户继续提问。
- 调用
renderConversation
函数重新渲染对话记录展示区域,使其能及时更新显示最新的问答信息。
- 获取页面中用于显示答案的
- 最后通过
xhr.send
方法发送包含用户问题的请求数据,需要对问题文本进行encodeURIComponent
编码,以符合 URL 编码规范。
- 调用
- 对话记录渲染函数(
renderConversation
):
// 渲染对话记录展示区域的函数
function renderConversation() {var conversationDiv = document.getElementById('conversationDiv');conversationDiv.innerHTML = "";conversation.forEach(function (item, index) {var conversationItem = document.createElement('div');conversationItem.className = 'conversation-item';var questionDiv = document.createElement('div');questionDiv.className = 'question';questionDiv.innerHTML = "Q" + (index + 1) + ": " + item.question;var answerDiv = document.createElement('div');answerDiv.className = 'answer';// 使用 innerHTML 将答案内容当作 HTML 内容解析,使图片等能正确显示answerDiv.innerHTML = "A" + (index + 1) + ": " + item.answer;conversationItem.appendChild(questionDiv);conversationItem.appendChild(answerDiv);conversationDiv.appendChild(conversationItem);});
}
这个函数用于更新对话记录展示区域的内容,首先获取到id
为conversationDiv
的元素,并清空其原有的innerHTML
内容。然后遍历conversation
数组中的每一项(每个问答对象):
- 创建一个新的
<div>
元素作为对话记录单项的容器,并设置其类名为conversation-item
,以应用对应的 CSS 样式。 - 分别创建用于显示问题和答案的
<div>
子元素,设置相应的类名(question
和answer
),并通过innerHTML
将问答内容填充进去,同样可以解析 HTML 内容。 - 将问题和答案的
<div>
子元素添加到对话记录单项容器中,再将该容器添加到对话记录展示区域的<div>
元素内,从而实现对话记录的动态渲染和展示。
潜在的改进点和注意事项
- 兼容性问题:代码中使用的
XMLHttpRequest
在现代浏览器中基本都支持,但对于一些较老版本的浏览器可能存在兼容性问题。可以考虑使用更现代的fetch
API 来替代,它提供了更简洁、功能更强大的异步请求方式,并且有较好的浏览器兼容性(不过需要进行适当的错误处理和功能适配)。 - 安全性考虑:在将后端返回的内容直接通过
innerHTML
解析并显示时,如果后端返回的数据不可信(比如存在恶意的 HTML、JavaScript 代码),可能会导致安全漏洞,如跨站脚本攻击(XSS)。建议对后端返回的数据进行严格的过滤和转义处理,只允许显示安全的文本内容或者对 HTML 标签进行白名单验证后再进行解析显示。 - 响应数据格式处理优化:目前假设后端返回的文本可以直接通过
innerHTML
进行解析显示,但如果后端返回的数据格式比较复杂(比如是 JSON 格式包含了多种类型的数据需要分别处理),需要进一步优化代码逻辑,对响应数据进行准确的解析和展示,例如可以通过JSON.parse
先将 JSON 数据解析成 JavaScript 对象,再根据具体的结构进行相应的页面渲染操作。
完整代码如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>问答测试</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;padding: 0;}.main-container {display: flex;width: 1000px;}/* 左侧对话记录样式 */.conversation-log-container {background-color: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);width: 450px;/* height: 1000px; */}h2.conversation-title {color: #333;}#conversationDiv {margin-top: 20px;max-height: 450px;overflow-y: auto;font-family: Arial, sans-serif;}.conversation-item {margin-bottom: 10px;padding: 10px;border-bottom: 1px solid #ccc;white-space: pre-line; /* 让对话记录中的内容也能折行显示 */}.conversation-item:last-child {border-bottom: none;}.question {font-weight: bold;}/* 右侧提交问题和答案显示样式 */.question-answer-container {background-color: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);width: 550px;margin-left: 50px;}h1.qa-title {color: #333;}form#questionForm {text-align: center;}label {display: block;margin-bottom: 10px;}input[type="text"] {width: 100%;padding: 10px;margin-bottom: 20px;border: 1px solid #ccc;border-radius: 3px;}input[type="submit"] {background-color: #007BFF;color: #fff;padding: 10px 20px;border: none;border-radius: 3px;cursor: pointer;}#answerDiv {white-space: pre-line;margin-top: 20px;word-break: break-all; /* 确保长文本能正常换行显示 */}</style>
</head><body><div class="main-container"><div class="conversation-log-container"><h2 class="conversation-title">对话记录</h2><div id="conversationDiv"></div></div><div class="question-answer-container"><h1 class="qa-title">提交问题与答案显示</h1><form id="questionForm" action="/process_question" method="post"><label for="user_question">请输入你的问题:</label><br><input type="text" id="user_question" name="user_question" required><br><input type="submit" value="提交"></form><div id="answerDiv"></div></div></div><script>// 用于存储对话记录的数组var conversation = [];document.getElementById('questionForm').addEventListener('submit', function (e) {e.preventDefault();var questionInput = document.getElementById('user_question');var questionText = questionInput.value;var xhr = new XMLHttpRequest();xhr.open('POST', '/process_question', true);xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {var answerDiv = document.getElementById('answerDiv');// 使用 innerHTML 将响应文本当作 HTML 内容解析,使图片、超链接等能正确显示answerDiv.innerHTML = xhr.responseText;// 将本次的问题和答案添加到对话记录数组中conversation.push({question: questionText,answer: xhr.responseText});// 清空输入框,方便继续提问questionInput.value = "";// 重新渲染对话记录展示区域renderConversation();}};xhr.send('user_question=' + encodeURIComponent(questionText));});// 渲染对话记录展示区域的函数function renderConversation() {var conversationDiv = document.getElementById('conversationDiv');conversationDiv.innerHTML = "";conversation.forEach(function (item, index) {var conversationItem = document.createElement('div');conversationItem.className = 'conversation-item';var questionDiv = document.createElement('div');questionDiv.className = 'question';questionDiv.innerHTML = "Q" + (index + 1) + ": " + item.question;var answerDiv = document.createElement('div');answerDiv.className = 'answer';// 使用 innerHTML 将答案内容当作 HTML 内容解析,使图片等能正确显示answerDiv.innerHTML = "A" + (index + 1) + ": " + item.answer;conversationItem.appendChild(questionDiv);conversationItem.appendChild(answerDiv);conversationDiv.appendChild(conversationItem);});}</script></body></html>
相关文章:
常见问题QA的前端代码
这个的后端代码参见此文 使用语言向量建立常见问题的模糊搜索-CSDN博客https://blog.csdn.net/chenchihwen/article/details/144207262?spm1001.2014.3001.5501 这段代码实现了一个简单的问答页面,页面分为左右两部分,左侧用于展示对话记录,…...
【Java基础面试题010】Java中的基本数据类型有哪些?
相关知识补充:《Java从入门到精通(JDK17版)》_尚硅谷电子书.pdf Autism_Btkrsr/Blog_md_to_pdf - 码云 - 开源中国 (gitee.com) 回答重点 Java提供了8中基本数据类型 整型: byte:占用1字节,取值范围 -128 到 127short&#x…...
记录部署dvwa靶场踩的几个坑
DVWA reCAPTCHA key: Missing 解决方法:网上随便copy一个,粘贴到config.inc.php配置文件里,具体我也是参考这篇文章的:DVWA下载、安装You dont have permission to access this resource.Server unable to read htaccess file, de…...
【Pytorch】torch.reshape与torch.Tensor.reshape区别
问题引入: 在Pytorch文档中,有torch.reshape与torch.Tensor.reshape两个reshape操作,他们的区别是什么呢? 我们先来看一下官方文档的定义: torch.reshape: torch.Tensor.reshape: 解释: 在p…...
GPT vs Claude到底如何选?
美国当地时间6月20日,OpenAI的“劲敌”Anthropic公司发布了最新模型Claude 3.5 Sonnet。据Anthropic介绍,该模型是Claude 3.5系列模型中的首个版本,也是Anthropic迄今为止发布的“最强大、最智能”的模型。它不仅在性能上超越了竞争对手和自家…...
基于C++实现的(控制台)双人俄罗斯方块小游戏
基于win32控制台应用程序的双人俄罗斯方块小游戏 1. 课题概述 1.1 课题目标和主要内容 使用visual studio 2015在win32控制台应用程序下用多线程实现双人同时进行俄罗斯方块的桌面游戏。最终将要完成的效果如图1.1所示,左右共两片工作区,也是游戏的主…...
Linux-虚拟环境
文章目录 一. 虚拟机二. 虚拟化软件三. VMware WorkStation四. 安装CentOS操作系统五. 在VMware中导入CentOS虚拟机六. 远程连接Linux系统1. Finalshell安装2. 虚拟机网络配置3. 连接到Linux系统 七. 虚拟机快照 一. 虚拟机 借助虚拟化技术,我们可以在系统中&#…...
uniapp开发微信小程序笔记10-触底加载
前言: 触底加载需求描述: 经常在做一些商品列表页的时候,如果一次性加载大量数据会影响性能,一般都是先加载10-20条,等用户向下滑到底部时再加载新的数据并渲染上去。 1、官方提供了一个API:onReachBott…...
Pytest --capture 参数详解:如何控制测试执行过程中的输出行为
--capture 选项用于控制测试用例执行过程中标准输出(stdout)和标准错误输出(stderr)的捕获行为。 --capture 的选项值: fd(默认) 捕获文件描述符级别的输出(stdout 和 stderr&#x…...
JMeter实时性能压测可视化系统整合
一、相关工具简介: JMeter、Grafana 和 InfluxDB 结合实时地收集、分析和展示性能测试数据,进行更好地理解系统的性能表现,及时发现潜在问题并进行优化。 1,JMeter 实时生成性能数据,并将其发送到 InfluxDB 进行存储。2,InfluxDB 存储的数据。3,通过Grafana的仪表板,用…...
USB 声卡全解析:提升音频体验的得力助手
在当今数字化的时代,音频领域的追求愈发多元。无论是热衷聆听高品质音乐的爱好者,还是在专业音频工作中精雕细琢的人士,亦或是在游戏世界里渴望极致音效沉浸的玩家,都始终在寻觅能让音频体验更上一层楼的妙法。而 USB 声卡&#x…...
GoReplay开源工具使用教程
目录 一、GoReplay环境搭建 1、Mac、Linux安装GoReplay环境 二、GoReplay录制与重播 1、搭建练习接口 2、录制命令 3、重播命令 三、GoReplay单个命令 1、常用命令 2、其他命令 3、命令示例 4、性能测试 5、正则表达式 四、gorepaly组合命令 1、组合命令实例 2、…...
Qt开源控件:图像刻度轴绘制器 (附源码)工程项目私信博主
项目简介 图像刻度轴绘制器是一款基于 Qt/C 开发的小型绘图工具,旨在实现带有刻度轴的图像显示功能。该项目主要用于需要精确测量或标注图像坐标的场景。通过左侧和底部的坐标轴以及对应的刻度线,可以直观地了解图像内容在二维空间中的位置。 项目功能 …...
下载 M3U8 格式的视频
要下载 M3U8 格式的视频(通常是 HLS 视频流),可以尝试以下几种方法: 方法 1:使用下载工具(推荐) 1. IDM(Internet Download Manager): 安装 IDM 并启用浏…...
Mock.js的学习使用
Mock.js 介绍:是一个功能强大的JavaScript库,用于模拟接口请求和生成随机数据。 作用: 帮助开发者独立开发、前后端分离快速原型验证测试异常情况增加单元测试的真实性 原理: 通过拦截XMLHttpRequest或fetch等网络请求&#x…...
在 Windows Server 2022 Datacenter 上配置 MySQL 8.0 的主从复制
在 Windows Server 2022 Datacenter 上配置 MySQL 8.0 的主从复制。以下是详细的步骤: 1. 使用 root 用户登录 确保你以 root 用户登录到 MySQL 服务器。 mysql -u root -p输入你的 root 密码后进入 MySQL 命令行界面。 2. 配置主服务器 (master) 2.1 编辑 my.…...
6.1 innoDb逻辑存储结构和架构-简介
InnoDB 是 MySQL 默认的存储引擎,以其强大的事务支持、崩溃恢复能力和高效的数据处理能力广受欢迎。本文从逻辑存储结构、内存架构、磁盘结构到后台线程,逐步剖析 InnoDB 的关键概念,帮助您更好地理解和应用。 1. 逻辑存储结构 InnoDB 的数据…...
论文阅读——量子退火Experimental signature of programmable quantum annealing
摘要:量子退火是一种借助量子绝热演化解决复杂优化问题的通用策略。分析和数值证据均表明,在理想化的封闭系统条件下,量子退火可以胜过基于经典热化的算法(例如模拟退火)。当前设计的量子退火装置的退相干时间比绝热演…...
vue3项目最新eslint9+prettier+husky+stylelint+vscode配置
一、eslint9和prettier通用配置 安装必装插件 ESlint9.x pnpm add eslintlatest -DESlint配置 vue 规则 , typescript解析器 pnpm add eslint-plugin-vue typescript-eslint -DESlint配置 JavaScript 规则 pnpm add eslint/js -D配置所有全局变量 globals pnpm add globa…...
IOS ARKit进行图像识别
先讲一下基础控涧,资源的话可以留言,抽空我把它传到GitHub上,这里没写收积分,竟然充值才能下载,我下载也要充值,牛! ARSCNView 可以理解画布或者场景 1 配置 ARWorldTrackingConfiguration AR追…...
【el-table】表格后端排序
在需要排序的列添加属性 sortable,后端排序,需将sortable设置为custom 如果需要自定义轮转添加 sort-orders 属性,数组中的元素需为以下三者之一:ascending 表示升序,descending 表示降序,null 表示还原为原…...
【iOS】多线程基础
【iOS】多线程基础 文章目录 【iOS】多线程基础前言进程与线程进程进程的状态进程的一个控制结构进程的上下文切换 线程为什么要用线程什么是线程线程和进程的关系线程的上下文切换 线程和进程的优缺点 小结 前言 笔者由于对于GCD不是很了解,导致了项目中网络请求哪…...
c#控制台项目的发布+相对路径的用法(绝对路径下素材丢失问题)
发布 生成 ->发布选定任务 生成了以后,素材需要手动拖过去 文件相对路径...
Keil5配色方案修改为类似VSCode配色
1. 为什么修改Keil5配色方案 视觉习惯:如果你已经习惯了VSCode的配色方案,尤其是在使用ESP-IDF开发ESP32时,Keil5的默认配色可能会让你感到不习惯。减少视觉疲劳:Keil5的默认背景可能过于明亮,长时间使用可能会导致视…...
网络安全框架及模型-PPDR模型
网络安全框架及模型-PPDR模型 概述: 为了有效应对不断变化的网络安全环境,人们意识到需要一种综合性的方法来管理和保护网络安全。因此,PPDR模型应运而生。它将策略、防护、检测和响应四个要素结合起来,提供了一个全面的框架来处理网络安全问题。 工作原理: PPDR模型的…...
Observability:如何在 Kubernetes pod 中轻松添加应用程序监控
作者:来自 Elastic Jack Shirazi•Sylvain Juge•Alexander Wert Elastic APM K8s Attacher 允许将 Elastic APM 应用程序代理(例如 Elastic APM Java 代理)自动安装到 Kubernetes 集群中运行的应用程序中。该机制使用变异 webhook࿰…...
solana粗略的学习总结
最近在研究solana 的东西,简单做一下总结,很久没有写文章了。写的不对的地方欢迎评论区或者私信。及时改正。 Solana 架构概述 1.0 核心模块 Solana 的架构包括以下核心模块: Proof of History (PoH):通过时间排序机制优化交易…...
【Pip】完整的 `pip` 配置文件详解:优化你的包管理与环境设置
目录 引言一、pip 配置文件概述1.1 配置文件的位置1.2 配置文件的格式 二、常见配置选项详细说明2.1 设置镜像源2.2 配置超时时间2.3 配置下载缓存2.4 配置安装选项2.5 配置信任主机2.6 配置代理2.7 配置包安装路径 三、pip 配置文件的进阶设置3.1 包源(Channels&am…...
pytorch加载预训练权重失败
问题 给当前模型换了个开源的主干网络,并且删除了某些层后,但是发现预训练权重一直加载不上。strict为True时加载报错,strict为False时又什么都加载不上,然后不知道哪里出问题了。 解决 当strict为False时,load_sta…...
mysql线上问题集合
1、too many connections 连接数量太多,可以先通过以下命令先调整最大连接数,得以连接上mysql进行问题排查。 临时修改: gdb -p mysql进程id -ex "set max_connections500" -batchgdb:这是 GNU 调试器,用于…...
Kafka从指定时间开始消费数据
需求-故障定位:flink消费kafka数据,某个时间点漏数据 背景:kafka数据保留3天,如果第二天,发现程序异常导致数据丢失,需要定位是topic源头无数据,还是程序处理出现异常。 # 1, 设置一个新的gro…...
Android 俩个主题的不同之处 “Theme.AppCompat vs android:Theme.Material.Light.NoActionBar”
这两种主题继承关系有明显的不同,具体区别如下: Theme.AppCompat vs android:Theme.Material.Light.NoActionBar Theme.AppCompat 是 AppCompat 支持库提供的主题,目的是提供向后兼容的支持,适用于较早版本的 Android(…...
FreeSWITCH mod_conference 的按键会控
又是一篇命题作文 mod_conference 官方文档: https://developer.signalwire.com/freeswitch/FreeSWITCH-Explained/Modules/mod_conference_3965534/ 英文不好的可以看中文: http://www.freeswitch.org.cn/books/references/1.7-mod_conference.html…...
LSTM-CNN-BP-RF-SVM五模型咖喱融合策略混合预测模型
目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 LSTM-CNN-BP-RF-SVM五模型咖喱融合策略混合预测模型 Matlab代码注释清晰。 程序设计 完整程序和数据获取方式:私信博主回复LSTM-CNN-BP-RF-SVM五模型咖喱融合策略混合预测模型(Matlab&#…...
LeetCode 64. 最小路径和(HOT100)
第一次错误代码: class Solution { public:int minPathSum(vector<vector<int>>& grid) {int dp[205][205] {0};int m grid.size(),n grid[0].size();for(int i 1 ;i<m;i){for(int j 1;j<n;j){dp[i][j] min(dp[i][j-1],dp[i-1][j])gr…...
SQL基础语法全解析(上篇)
一、基本概念 1. 数据库术语 数据库(database) - 保存有组织的数据的容器(通常是一个文件或一组文件)。数据表(table) - 某种特定类型数据的结构化清单。模式(schema) - 关于数据库…...
蓝牙定位的MATLAB程序,四个锚点、三维空间
这段代码通过RSSI信号强度实现了在三维空间中的蓝牙定位,展示了如何使用锚点位置和测量的信号强度来估计未知点的位置。代码涉及信号衰减模型、距离计算和最小二乘法估计等基本概念,并通过三维可视化展示了真实位置与估计位置的关系。 目录 程序描述 运…...
vue3-Import declaration conflicts with local declaration of dayjs
同步发布于我的网站 🚀 概述错误描述 原代码报错信息 原因分析解决方案 修改导入语句使用泛型 代码解释总结 概述 在使用 Vue3 和 dayjs 时,可能会遇到一个常见的错误:“Import declaration conflicts with local declaration of ‘dayjs’…...
node.js基础学习-express框架-静态资源中间件express.static(十一)
前言 在 Node.js 应用中,静态资源是指那些不需要服务器动态处理,直接发送给客户端的文件。常见的静态资源包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片(如 JPEG、PNG 等)、字体文件和音频、视频文件等。这些文件在服务器端…...
通过waitress启动flask应用
假设你有一个名为 app.py 的文件,app 是指你的 Flask 应用实例。并且在这个文件中创建了一个 Flask 应用实例,那么你可以这样导入和使用它。 示例结构 假设你的项目结构如下: my_flask_app/ │ ├── app.py ├── waitress_server.py └─…...
linux 获取公网流量 tcpdump + python + C++
前言 需求为,统计linux上得上下行公网流量,常规得命令如iftop 、sar、ifstat、nload等只能获取流量得大小,不能区分公私网,所以需要通过抓取网络包并排除私网段才能拿到公网流量。下面提供了一些有效得解决思路,提供了…...
【阅读记录-章节5】Build a Large Language Model (From Scratch)
目录 5. Pretraining on unlabeled data5.1 Evaluating generative text models5.1.1 Evaluating generative text models5.1.2 Calculating the text generation loss评估模型生成文本的质量 5.1.3 Calculating the training and validation set losses 5.2 Training an LLM5.…...
神经网络中的优化方法(一)
目录 1. 与纯优化的区别1.1 经验风险最小化1.2 代理损失函数1.3 批量算法和小批量算法 2. 神经网络中优化的挑战2.1 病态2.2 局部极小值2.3 高原、鞍点和其他平坦区域2.4 悬崖和梯度爆炸2.5 长期依赖2.6 非精确梯度2.7 局部和全局结构间的弱对应 3. 基本算法3.1 随机梯度下降(小…...
输出1~n中能被3整除,且至少有一位数字是5的所有整数.:JAVA
链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 输出1~n中能被3整除,且至少有一位数字是5的所有整数. 输入描述: 输入一行,包含一个整数n。(1 < n < 100000) 输出描述: 输出所有满足条件的数,以换…...
MySQL 主从同步一致性详解
MySQL主从同步是一种数据复制技术,它允许数据从一个数据库服务器(主服务器)自动同步到一个或多个数据库服务器(从服务器)。这种技术主要用于实现读写分离、提升数据库性能、容灾恢复以及数据冗余备份等目的。下面将详细…...
html+css网页设计 旅游 马林旅行社3个页面
htmlcss网页设计 旅游 马林旅行社3个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1&#…...
【短视频矩阵系统==saas技术开发】
在数字媒体领域,短视频的崛起已不可忽视。对于商业实体而言,掌握如何通过短视频平台有效吸引潜在客户并提高转化率,已成为一项关键课题。本文旨在深入剖析短视频矩阵系统的构成与作用机制,以期为企业提供一套系统化的策略…...
MongoDB-BSON 协议与类型
前言: MongoDB 是一个高性能、无模式的 NoSQL 数据库,广泛应用于大数据处理和实时数据存储。作为一个数据库系统,MongoDB 的核心之一就是其使用的 BSON(Binary JSON)格式,它用于存储数据以及在客户端和数据…...
论文:IoU Loss for 2D/3D Object Detection
摘要:在2D/3D目标检测任务中,IoU (Intersection-over- Union)作为一种评价指标,被广泛用于评价不同探测器在测试阶段的性能。然而,在训练阶段,通常采用常见的距离损失(如L1或L2)作为损失函数,以最小化预测值…...
Electron-vue 框架升级 Babel7 并支持electron-preload webapck 4 打包过程记录
前言 我这边一直用的electron-vue框架是基于electron 21版本的,electron 29版本追加了很多新功能,但是这些新功能对开发者不友好,对electron构建出来的软件,使用者更安全,所以,我暂时不想研究electron 29版…...