- 博客(233)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 智能配镜软件「镜选Pro」设计方案
本文介绍了一款智能化配镜工具，通过"线上精准匹配+线下便捷体验"模式解决用户配镜痛点。系统包含六大核心功能：AI智能测配系统（在线视力检测和处方解析）、3D虚拟试戴、智能选款推荐、镜片智能定制、线下服务联动和个人配镜档案。前端采用Vue3/React框架，结合Three.js、TensorFlow.js等技术实现3D建模和AI识别，并优化移动端适配。该工具通过全流程线上化、数据精准性、沉浸式体验和服务闭环四大优势，为用户提供从视力检测到眼镜定制的完整解决方案，实现线上线下一体化服务。
2025-11-26 00:33:45
2036
1
原创 前端工程师 AI 技术每周学习计划表（共 21 周）
本文介绍了一个为期16周的前端与AI技术融合学习计划，分为三个阶段：基础铺垫（2周）、核心技能突破（6周）和进阶提升（8周）。第一阶段重点学习前端核心技术和AI基础概念，包括JS/TS异步处理、React/Vue3进阶、Vite构建流程以及OpenAI API调用。第二阶段深入AI工具链实战、大模型API集成、数据可视化与AI结合、LangChain应用以及工程化实践。第三阶段将探索LlamaIndex等高级工具与复杂业务整合。计划采用"理论学习+实操演练"的模式，每日设置具体任务，涵盖
2025-11-22 14:44:34
2017
原创 站外地图--程序员
A Android 1、0基础学android Angular 1、18 个惊人的 Angular 开源项目 2、Angular 4.x 路由快速入门学习 3、Angular中文网 4、Angular2语法清单 5、Angular 4.x 修仙之路 6、angular2/angular4 ui框架 7、angular菜鸟工具 Ajax ...
2019-06-22 23:45:55
969
原创 本站地图--程序员
本文汇总了AI和CSS技术相关的学习资源与实用技巧。AI部分提供了一份21周的前端工程师AI学习计划表；CSS部分包含36篇技术文章，涵盖层叠样式、浏览器兼容性、布局技巧、动画效果等核心知识；程序人生板块分享了20多项电脑实用技巧，包括系统优化、文件管理、软件推荐等日常办公效率提升方法。内容既包含技术深度探讨，也涉及实际应用场景，适合开发者系统学习与日常参考。
2018-05-14 12:51:25
2285
原创 如果发现页面卡顿如何找到原因解决问题
页面卡顿本质是主线程阻塞或渲染开销过大。排查需先区分类型：加载慢、交互延迟、动画掉帧或内存持续上涨。使用 Chrome DevTools Performance 面板录制，通过 FPS、Long Task、主线程火焰图定位 JS 阻塞；观察 Render/Paint 判断重排重绘问题；Memory 面板检测内存泄漏；Network 与 Lighthouse 辅助分析网络与综合性能。针对性优化：拆分长任务、虚拟滚动、减少 DOM 操作、使用 transform 动画、清除定时器与事件监听、启用缓存与懒加载，提
2026-09-21 13:15:27
205
原创 页面加载后发生大量的AJAX请求,如何优化?
页面初始化大量并发AJAX导致阻塞、带宽抢占。优化核心：减请求数、控并发、延非关键请求、复用结果。优先合并接口，前端实现并发队列（限6个），缓存避免重复请求（共享Promise、localStorage），懒加载非核心数据，使用AbortController及时取消无用请求。结合HTTP缓存与压缩，提升性能。
2026-09-21 12:57:32
298
原创 后端响应巨量数据，如何避免其性能问题？
避免一次性接收、解析与渲染超大数据。后端优先采用游标分页+字段裁剪，减少传输量；前端使用 Fetch + ReadableStream 流式读取，配合 JSON Streaming 分段解析，避免阻塞主线程；数据处理交由 Web Worker，渲染采用虚拟滚动，原始数据不进响应式状态，导出场景直接下载文件。从请求到渲染全链路优化，保障性能与体验。
2026-09-21 12:38:57
199
原创 页面上有100万个任务需要执行，如何保证页面不卡顿？
JS 单线程导致大量任务阻塞主线程，引发卡顿。优化核心：拆分任务、让出主线程、分批执行。纯计算用 Web Worker（子线程运行，不阻塞主线程，但不可操作 DOM）；需操作 DOM 用时间切片，通过 requestAnimationFrame（每帧执行少量任务，兼容性好）或 requestIdleCallback（空闲时执行，适合低优先级）实现；若渲染百万列表，采用虚拟滚动，仅渲染可视区域。辅以任务优先级、防抖节流、文档碎片、中断机制提升性能。
2026-09-21 12:24:07
361
原创 ES6的class继承机制
ES6 class extends 是基于原型链的语法糖，通过 super() 先生成父类 this 再扩展子类属性，解决了 ES5 继承中 this 生成顺序问题，支持继承内置构造函数。其核心是两条原型链：子类 __proto__ 指向父类（继承静态成员），子类 prototype.__proto__ 指向父类原型（继承实例方法）。super 为关键字，用于调用父类构造函数或原型方法，必须在子类构造函数首行调用，否则报错。
2026-09-21 11:42:40
152
原创 《情商 2：影响你一生的社交商》大纲
《社交商》一书将情商概念升级为社交商，强调人际情绪互动对健康、成就和幸福的核心影响。全书分为四部分：首先揭示社交大脑的神经机制，如情绪感染和镜像神经元；其次解析共情的三个层次及其在亲密关系和职场中的应用；第三部分探讨社交商对健康、教育和社会的影响；最后提供提升社交商的7个关键习惯。核心观点指出，人类大脑天生为连接设计，高质量人际关系是幸福的基础，提升社交商能让人活得更健康、从容和有意义。
2026-02-08 17:35:37
759
原创 《情商 1：为什么情商比智商更重要》详情
摘要： 丹尼尔·戈尔曼的《情商》揭示了情绪与理性的关系，提出情商（EQ）比智商（IQ）更关键。核心观点： 情绪优先：杏仁核劫持（Amygdala Hijack）使情绪快于理性，导致冲动行为。 大脑结构：边缘系统（情绪脑）进化更早，常绕过新皮层（理性脑）直接反应。 童年影响：突触修剪与情绪记忆决定成年后的情绪模式。 行动建议：通过识别身体信号、情绪命名、深呼吸等方法，在情绪爆发时创造“理性缓冲”，逐步提升情商。
2026-02-08 17:04:05
1005
原创 《情商 1：为什么情商比智商更重要》大纲
《情商》一书揭示了情绪智力对个人成功的关键作用。全书分为五部分：第一部分剖析情绪大脑的结构与运作机制，解释为何情绪常压倒理性；第二部分提出情商五大核心要素（自我觉察、自我管理、自我激励、同理心和社交技能）；第三部分探讨社交情商在人际关系中的应用；第四部分展示情商在亲密关系和职场中的实践价值；最后部分强调童年时期情商培养的重要性。作者通过神经科学研究和现实案例，论证情商比智商更能预测人生成就，并提供了系统的情商提升方法。本书颠覆了传统对"聪明"的定义，为个人成长和人际关系提供了科学指导。
2026-02-08 14:05:50
795
原创 情商类书籍推荐
看提高情商（EQ）的书籍是非常好的自我提升方式。情商不仅仅是“会说话”或“圆滑”，它更核心的是自我认知、自我管理、同理心和社交技能。为了能根据自己的需求精准选择，我将这些书籍分为了三个梯队：经典必读、实战技巧和深度心理。
2026-02-07 20:15:20
1321
原创 用Cursor编写列表渲染代码，开启性能诊断功能修复渲染瓶颈
本文介绍了使用Cursor编辑器诊断和优化列表渲染性能的全流程。首先开启Cursor的性能监控功能，实时追踪组件重渲染次数和耗时。然后通过一个React示例展示问题代码：1000条数据的直接渲染导致性能瓶颈。诊断发现无关状态更新会触发全量重渲染，首次渲染耗时超过200ms。优化方案包括：1）拆分组件并使用React.memo缓存子组件；2）确保key值唯一稳定。优化后仅当props变化时重渲染，显著提升性能。该流程结合了工具诊断和代码优化实践，适用于前端长列表渲染场景。
2025-12-31 09:44:43
489
原创 克隆jQuery项目的表格组件，迁移为Vue 3组件并优化性能
摘要：本文介绍了将jQuery表格组件迁移到Vue 3的核心思路和实现步骤。主要包括：1）结构重构，用Vue模板语法替代DOM操作；2）状态管理，使用ref/reactive管理数据；3）方法封装，将逻辑封装为组件方法。提供了基础迁移示例代码，包含表格渲染、排序、筛选和分页功能，并对比了jQuery和Vue的实现方式差异。还提出了性能优化措施，如虚拟列表、防抖搜索和后端分页等。最后强调需注意清理jQuery依赖、处理兼容性并进行充分测试验证。
2025-12-12 16:55:54
686
原创 「上一篇组件的Vue3 版本代码」以及「补充后端接口对接逻辑（如 Axios 请求、参数传递）」
本文介绍了一个基于Vue3和TypeScript开发的眼镜商品列表组件，包含完整的筛选、排序和分页功能。主要特点包括：1) 支持关键词搜索、分类筛选、品牌多选和价格区间筛选；2) 提供多种排序方式；3) 实现分页加载和骨架屏效果；4) 采用响应式设计，使用Element Plus组件库构建UI；5) 通过TypeScript进行类型检查，确保代码健壮性。组件还支持外部配置参数，如每页显示数量、最高价格等，具有良好的可扩展性。
2025-12-12 16:40:18
460
原创 用自然语言描述电商商品列表（带筛选、分页），生成组件后二次优化
本文展示了一个基于React和TypeScript的商品列表组件实现，包含完整的筛选功能。组件通过状态管理实现关键词搜索、分类筛选、品牌多选和价格区间筛选，并支持分页展示。代码采用Ant Design UI组件库构建界面，包括输入框、下拉选择、复选框等交互元素。通过useEffect钩子处理数据获取和筛选逻辑，利用分页计算实现数据切片展示。组件还包含加载状态处理、空数据提示等细节，为电商类应用提供了一个可复用的商品列表解决方案。
2025-12-11 11:34:19
335
原创 AI环境配置
本文系列教程详细介绍了基于Node.js 22+和Vercel AI SDK开发AI应用的完整流程。首先讲解了环境搭建和OpenAI库配置方法，随后提供了项目目录结构和常见错误解决方案。针对国内用户特别给出了代理配置指南，并扩展了图片生成、语音识别等AI功能实现。最后展示了React/Vue前端界面对接方案，包括模块化代码重构和错误重试机制优化，形成了一套完整的AI应用开发解决方案。
2025-12-07 22:21:54
291
原创 「Vue、微信小程序 专属 Prompt 完整手册（20 + 高频场景）+ 专属校验清单」以及「前端 Prompt 工程终极手册」（PDF 版）
本文提供Vue和微信小程序开发的完整Prompt手册，涵盖20+高频场景。Vue部分包括组件开发（表单、表格、导航等）、功能实现（接口封装、状态管理等）、问题排查与优化、项目配置及技术选型建议。微信小程序部分涉及页面开发（轮播图、商品列表等）、功能实现（请求封装、存储工具等）、性能优化和项目配置。同时提供详细的校验清单，确保Prompt信息完整、格式规范、约束明确。这些模板化Prompt可帮助开发者快速生成高质量代码，提高开发效率。
2025-12-04 21:52:46
896
原创 「React 专属 Prompt 完整手册（20 + 高频场景，直接复制）」以及「React 专属 Prompt 校验清单（确保无遗漏）」
本文提供了一套完整的React开发Prompt手册，涵盖20+高频场景，分为四大类：1)组件开发类（列表、表单、弹窗等7个组件模板）；2)功能实现类（接口封装、路由守卫等6个功能模块）；3)问题排查类（Hooks依赖、性能优化等4个调试场景）；4)项目配置类（ESLint、打包优化等3个工具配置）。同时附赠React Prompt校验清单，包含4大类15项检查要点，确保需求描述的完整性和准确性。所有Prompt均明确技术栈要求（React 18+TS）、输出格式和兼容性条件，可直接复制使用。
2025-12-04 21:48:39
974
原创 「PNG 图片格式思维导图」以及针对「特定前端技术栈（如 React/Vue/ 小程序）」单独整理专属 Prompt 方案
本文提供了前端Prompt工程的思维导图和三大技术栈专属Prompt方案。思维导图概括了前端Prompt的核心要点，可下载高清PNG版本。针对React、Vue和微信小程序三大技术栈，分别给出了核心约束词和高频场景Prompt示例。React部分强调函数组件、Hooks和TS类型；Vue部分侧重Composition API和scoped样式；微信小程序部分注重原生语法和性能优化。每个技术栈都提供了可直接复用的Prompt模板，涵盖组件生成、问题排查和性能优化等常见场景，帮助开发者快速获取精准的技术解决方案
2025-12-03 01:11:52
1007
原创 补充「多轮对话场景5 个具体的 Prompt 迭代示例」 以及「生成前端 Prompt 工程思维导图」（可视化核心要点）
本文总结了5个高频前端开发场景的多轮对话Prompt迭代示例，涵盖React数据表格、Vue表单验证、JS工具函数、移动端适配和小程序列表优化。通过"基础需求→补充功能→优化细节"的三轮迭代模式，展示了如何逐步完善开发需求。同时提供了前端Prompt工程思维导图，包含核心原则、基础模板、避坑要点和进阶技巧四部分，强调明确技术栈、需求与约束三要素，并给出了"技术栈+功能+样式+格式"的基础代码生成模板。思维导图采用层层递进结构，适用于快速梳理需求和检查Prompt完整性
2025-12-03 01:09:04
1103
原创 前端 Prompt 工程相关文件「可直接下载的TXT文件」以及补充「前端Prompt进阶技巧」（如多轮对话中如何优化Prompt）
本文提供前端Prompt工程资源与进阶技巧。包含可直接下载的Prompt速查表（TXT格式），涵盖核心原则、场景模板及11个高频示例。重点介绍多轮对话优化方法：分轮次逐步细化需求（基础需求→细节补充→样式优化），强调单轮仅补充1-2个关键点、引用历史上下文、保留核心约束等技巧，并给出Vue3组件开发的三轮对话示例。建议2轮未达预期时重新梳理完整Prompt。
2025-12-03 01:08:07
844
原创 「Markdown可下载版本速查表整理」以及「前端专属Prompt示例合集」（含10+高频场景直接套用）
《前端Prompt工程速查表与应用指南》提供了高效使用AI辅助开发的实用方法。核心原则包括：明确技术栈需求、指定输出格式和优先级排序。速查表包含代码生成、问题排查、优化等场景模板，强调避免模糊描述、遗漏关键信息等常见问题。配套10+高频应用示例，涵盖React/Vue组件开发、性能优化、技术选型等场景，每个示例均包含完整技术栈说明和具体要求。还提供了兼容性、样式框架、代码规范等高频约束词库，帮助开发者精准描述需求。该指南特别注重细节要求，如明确代码拆分格式、注释覆盖率、移动端适配方案等，能显著提升AI生成内
2025-12-03 01:07:04
1126
原创 「对接上一篇 AI 接口的前端界面（React/Vue）生成」以及「优化代码结构（拆分模块、添加错误重试）」
本文介绍了如何使用React构建AI功能集成平台的前端界面。通过Vite+TypeScript搭建项目，配置Tailwind CSS实现快速样式开发。核心功能包括：1) 封装API请求模块，对接文本生成、图片生成、语音转文字和文本转语音等AI接口；2) 实现主界面组件，采用状态管理和React Query处理异步操作；3) 提供标签切换功能，支持不同AI功能的界面展示。项目采用模块化设计，包含请求封装、状态管理和UI组件，为后续对接Node.js后端服务奠定了基础。
2025-12-03 00:56:12
1203
原创 补充 PWA 离线缓存具体配置，性能监控埋点完整方案
本文介绍了PWA离线缓存配置和性能监控埋点方案。在PWA配置部分，详细说明了Vue3+Vite项目中的核心依赖安装、manifest.json清单配置、ServiceWorker策略（包括API、静态资源、3D模型和用户数据的缓存方案），以及Vite集成和前端注册方法。性能监控部分设计了基于Web Vitals的核心指标（LCP、FID、CLS）和业务自定义指标（虚拟试戴、OCR解析等耗时），并规划了功能使用频次、转化漏斗、错误埋点和用户行为等业务埋点方案。整套方案可实现应用的离线可用性和全面的性能监控。
2025-12-03 00:43:21
778
原创 补充小程序版本适配代码，性能优化的具体实施方案（如图片压缩、代码分割）
本文介绍了微信小程序中虚拟试戴功能的实现方案。核心目录结构包含页面、组件和工具模块，其中虚拟试戴页(try-on)是关键功能页面。该页面采用摄像头实时拍摄或上传照片两种模式，通过Canvas实现3D眼镜渲染，并集成轻量化的面部检测模型（基于tfjs-miniprogram和face-api.min.js）。主要功能包括：眼镜列表展示与选择、面部特征点检测、眼镜模型叠加渲染等。技术实现上解决了小程序环境下模型加载、实时图像处理和性能优化等适配问题，为用户提供了流畅的虚拟试戴体验。
2025-12-03 00:41:33
1142
原创 补充售后功能代码（如订单售后申请、物流轨迹查询），以及产品上线前的前端测试清单
本文介绍了眼镜电商平台的售后功能实现，包括订单售后申请和物流轨迹查询。重点展示了基于Vue3的售后申请组件，包含订单信息展示、售后类型选择、问题描述填写、凭证上传等功能模块。组件实现了表单验证、图片上传预览、验光数据补充等交互逻辑，并通过计算属性进行提交条件校验。该实现采用响应式编程风格，使用Pinia状态管理，为用户提供完整的售后申请流程，最终模拟提交成功后跳转至售后记录页面。
2025-12-03 00:39:54
942
原创 补充订单流程代码、线下门店地图集成代码，以及更详细的产品交互逻辑说明
本文介绍了基于Vue3和Pinia的订单流程全链路实现方案。主要内容包括：1）使用Pinia创建订单状态管理模块，包含订单核心状态（订单号、处方数据、镜片配置等）和操作方法（生成订单、支付、取消等）；2）订单确认页组件实现，展示商品详情、取货方式选择和价格汇总等功能。该方案通过Pinia集中管理订单状态，实现组件间数据共享，支持到店自提和快递配送两种取货方式，并包含完整的订单生成和支付流程模拟。
2025-12-02 01:05:44
1122
原创 补充处方解析 OCR 代码、镜片参数计算逻辑，产品原型草图（文字描述版）
本文介绍了一个基于Tesseract.js的处方解析OCR系统实现方案。系统采用Vue3框架构建，主要功能包括：1) 通过文件上传获取验光单图片；2) 使用Tesseract.js进行OCR文字识别；3) 通过正则表达式提取验光单中的关键参数（球镜、柱镜、轴位、瞳距）；4) 提供可编辑的解析结果界面。系统还包含样式适配和光学计算公式实现，能够将OCR结果转换为镜片参数。该方案适用于眼镜配镜场景，实现了从验光单到镜片参数的数字化转换流程。
2025-12-02 01:04:09
804
原创 开发“AI文本助手“小页面，支持输入prompt生成内容并流式展示
本文介绍了基于React 18和TypeScript实现的AI文本助手前端方案，主要包含流式展示和交互优化功能。文章详细展示了项目结构（包括主组件、流式请求Hook和接口工具），核心依赖（axios和eventsource-parser），以及完整代码实现。重点内容包括SSE请求工具、流式生成Hook的实现逻辑，以及主组件中表单提交、状态管理和中断生成等功能。该方案适配移动端和PC端，实现了流畅的流式响应展示和良好的用户体验。
2025-12-02 00:54:19
505
原创 解决API调用跨域、流式解析异常等常见问题
本文总结了API开发中的常见问题及解决方案：1）跨域问题：前端可通过代理转发或JSONP解决，后端需配置CORS响应头；2）流式解析异常：需正确设置响应头，前端使用Fetch或Axios分片处理流数据；3）其他问题包括请求超时、重复请求和Token过期的处理建议。文中提供了Node.js、Webpack、Vite等环境下的具体代码示例，涵盖开发和生产环境的完整解决方案。
2025-12-02 00:53:43
503
原创 用SDK快速集成对话功能，对比原生API调用差异
本文对比了前端开发中SDK集成与原生API调用的核心差异。从开发成本、技术门槛、功能完整性等6个维度分析，SDK集成具有开发成本低、功能完整等优势，但灵活性较差；原生API则灵活性高但开发复杂度大。实际应用中，快速迭代项目推荐使用SDK，而需要深度定制或对体积敏感的场景建议采用原生API。技术实现上，SDK封装了底层细节，开发者只需简单配置即可调用；原生API则需要自行处理连接维护、数据序列化等复杂逻辑。
2025-12-02 00:53:04
449
原创 基于OpenAI API实现流式聊天，前端实现打字机效果
本文介绍了基于前端与OpenAI API联动的流式聊天实现方案。后端通过Node.js接口转发OpenAI请求并开启stream参数实现流式响应，前端使用EventSource监听数据流并逐字拼接，实现打字机效果。文章提供了完整的代码示例，包括后端Express接口配置和React组件实现，并建议通过延迟控制打字速度、优化错误处理和添加光标动画等关键优化点来提升用户体验。该方案同样适用于Vue等前端框架。
2025-12-02 00:52:30
619
原创 用Node.js编写API调用脚本，实现文本补全功能
本文介绍了一个基于Node.js的OpenAI文本补全API调用脚本。该脚本支持配置化调整，适配主流大模型，包含错误处理功能。主要特性包括：通过环境变量管理API密钥；可配置模型参数（如temperature、maxTokens等）；提供完整的错误处理机制。使用步骤简单，只需安装依赖并配置.env文件即可运行。脚本默认使用gpt-3.5-turbo-instruct模型，支持自定义API基础地址，适合需要文本补全功能的开发场景。
2025-12-02 00:51:55
534
原创 克隆任意网站的导航栏组件，转换为 React 组件并适配 Tailwind
本文介绍了如何将网站导航栏转换为React组件并应用Tailwind CSS样式。主要内容包括：1) 提供可直接复用的导航栏React组件代码，包含Logo、菜单、登录按钮和移动端汉堡菜单功能；2) 详细说明适配步骤：拆解原导航栏结构、将CSS样式映射为Tailwind类、个性化修改方法；3) 列出必要的依赖安装和配置说明。该方案采用响应式设计，支持桌面和移动端适配，可快速克隆任意网站的导航栏功能。
2025-12-02 00:51:14
403
原创 安装Lynx，生成简单按钮组件，修改组件样式与交互逻辑
本文介绍了Lynx Vue 3组件库的安装与使用指南：1) 通过npm/yarn安装并全局引入；2) 基础按钮组件的使用方法；3) 三种样式修改方式（Props参数、CSS覆盖、主题变量）；4) 交互逻辑定制（事件绑定、防抖节流、权限控制）。全文提供代码示例，涵盖从安装到高级定制的完整流程，适合开发者快速上手Lynx组件库开发。
2025-12-02 00:50:00
535
原创 用 Vite 项目调用 OpenAI API 实现简单文本生成，验证环境可用性
本文介绍了在Vite项目中快速集成OpenAI API的实现步骤：1)通过Vite初始化项目；2)安装OpenAI客户端库；3)编写核心代码配置API Key并实现文本生成功能；4)启动测试验证环境。关键注意事项包括API Key安全防护（浏览器环境仅限测试使用）、跨域问题处理方案以及环境验证标准。文中提供了完整的TypeScript示例代码，展示了如何通过按钮点击触发AI文本生成并显示结果，适合开发者快速验证OpenAI API集成方案。
2025-12-02 00:49:04
227
原创 「前端Prompt工程速查表」以及「如何用强化学习针对性优化大模型的前端开发能力」
本文提供前端Prompt工程实用指南和强化学习优化方案。速查表包含3条核心原则（明确需求、格式要求、优先级）、5大场景模板（代码生成/问题排查/优化等）及高频约束词。强化学习优化部分提出：1）聚焦前端开发目标；2）构建专属训练数据（奖励/惩罚机制）；3）三步微调流程；4）三大验证指标（代码可运行率≥90%、需求匹配度≥95%、效率提升≥50%）。全文强调精准需求表达和前端场景适配，旨在提升AI辅助开发效率。
2025-11-30 00:20:45
868
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人