- 博客(158)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Windows 系统下安装 Docker
通过以上步骤，即可在 Windows 系统中完成 Docker 的安装并开始使用容器化开发。双击桌面图标启动 Docker，任务栏出现鲸鱼图标即表示运行成功。右键任务栏 Docker 图标 →。→ 修复虚拟化或 WSL 配置。
2025-04-05 00:52:33
121
原创 Nest.js学习路径
Nest.js的核心优势在于其模块化设计与依赖注入机制，结合TypeScript的强类型特性，适合构建企业级应用。前端开发者可从CLI工具入手，逐步掌握控制器、服务、中间件等概念，再通过数据库集成和Swagger文档化提升工程化能力。推荐结合官方文档与社区教程（如优快云、博客园）进行系统学习。作为前端开发工程师，系统学习Nest.js可以从以下步骤入手，结合其模块化架构、依赖注入和TypeScript特性，逐步掌握核心功能。管理依赖以提升速度。
2025-04-02 00:02:52
847
原创 TS 中 interface 和 type 详解
特性interfacetype声明方式声明对象形状定义类型别名扩展extends或声明合并交叉类型灵活性仅对象类型任意类型（联合、交叉、元组等）合并声明✅ 支持❌ 不支持实现类✅implements✅ 需要严格匹配工具类型兼容性高高。
2025-03-31 20:33:11
675
原创 TS 中 keyof 和 in 关键字详解
关键字作用场景示例结果keyof提取对象键的联合类型"a" | "b"in遍历联合类型生成属性掌握keyof和in的使用，能显著提升 TypeScript 类型操作的灵活性和类型安全性。
2025-03-31 18:32:29
319
原创 Rust高级特性
[error("网络错误: {0}")]#[error("解析失败")]Err(MyError::Network("超时".to_string()))
2025-03-30 02:00:00
611
1
原创 前端快速系统学习Rust的路径
Rust 的内存安全依赖所有权机制：每个值有唯一所有者，当所有权转移（如赋值给新变量）后原变量失效。这与 JavaScript 的引用传递不同，需特别注意。Rust 是编译为 WASM 的首选语言，可提升前端性能密集型任务（如图像处理、游戏逻辑）。Rust 编译器错误信息详细，需学会从中定位问题（如所有权冲突、生命周期不匹配）。从 CLI 工具（如文件处理器）起步，逐步过渡到网络服务或 WASM 应用。JavaScript 中变量默认可变，需调整习惯。），理解其高性能背后的原理。
2025-03-29 19:01:37
1001
原创 透析React Fiber架构
React Fiber 的底层是一个由链表连接的树形结构，通过链表的灵活性和双缓存机制，实现了可中断的异步渲染、优先级调度等高级特性。这种设计是 React 高性能和并发模式（Concurrent Mode）的基石。
2025-03-24 21:47:20
328
原创 透析主流CSS预处理器的区别
（CSS Preprocessor），它们通过扩展原生 CSS 的语法，提供了变量、嵌套、混合（Mixins）、函数等高级功能，帮助开发者编写更高效、可维护的样式代码。：省略大括号和分号，依赖缩进（类似 Python），文件扩展名为。（Node.js 工具）或 Webpack 插件编译为 CSS。与现代框架（如 React、Vue）深度集成。：与原生 CSS 高度兼容，文件扩展名为。：兼容原生 CSS 语法，文件扩展名为。支持浏览器端直接编译（开发环境使用）。浏览器端实时编译（开发环境）。
2025-03-23 20:02:15
983
原创 Vite为什么那么快
Vite 的“快”源于其开发阶段去打包化的设计理念，结合现代浏览器特性与高性能工具链（如 esbuild 和 Rollup），在开发体验和构建效率上实现了质的飞跃。其核心优势包括按需编译、依赖预构建、精准 HMR 及高效工具链，尤其适合大型项目的快速迭代开发。
2025-03-21 00:46:06
658
原创 HTTP核心知识
掌握这些内容不仅能提升代码质量，还能在团队协作中更好地与后端工程师沟通（如设计 RESTful API）。理解客户端（浏览器）发送 HTTP 请求，服务器返回 HTTP 响应的基本流程。查看请求/响应的详细内容（Headers、Payload、Timing）静态资源（JS/CSS/图片）通过缓存策略减少重复请求。服务端渲染时，理解 HTTP 请求在服务端的处理流程。分析请求瀑布图（Waterfall），定位性能瓶颈。理解双向通信协议，用于实时应用（如聊天室）。合理设计 API 请求（如幂等性、错误重试）。
2025-03-19 21:33:26
1061
原创 HTTP1.0、HTTP1.1、HTTP2.0对比
HTTP 1.0、HTTP 1.1 和 HTTP 2.0 是 HTTP 协议演进中的三个重要版本，每个版本都针对前一代的不足进行了优化和改进。头）、更多状态码（如 100 Continue）和 HTTP 方法（如 PUT、DELETE）。：HTTP/3 基于 QUIC 协议（UDP），进一步优化传输层，解决 TCP 队头阻塞。每个请求/响应对都需要单独建立和关闭 TCP 连接（短连接），导致高延迟和资源浪费。将文本协议改为二进制格式（帧和流），解析效率更高，减少错误。等头字段，支持更精细的缓存策略。
2025-03-19 21:20:40
400
原创 点击劫持详细透析
点击劫持（Clickjacking）是一种前端安全攻击手段，攻击者通过视觉欺骗诱导用户在不知情的情况下点击隐藏的页面元素，从而执行非预期的操作。目标网站收到用户“合法”的请求（因用户已登录，携带了 Cookie 或身份凭证），执行攻击者预设的操作（如转账、关注、修改设置等）。透明 iframe 加载“关注用户”页面，覆盖在虚假的“关闭广告”按钮上。，指向目标网站（如社交网络、银行页面等）的敏感操作页面（如“关注用户”“确认转账”按钮）。用户点击看似无害的“诱饵内容”（如“抽奖按钮”），实际点击的是透明。
2025-03-19 20:55:49
280
原创 透析 HTTP OPTIONS 预检请求
（Same-Origin Policy），禁止网页向不同源的服务器发送某些类型的请求（如带有自定义Header的请求或非简单请求方法）。HTTP OPTIONS 预检请求是浏览器在发送某些跨域请求（CORS，跨源资源共享）之前自动发起的一种机制，它是现代浏览器实现CORS规范的关键安全措施，目的是保护服务器免受恶意跨域请求的攻击。实际请求是否被允许，避免直接发送可能被服务器拒绝的敏感请求。如果服务器响应允许实际请求，浏览器继续发送真正的请求（如。如果服务器拒绝，浏览器抛出CORS错误，阻止实际请求。
2025-03-18 20:29:25
1079
原创 常见的前端安全问题
攻击者向页面注入恶意脚本（如 JavaScript），在用户浏览器中执行，窃取 Cookie、会话信息或篡改页面内容。诱导用户访问恶意页面，利用已登录的 Cookie 伪造用户身份发起请求（如转账）。通过透明 iframe 覆盖在正常页面上，诱导用户点击隐藏按钮（如授权操作）。：前端做基础校验（如格式、长度），后端做严格校验。：防止 SQL 注入（后端责任，但需前后端协作）。：如需本地存储，使用加密算法（如 AES）保护。：多层级防护（前端 + 后端 + 基础设施）。：恶意脚本存储在服务器（如评论区）。
2025-03-18 19:56:09
756
原创 使用Koa2快速搭建一个爬虫项目
使用 Koa2 搭建爬虫项目，可以结合其异步处理能力和中间件机制，快速构建一个灵活的爬虫服务。通过 Koa2 的中间件机制，可以轻松扩展身份验证、日志记录等功能，快速构建一个企业级爬虫服务。分布式爬虫需考虑任务队列（如 Redis + Bull）代理 IP 池：结合第三方服务（如快代理）控制请求频率，避免对目标服务器造成压力。敏感数据需加密存储（如手机号、邮箱）随机 User-Agent：使用。
2025-03-17 19:55:04
926
1
原创 Node.js框架Express、Koa、Koa2、Egg 和 NestJS 的对比分析
框架 | 学习难度 | 原因 || 框架 | 中间件模型 | 特点 |
2025-03-17 19:28:23
291
原创 TS常见内置映射类型的实现及应用场景
映射类型核心能力典型场景Partial<T>属性可选化表单初始值、更新参数Pick<T, K>Omit<T, K>属性筛选或排除组件 Props 透传键值对批量定义枚举映射、Action 集合条件映射按条件转换属性类型动态表单控件深度映射递归处理嵌套对象不可变状态、复杂表单掌握这些映射类型后，可以大幅减少重复代码，提升前端项目的类型安全性和可维护性。
2025-03-16 22:00:00
383
原创 TS数据类型包括哪些
TypeScript 的类型系统覆盖了从基础值到复杂结构的全面支持，结合静态检查和类型推导，能显著提升代码的健壮性。掌握这些类型后，可以进一步探索类型体操（如条件类型、递归类型等）实现更精细的类型控制。
2025-03-16 15:45:10
823
原创 SQL与NoSQL的区别
如PostgreSQL支持JSON文档存储（兼容SQL与NoSQL特性）。数据冗余：将关联数据嵌入同一文档（如订单与用户信息）。：事务执行后数据库状态符合所有约束（如余额不为负）。：事务要么全部成功，要么全部失败（如转账操作）。：系统保证核心功能可用（如允许部分数据延迟）。海量数据存储与水平扩展需求（如日志平台）。动态模式，支持嵌套数据（如JSON）。需要复杂JOIN查询（如报表统计）。支持PB级数据存储（如日志分析）。
2025-03-15 21:44:31
611
原创 编写webpack和Vite插件混淆压缩打包后的JS代码
这里使用terser库来实现代码混淆，terser是一个流行的 JavaScript 压缩和混淆工具。
2025-03-14 06:30:00
944
原创 使用Docker部署前端应用到生产环境
为了在生产环境中使用这个镜像，需要将其推送到 Docker 仓库。这样，前端项目就通过 Docker 成功部署到生产环境了。输入你的 Docker Hub 用户名和密码进行登录。，如果能看到你的前端项目页面，说明镜像构建成功。
2025-03-13 18:15:00
894
原创 前端项目部署方案
在 Vercel 中关联你的代码仓库。Vercel 会自动检测到你的 Vue 3 项目，并提供默认的构建和部署配置。你可以根据需要进行自定义配置，例如指定构建命令和输出目录。完成配置后，Vercel 会自动触发部署流程，部署完成后会提供一个访问链接，你可以在浏览器中访问该链接查看部署好的项目。现在，你可以在浏览器中访问你的域名或服务器 IP 来查看部署好的 Vue 3 项目。配置 Nginx 以指向你的项目文件。这里将容器的 80 端口映射到主机的 8080 端口，你可以根据需要调整。
2025-03-13 11:02:12
381
原创 2025开启全栈方向发展
2025会关注后端及运维知识，Go、Node.js、NestJS、Ngnix、Linux，开发部署运维属于自己的网站。这个阶段处于对未知挑战的征服，渴望通过自己的能力完成，很有成就感，期间会进入心流状态，不会觉得累，效率也很高。2025会使用flutter开发app，发布属于自己的app，解锁app开发成就。工作中遇到困难，个人兴趣上想做什么，直接去学，就能快速上手。2025会关注shell语句，编写脚本，提升日常工作效率。随着工作经验积累，愈发发现自己的学习能力得到较强提升。懂得越多，不懂得越多。
2025-03-11 18:13:05
219
原创 Content-Type详解
TypeContent-Type（MediaType），即是Internet Media Type，互联网媒体类型，也叫做MIME类型。在互联网中有成百上千中不同的数据类型，HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签，用于区分数据类型。最初MIME是用于电子邮件系统的，后来HTTP也采用了这一方案。在HTTP协议消息头中，使用来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据，以及告诉客户端（一般是浏览器）如何解析响应的数据，比如显示图片，解析并展示html等等。
2024-05-03 15:39:35
5252
原创 和满屏import说拜拜！unplugin-auto-import自动引入vue官方api
在Vue项目里，我们会引入很多vue相关函数，加上其他的import，就要写很多行，看着实在烦躁，就像这样：而且有时候在使用Vue的api时还会忘记引用，很不方便。unplugin-auto-import插件就可以完美解决这个问题！unplugin-auto-import是一个按需自动导入Vue、Vue Router、Pinia等官方Api的插件。使用此插件后，不需要手动编写类似import {xx} from 'vue'这样的代码了，而是直接使用相关api，提升开发效率。// 原来写法。
2024-04-29 20:11:44
590
原创 Nginx配置跨域请求 Access-Control-Allow-Origin *
当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource。
2024-04-22 11:23:29
2848
原创 JS中的NaN
为什么说isNaN()不是用来判断是不是NaN这个值的呢？JavaScript中，NaN是一个特殊的数字值（typeof NaN的结果为number），是not a number的缩写，表示不是一个合法的数字。方法二：值是否与本身不相等（NaN是唯一有这样特征的值）方法一：将isNaN()和typeof结合来判断。参考：《深入理解JavaScript》一个不能被解析的数字。3. 如何辨别NaN。
2024-04-19 18:48:30
371
原创 浏览器缓存（强缓存、协商缓存）
整个过程也是涉及到两个字段。如果是 Last-Modified 对应的是 if-Modified-Since 字段，是一段时间格式的字符串，比如是哈希值，服务端判断哈希是否一致。add_header Cache-Control 用于设置强缓存的 Cache-Control 头部，以便在资源的强缓存过期后，浏览器可以使用 If-Modified-Since 验证。总之，虽然强缓存是首选的缓存策略，但协商缓存仍然可以提供额外的性能优势，并减少不必要的网络请求，对于代理前端静态资源的Nginx配置仍然有用。
2024-04-14 11:25:14
692
原创 Electron采用的Chromium引擎是什么
Chromium使用的绘制引擎是Blink，它是一个高性能的、开源的Web渲染引擎。另外，Chromium还包含了V8引擎，它是一个高性能的JavaScript解释引擎。综上所述，Chromium包含了Blink绘制引擎和V8 JavaScript解释引擎，这两个组件是Chromium能够渲染和执行Web内容的关键。除了上述引擎和组件，Chromium还包含了许多其他的功能和工具，如安全模块、插件系统、开发者工具等，这些都是为了提供更全面和强大的浏览器功能。
2024-04-12 15:22:43
634
原创 Vuex与localStorage的区别
vuex能做到数据的响应式，localstorage不能。2、应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。1、最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地。3、永久性：当刷新页面时，vuex存储的值会丢失，localstorage不会。
2024-04-07 04:12:47
352
原创 Vuex与Pinia的区别
1. 架构设计：Vuex是Vue.js官方提供的状态管理库，而Pinia是由Vue作者维护的另一个状态管理库。Vuex采用了集中式的架构，将所有的状态存储在一个单一的全局状态树中，通过mutations和actions来修改和处理状态。如果是使用 Vue 3，并且更注重性能和体积方面的优化 Pinia 可能是一个更好的选择，而对于 Vue 2 应用程序 或更喜欢 Vuex 的丰富生态系统和广泛支持的开发者来说，Vuex 仍然是一个强大而可靠的选择。相比之下，Pinia是一个相对较新的库，较小且更简单。
2024-04-07 04:08:09
1171
原创 2024年开启重学前端和深入浅出系列
还有打造一款开源JS库，扩展JS 数据类型Api，类似于处理后端数据结构的数组，对象Api，复杂的数据结构处理，只需调用该类库的方法即可，提供开发效率。2024年要做的事情蛮多，以上只是技术上待办，一起期待吧。我回来了，2024年决定开启前端重学系列和深入浅出系列。深入浅出微前端（qiankun、wujie）系统化输出文章，后期出书或掘金小册子。
2024-01-23 11:03:29
436
Mini-React.zip
2020-04-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人