自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(77)
  • 收藏
  • 关注

原创 实现文件流下载与导出功能

本文介绍了文件流下载与导出的实现方法,主要包含三部分内容:1) 通过拦截请求和检查响应类型处理二进制数据下载;2) 封装通用的download0函数和针对不同文件类型(Excel、Word、Zip等)的下载方法;3) 展示实际业务中调用导出API并下载Excel文件的具体示例。核心实现原理是利用Blob对象和URL.createObjectURL创建可下载链接,通过a标签触发下载操作,最后释放对象URL资源。

2025-07-28 15:43:46 270

原创 重复请求问题

本文提出了一种利用Promise和AbortController防止重复请求的解决方案。通过在会话缓存中存储请求URL、数据和时间戳,当检测到短时间内(如1秒内)相同URL和数据的重复请求时,使用AbortController中止当前请求并提示"数据正在处理"。实现步骤包括:1)存储请求信息;2)检查缓存;3)比较请求参数;4)拦截重复请求;5)更新缓存。代码示例展示了如何集成该机制到fetch请求中,有效避免了重复提交问题。

2025-07-28 15:31:44 560

原创 智能体核心能力和流程框架 leaning

智能体核心能力与流程框架 智能体(Agent)是一种具备感知、决策和行动能力的自主系统,其核心在于四大能力:理解能力(处理多模态输入并推理深层意图)、感知与定位能力(捕捉环境信息并明确自身角色)、规划能力(任务拆解与动态调整)、操作能力(精准执行任务)。智能体的工作流程可分为八个环节:从多模态输入处理、文本预处理、特征提取,到模型选择训练、推理预测、输出生成,最后通过反馈学习持续优化。这一框架强调上下文感知、动态规划和多模型协同,使智能体能够像人类一样理解复杂需求并高效完成任务,同时通过持续学习不断进化能力

2025-06-23 18:11:04 1268

原创 认识你身边的“智能小助手”:智能体

智能体是指能够自主感知环境、思考决策并采取行动的程序或软件,其核心特点是主动性和决策能力。它可以是语音助手、智能家电或自动驾驶系统等,通过感知信息、分析判断和执行操作来完成任务。未来的智能体将更加全能、个性化和主动化,成为生活中的贴心助手。简单来说,智能体就是能够独立"看、想、决定、做"的智能程序。

2025-06-23 18:03:06 468

原创 边缘计算的认识和应用

边缘计算是一种分布式计算范式,将数据处理能力部署在靠近数据源的边缘设备上(如智能音箱、摄像头),而非依赖集中式云端。其核心优势是降低延迟、节省带宽、增强隐私保护和提高可靠性。典型应用场景包括自动驾驶(实时数据处理)、智能家居(本地人脸识别)和工业自动化(设备监测)。边缘计算与云计算协同工作,云端负责模型训练和数据分析,边缘设备执行实时处理。关键技术涉及AI芯片、轻量化算法及安全加密。随着物联网发展,边缘计算将在智慧城市、医疗健康等领域发挥更大作用,成为智能化的重要支撑。

2025-06-18 14:36:41 942

原创 Vue3 中使用 i18n

Vue3 国际化解决方案:使用 vue-i18n 实现多语言支持 在 Vue3 应用中,可以通过安装 vue-i18n 库(npm install vue-i18n)实现国际化功能。基本步骤包括:创建语言文件(如 en.json/zh.json)、初始化 i18n 实例、在组件中使用 $t 方法或 Composition API 的 useI18n Hook 进行翻译。vue-i18n 支持动态语言切换、变量插值({{name}})、以及日期/数字本地化处理。对于大型项目,建议采用动态加载语言文件的优化方式

2025-06-03 17:34:42 2145

原创 前端导入Excel表格

摘要:本文介绍了如何在Vue 3项目中实现Excel文件(.xls和.xlsx)的导入功能。通过xlsx库解析文件数据,主要步骤包括:1)创建文件上传组件,2)使用FileReader读取文件并解析为JSON数据,3)将解析结果以表格形式展示。代码示例详细展示了文件选择、数据转换和表格渲染的实现过程,适用于数据导入等业务场景。该方法简单高效,能快速处理Excel数据。(150字)

