- 博客(164)
- 收藏
- 关注
RSS订阅原创 AI Agent是什么？以及主要的应用场景
AI Agent是一种以目标为导向的智能体，能够自主思考、规划并执行任务。它由大语言模型(LLM)作为核心大脑，结合感知、规划、工具使用和记忆四大组件，具备主动完成任务的能力。与传统聊天机器人不同，AI Agent具有自主性、工具调用能力和持续记忆。主要应用包括：1)自动化编程和DevOps；2)企业流程自动化；3)个人智能助理；4)深度知识研究；5)游戏NPC开发；6)多智能体协作系统。当前最成熟的落地场景是软件开发领域，如Devin、Cursor Agent等工具已能实现全自动编程和bug修复。AI A
2026-01-23 10:04:37
794
原创 LLM 中的自回归模型与非自回归模型：GPT 和 BERT 的区别
本文对比了自回归模型（如GPT）与非自回归模型（如BERT）的核心差异。自回归模型通过逐步预测下一个token实现流式文本生成，适合聊天应用；而BERT基于Transformer Encoder结构，通过双向注意力机制实现文本理解，擅长语义分析但不具备生成能力。关键区别在于：GPT采用单向解码逐词生成，BERT使用双向编码整体理解；GPT训练目标是文本续写，BERT则是填空和句间关系预测。这种架构差异决定了GPT适合生成任务，BERT专精理解任务。
2026-01-09 15:04:42
1075
原创 AI中的函数调用是什么？
摘要： 大模型中的函数调用机制指模型根据自然语言需求自动选择并调用预定义工具（如API/数据库），再将结果整合到回答中。其核心流程包括：1）定义工具名称、功能和参数结构；2）用户自然语言输入；3）模型生成结构化调用指令；4）后端执行并返回结果；5）模型生成最终回答。该机制相比传统文本API生成更安全可靠，支持业务系统集成、结构化输出和多工具组合，典型应用包括实时数据查询、文件处理、图片生成等。系统会根据问题类型自动判断是否调用工具，纯文本任务则直接在模型内部处理。
2025-12-12 10:59:36
810
原创 向量检索：AI 是如何进行语义匹配的？
摘要： 向量检索通过将文本/图片转化为数字向量，利用语义相似度而非关键词匹配查找相关内容，是RAG（检索增强生成）的核心技术。其流程包括：1) 将知识库内容转为向量；2) 用户提问向量化；3) 计算向量距离（如余弦相似度）返回最匹配结果。相比传统关键词搜索，向量检索能理解语义关联（如“重置密码”与“修改登录凭证”），适用于长文档、技术知识库等场景。主流方案结合Embedding模型（如BAAI、OpenAI）与向量数据库（Milvus、Qdrant等），构成高效RAG系统。
2025-12-05 16:51:02
655
原创 如何利用AI提升前端开发效率：生成代码、重构与错误诊断
讨论了AI在前端开发中的应用，包括代码生成、重构、错误诊断和性能优化。文档提供了使用AI生成高质量、可维护代码的正确方法，如何让AI重构代码以提升效率，AI如何解释错误日志和性能瓶颈，以及AI如何根据UI设计稿生成代码。文档强调了工程师与AI合作开发的重要性，以及如何通过链式思考（Chain-of-Thought）方法让AI执行复杂任务。
2025-12-04 14:42:57
811
原创 【基础】Three.js 实现 3D 字体加载与 Matcap 金属质感效果（附案例代码）
本文介绍了在Three.js中创建3D文本的完整流程：首先需要将字体转换为.typeface.json格式；然后使用FontLoader加载字体，通过TextGeometry生成3D几何体并居中处理；接着推荐使用Matcap材质为文字添加高性能的金属质感；最后通过添加随机分布的小元素（如环面和方块）丰富场景层次。文章提供了完整代码示例，展示了如何实现具有金属质感的3D文字效果，并强调了Matcap材质不依赖光照、性能优越的特点。这种技术适用于Logo、标题和展示页等3D可视化场景。
2025-12-04 10:23:33
1171
原创 语音合成：web将文本转成语音
Web Speech API 提供语音合成功能，通过 SpeechSynthesis 接口控制文本转语音播放。核心方法包括 speak() 播放语音、cancel() 清空队列，以及暂停/恢复功能。SpeechSynthesisUtterance 对象可设置文本、语言、音量、语速等参数，并支持播放结束事件回调。示例代码展示了中文语音播放和循环提醒的实现方式，适用于网页语音交互场景。该技术兼容现代浏览器，可实现多语言、多音色的语音输出功能。
2025-11-28 14:30:52
292
原创 UI设计原则和Nielsen 的 10 条可用性原则
本文系统总结了UI/UX设计的核心原则与实践方法。在界面设计方面，提出对齐、对比、留白和层次4大视觉原则；详细解析了色彩、字体、图标等基础视觉元素的使用规范；强调了一致性、反馈等交互设计要点。最后完整阐释了Nielsen十大可用性原则，包括系统状态可见性、错误预防等专业准则。全文为设计师提供了从视觉规范到交互逻辑的完整框架，注重实用性与用户友好性，既包含基础设计要素，也涵盖了高级用户体验原则，是UI/UX设计的综合性指南。
2025-11-20 10:55:44
780
原创 文件下载中，对Blob类型的错误提示处理
摘要：使用 responseType: 'blob' 下载文件时，axios 会将所有响应转为 Blob 对象，导致无法直接获取 JSON 错误信息。提供两种处理方法：1）在全局响应拦截器中统一处理 Blob 错误，通过异步解析 Blob 为文本并显示错误消息；2）在业务代码中单独处理，先检查 Blob 响应，解析 JSON 错误信息后显示。两种方式都可解决 Blob 响应中错误信息获取问题，全局拦截器适合统一管理，业务代码处理则更灵活。
2025-11-18 15:33:06
271
原创 改善网页设计 |《Don’t Make Me Think》精简易用的内容总结
《Don't Make Me Think》是网页可用性设计的经典著作，核心观点是"不要让用户思考"，强调用户只想快速完成任务而非研究界面。作者Steve Krug指出用户行为特点：扫描而非阅读、选择看似可行的选项、追求效率而非探索。优秀设计应做到：界面一目了然（明确按钮、清晰层级）、导航不迷路（稳定结构、搜索功能）、减少负担（简洁表单、智能默认值）。可用性测试至关重要，即使简单测试也能发现关键问题。设计黄金法则包括突出重要元素、保持简洁留白、使用直白文案。最终目标是减少每一步操作阻力，创
2025-11-17 16:32:07
828
原创 ＜audio＞ 元素如何避免浏览器自动播放音频限制
摘要：现代浏览器限制页面自动播放音频，需用户交互。解决方案是先将<audio>设为静音自动播放，再解除静音。代码示例展示了如何通过muted属性绕过限制，并推荐了免费音效下载网站。注意音频需放在public目录，播放失败时返回null。该方法利用延迟取消静音实现自动播放效果。（149字）
2025-11-14 13:38:01
189
原创 字体加载导致的布局偏移解决方案（线上环境出现右侧抖动，而本地没有抖动）
摘要：字体加载导致的视觉抖动问题，源于线上首次加载字体时出现1-2秒延迟，触发布局重排。解决方案包括：1）在HTML中预加载字体文件；2）CSS中设置字体度量覆盖（ascent-override等）；3）锁定容器尺寸防止偏移；4）为动画元素添加will-change属性优化性能。通过多管齐下的优化措施，有效解决了字体切换时的布局抖动问题。（134字）
2025-11-10 16:22:19
256
原创 前端实现自动版本检测与更新提示机制
摘要 本文介绍了一个系统版本自动检测更新功能的实现方案。该功能在应用启动后每隔10分钟检查服务器版本信息，通过与本地缓存版本比较，当发现新版本时弹出提示对话框。用户可选择立即更新（刷新页面）或稍后提醒（30分钟后再次提示）。 技术实现包含两个核心组件：versionCheck.js工具类负责版本检测、比较和本地存储管理；VersionUpdateDialog.vue提供用户交互界面。系统通过定时请求服务器version.json文件获取最新版本号，使用本地存储记录用户操作偏好。该方案实现了版本更新的自动化检
2025-11-06 15:26:58
858
原创 【案例】Three.js 模拟水波纹与天空场景（附案例代码）
Three.js实现动态水面与真实天空效果 本文介绍了如何使用Three.js的Water和Sky类创建逼真的水面和天空效果。通过PlaneGeometry创建水面载体，配合法线贴图实现波纹动画，调整参数控制水面扭曲、反射和颜色。Sky类通过大气散射算法渲染动态天空，并能转换为环境贴图影响场景光照。文章还演示了如何添加浮动方块增强场景互动性，完整代码展示了水波动画、天空光照与物体反射的整合实现。关键点包括：使用官方着色器简化开发、参数调优实现自然效果、通过PMREMGenerator生成环境贴图。
2025-09-03 16:05:37
729
原创 【案例】Three.js 半球光与雪花降落场景（附案例代码）
摘要： 本文介绍了Three.js中半球光(HemisphereLight)的应用，模拟天空与地面的环境光效果，适合室外场景但无法产生阴影，需配合平行光(DirectionalLight)实现阴影。通过代码示例展示了如何创建半球光、平行光、地面和球体，并设置阴影效果。此外，还演示了雪花粒子系统的实现，包括加载雪花纹理、生成随机粒子位置以及下落动画，最终形成完整的冬日场景渲染效果。完整代码提供了场景搭建、光照设置和粒子动画的整合方案。
2025-09-03 14:35:38
890
原创 【基础】Three.js中的粒子系统 （附案例代码）
Three.js 粒子系统教程：创建动态粒子效果 本文介绍了使用Three.js创建粒子系统的方法，包括基础实现和纹理增强效果。核心通过THREE.Points类结合BufferGeometry和PointsMaterial，实现大量粒子的渲染。文章详细讲解了基础方形粒子的创建过程，并解释了默认呈现正方形的原因。随后展示了如何通过纹理贴图实现圆形和雪花粒子效果，包括纹理加载、透明度设置和动画实现。文中还提供了粒子动画代码，演示了上下浮动和螺旋运动效果，并附有完整的代码示例和效果GIF展示。最后给出了纹理图片
2025-09-01 10:07:03
1402
原创 【基础】Three.js中如何添加阴影（附案例代码）
这篇文章介绍了如何使用three.js实现阴影效果，主要包含三个关键步骤：1. 渲染器开启阴影功能；2. 使用支持阴影的光源（定向光、点光源、聚光灯）；3. 设置物体材质为支持光照的材质并开启投射/接收阴影。文中提供了完整代码示例，包括场景搭建、光源设置、球体动画和调试面板等，并解释了为什么动画要使用requestAnimationFrame而不是setInterval（更流畅、后台节能等）。最后还给出了相关基础教程链接，适合three.js初学者学习阴影实现。
2025-09-01 09:47:33
930
原创 ETag + If-Match和ETag + If-None-Match 的区别与使用场景
摘要：HTTP协议通过ETag机制解决资源并发修改和缓存验证问题。ETag是服务器生成的资源版本标识，客户端在修改资源时携带If-Match头验证版本一致性，若冲突则返回412错误；在获取资源时使用If-None-Match头验证缓存有效性，未变更则返回304状态码。前者用于防止多人同时修改导致的冲突，后者用于优化静态资源加载性能。两种机制分别适用于不同的HTTP方法和场景，共同保障Web应用的并发控制和缓存效率。
2025-08-26 09:09:24
511
原创 文件导出时无法获取响应头Content-Disposition的文件名
前端无法直接获取Content-Disposition响应头是因浏览器CORS安全限制，需后端通过Access-Control-Expose-Headers显式暴露。解决方案包括后端配置响应头，前端通过正则解析文件名，并提供完整的文件下载方法（支持zip/csv/xlsx），处理Blob响应及错误类型。代码示例涵盖文件名提取、下载逻辑及异常处理，确保导出功能兼容多种文件格式。
2025-08-20 09:50:55
680
原创 Vuetify日期时间选择器的使用与踩坑
摘要：Vuetify 3中时间选择器(v-time-picker)是需单独引入的实验性组件。本文介绍了如何结合v-date-picker和v-time-picker封装可复用的日期时间选择器组件，使用dayjs处理日期格式。组件包含输入框触发器、日期/时间选择面板及确认/取消功能，支持双向绑定和清空操作。使用时需先安装dayjs，然后在项目中导入封装好的组件即可实现完整的日期时间选择功能。
2025-08-11 09:33:23
644
原创 vue和React中配置Eslint和Prettier
本文介绍了如何在Vue和React项目中配置ESLint代码检查工具。对于Vue项目，需安装ESLint核心包、Vue插件、Prettier等依赖，并创建包含JavaScript和Vue文件特定规则的配置文件，同时配置Prettier格式化规则。React项目则需要额外安装React相关插件，更新ESLint配置以支持JSX和React Hooks等特性。两种配置都包含忽略文件设置、基础规则和自定义规则，并提供了运行检查的npm脚本命令。通过合理配置ESLint，可以统一团队代码风格，提高代码质量。
2025-07-14 15:42:05
340
原创 RAG 推理引擎：如何通过外部知识库提升AI搜索与生成能力？
RAG（检索增强生成）技术解析 RAG是一种让大语言模型实现开卷考试的智能系统，通过结合信息检索与文本生成能力，提升回答的准确性和时效性。其工作流程分为： 离线索引阶段 文档切块处理 文本向量化嵌入 构建向量数据库 在线推理阶段 将用户问题转换为向量 检索相似度最高的Top-K文本片段 组合检索结果与原始问题生成增强提示 大模型基于提示生成最终答案 RAG的核心价值在于：降低AI幻觉、支持知识实时更新、提高答案可追溯性，以及无需微调即可注入领域知识。通过结构化提示工程，RAG将开放问
2025-07-11 17:24:08
949
原创 WSL/Linux 常用命令速查
这篇文章总结了Linux/WSL中的常用命令，分为5大类别：1)系统基础命令如pwd、ls等目录操作；2)Debian/Ubuntu的软件管理命令apt；3)网络相关命令如ping、ssh；4)文件查看编辑命令cat、vim；5)Git版本控制命令。特别说明了组合命令的用法，如sudo apt update && sudo apt install表示管理员身份更新并安装软件。这些命令涵盖了Linux系统操作、软件管理、网络工具、文件处理及版本控制等核心功能。
2025-06-30 17:28:22
413
原创 使用WSL在Ollama本地模型部署（windows）
本文介绍了如何在Windows系统的WSL（Windows Subsystem for Linux）中安装Ubuntu子系统，并部署Ollama工具来本地运行开源大语言模型。主要内容包括：1）通过PowerShell命令安装WSL和Ubuntu；2）三种方法在Ubuntu中安装Ollama（自动安装脚本、手动安装或本地下载安装）；3）启动Ollama服务并运行轻量级AI模型（如deepseek-r1:1.5b）。文章还提供了WSL常用命令和Ollama模型库链接，帮助用户在Windows环境下实现离线AI模
2025-06-30 16:56:20
1774
原创 前端实现导出element-plus表格和从后端获取数据导出，支持勾选导出
本文介绍了如何使用file-saver和xlsx库实现前端Excel文件导出功能。通过element-plus表格组件展示数据，支持选择导出勾选项或默认导出全部数据。代码实现了表头映射、列宽设置、状态格式化等功能，最终将JSON数据转为Excel文件并触发浏览器下载。核心步骤包括：安装依赖、构建工作表、设置格式、生成文件并保存。该方案适用于前端处理表格数据导出需求，提供了灵活的配置选项。
2025-05-26 15:04:53
1485
原创 AI提示怎么写最聪明？来自Google 的提示工程
LLM 并不正式地预测单个 token。相反，LLM 预测下一个 token 可能是什么的概率，LLM 词汇表中的每个 token 都有一个概率。然后对这些 token 概率进行采样，以确定下一个生成的 token 将是什么。
2025-04-29 13:18:11
981
原创 使用github pages部署vuepress搭建的博客
几个月前写了一篇，拖了几个月终于把这篇github pages部署方法写好了（我太懒了🥹）这里我使用的是部署之前搭建的博客，因为它是免费的！部署起来也比较方便，缺点是域名有些不美观，会有些长。
2025-04-14 10:00:34
508
原创 长轮询和短轮询的区别？
短轮询：前端固定时间间隔（如每 5 秒）发送 HTTP 请求，获取最新数据。服务器不管有没有新数据，都返回响应，前端定时继续请求。
2025-03-04 10:11:09
585
原创 前端如何渲染几千几万条数据而不卡顿?
在 Vue 中渲染成千上万条数据时，直接渲染所有 DOM 节点会导致严重的性能问题（如内存占用高、渲染卡顿）。
2025-03-03 16:21:45
1546
1
原创 从vue底层原理上解释ref和reactive的区别
在 Vue 3 中，ref 和 reactive 是用于的两种核心 API，它们的底层实现和适用场景有显著差异。
2025-02-24 16:39:41
727
原创 HTTP1.0/1.1/2.0/3.0 的区别?
HTTP（Hypertext Transfer Protocol）是用于传输超文本的协议。各版本的主要区别体现在性能优化、数据传输方式以及支持的功能上。
2025-01-15 14:55:06
1008
原创 什么是 DNS？DNS 的三种查询方式？
DNS（Domain Names System），域名系统，是互联网一项服务，是进行和与之相对应的进行转换的服务器。简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址。域名是一个树状结构，最顶层的域名是（root），然后是（top-level domain，简写 TLD），再是。例如www.xxx.com，www为、xxx为、com为，系统为用户做了兼容，域名末尾的一般不需要输入。这种树状结构的意义在于，只有上级域名，才知道下一级域名的 IP 地址，需要逐级查询。
2025-01-15 13:53:16
2122
原创 Javascript中正常对象和异质对象是什么？
正常对象是指符合 ECMAScript 规范中默认行为的对象。这些对象没有特别的内部行为或自定义逻辑，它们的属性访问、赋值、删除等操作完全遵循语言的标准行为。
2025-01-13 15:33:01
534
原创 Web Worker和 Service Worker 的区别和共同点？
Web Worker 是浏览器提供的多线程机制，用于在后台执行脚本,适合长时间运行的计算密集型任务。
2025-01-06 11:01:56
1295
原创 JavaScript中对象继承的方式有哪些？
父类的属性和方法不会共享到所有子类实例，支持向父类传递参数。通过在子类的构造函数中调用父类构造函数，避免共享引用类型属性，也就是下面所提到的。采用这种方式父类构造函数只调用一次，继承了父类的实例属性和原型方法，高效且是目前最常用的继承方式。继承了父类的实例属性和原型方法，不会共享引用类型属性，每个实例都可以单独使用父类的方法。简化了继承的语法，支持调用父类构造函数（super），更符合面向对象编程的习惯。当使用原型链继承时，父类的引用类型属性会被所有子类实例共享，子类通过原型链继承父类的属性和方法。
2025-01-06 09:58:56
530
原创 《Vue.js设计与实现》权衡的艺术、框架设计的核心要素
从范式上来看，视图层框架通常分为命令式和声明式。早年间流行的 jQuery 就是典型的命令式框架。命令式框架的一大特点就是关注过程，每一步都有确定的执行步骤。
2024-12-26 16:19:58
1161
原创 什么是Web Worker？如何使用Web Worker？
JavaScript 语言采用的是单线程的，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。是一种，允许在后台线程中执行脚本，从而避免长时间运行的脚本阻塞用户界面。Web Worker 的作用，就是。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。主线程与 Worker 之间的通信内容，
2024-11-27 14:01:59
3046
原创 【react】Redux基础用法
Redux 是一个用于 JavaScript 应用的状态管理库，它不依赖于任何 UI库，但常用于与 React 框架配合使用。它提供了一种集中式的状态管理方式，将应用的所有状态保存在一个单一的全局 Store（存储）中，使得状态的变化和共享变得更加可控和可预测。✨Redux 的核心概念：StoreRedux 的 Store 是一个对象，存储了应用的全部状态。应用中只有一个 Store，作为单一数据源。任何组件需要访问状态时都会从这个 Store 中获取数据。ActionAction 是一个简单的 Jav
2024-11-05 08:18:38
1839
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人