自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南

确定工具库的需求和功能:在开始构建工具库之前,你需要明确你的工具库需要包含哪些方法及工具,以及这些工具或方法应该具备哪些功能。配置npm源:在你的本地开发环境中,将npm的源配置为你的私有仓库地址。注意:如果你的npm仓库是私有的,你可能需要在package.json中添加一个publishConfig字段来指定你的私有仓库地址。编写文档和示例:为你的工具方法编写清晰的文档和示例,这有助于其他开发者理解和使用你的工具库。文档和示例:持续更新和维护你的文档和示例,以帮助其他开发者更好地理解和使用你的工具库。

2024-04-21 17:00:25 2681

原创 从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南

确定组件库的需求和功能:在开始构建组件库之前,你需要明确你的组件库需要包含哪些组件,以及这些组件应该具备哪些功能。这有助于你更好地规划你的开发工作。编写组件代码:使用你熟悉的前端框架(如React、Vue等)编写组件代码。确保你的代码具有良好的可读性和可维护性,并遵循相关的编码规范。创建组件库的结构:为了组织和管理你的组件,你需要创建一个清晰的目录结构。这可以包括组件的源代码、样式文件、文档和示例等。编写文档和示例:为你的组件编写清晰的文档和示例,这有助于其他开发者理解和使用你的组件库。

2024-04-15 10:42:24 6197 1

原创 在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新

RefreshToken 方法是现代 Web 应用中一种常见的身份验证机制,尤其在需要长时间保持用户登录状态的场景下具有重要意义。RefreshToken 方法的主要作用是在用户登录后,服务器生成一个 RefreshToken 并将其返回给客户端。客户端在之后的每次请求中都需要携带这个 RefreshToken,以便服务器能够验证用户身份并返回用户所需的数据。使用场景包括但不限于:用户在应用中的长时间操作、用户在多个设备上使用应用、用户需要跨域访问应用等。

2024-03-11 10:03:10 6099 2

原创 Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析

权限控制是一个很重要的概念,在 Web 应用程序中尤其重要。简单地说,权限控制就是将用户分为不同的分类,为每个分类分配相应的用户权限。这样,用户就只能访问他们所允许的内容了。权限控制可以提高应用程序的安全性和稳定性,使数据更加安全可靠。在 Vue 中进行权限控制,通常有两种方式:第一种是在路由层面进行控制,第二种是在组件层面进行控制。

2024-03-09 10:31:17 10966 4

原创 基于transform的scale属性,实现数据可视化大屏自适应缩放,保持比例不变,轻松应对不同分辨率

在做可视化大屏时,大屏的分辨率基本都是固定死的,因此我们只需要把页面按照设计稿尺寸写死即可,但是我们开发屏幕很小,这时候总要将浏览器进行缩小,这里给出一个通用方法,供大家使用,无需缩放浏览器。应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。做大屏项目时,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留白即可。可以在一个项目里面,使用不同分辨率或比例的大屏页面。

2024-02-29 09:31:40 6019 2

原创 uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题

使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题在uniapp开发小程序这一块,相信很多开发者都遇到过代码体积太大无法打包的问题,这时候就要优化小程序包大小。下面分享一下我的解决思路。希望能给大家一些帮助吧。

2024-01-22 10:15:06 40978 6

原创 微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)

在开发小程序过程中,有个需求是,小程序底部的tabBar需要根据不同用户角色显示不同底部导航。这里不用管tabBar的list超过5个,因为后面是使用自定义组件,完全接管 tabBar 的渲染。2、本示例是7个底部导航,分2种权限,权限1显示1,2,3;权限2显示4,5,6,7;3、当然你也可以自由其他组合,比如:权限1显示1,4;权限2显示1,2,3,4;另1种权限显示4个按钮(这里做的是显示4,5,6,7导航)1种权限显示3个按钮(这里做的是显示1,2,3导航)修改好权限后,记得要重新编译哦。

2024-01-04 09:18:43 18953 51

原创 Vue微前端新探:iframe优雅升级,扬长避短,重获新生

iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生。

2023-07-17 14:16:11 8074 4

原创 uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接