2025-06-03 16:42:57 757

原创 XSS跨站脚本攻击

XSS(跨站脚本攻击)是一种常见的网络安全漏洞,攻击者通过在目标网站注入恶意脚本,使其在其他用户浏览器中执行。XSS分为三种类型:存储型(恶意脚本存储在服务器)、反射型(通过URL参数触发)和DOM型(纯客户端攻击)。攻击危害包括窃取敏感信息、会话劫持、伪造用户行为等。防范措施包括输入验证、输出编码、内容安全策略(CSP)、避免动态插入HTML、使用安全框架以及定期安全测试。开发者需综合运用这些技术,才能有效防护XSS攻击,保障网站和用户安全。

2025-05-30 15:19:15 1058

原创 浏览器工作原理

浏览器工作原理可以概括为以下几个步骤:首先通过DNS查询将网址转换为IP地址,然后与服务器建立安全连接并发送请求。服务器响应后,浏览器解析HTML构建DOM树,加载CSS样式和JavaScript脚本,最终渲染出完整网页。浏览器核心组件包括用户界面、渲染引擎、网络模块和JavaScript引擎等,它们协同工作完成网页展示和交互。优化机制如缓存、并行加载和懒加载等提升页面加载速度。整个过程实现了从网址输入到网页呈现的无缝转换。

2025-05-30 15:17:52 1218

原创 http1.1和http2

HTTP(HyperText Transfer Protocol,超文本传输协议)是互联网通信的基础协议,用于客户端(如浏览器)和服务器之间的数据传输。随着互联网的发展,传统的 HTTP/1.1 已经无法满足现代网络的高性能需求,因此 HTTP/2 应运而生。HTTP/2 是 HTTP 的升级版本,旨在解决 HTTP/1.1 的性能瓶颈,提供更快、更高效的通信。

2025-05-30 14:56:43 957

原创 前端js作用域链

本文介绍了JavaScript中的作用域和作用域链概念。作用域分为全局作用域(所有代码可访问)和局部作用域(函数/代码块内有效)。作用域链是变量查找路径:从当前作用域开始,依次向上查找父级作用域,直至全局作用域。文章通过家居比喻和代码示例说明变量查找过程,并指出局部变量会遮蔽同名全局变量,未定义变量会导致报错。作用域链机制决定了变量的可访问范围,是理解JavaScript变量查找的基础。

2025-05-30 14:54:02 693

原创 OAuth详解和应用

OAuth 是一种让你可以安全地使用其他网站的账户登录到某个应用程序的方法,而不需要告诉这个应用程序你的密码。想象一下,你想用你的 Google 账户登录一个新的应用,但你不想告诉这个应用你的 Google 密码。OAuth 就是解决这个问题的工具。

2025-05-30 14:52:24 1160

原创 重绘与重排

在前端开发中,我们经常听到“重绘”和“重排”这两个词。它们是浏览器渲染页面时的两个重要过程,但很多人对它们的概念不太清楚。

2025-05-30 11:35:14 1166

原创 正向代理和反向代理

正向代理和反向代理其实就是两种“中间人”的角色,它们分别站在客户端和服务器的角度,帮助处理请求。我们可以用生活中的例子来形象地说明它们的区别。

2025-05-30 11:33:24 387

原创 Vue3实现提示文字组件

本文介绍了如何使用Vue3实现一个文字提示组件(Tooltip)。该组件支持悬停显示、自定义位置(上/下/左/右)、动态内容和样式定制。通过slot插槽实现提示内容与目标元素的分离,利用mouseenter/mouseleave事件控制显示状态,并借助CSS绝对定位实现不同位置的提示效果。组件代码简洁,包含完整的模板、脚本和样式部分,可直接在项目中引用使用。文章还提供了功能解析和效果展示,并建议了可能的扩展方向如添加动画、点击触发等。

