- 博客(65)
- 收藏
- 关注
RSS订阅原创 初识Docker
本地开发、测试环境、预发环境、生产环境，四套环境能跑出四种不同的效果。有一次因为“生产环境的 Node 版本高了一点，有个 API 行为不一致”，全组人加班到天亮。这是程序员最经典的甩锅语录，但很多时候真不是甩锅。最后想了个“天才”的办法：用 U 盘拷代码，只在一台电脑上开发，效率自然也是非常的低。：有人用 VS Code，有人用 WebStorm，有人用 vim，环境各不相同。：代码是同一份，但运行环境千差万别。每一层都是只读的，只有最上层可写。：教授/面试官要运行你的项目，但你没法帮他配环境。
2025-12-20 19:53:49
437
原创 React Native入门详解
用个形象的比喻：传统混合应用像是“在浏览器中运行网页然后打包成App”，而React Native则是“用JavaScript指挥原住民（原生组件）搭建真正的本地建筑”。如果你熟悉CSS Flexbox，那么RN的布局你会很好上手。几乎所有原生功能都有对应的React Native库：相机、地理位置、推送通知、生物识别…：让Web开发者用已有技能进入移动开发，同时保持接近原生的性能。：React的虚拟DOM机制在这里同样适用，只更新变化的部分。Web开发者难以进入移动领域，移动开发者难以共享Web生态。
2025-12-14 08:46:20
889
原创 前端需要掌握的关于代理的相关知识
开发阶段： 熟练使用构建工具（Vite/Webpack）的代理配置，解决跨域和Mock问题。复杂场景求助 whistle。调试阶段： 善用 SwitchyOmega 和 whistle/Charles 配合，进行线上页面抓包、数据Mock和接口调试。部署与联调： 了解 Nginx 反向代理的基本配置。当线上出现“接口404”或“登录态失效”问题时，能第一时间判断是前端路径错误、Nginx配置问题还是后端服务问题。安全边界： 明确代理的边界。开发环境的代理配置不应提交到生产代码；
2025-12-07 08:33:32
871
原创 前端工程师必备：浏览器开发者工具核心使用技巧
一、先搞懂：开发者工具怎么调出来？在正式讲解前，先明确最基础的调用方式，以Chrome浏览器（前端开发最常用）为例，以下几种方法都能快速打开DevTools：快捷键：Windows/Linux用F12或Ctrl+Shift+I；Mac用Cmd+Opt+I。右键菜单：在页面任意元素上右键，选择“检查”（Inspect），会直接定位到该元素的DOM节点。浏览器菜单：点击Chrome右上角“三个点”→“更多工具”→“开发者工具”。
2025-11-30 08:28:34
951
原创 CSRF 攻击（原理与防御）
CSRF，全称，中文名为“跨站请求伪造”。我们可以用一个简单的比喻来理解它：想象一下，你去银行办理业务，银行柜员给你一张盖好章的空白授权书，并对你说：“之后你拿这张盖了章的文件来，我们就认为是你的本人操作，会直接执行。这时，一个骗子（攻击者）诱导你点击了一个链接。这个链接实际上是向银行发出的转账指令。你的浏览器会乖乖地带着那张“盖好章的授权书”（你的登录凭证 Cookie）去访问这个链接。银行看到授权书上的章是对的，便执行了转账操作。银行：就是你所信任的网站（如网上银行、社交媒体）。
2025-11-23 08:39:59
673
原创 Next.js 项目常见报错排查与解决
检查 getStaticPaths 是否返回了所有可能的路径确认路由参数名称与文件名匹配验证 getStaticProps 或 getServerSideProps 中的参数处理// 返回所有可能的 idreturn {fallback: true, // 或 false 或 'blocking'// 处理 params 可能为 undefined 的情况if (!params?.id) {// 获取数据使用动态导入延迟加载依赖 window 的库。
2025-11-14 21:23:26
676
原创 SEO入门
你的工作是把这份“简历”写得结构清晰、重点突出、易于阅读，让“面试官”（搜索引擎）一眼就能看出你的优势，并把你推荐给“客户”（搜索用户）。SEO是前后端协同的工作，但前端开发者直接掌控着影响排名的重要因素，如页面速度、移动端适配、HTML结构等。通过合理的内部链接，将重要页面的权重（Link Juice）传递到其他页面，并帮助爬虫发现更深层的内容。，顾名思义，是指通过优化网站前端的代码、内容和用户体验，使搜索引擎能够更好地抓取、理解和索引你的网页，从而在自然搜索结果中获得更高排名的技术和实践。
2025-11-08 21:49:03
531
原创 浏览器是如何运作的？深入解析从输入URL到页面渲染的完整过程
当我们每天打开浏览器，输入网址，按下回车，一个精美的网页瞬间呈现在眼前。这个看似简单的过程背后，其实隐藏着一系列复杂而精妙的操作。作为一名前端开发者，深入理解浏览器的工作原理，不仅能帮助我们写出更高效的代码，还能在遇到性能问题时快速定位并解决。今天，我们就来彻底揭秘浏览器是如何将HTML、CSS、JavaScript代码转换成用户可见的页面的完整过程。/* 首屏关键样式 */
2025-11-01 22:04:39
764
原创 首屏加载时间优化策略
首屏加载时间（First Contentful Paint, FCP）是指用户打开网页后，首次看到任何内容（文本、图像、Canvas等）的时间。研究表明：在优化之前，我们需要了解关键性能指标：启用服务器端压缩可以显著减小资源体积，这是最基础且有效的优化手段之一。Gzip是广泛支持的压缩算法，而Brotli是Google开发的更高效的压缩算法，通常能比Gzip再减小15-25%的体积。Nginx配置示例：这段配置告诉Nginx对指定类型的文本文件进行Gzip压缩，只有大于1000字节的文件才会被压缩，避免小
2025-10-25 18:09:07
932
原创 Next.js 入门指南
Next.js 是一个基于 React 的生产级全栈框架，由 Vercel 公司开发维护。服务端渲染（SSR）- 更好的 SEO 和初始加载性能静态站点生成（SSG）- 超快的页面加载速度API 路由- 轻松创建后端 API自动代码分割- 优化打包大小零配置- 开箱即用的优化配置TypeScript 支持- 完整的类型支持快速刷新- 极佳的开发体验。
2025-10-17 21:28:34
950
原创 Zustand状态管理工具
简单说，Zustand是一个为React应用设计的小型、快速、可扩展的状态管理库。它的核心优势就两个字：简单。与Redux等传统状态管理库相比，Zustand不需要你写大量的模板代码（Boilerplate），比如actionreducerdispatchconnect... 你只需要定义一个store（仓库），然后在组件里使用它就行了，就像使用useState一样自然。为什么选择Zustand？API极其简单：几分钟就能学会。无需包裹组件。
2025-10-11 00:12:03
753
原创 Tailwind CSS 入门指南
Tailwind CSS不是一个传统的UI框架（如Bootstrap），而是一个CSS框架，它提供了一系列低级别的实用类，让你可以直接在HTML中构建任何设计。.btn {Tailwind方式：< button class = " px-6 py-3 bg-blue-500 text-white rounded font-medium hover:bg-blue-600 " > 点击我 </ button >
2025-09-26 22:06:16
1022
原创 前端文本 Markdown 格式化
简单场景（如评论、短文章）：优先 marked.js，轻量高效；复杂定制（如扩展语法、自定义规则）：选择 showdown.js，灵活强大。
2025-09-20 10:32:12
1234
原创 ChromaDB入门指南：零基础构建你的第一个AI应用
ChromaDB是一个开源的向量数据库，专门为存储和检索向量嵌入而设计。简单来说，它能够理解数据的"语义"，而不仅仅是关键词匹配。ChromaDB为开发者提供了一个简单而强大的向量数据库解决方案，无需深厚的机器学习背景也能构建智能应用。通过本文的示例和解释，相信你已经具备了使用ChromaDB的基本能力。尝试一下：从一个小项目开始，比如为你的博客添加相关文章推荐功能，亲身体验语义搜索的魅力。更多详细信息和高级功能，请参考 https://docs.trychroma.com/
2025-09-05 22:32:42
672
原创 单点登录（SSO）
单点登录（Single Sign-On，SSO）是一种身份认证机制，允许用户使用一组凭证（如用户名和密码）登录一次，便能访问多个相互信任的应用系统，而无需在每个系统中单独进行身份验证。SSO的核心价值在于解决传统登录方式的多重痛点：提升用户体验：消除重复登录，减少操作摩擦增强系统安全：集中管理认证逻辑，便于实施统一安全策略降低管理成本：用户信息集中维护，权限变更一键生效提高开发效率：避免重复开发认证模块，专注业务逻辑。
2025-08-29 19:57:49
890
原创 常用的前端包管理器
npm奠基生态，Yarn 推动确定性标准，pnpm以硬链接革新空间与隔离，Bun用速度重新定义极限。终极建议新项目首选pnpm（均衡优势，解决传统痛点）追求稳定选npm，大型协作选Yarn，极速尝鲜选Bun。
2025-08-22 19:21:01
720
原创 RAGFlow入门
RAGFlow 是一款基于深度文档理解的开源 RAG（Retrieval-Augmented Generation，检索增强生成）引擎。它与大语言模型（LLM）结合，能够为各种格式复杂的数据提供可靠的问答能力，并提供充分的引用依据。普通LLM：只靠死记硬背（训练数据，可能会有数据比较旧的情况，因为新数据并没有加入训练）RAG+LLM：可以开卷考试（实时检索最新数据）
2025-08-15 19:30:29
446
原创 观察者模式和发布订阅者模式
观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其所有依赖者都会收到通知并自动更新。当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。
2025-08-02 14:20:54
832
原创 Vue3组件通信方法清单
注意，只有同源的页面才能共享localstorage的数据。祖先组件向后代组件传递数据，避免逐层传递 props。非父子组件间的通信，如兄弟组件或跨多层级组件。父组件传递数据给子组件，子组件通知父组件。父组件直接调用子组件的方法或访问其数据。多个组件共享复杂状态（如用户登录信息）。类型安全、DevTools 支持。简化父子组件的双向数据绑定。父组件向子组件传递模板片段。持久化存储数据，跨页面共享。持久化数据（如用户偏好）直观、Vue 官方推荐。父组件定制子组件 UI。父组件调用子组件方法。
2025-07-26 11:50:31
631
原创 JS原型相关知识
在JS中，每个构造函数都有一个prototype属性，这个属性的值是一个对象，这个对象包含了构造函数所有实例共享的属性和方法，这个属性就是原型。下面的图片深层剖析了当你new一个对象时所发生的4个步骤图中的[[ProtoType]]这里加双括号是EMA262规范里面规定的，用来表示特性的一种方法，这里就是指，对象实例具有原型这个特性在调用时，我们一般把他写作__proto__了解完原型，我们来了解原型链。
2025-07-19 13:16:37
802
原创 快速上手UniApp（适用于有Vue3基础的）
一次开发，多端发布（iOS/Android/H5/微信小程序/支付宝小程序等）使用Vue语法，学习成本低丰富的组件和API良好的社区支持和文档。
2025-07-12 11:22:23
1918
原创 前端常见 HTTP 状态码
作为前端开发者，与后端 API 交互时，HTTP 状态码是判断请求成败的关键信号。理解常见状态码的含义、责任归属及应对策略，能极大提升调试效率和团队协作。以下是关键状态码的详细解析：首先说一下如何查看状态码：如上图项目运行之后，打开浏览器开发者工具（F12），查看查看状态码。
2025-07-06 18:07:44
1321
原创 前端新手看这篇就够了：各种接口请求方式全解析！
参数格式适用请求说明params（Query）GETDELETE放在 URL 后面，key=valuedata（JSON）POSTPUTPATCH放在请求体中，格式是 JSONform-dataPOST适合上传文件，或表单提交POST类似 HTML 表单提交的格式，传统后端常用GET 用 params，POST 用 body；JSON 最通用，form-data 用于上传；Content-Type 决定格式。如果你是初学者，希望这篇文章能帮你彻底理清前端接口请求的套路和姿势！axiosfetch。
2025-06-22 15:13:26
857
原创 前端的跨域问题
跨域浏览器因为安全限制，阻止了网页对不同源（域名/IP/端口号不同）的请求。所谓“源协议（http/https）域名（或IP）端口号只要其中任意一项不同，就叫做“不同源地址和比较是否同源完全相同同源端口不同跨域协议不同跨域IP不同跨域域名不同跨域跨域问题是浏览器安全机制限制的结果，我们可以通过配置 CORS 或使用代理来解决。
2025-06-22 14:54:13
514
原创 一文搞懂强缓存与协商缓存
缓存是一种用于存储之前请求过的数据或资源的技术，目的是减少重复的网络请求，提高页面加载速度，降低服务器压力，并优化用户体验。可以理解为，你之前已经请求过这些数据了，这些数据存在缓存中，用时取即可，而不是每次都要重新请求这些数据。
2025-06-01 14:43:16
2223
原创 前端垫片chimp
Chimp 垫片是一种前端开发工具，主要用于解决浏览器兼容性和样式调整的问题。它通过在页面中插入一些特殊的代码，帮助我们更好地控制页面的布局和样式，让页面在不同的浏览器和设备上都能呈现出一致的效果。Chimp 垫片的核心功能是“兼容性增强”。它能够自动检测浏览器的版本和特性，然后根据这些信息，调整页面的样式和行为。比如，在一些老旧的浏览器中，某些 CSS 属性可能无法正常工作，Chimp 垫片就可以通过一些兼容性代码来解决这个问题，让页面在这些浏览器中也能正常显示。
2025-05-25 14:36:27
947
原创 常见的实时通信技术（轮询、sse、websocket、webhooks）
实时通信技术在现代应用中扮演着至关重要的角色，从即时通讯到在线游戏，其应用广泛。本文探讨了几种常见的实时通信方案：HTTP轮询、长轮询、SSE（Server-Sent Events）、WebSocket和Webhooks。HTTP轮询包括短轮询和长轮询，前者简单但效率低，后者减少了请求次数但服务器压力大。SSE允许服务器主动向客户端推送数据，适合实时通知场景。WebSocket提供真正的双向通信，适合高频交互应用。Webhooks则是服务器主动调用客户端接口，适用于事件驱动的通知。每种技术都有其优缺点和适用
2025-05-17 16:29:54
1121
1
原创 Web 实时通信技术：WebSocket 与 Server-Sent Events (SSE) 深入解析
WebSocket 是一种网络通信协议，它提供了一种在单个 TCP 连接上进行全双工通信的方式。与传统的 HTTP 请求 - 响应模型不同，WebSocket 允许服务器和客户端在连接建立后随时互相发送数据，而无需重新建立连接。这种特性使得它在实时交互场景中具有得天独厚的优势。
2025-05-11 10:25:19
1705
原创 vue3学习之防抖和节流
就像我们按电梯按钮，不管你按多少次，电梯只会在你松手一段时间后才会启动。当事件触发时，不立即执行处理函数，而是等待一段时间（比如300ms）。如果在这段时间内事件再次触发，则重新计时。只有在指定时间内事件不再触发，才会真正执行处理函数。当我们滚动页面时，可能需要执行某些操作，比如懒加载图片、检测滚动位置等。如果不加限制，滚动事件会非常频繁地触发，导致性能问题。在固定的时间间隔内（比如300ms），无论事件触发多少次，处理函数只会执行一次。1、用户停止输入后再搜索（搜索框）
2025-04-26 15:16:40
2070
原创 ts与面向对象
通过这些例子可以看出，面向对象编程能把复杂的代码拆分成一个个独立的对象，每个对象负责自己的事情，就像分工明确的团队。它的好处有：代码复用：一个对象的方法和属性可以在其他地方重复使用，不用重复写代码。结构清晰：对象之间职责分明，改代码或者加功能时，很容易找到对应的地方。可维护性强：出了问题可以快速定位到某个对象，修改也不会影响其他部分。类型安全（TypeScript 特有的优势）：提前发现很多类型错误，让代码更健壮。。
2025-04-20 10:40:03
362
原创 TypeScript变量类型
JavaScript (JS) 和 ：从 ES6 开始引入。 声明的变量具有块级作用域（），并且不会被提升。 声明的变量也是块级作用域，但必须初始化且不能重新赋值。TypeScript (TS)2. 类型推断JavaScriptTypeScript3. 变量提升（Hoisting）JavaScriptTypeScript4. 总的来说JavaScript 的变量声明方式较为灵活，但缺乏类型检查，容易导致运行时错误。TypeSc
2025-04-13 09:16:30
865
原创 深入理解请求头---基础入门
简单来说，请求头是客户端向服务器发送HTTP请求时附带的额外信息。这些信息以键值对的形式呈现，就像是一份详细的清单，告诉服务器关于请求的各种细节。例如，它可以表明客户端的类型（是浏览器、移动应用还是其他程序）、支持的数据格式、使用的语言偏好等。请求头就像是一封邮件的信封，除了收件人地址（URL）外，还包含了发件人信息、邮件优先级等其他重要内容。
2025-03-30 09:18:49
1450
原创 Git入门到精通
Git 分支管理是 Git 强大功能之一，能够让多个开发人员并行工作，开发新功能、修复 bug 或进行实验，而不会影响主代码库。分支在实际中有什么用呢？假设你准备开发一个新功能，但是需要两周才能完成，第一周你写了50%的代码，如果立刻提交，由于代码还没写完，不完整的代码库会导致别人不能干活了。如果等代码全部写完再一次提交，又存在丢失每天进度的巨大风险。现在有了分支，就不用怕了。各分支之间相互隔离，不影响。
2025-03-22 09:04:10
1291
1
原创 前端组件、组件库使用指南
<button @click="changeMessage">改变消息</button></div>const message = ref('初始消息');message.value = '新的消息';</script>/* 样式 */</style><template><div>
2025-03-16 10:07:22
2096
原创 Vue 3 新手必看：轻松上手 Pinia 状态管理
在 Vue 3 的世界里，状态管理是一个绕不开的话题。如果你正在寻找一个简单、高效且易于上手的状态管理库，那么 Pinia 绝对是你的不二之选。今天，我们就来一起探索 Pinia 的魅力，让你在 Vue 3 开发中如鱼得水。
2025-03-09 08:53:00
918
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人