3.如果在特定页面需要自定义分享内容,也仍旧可以使用页面的 onShareAppMessage() 和 onShareTimeline() 方法自定义分享的内容,全局的分享会被页面定义的分享内容覆盖。开发过小程序的朋友们应该都遇到这样的情况,可能很多个页面有相同的函数,例如onShareAppMessage,有什么最佳实践吗,应该如何处理呢?如果你的小程序,发现他的【转发给朋友】的按钮时灰色的,不能点击,那么说明这个小程序没有写这部分的代码。很常见的功能,但是这几个功能,并不是你项目建起来了就有的。

2023-06-14 13:55:55 13682 7

原创 RAG系统里面,怎么解决用户提问不在知识库范围内的问题?

摘要: RAG系统中的AI幻觉问题(尤其是检索失败导致的幻觉)严重影响可靠性,尤其在法律、医疗等严肃场景下。解决方案需多环节协同: 意图识别:通过规则或LLM分类拦截明显越界问题,减少无效检索。 检索质量评估: 相似度阈值效果有限,建议结合重排序(Reranker)提升相关性判断。 最佳方案是用LLM判断检索内容与问题的实际关联性(SUFFICIENT/PARTIAL/IRRELEVANT),但成本较高。 生成约束:优化Prompt,强制模型仅基于检索内容回答,并明确拒答话术和部分回答逻辑。 输出校验:高风

2026-06-02 11:06:02 465

原创 AI大模型应用开发:LangChain核心组件-提示词(Prompts)

本文介绍了提示词工程(Prompt Engineering)的核心概念和应用方法。系统提示词(System Prompt)作为关键要素,能够定义AI的角色和行为规范。主要内容包括:1)系统提示词的基本用法,通过角色设定改变AI输出风格;2)提示词工程的核心要素,包括身份定义、指令说明、示例展示和背景信息;3)具体应用技巧,如角色设定、Few-Shot示例引导和结构化输出控制。文章通过Python代码示例展示了如何利用系统提示词实现不同效果,包括改变AI回答风格、控制输出格式以及生成结构化数据。这些技术可帮助

2026-06-02 10:54:20 534

原创 AI大模型学习笔记:为什么RAG要用向量数据库

相似性搜索是向量数据库的核心功能。与传统的精确匹配不同,相似性搜索允许用户找到与查询向量在某种程度上相似的数据点。这在推荐系统、图像检索、语音识别等领域具有广泛应用。例如,在电商平台上,用户可以通过上传一张图片来搜索相似的商品;在社交媒体中,系统可以根据用户的兴趣向量推荐相似的内容。传统库:比文字长得像;向量库:比意思长得像。RAG 本质是语义检索 + 大模型生成,没有向量数据库,就做不了真正的语义知识库问答,只能凑关键词垃圾检索。

2026-05-21 14:35:45 855

原创 AI大模型学习笔记:LangChain核心组件-输出解析器

摘要: LangChain的输出解析器(Output Parsers)用于标准化大语言模型的输出格式,解决返回内容冗余或格式不一致的问题。常见解析器包括: StrOutputParser:提取纯文本。 JsonOutputParser:解析JSON数据,支持字段校验。 PydanticOutputParser:结合Pydantic模型实现复杂结构化数据的类型验证和转换。 通过parse方法格式化输出,并使用format_instructions生成提示词,确保模型返回指定格式。示例展示了如何解析古诗信息为J

2026-05-21 09:44:46 634

原创 AI大模型学习笔记:LangChain核心组件-工具(Tools)

摘要 大模型虽具备强大的语言能力,但缺乏与外部系统交互的功能。Tool机制通过定义可调用函数,使模型能够访问数据库、API、执行代码等,扩展了其应用场景。工具定义需包含名称、描述、参数约束等信息,通过装饰器注册后供Agent调用。Agent作为智能体,包含模型(负责推理)和工具(负责执行)两部分,能自动判断何时调用何种工具。工作流程包括:定义工具→注册工具→Agent调用→处理结果。自定义工具时需注意参数命名规范,可通过Pydantic模型增强参数约束。该机制显著提升了模型解决实际问题的能力。

2026-05-20 09:57:31 464

原创 AI大模型学习笔记:LangChain核心组件-消息(Messages)

摘要:本文介绍了LangChain中消息处理机制,重点讲解了BaseMessage及其子类(SystemMessage、HumanMessage、AIMessage、ToolMessage)的使用方法。通过示例代码展示了如何构建对话历史实现记忆功能,并详细说明了多模态消息(如图片+文本)的处理方式,包括在线图片URL和本地图片base64编码两种实现方案。文章还演示了如何调用支持多模态的模型(如qwen3.5-plus)进行图片内容分析,展示了完整的代码实现流程和输出结果。