2025-05-29 11:29:12 808

原创 Vue3实现折叠面板

本文介绍了如何使用Vue3实现一个折叠面板组件(Accordion)。组件支持两种模式:普通模式允许多个面板同时展开,手风琴模式每次只能展开一个面板。核心实现要点包括:使用openPanels数组记录展开状态,通过togglePanel方法切换面板展开/折叠状态,结合v-show指令控制内容显示。文章提供了完整的组件代码示例,包含模板结构、逻辑处理和基础样式,并演示了在App.vue中的使用方法。该组件可根据需求进一步扩展动画效果或嵌套功能。

2025-05-29 11:27:59 777

原创 Vue3实现一个拖拽加全屏功能的组件

本文介绍了如何使用Vue3实现一个支持拖拽和全屏功能的组件。组件通过监听鼠标事件实现拖拽功能,并通过动态样式切换实现全屏效果。文章详细展示了组件的核心代码,包括拖拽逻辑实现、全屏状态切换以及样式控制。该组件可应用于弹窗、图片预览等场景,并可根据需要进一步扩展功能,如添加动画效果或限制拖拽范围。实现过程简洁明了,为类似功能的开发提供了参考方案。

2025-05-28 15:57:34 590

原创 前端识别用户在某些页面的停留时间过长,提示可能存在问题

前端可通过监控用户停留时间(beforeunload事件)和交互行为(鼠标移动、滚动等)识别潜在问题。若停留时间超过阈值(如60秒)或长时间无操作(如30秒),可触发提示或发送数据到后端分析。结合页面类型(表单/阅读页)设定合理阈值,并利用fetch记录行为数据。还可集成第三方工具(Google Analytics、Hotjar)进行深度分析。该方案能优化用户体验,帮助开发者发现页面设计问题,同时提供主动帮助(如弹窗提示)。

2025-05-28 14:59:53 1020

原创 前端大文件上传-断点续传

本文介绍了大文件上传与断点续传的实现方案。针对大文件上传面临的网络中断、进度丢失等问题,提出将文件分片上传并记录进度的方法。文章详细阐述了核心思路:文件分片、逐块上传、记录进度和中断续传,并提供了前端分片和上传的代码示例。同时强调了后端需要配合记录分片状态和合并文件。这种方案能有效提高大文件上传的可靠性和用户体验,虽需前后端协作,但实现思路清晰可行。

2025-05-28 14:54:27 531

原创 前端单点登录

单点登录(SSO)是一种认证机制,允许用户只需登录一次即可访问多个系统,提升用户体验并简化认证流程。其核心在于通过统一认证中心管理用户的登录状态和认证信息。前端的主要任务是与认证中心交互,并在多个系统之间共享登录状态。实现单点登录的关键点包括:统一认证中心、令牌的存储与传递、以及跨域问题的处理。常见的跨域解决方案包括CORS和iframe + postMessage。前端通过检查登录状态、重定向到认证中心、保存和验证令牌等步骤,实现单点登录功能。

2025-05-20 15:02:23 1309

原创 前端无感登录刷新

无感登录是一种提升用户体验的前端技术,通过 userToken 和 refreshToken 实现用户在登录后无需重复输入账号密码即可自动登录。userToken 是短期有效的凭证,用于每次请求的身份验证,而 refreshToken 是长期有效的凭证,用于在 userToken 过期时获取新的 userToken。实现无感登录的关键步骤包括用户登录时获取并保存令牌、请求时验证 userToken、用 refreshToken 刷新 userToken 以及处理异常情况。安全性方面,建议将 refreshT

2025-05-20 14:55:46 1499

原创 C语言实现迪杰斯特拉算法进行路径规划

迪杰斯特拉算法是一种用于寻找加权图中最短路径的经典算法。它特别适合用于计算从一个起点到其他所有节点的最短路径,前提是图中的边权重为非负数。

2025-04-27 17:02:21 313