2026-05-20 09:49:26 440

原创 RAG检索提优核心:告别检索低效——Query改写四大主流方案

RAG检索优化:Query改写的核心方法与工程实践 本文系统介绍了RAG系统中Query改写的关键技术与实践方法。针对用户提问存在的口语化、模糊性等问题,提出了6种主流改写方法: 基础清洁与补全:规范化表达,对齐知识库术语 上下文融合:解决多轮对话中的指代问题 多查询扩展:生成多个语义等效表述提升召回 问题分解:将复杂问题拆解为可检索的子问题 语义抽象:提炼核心问题提升检索精度 HyDE技术:通过生成假想答案弥合语义鸿沟 文章详细阐述了标准改写流程,并提供了可直接使用的Prompt模板和Python实现代码

2026-05-19 10:47:43 575

原创 前端开发中大规模并发请求解决方案最佳实践

前端大规模并发请求优化方案 针对前端大规模并发请求导致的浏览器阻塞、服务器压力等问题,核心解决方案包括: 并发控制:使用p-limit等库限制并发数(推荐3-5个),避免浏览器默认6-8个并发的限制 队列管理:实现任务队列调度,支持暂停/恢复/清空等操作 性能优化:结合缓存、防抖节流、请求合并等技术 容错机制:加入失败重试逻辑,提高请求成功率 典型实现方案: 使用p-limit轻量库控制Promise并发 自定义RequestQueue类实现队列管理,支持最大并发限制、自动排队、失败重试等功能 这些方案能有

2026-05-19 09:26:31 697

原创 大模型学习笔记:检索增强生成(RAG)架构

RAG(检索增强生成)是一种通过检索外部知识库来增强大语言模型生成能力的技术。它解决了传统大模型的知识过时、幻觉生成和领域局限三大痛点,具有轻量、支持实时更新和答案可溯源等优点。RAG包含四种范式:朴素RAG、高级RAG、模块化RAG和智能体RAG,分别对应不同的优化层级。其核心工作流程包括问题解析、知识检索和答案生成三个步骤,主要组件为知识库、检索器和生成器。优化技巧包括文本分块、提示词设计和模型微调等。RAG广泛应用于企业客服、医疗辅助、教育辅导和法律检索等领域,既能提升回答准确性,又能保障数据安全。

2026-05-18 20:52:50 515

原创 大模型学习笔记:LangChain核心组件-记忆(memory)

本文探讨了大语言模型(LLM)的记忆机制及其实现方法。主要内容包括: 记忆的必要性:LLM本身是无状态的,无法记住历史会话内容,需要通过技术手段实现记忆功能,以支持多轮对话、个性化服务和复杂任务处理。 记忆分类: 短期记忆:保存当前会话的上下文信息,包括对话历史、查询结果和任务状态 长期记忆:存储跨会话的知识和经验,如用户偏好和业务规则 实现方案: 短期记忆通过Checkpointer对象管理会话状态,使用thread_id区分不同会话 长期记忆采用分层存储结构,支持跨命名空间搜索 示例代码展示了如何利用L

2026-05-16 16:27:51 836

原创 大模型学习笔记:RAG构建分块策略与实战代码案例

摘要:本文探讨了基于大语言模型(LLM)的应用程序中分块(chunking)技术的重要性与应用方法。分块是将大文本分解为小段落的关键技术,可提升检索增强生成(RAG)系统的内容嵌入效率和召回准确性。文章详细介绍了三种主流分块方法:固定大小分块(简单高效但可能割裂语义)、递归分块(适应性强但实现复杂)和基于结构的分块(保留文档结构但依赖格式规范),并提供了Python代码示例说明各方法的实现方式。通过合理选择分块策略,可以显著优化LLM应用的性能和用户体验。

2026-05-15 15:03:57 686

原创 大模型学习笔记:LangChain核心组件-模型(Models)