原创 高德地图 API 拿到当前定位和目的地址转经纬度,实现路径规划

高德地图 API是一个强大的工具,可以帮助我们在网页或应用中实现地图相关功能,比如定位、地址解析(将地址转为经纬度)以及路径规划(从当前位置到目的地的路线)。

2025-04-27 16:43:24 2727

原创 前端数据分析:入门和案例

前端数据分析就像是你开了一家小店,每天观察顾客的行为:哪些商品被拿起来看的最多?顾客在哪个货架前停留时间最长?他们点击了哪些按钮但最终没有购买?这些信息都能帮你优化店铺布局和商品陈列。前端数据分析就像给你的产品装上了"显微镜"和"望远镜",既能看清细节问题,又能把握整体趋势。记住:不要为了分析而分析,数据只是工具,关键是如何用它来做出更好的决策。:哪些商品被点击查看最多?:用户在哪个步骤放弃购买?

2025-04-25 21:29:52 1001

原创 vue滑块组件设计与实现

用户交互:通过监听鼠标和触摸事件,实现滑块的拖动功能,并提供实时的视觉反馈。状态管理:使用ref管理滑块的位置和当前值,并通过事件将值传递给父组件。样式设计:定义滑块容器、轨道、进度条和滑块的样式,确保组件外观美观且易于使用。事件处理:处理开始拖动、拖动中和停止拖动的事件,确保滑块在用户交互时能够正确响应。

2025-04-25 18:15:45 609

原创 Vue3 小功能记录:密码的显示与隐藏功能

密码显隐小功能

2025-04-23 18:11:41 564

原创 前端加密介绍与实战

前端数据加密是指在用户的浏览器中对数据进行加密处理,以保护敏感信息在传输或存储时不被窃取或篡改。加密的目的是让数据变得不可读,只有拥有正确密钥的人才能解密数据。在前端加密的场景中,通常会使用加密算法(如对称加密、非对称加密或哈希算法)对数据进行处理。加密后的数据可以安全地传输到后端或存储在本地(如浏览器的或前端加密:使用crypto-js库对用户密码进行AES加密,确保密码在传输过程中不会被窃取。后端解密:后端使用相同的密钥解密密码,验证用户登录。安全注意事项密钥管理。

2025-04-23 14:53:21 2101

原创 前端脱敏处理的介绍与实战

前端数据脱敏是指在前端展示或传输数据时,对敏感信息进行处理,使其部分或全部不可见,以保护用户隐私和数据安全。脱敏的目的是防止敏感信息被泄露或滥用,同时确保数据在展示或传输过程中仍然具有一定的可用性。例如,用户的身份证号,经过脱敏处理后可能显示为,这样既能保护用户隐私,又能让数据具有辨识度。前端数据脱敏是保护用户隐私和数据安全的重要手段。通过字符串处理、正则表达式、动态处理等方式,我们可以轻松实现对手机号、身份证号、银行卡号等敏感信息的脱敏。脱敏不仅能提升用户体验,还能帮助产品满足法律法规的要求。

2025-04-22 10:14:29 1373

原创 关于前端埋点技术

前端埋点简单来说就是在网页或应用的前端代码中插入一些“监听器”,用来记录用户的操作行为。比如用户点击了某个按钮、浏览了某个页面、填写了某个表单等,这些行为都可以通过埋点记录下来。埋点的目的是收集数据,帮助我们了解用户的使用习惯,从而优化产品设计和功能。核心思想:记录用户行为,收集数据,分析数据,优化产品。举个例子:你在某个购物网站上点击了“加入购物车”按钮,这个行为可能会被记录下来,告诉开发者有多少人点击了这个按钮,甚至可以进一步分析用户点击后是否完成了购买。

2025-04-22 09:52:55 964

原创 会话跟踪技术:让我们更懂用户

简单来说,会话跟踪就是记录和管理用户在网站或应用上的一系列操作。想象一下,当你在网上购物时,从浏览商品到加入购物车再到结账,这一系列操作就被称为一个“会话”。会话跟踪技术就是用来记录这些操作的。会话跟踪技术是现代互联网应用的重要组成部分,它通过记录和分析用户行为,为个性化服务、用户体验优化和业务决策提供了强大的支持。从电子商务到客服系统,从广告投放到网站分析,会话跟踪技术的应用无处不在。然而,随着隐私保护法规的不断完善,未来的会话跟踪技术将更加注重安全性和用户隐私,同时继续推动数据驱动的创新发展。

2025-04-21 17:54:06 682

原创 vue使用语音识别

下面的示例包括一个简单的界面,用户可以点击按钮开始和停止语音识别,并在页面上显示识别结果。使用 Web Speech API 实现语音识别功能。目录下创建一个新的组件文件。

2025-04-21 17:33:18 843 2

原创 速通 web worker

webworker通俗易懂版:想象一下,你在家里做饭,同时还要照顾孩子、打扫卫生、接电话等等。你一个人做所有这些事情会非常忙碌,可能会手忙脚乱,甚至有些事情做不好。这时候,如果你能请一个帮手来专门帮你做某一件事情,比如打扫卫生,你就可以专心做饭和照顾孩子了。这个帮手就是 Web Worker。Web Worker 是一种用于在浏览器中创建多线程环境的技术。它允许 JavaScript 在后台线程中运行,而不会阻塞主线程。这对于处理耗时的任务(如复杂计算、数据处理等)非常有用,因为它可以避免页面卡顿或无响应。

2025-04-21 10:47:18 401

原创 vite和webpack

Vite 是新型前端构建工具。webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)。