本文介绍了大语言模型(LLM)的基本概念及其在LangChain中的应用。主要内容包括:1) LLM的核心功能如工具调用、结构化输出、多模态处理和推理能力;2) LangChain提供的两种模型初始化方法:自动初始化的init_chat_model函数和手动创建Model类;3) 模型访问方式:阻塞式invoke和流式stream调用;4) 如何在Agent中使用模型,包括创建智能体和调用方法。文章通过代码示例详细展示了不同场景下的模型使用方式,帮助开发者快速掌握LangChain中的模型操作。

2026-05-15 09:29:31 607

原创 LangChain核心组件-认识LangChain

摘要: LangChain是由Harrison Chase于2022年10月创建的智能体开发平台,提供多种组件支持Python和TypeScript开发。其核心框架包括: LangChain:快速构建兼容多模型的智能体 LangGraph:底层控制智能体构建(记忆、人机协同等) Deep Agents:处理多步骤复杂任务 LangSmith:测试评估平台 智能体(Agent) 与传统LLM的区别在于其主动性,能规划任务、调用工具(如API)并整合实时信息。示例展示了如何通过create_agent快速开发天

2026-05-14 15:05:22 398

原创 FastAPI从0到1入门指南(通俗易懂,附完整示例)

FastAPI是一个现代、高性能的Python Web框架,专为构建API服务设计。本文从零基础出发,详细介绍FastAPI的核心优势、环境搭建和基础用法。相比Flask和Django,FastAPI具有性能高、开发速度快、自动生成文档等优势,特别适合API开发和前后端分离项目。文章包含清晰的对比表格、可直接运行的示例代码和配图说明,帮助新手快速掌握从接口定义到数据校验的核心功能。通过简单的CRUD示例,展示了FastAPI如何实现增删改查操作,并自动生成交互式API文档。学习FastAPI只需基本Pyth

2026-05-13 09:31:32 790

原创 前端vue表格el-table或a-table合并行的功能实现

本文详细介绍了在Vue框架下实现表格行合并的两种方法:基于ElementUI的el-table和基于Ant Design的a-table。对于el-table,通过span-method属性实现行合并,需计算合并行数并设置相应方法;对于a-table,则利用customCell和customRender实现相同功能。两种方法都涉及数据排序、合并行数计算等关键步骤,并提供了完整的示例代码。文章通过对比两种UI组件的实现方式,为前端开发者提供了实用的表格合并解决方案,适用于报表等需要提升数据可读性的场景。

2026-03-30 09:32:07 824

原创 用户疯狂点击按钮,如何确保你的函数只执行一次?