2023-10-10 17:32:34 755

原创 【Vue2源码】响应式原理

Vue.js 基本上遵循 MVVM(Model–View–ViewModel)架构模式,数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。本文讲解一下 Vue 响应式系统的底层细节。Vue响应式。

2023-04-20 19:39:36 656

原创 【Typescript】tsconfig 常用配置项(常用or总结)

文件中指定了用来编译这个项目的根文件和编译选项。文件可以是个空文件,那么所有默认的文件都会以默认配置选项编译

2023-03-12 16:04:23 935

原创 【Vue】vue中的mixin混入

混入(mixin)提供了一种非常灵活的方式,来分发 Vue组件中的可复用功能。一个混入对象可以包含任意组件选项(如data、methods、mounted等等)。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。mixin: 将多个组件相同的逻辑,抽离出来复用;使用mixin混入data: 组件 data 优先级高于 mixin混入的 data;使用mixin混入钩子: 先执行 mixin的钩子,再执行组件里的钩子;

2023-03-06 17:32:41 1341

原创 【uniapp】记录地址管理页面

uniapp页面记录

2023-01-12 11:21:55 1427 1

原创 【websocket】前端websocket 实时通信

websocket是HTML5开始提供的一种网络通信协议,它诞生的目的是在浏览器之间建立一个不受限的双方通信的通道,比如说,服务器可以在任意时刻发送信息给浏览器。在websocket的API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

2023-01-09 15:38:58 1903

原创 【Node】中Express框架连接Mysql实现用户注册接口

拆分模块能够使部分功能能够复用,封装好各个模块使得模块间只能通过有限的接口互相访问,从而降低耦合,拆分模块使得前期提升开发效率,后期维护更加方便目录安装的包为express,mysql2,nodemonapp.jsrouter中的app.jsrouter中的index.jsrouter中的user,jscontrollermiddlewareapp中的config.jsapp中的database.js

2023-01-07 21:02:58 854

原创 微信小程序,uniapp触底加载、自动请求接口合并数据

uniapp官网onReachBottom的解释是页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。在子组件外部,加上scroll-view 组件,并允许纵向滚动 使用竖向滚动时,需要给一个固定高度,通过 css设置高度。要写在和data,method平级,和生命周期差不多。在methods方法中,触底加载的业务逻辑。

2022-12-28 21:04:43 2094 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除