/ 定义hook/*** 防止重复点击的 Hook*/console.log('正在处理中,请勿重复提交...');return;console.log('提交中...');console.log('提交成功!');console.error('提交失败:', error);return {// 使用<template><h2>如何解决按钮重复点击?</h2><h3>方案五:自定义Hook</h3>提交按钮(Hook方式)

2026-01-14 14:15:20 975

原创 “扫一扫”就登录:深入解析扫码登录功能的技术原理与实现步骤

扫码登录是一种基于移动互联网的新型认证方式,通过二维码实现PC端与手机端的联动登录。相比传统账号密码登录,扫码登录具有操作便捷、安全性高等优势。其实现原理涉及PC端生成二维码、手机端扫码认证、服务端状态同步三个关键环节,采用短轮询、长轮询或WebSocket等技术实现状态同步。典型应用场景包括微信、淘宝等平台的跨设备登录,既能提升用户体验,又能有效防范密码泄露风险。整个流程涵盖二维码生成、状态轮询、移动端确认等步骤,最终完成安全高效的认证过程。

2025-12-16 15:16:41 2788 1

原创 基于Canvas技术结合自定义指令实现页面背景图水印功能方案(增强版)

水印一般是在页面上覆盖一层半透明的文字或者图片,防止截图或者未经授权的使用。实现方法可能有几种,比如用CSS生成背景图,或者用Canvas动态生成水印,再插入到页面中。在Vue中,可以封装成一个组件或者自定义指令。考虑到Vue的特性,自定义指令可能更方便,因为可以全局注册,然后在需要的元素上使用,或者直接应用到根元素上覆盖整个页面。

2025-03-21 11:14:24 2167

原创 基于Node.js实现大文件断点续传的完整方案,与前端的Vue+Element UI示例完美配合

Spark-md5是一个JavaScript库,用于快速计算文件或数据的MD5值,支持浏览器环境,可用于文件完整性校验和分片计算。p-limit是一个用于限制并发操作的JavaScript库,主要用于控制同时执行的异步操作数量,以避免系统资源过度占用和性能下降。如果用户关闭了浏览器或刷新了页面,当用户再次选择文件时,通过计算哈希值并与服务器上的记录进行比较,以确定哪些分片已经上传。当用户选择文件时,计算文件的哈希值作为唯一标识,并检查哪些分片已经上传。合并分片接口:当所有分片上传完成后,合并成完整的文件。

2025-03-19 09:22:00 1909

原创 鸿蒙HarmonyOS NEXT开发:蓝牙服务开发(低功耗蓝牙)

蓝牙技术是一种无线通信技术,可以在短距离内传输数据。它是由爱立信公司于1994年提出的,使用2.4 GHz的ISM频段,可以在10米左右的距离内进行通信。可以用于连接手机、耳机、音箱、键盘、鼠标、打印机等各种设备。特点是低功耗、低成本、简单易用。目前已经发展到了第五代,支持更高的数据传输速率和更广的覆盖范围。a2dp模块(高级音频分发配置文件):A2DP是Advanced Audio Distribution Profile的缩写,即高级音频分发配置文件。

2025-03-05 10:20:45 2455 2

原创 鸿蒙HarmonyOS NEXT开发:使用三方库实现Echarts图表功能的实战指南

ECharts是一个基于JavaScript的图表库,它提供了丰富的图表类型和交互功能,使开发者能够在网页中创建各种类型的交互式图表和数据可视化效果。无论是折线图、柱状图、饼图,还是散点图、雷达图、地图等,ECharts都能轻松应对。

2025-03-04 15:30:02 3303 1

原创 DeepSeek:当人人都会用AI时,你如何用得更好更出彩?从入门到精通《场景实战阶段二》

设计高效的创作提示语,需要关注文章的结构设计与表达特色。针对不同类型的微博内容,提示语设计需要采取差异化策略。微博内容创作的关键在于把握“短平快”的平台节奏,同时又要确保内容的价值密度。与其他自媒体平台相比,微信公众号的读者对论据的权威性和可靠性要求更高。论点之间需要形成清晰的递进关系,可以是“现象—原因—影响—对策”或“问题—分析—方案—效果”等框架。在论证过程中融入不同视角的观点,既展现思考的全面性,又能增强文章的可信度。通过提示语明确文章的论证路径,包括论点展开顺序、论据类型和过渡方式。

2025-02-26 10:45:07 2002

原创 DeepSeek:当人人都会用AI时,你如何用得更好更出彩?从入门到精通《场景实战阶段一》

在商业环境中,优质的文案起到了品牌与消费者之间沟通的关键作用。它不仅应准确传达信息,还需激发情感共鸣,从而有效引导目标受众作出相应的决策或行动。本节将从品牌定位、价值主张和未来愿景三个核心要素出发,通过关键考量、常见陷阱和提示语框架三个维度来详细阐述每个要素的重要性和设计方法。在商业文案写作中,最终目标往往是促使受众采取特定行动,行动引导的核心在于说服和激励。在商业文案设计中,情感共鸣是影响消费者行为的重要因素,核心在于共情和感染。在商业文案写作中,有效的信息传递是基础,信息传递的核心在于清晰和精准。

2025-02-26 09:34:27 1353

原创 DeepSeek:当人人都会用AI时,你如何用得更好更出彩?从入门到精通《高手进化阶段》

为了使生成的气候变化文章变得更加深度和细节,可以利用DES(Detailed Explanation Strategy)来构建一个关键概念细节矩阵。任务目标:创作一篇关于气候变化的文章,旨在提高公众意识并促进行动。KTT基于认知科学中的迁移学习理论和组织学习理论。(1)陈述型(强度8):提供可靠的气候变化数据和科学发现。• 关键特征:全球变暖、极端天气、海平面上升、生态系统变化。(2)指令型(强度7):鼓励读者采取具体的环保行动。(3)表达型(强度6):传达对气候变化威胁的紧迫感。

2025-02-25 13:56:25 1235

原创 DeepSeek:当人人都会用AI时,你如何用得更好更出彩?从入门到精通《效率飞跃阶段》

提示语(Prompt)是用户输入给AI系统的指令或信息,用于引导AI生成特定的输出或执行特定的任务。简单来说,提示语就是我们与AI“对话”时所使用的语言,它可以是一个简单的问题,一段详细的指令,也可以是一个复杂的任务描述。控制类元素用于管理和引导AI的生成过程,确保输出符合预期并能够进行必要的调整,是实现高级提示语工程的重要工具。信息类元素决定了AI在生成过程中需要处理的具体内容,包括主题、背景、数据等,为AI提供了必要的知识和上下文。控制提示语长度的技巧:避免嵌套复杂的指令、保持简洁性、使用分步提示。

2025-02-25 10:46:03 1660

原创 DeepSeek:当人人都会用AI时,你如何用得更好更出彩?从入门到精通《基础对话阶段》

此类模型通常通过对大量文本数据的训练,掌握语言规律并能够生成合适的内容,但缺乏像推理模型那样复杂的推理和决策能力。CoT链式思维的出现将大模型分为了两类:“概率预测(快速反应)”模型和“链式推理(慢速思考)”模型。前者适合快速反馈,处理即时任务;推理模型: 推理大模型是指能够在传统的大语言模型基础上,强化推理、逻辑分析和决策能力的模型。“为降低物流成本,现有两种方案: ①自建区域仓库(初期投入高,长期成本低) ②与第三方合作(按需付费,灵活性高) 请根据ROI计算模型,对比5年内的总成本并推荐最优解。

2025-02-24 09:44:56 1092

原创 DeepSeek:当人人都会用AI时,你如何用得更好更出彩?从入门到精通《入门阶段》

通过系统的学习、实践和创新,你将能够掌握这一领域的前沿技术,并在实际项目中应用这些知识。直接面向用户或者支持开发者,提供智能对话、文本生成、语义理解、计算推理、代码生成补全等应用场景,支持联网搜索与深度思考模式,同时支持文件上传,能够扫描读取各类文件及图片中的文字内容。对于已有的文本内容,Deepseek能够进行润色、修改和校对,提升文本的质量和可读性。起源:Deepseek的概念最初源于对自然界奥秘的无限好奇,随着人工智能、大数据、云计算等技术的飞速发展,逐渐从概念转变为具体的技术平台和工具。

2025-02-24 09:25:14 1110

原创 鸿蒙HarmonyOS NEXT开发:优化用户界面性能——组件复用(@Reusable装饰器)

组件复用是优化用户界面性能,提升应用流畅度的一种重要手段,通过复用已存在的组件节点而非创建新的节点,从而确保UI线程的流畅性与响应速度。组件复用针对的是自定义组件,只要发生了相同自定义组件销毁和再创建的场景,都可以使用组件复用,例如滑动列表场景,会出现大量重复布局的创建,使用组件复用可以大幅度降低了因频繁创建与销毁组件带来的性能损耗。然而,面对复杂的业务场景或者布局嵌套的场景下,组件复用使用不当,可能会导致复用失效或者性能提升不能最大化。例如列表中存在多种布局形态的列表项,无法直接复用。

2025-02-13 13:54:28 1916

原创 鸿蒙HarmonyOS NEXT开发:横竖屏切换开发实践

横竖屏切换功能即实现应用内既支持竖屏显示也支持横屏显示的效果。对于应用内不同页面显示方向不同的情况,需要在应用逻辑中,动态修改窗口方向,来实现该效果,例如包含视频播放功能的应用,首页内容是采用竖屏方式,而视频详情页则采用横屏方式展示。窗口旋转策略的选择常用应用类型的横竖屏开发常见的横竖屏开发问题旋转时,由于整窗一起旋转,会导致页面重新布局,但是实际上需要展示的可能只有播放内容,对于其他的组件可以使用自定义组件冻结功能,避免由于旋转导致的UI更新操作。例如视频播放底下的详情内容,可能是单独的组件。

2025-02-12 10:21:55 3739 4

原创 鸿蒙HarmonyOS NEXT开发:优化复杂UI页面的性能——自定义组件冻结(freezeWhenInactive属性)

自定义组件冻结功能专为优化复杂UI页面的性能而设计,尤其适用于包含多个页面栈、长列表或宫格布局的场景。在这些情况下,当状态变量绑定了多个UI组件,其变化可能触发大量UI组件的刷新,进而导致界面卡顿和响应延迟。为了提升这类负载UI界面的刷新性能,开发者可以选择尝试使用自定义组件冻结功能。开发者通过设置freezeWhenInactive属性,即可激活组件冻结机制。

2025-02-10 09:34:38 1592

原创 鸿蒙HarmonyOS开发:一次开发,多端部署(界面级)常见布局解决方案

外层可以使用栅格组件GridRow,通过调用OnBreakpointChange事件,调整不同的断点下Swiper的前后边距,实现在不同屏幕尺寸上的显示不同Swiper图片数。在大屏上,Grid组件里的9宫格图片大小过大,页面整体浏览内容减少,可以设置Grid组件宽度和宽高比,使Grid组件保持固定大小,不会随着屏幕尺寸变化而变化。针对信息流单张图片过大的情况,设置aspectRatio和constrainSize属性,可以通过对图片的布局和尺寸进行约束,达到适配效果。

2025-01-22 10:54:29 1448

一个基于 Node.js (Express) 实现大文件断点续传后端的完整方案,与前端的 Vue + Element UI 示例完美配合

内容概要: 1、当用户选择文件时,计算文件的哈希值作为唯一标识,并检查哪些分片已经上传。返回已上传的片段。 2、文件上传,并发数为3,实现分段上传。 3、文件中途失败后,会重试并再次上传。 4、如果用户关闭了浏览器或刷新了页面,当用户再次选择文件时,通过计算哈希值并与服务器上的记录进行比较,以确定哪些分片已经上传。检查服务器上的上传状态来恢复上传。 5、文件上传成功,并完成文件合并。 适合人群: 1、具备一定前端基础,熟悉Vue + Element UI 的开发者。 能学到什么: 1、大文件分割。 2、计算文件哈希。 3、控制请求并发。 4、请求重连。 5、文件断点续传。 阅读建议:此资源以简单的demo演示了文件断点续传使用的全过程,介绍了基本的思路,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码。

2025-03-18

vue中前端利用refreshToken结合axios拦截器实现token的无感刷新

内容概要: 1、首次登录的时候会获取到两个token(AccessToken,RefreshToken)。 2、持久化保存起来(localStorage方案)。 3、正常请求业务接口的时候携带AccessToken。 4、当接口口返回401权限错误时,使用RefreshToken请求接口获取新的AccessToken。 5、替换原有旧的AccessToken,并保存。 6、携带新AccessToken,继续未完成的请求。 7、RefreshToken也过期了,跳转回登录页面,重新登录。 适合人群: 1、具备一定前端基础,熟悉CSS的开发者。 能学到什么: 1、响应拦截器处理401权限错误。 2、防止重复请求refreshToken接口。 3、同时多个请求返回401,需要刷新token。 阅读建议:此资源以简单的demo演示了RefreshToken使用的全过程,介绍了基本的思路,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码。

2024-01-16

数据可视化大屏自适应,保持比例不变形,满足不同分辨率的需求-利用transform的scale属性缩放,缩放整个页面

内容概要: 1、数据可视化大屏自适应,满足不同分辨率需求。 2、利用transform的scale属性缩放,缩放整个页面。。 3、在任意屏幕下保持16:9的比例,保持显示效果一致。 4、更宽:(Width / Height) > 16/9,以高度为基准,去适配宽度。 5、更高:(Width / Height) < 16/9,以宽度为基准,去适配高度。 6、1920*1080的分辨率大屏页面(16:9)比例效果演示。 7、1024*768的分辨率大屏页面(4:3)比例效果演示。 8、8400*3150的分辨率大屏页面(不规则)比例效果演示。 适合人群: 1、具备一定前端基础,熟悉CSS的开发者。 能学到什么: 1、做大屏项目时,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留白即可。 2、利用transform的scale属性缩放,缩放整个页面。

2024-01-09

优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航-更新版(支持自由组合总数超过5个tabBar菜单)

内容概要: 1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航custom-tab-bar优雅实现微信小程序动态tabBar。 3、实现自由组合tabBar菜单项目,支持自由组合总数超过5个tabBar菜单。 4、本示例是7个底部导航,分2种权限,权限1显示1,2,3;权限2显示4,5,6,7; 5、你也可以根据自己随便组合显示导航,比如1,3,5;2,4,6,7。 6、修改好权限后,记得要重新编译哦。 7、注意你的不同权限页面里面对应的高亮下标设置,及第一个页面的跳转路径。 适合人群: 1、具备一定编程基础,熟悉小程序开发者。 能学到什么: 1、使用自定义组件,完全接管 tabBar 的渲染。

2024-01-03

vue3+vite+pinia+electron实现桌面端应用-自定义收藏夹功能

内容概要:通过vue3+electron实现一个基础的桌面端应用——收藏夹功能。使用了部分vue3的基本功能及方法,了解Electron的一下API的使用,开发中的常用的插件及依赖的使用方法。 适合人群:具备一定编程基础,对vue有一定的了解,工作1-3年的研发人员。 能学到什么: 1、使用pinia+localStorage数据持久化 2、使用unplugin-auto-import自动引入依赖 3、使用unplugin-vue-components自动引入组件 4、使用provide与inject实现组件间通信 5、实现electron主进程与渲染进程间相互通信 6、使用element-plus构建UI界面

2023-11-01

vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息

内容概要:vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息;增加涟漪特效动画。 适合人群:具备一定编程基础,工作1-3年的研发人员 能学到什么: - 使用echarts实现省市地图绘制 - 根据数据在地图显示柱状图 - 根据数据显示数据,涟漪效果 阅读建议:本文以吉林省地图为例,来实现吉林省市的地图的绘制。根据数据在地图上显示柱状图信息;增加涟漪特效动画。你也可以显示中国地图或其他身份地图。原理是一样的哦。 实现过程:主要是通过geo地理坐标系组件实现地图绘制。柱状图是利用3个样式(顶部椭圆、中部矩形、底部椭圆)层叠实现的。

2023-11-22

vue中使用echarts实现地图区域颜色,省市切换,根据数据实现区的打点效果

内容概要:vue中使用echarts实现省市地图绘制,根据数据不同显示不同区域颜色;实现省市切换效果。根据数据实现区的打点效果。 适合人群:具备一定编程基础,工作1-3年的研发人员 能学到什么: 1、使用echarts实现省市地图绘制; 2、根据数据不同显示不同区域颜色; 3、实现省市地图点击切换效果; 4阅读建议:本文以吉林省地图为例,来实现吉林省市的点击切换及打点效果。你也可以显示中国地图或其他身份地图。原理是一样的哦。 实现过程,主要是通过markPoint及经纬度数据来实现地图的打点效果。使用visualMap来实现不同区域颜色的效果。

2023-11-17

vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息

内容概要:vue中使用echarts实现省市地图绘制,根据数据不同显示不同天气图标;显示省市的温度信息等数据。 适合人群:具备一定编程基础,工作1-3年的研发人员 能学到什么: 1、使用echarts实现省市地图绘制 2、根据数据显示省下市的天气图标 3、根据数据显示省下市的温度信息 阅读建议:本文以吉林省地图为例,来实现吉林省下所有市的天气显示效果。你也可以显示中国地图或其他身份地图。原理是一样的哦。 实现过程,主要是通过label里面的formatter和rich来自定义样式的,在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

2023-11-22

优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航

内容概要: 1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航 custom-tab-bar优雅实现微信小程序动态tabBar。 适合人群: 1、具备一定编程基础,熟悉小程序开发者 能学到什么: 1、使用自定义组件,完全接管 tabBar 的渲染。

2023-11-01

vue基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生

内容概要:以vue2为例,搭建一个左侧导航与顶部导航的二级导航的iframe框架项目。基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生。 适合人群:具备一定编程基础,工作1-3年的研发人员 能学到什么: 1、使用postMessage方法来完成基座项目和子项目之间的通讯 2、使用position: fixed解决iframe的弹窗及遮罩层问题 3、使用requestFullscreen()解决iframe里的全屏问题 4、使用history解决浏览器的后退问题 5、页面刷新,iframe可以加载正确页面

2023-11-01

VLC多媒体播放器 VLC Media Player

VLC Media Player 是一款可播放大多数格式,而无需安装编解码器包的媒体播放器。可以播放 MPEG-1、MPEG-2、MPEG-4、DivX、DVD/VCD、卫星数字电视频道、地面数字电视频道(digital terrestrial television channels)、在许多作业平台底下透过宽带 IPv4、IPv6 网络播放线上影片;此软件开发项目是由法国学生所发起的,参与者来自于世界各地,设计了多平台的支持,可以用于播放网络串流及本机多媒体档案之播放。

2023-05-26

空空如也

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

TA关注的人

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