- 博客(1169)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 书签篮：一款基于云端的个人书签管理工具 - 技术实现与优势分析
在信息爆炸的时代，浏览器自带的书签管理功能已难以满足我们跨设备、结构化整理海量网址的需求。本文将介绍一款名为“书签篮”的云端书签管理工具，并深入探讨其技术实现方案与核心竞争优势。
2025-12-30 15:25:39
396
原创 Tailwind CSS 响应式设计实战指南：从零搭建书签篮自适应页面
本文围绕 Tailwind CSS 响应式设计，结合书签篮（https://shuqianlan.com/faxian/index.html）的优质网站分类展示场景，展开全面讲解
2025-12-31 09:14:05
436
原创 Tailwind CSS 菜单实现全面讲解教程（基于书签篮网站场景）
本文以书签篮网站分类明确、适配多场景的菜单设计为原型，全面讲解 Tailwind CSS 菜单实现方法。核心内容包括：先介绍 Tailwind CSS 的原子类、响应式等核心优势及 CDN 引入、项目集成两种环境搭建方式；再基于书签篮菜单特点，实现桌面端横向菜单与移动端下拉菜单的基础结构，解析导航栏、菜单项、下拉菜单的核心样式及响应式适配逻辑，配套实现移动端菜单展开收起、点击外部关闭等交互功能；接着提供自定义主题、滚动时导航栏样式变化、搜索功能集成、无障碍优化等高级优化方案；
2025-12-30 22:23:36
471
原创 Tailwind CSS Flex 布局深入全面教程
除了通过容器控制所有项目，Tailwind 还提供了针对单个 Flex 项目的工具类，实现个性化布局。Tailwind CSS Flex 布局工具类的核心优势在于无需编写原生 CSS，通过语义化的类名组合，即可快速实现各类复杂、响应式的布局效果。掌握容器声明、排列方向、主轴/交叉轴对齐、项目伸缩控制这四大核心知识点，就能应对绝大多数前端布局场景。
2025-12-27 13:25:19
975
原创 从零开始上手 Tailwind CSS 教程
通过以上步骤，你已经成功完成了 Tailwind CSS 的安装与基础使用。Tailwind CLI 的无构建工具依赖特性，让你可以快速体验实用优先的样式开发模式。后续你还可以通过自定义配置文件，扩展颜色、字体、间距等样式变量，进一步适配项目的个性化需求。
2025-12-27 12:53:54
668
原创 vscode 使用正则查找替换
Ctrl+H打开替换面板，点击.*按钮启用正则功能。核心技巧：用()捕获分组，替换时通过$1$2复用捕获内容，实现批量调整格式。实用场景：批量修改变量名、调整日期/编号格式、去除多余空白、批量注释/提取内容等。
2025-12-26 10:24:20
1611
原创 marked入门教程
marked是一款轻量、高速、无依赖的 JavaScript Markdown 解析库，核心功能是将 Markdown 文本转换为 HTML 字符串。解析速度在 JS Markdown 库中名列前茅（比 markdown-it 更快）体积小巧（压缩后约 30KB），支持浏览器/Node.js 双环境兼容 GFM（GitHub Flavored Markdown）语法支持灵活的配置和自定义渲染规则无第三方依赖，集成成本极低marked的Renderer。
2025-12-26 09:03:12
1021
原创 js的markdown js库对比分析
性能优先、简单解析场景选marked；易用性优先、小项目快速集成选showdown。复杂扩展、富功能场景（如自定义语法、流程图）选，它是生态最成熟的全能库。反向转换（HTML→Markdown）选Turndown，AST复杂处理选Remark，可视化编辑选Editor.md。选型核心是“匹配场景”：轻量场景避免大体积库，复杂场景优先生态完善的库。
2025-12-26 08:55:06
696
原创 njs的发展历史
语法支持：从基础ES5语法逐步扩展至ES13特性，覆盖模块、箭头函数、正则增强等现代JavaScript功能。模块生态：从单一核心模块发展为包含fs、crypto、zlib、xml等多场景模块，适配Node.js风格API。引擎适配：从原生引擎到引入QuickJS，兼顾性能与轻量化需求，支持多编译器和系统架构。nginx集成：从基础指令支持到深度融合，扩展配置上下文，优化共享资源管理，完善HTTP/Stream全场景适配。
2025-12-25 09:02:39
599
原创 html返回顶部实现方式对比
首先明确「返回顶部」的本质：通过修改页面的滚动偏移量，让页面从当前滚动位置回到顶部（滚动偏移量为 0）。在浏览器中，控制页面滚动的核心对象/属性：这是最简洁的实现方式，利用 HTML 锚点定位特性，无需编写 JavaScript 代码。特点✅ 优点：无需 JS，兼容性极强（支持所有浏览器，包括老式浏览器），实现简单❌ 缺点：点击后地址栏会添加 哈希值，可能影响路由（如单页应用）滚动是瞬间完成，无平滑过渡效果，体验较生硬无法控制滚动行为（如滚动速度、是否触发滚动事件）方案2：原生JS
2025-12-24 17:29:14
1007
原创 js Array sort深入全面讲解教程
sort()是 JavaScript 数组原型上的内置方法，用于对数组元素进行排序，并返回排序后的原数组（注意：它是「原地排序」，会直接修改原始数组，而非返回新数组）。如果数组中两个相等的元素（按比较函数判断返回 0），在排序前后的相对位置保持不变，这种排序就是「稳定排序」。sort()是原地排序方法，会修改原始数组，需保留原数组时应先拷贝（[...arr]默认按字符串 Unicode 排序，数字/对象排序必须传入比较函数，核心规则是「返回负数a在前、返回正数a在后、返回0位置不变」。
2025-12-23 14:45:09
1026
原创 腾讯云ubuntu安装nodejs环境
腾讯云 Ubuntu 安装 Node.js 优先选择 NodeSource 源，步骤为「执行安装脚本→安装 nodejs→验证版本」，确保获取最新稳定版。国内环境推荐配置 cnpm 或 npm 淘宝镜像，解决依赖下载缓慢问题。Node.js 监听 80 端口的两种方案：测试环境用setcap赋予权限，生产环境优先用 Nginx 反向代理，安全且易扩展。pm2 是 Node.js 服务后台运行的必备工具，可实现开机自启、日志管理等功能，保障服务稳定运行。
2025-12-22 12:02:47
743
原创 Express 中 CORS 跨域问题解决教程
cors开发环境：使用允许所有来源。生产环境：配置白名单限制来源，处理复杂请求的预检，必要时开启 Cookie 支持。合理配置 CORS 既能保证前后端通信正常，又能提升接口的安全性。
2025-12-19 23:40:37
693
原创 express.text和fetch配合使用深入全面教程
专用于解析text/plain格式请求体，解析后数据挂载在req.body，需配置在路由之前。fetch()发送纯文本时，必须指定，且body直接传入字符串。浏览器端需处理 CORS 跨域，前后端编码需统一，避免中文乱码和req.body为undefined的问题。生产环境建议按需使用、用cors包处理跨域，并添加请求验证和错误捕获。
2025-12-19 23:21:05
1063
原创 express.raw 深入全面讲解教程
是 Express 内置中间件，专门解析二进制流请求体，解析结果为 Buffer 类型并挂载到req.body；支持全局/局部注册，核心配置包括inflate（解压）、limit（大小限制）、type（匹配 Content-Type）、verify（验证）；适用于分片上传、二进制文件接收等场景，与等中间件分工明确，可共存使用。
2025-12-19 22:58:20
563
原创 express.json 深入全面讲解教程
/ 限制请求体最大为 2MB默认只解析的请求，若需要解析自定义类型（如），可以通过type// 方式1：字符串// 方式2：数组（支持多个类型）// 方式3：自定义判断函数（返回 true 则解析）// 匹配所有以 "json" 结尾的 Content-Type}));默认只解析，自定义 Content-Type 未配置type参数。是 Express 内置中间件，核心功能是解析 JSON 格式请求体并挂载到req.body，替代了早期的。核心使用方式分为全局注册（
2025-12-19 22:47:03
698
原创 express.urlencoded和fetch结合使用
核心要求：前端 fetch 需设置，并将请求体转为 URL 编码字符串。推荐用法：使用构造请求体，简洁且能自动处理特殊字符编码，后端需配置。避坑要点：中间件注册在路由之前、使用 POST 方法、嵌套/数组数据需开启、特殊字符需编码。跨域处理：后端需配置 CORS 响应头，否则前端 fetch 会出现跨域错误。
2025-12-19 21:33:24
611
原创 express.urlencoded深入全面讲解教程
专门解析格式请求体，解析后数据挂载在req.body上。核心配置（支持嵌套数据）是绝大多数场景的首选，limit用于限制请求体大小。需与（解析 JSON）、multer（解析文件上传）区分使用，中间件需注册在路由之前。req.body为undefined多是中间件未注册或注册顺序错误，嵌套解析失败需开启。
2025-12-19 21:20:53
751
原创 HTML 实现登录状态记录 深入全面讲解教程
登录状态记录是Web开发的核心需求之一，其本质是在客户端存储用户身份凭证，让用户在一段时间内无需重复登录。HTML本身不直接处理登录逻辑，但可结合浏览器存储（Cookie/LocalStorage/SessionStorage）、HTTP协议和JavaScript实现完整的登录状态管理。本教程从核心原理到实战实现，全面讲解登录状态记录的设计、实现与安全规范。完整的登录状态记录流程分为3步：核心载体：浏览器存储（Cookie/LocalStorage）是前端记录登录状态的关键；核心原则：凭证必须可验证、
2025-12-19 10:24:52
1475
原创 HTML Form 深入全面讲解教程
监听表单提交事件（submit阻止默认提交行为（获取控件值并验证；验证通过则手动提交表单，否则提示错误。通过自定义原生验证的提示语：el . setCustomValidity('用户名不能包含空格');} else {// 清空自定义提示 } } </ script >el . setCustomValidity('用户名不能包含空格');} else {// 清空自定义提示 } } </ script >el . setCustomValidity('用户名不能包含空格')
2025-12-19 10:02:08
1015
原创 FormData 深入讲解教程
/ 上传自定义文本 Blob// 第三个参数为文件名});优先使用append添加数据，set用于覆盖；上传文件时无需手动设置，避免丢失 boundary；结合 XMLHttpRequest 监控上传进度，结合 Axios 简化请求；大文件上传推荐分片策略，解决超时/失败问题；后端需对应配置文件解析（如 Express + multer）。
2025-12-19 09:50:18
897
原创 Express POST 请求深入全面讲解教程
防止超大请求体攻击，可在中间件中配置limit// 限制 JSON 数据最大 1MB// 限制表单数据最大 500KB// 限制文件大小 2MB中间件是关键：根据数据格式选择对应的解析中间件（multer数据解析后存于req.body（文件存于req.filereq.files必须验证数据：防止非法数据提交，推荐使用；文件上传用multer：配置存储路径、文件大小、类型过滤；安全防护不可少：CORS、CSRF、XSS、速率限制；错误处理要完善：捕获解析错误、业务错误，返回友好提示。
2025-12-18 22:59:34
868
原创 fs.promises 深入全面讲解
摆脱回调地狱，代码更易读、易维护；适配，错误处理更清晰；API 语义化，与传统fs方法一一对应，学习成本低。
2025-12-18 14:51:31
667
原创 Mapbox GL JS 核心表达式：`get` 完全教程
格式["get", "属性名", 目标对象]作用：从指定的自定义对象中获取属性值（非要素属性）。示例// 从颜色映射对象中获取「地标」对应的颜色值["get", "地标", {地标: "#ff6b6b", 商圈: "#4ecdc4", 景区: "#feca57"}]// 返回结果："#ff6b6b"定义颜色映射表，通过嵌套get// 定义类型-颜色映射表'地标': '#ff6b6b','商圈': '#4ecdc4','景区': '#feca57'// 修改 circle-color 配置。
2025-12-15 15:55:29
580
原创 Mapbox GL JS 核心表达式：`in` 包含判断完全教程
是 Mapbox GL JS 表达式系统中高频使用的包含关系判断工具，核心作用是：判断一个值是否存在于数组中（数组包含），或一个子字符串是否存在于目标字符串中（字符串包含）。相比 多条件组合（如 ）， 能大幅简化代码；同时需注意字符串字面量的 包裹规则，避免类型解析错误。本文将从核心概念、语法、实战场景、进阶用法到常见误区，全面讲解 表达式的使用。 表达式支持两种核心判断场景，返回值均为布尔值（/）：官方定义的语法简洁，需严格区分参数类型：关键说明：数组包含场景中， 是 的简化版，两者逻辑等价但
2025-12-15 15:25:00
577
原创 Mapbox GL JS 核心表达式：`any` 多条件或判断完全教程
是 Mapbox GL JS 表达式系统中与 互补的核心逻辑表达式，用于实现多条件“或”判断——只要任意一个输入的布尔表达式结果为 ， 就返回 ；同时具备短路求值特性（一旦某个条件为 ，立即停止后续条件计算），既灵活满足多场景的宽松筛选需求，又能优化性能。本文将从核心概念、语法、实战场景、进阶优化到常见误区，全面讲解 表达式的使用方法。 表达式实现“逻辑或”（OR）功能，是 Mapbox 宽松筛选、多条件样式控制的核心工具：官方定义的语法简洁且支持任意数量布尔表达式，与 语法结构一致但逻辑不同：参数
2025-12-15 14:58:54
937
原创 Mapbox GL JS 核心表达式：`all` 多条件且判断完全教程
是 Mapbox GL JS 表达式系统中最核心的逻辑判断表达式之一，用于实现多条件“且”判断——只有所有输入的布尔表达式结果均为 时， 才返回 ；且支持短路求值（一旦某个条件为 ，立即停止后续条件计算），既能精准控制逻辑，又能优化性能。本文将从核心概念、语法、实战场景、进阶优化到常见误区，全面讲解 表达式的使用方法。 表达式实现“逻辑与”（AND）功能：官方定义的语法简洁且灵活（支持任意数量布尔表达式）：参数说明： 本身不直接做值比较，而是组合多个比较表达式实现复杂逻辑，最常用的搭配是 （相等判断）
2025-12-15 14:51:41
932
原创 Mapbox GL JS 核心表达式：`==` 相等判断完全教程
Mapbox GL JS 是一款高性能的开源矢量地图渲染库，其表达式系统（Expressions） 是实现数据驱动样式、要素过滤、交互控制的核心。 作为最基础且高频使用的比较表达式，用于判断两个值是否严格相等，是解锁 Mapbox 高级样式定制的必备知识点。本文将从核心概念、语法、实战场景、进阶用法到常见误区，全面讲解 表达式的使用。 表达式的比较规则与 JavaScript 的 完全一致： 表达式支持两种语法（官方定义）：参数说明： 表达式最核心的用途是要素过滤和数据驱动样式，以下结合实战示例讲解。
2025-12-15 14:44:29
858
原创 前端保存用户登录信息 深入全面讲解
登录页 → 输入账号密码 → 前端哈希加密密码 → 提交登录请求（HTTPS/POST）→服务端验证 → 生成sessionId/双Token → 服务端Set-Cookie（HttpOnly+Secure+SameSite）→前端存储非敏感信息到LocalStorage → 跳转首页 →接口请求自动携带Cookie → Token过期自动刷新 →登出：前端清除存储 + 服务端失效凭证敏感凭证（Token/sessionId）：优先存在的Cookie中，禁止存LocalStorage；非敏感信息。
2025-12-14 19:44:58
716
原创 Node.js `import.meta` 深入全面讲解
替代 CommonJS 的__dirname__filename等特性；提供模块上下文信息（入口判断、路径解析）；适配 ESM 的模块化规范，支持动态路径解析。优先使用稳定属性（如urlmaindirname），避免实验性 API；低版本 Node.js 需通过手动转换路径；结合import()动态导入时，用解析路径，避免相对路径陷阱。
2025-12-14 18:18:22
883
1
原创 Mapbox支持WMTS 1.0.0的核心要求与实操规范
WMTS（Web Map Tile Service）1.0.0作为OGC标准的瓦片地图服务协议，以预渲染瓦片的高效分发能力，成为GIS应用中基础地图服务的重要选择。Mapbox虽以自有瓦片格式为核心，但通过灵活的自定义源配置，可实现对WMTS 1.0.0服务的兼容对接。本文将详细拆解Mapbox支持WMTS 1.0.0的核心要求，为GIS开发者提供清晰的对接指南。
2025-12-11 09:09:56
557
原创 ECharts 绘制三级地图（中国+省市+区县
ECharts 是前端主流的数据可视化库，绘制地图的核心是 GeoJSON 地理数据 + ECharts 的 图表类型。本文将从「环境准备→三级地图绘制→省市/区县联动→数据绑定→样式自定义」逐步拆解，提供可直接运行的代码示例，覆盖中国地图（省级）、省级地图（市级）、市级地图（区县）全场景，解决“地图显示空白”“数据不匹配”“联动失效”等常见问题。ECharts 本身不自带地理数据，需手动引入对应层级的 GeoJSON 文件（描述地区边界、名称、编码等信息），推荐 2 个可靠数据源：GeoJSON 文件中
2025-12-03 15:43:40
972
原创 CSS重置样式表（Reset CSS
好的CSS重置样式表是前端开发的“地基”——它能减少跨浏览器兼容性问题，让开发者专注于业务样式，而非反复调试默认样式差异。本文提供的两款样式表，兼顾了“通用性”和“灵活性”，可根据项目规模和需求选择使用，也可结合自身项目进一步定制（如添加专属颜色变量、组件基础样式）。使用时需注意引入顺序，避免被其他样式覆盖，同时保留可访问性样式（如:focus状态），确保项目兼容键盘导航和屏幕阅读器。
2025-12-03 15:38:50
830
原创 border边框影响布局解决方案（6种解决方案）
解决border影响布局的核心，是让边框“不额外占用空间”——现代项目首选（从盒模型层面解决），特殊场景（复杂边框、旧项目）可选择box-shadow、伪元素等方案。实际开发中，需根据项目兼容性要求、边框样式需求选择最优方案，避免过度复杂的实现（如能用box-shadow解决就不用伪元素）。掌握本文的原理和方案，不仅能解决日常布局问题，还能在面试中清晰拆解“盒模型”“边框实现”等考点，展现技术深度。
2025-12-03 15:35:22
350
原创 css实现元素居中的18种方法
元素居中是CSS开发中最基础也最常用的需求，涵盖三大场景。不同场景（如元素类型、是否定宽高、兼容性要求）对应不同的最优方案，面试中也常考察“如何实现元素居中”“不同方法的优缺点”。本文将系统梳理所有主流居中方法，从基础到进阶，附原理、代码示例、适用场景及面试考点，帮你一网打尽居中问题。
2025-12-03 15:29:19
673
原创 客户端与服务器SSL协议/加密套件不兼容：完整解决方案
用SSL Labs或OpenSSL诊断服务器支持的协议/套件；若服务器仅支持旧协议/弱套件 → 按第二部分优化服务器配置；若客户端不支持服务器的协议/套件 → 按第三部分优化客户端；若中间件/CDN配置不一致 → 按第四部分调整中间件；验证：配置后用OpenSSL或浏览器重新测试，确认握手成功（显示“Cipher is XXXX”）。通过以上步骤，可解决99%的SSL协议/加密套件不兼容问题，同时兼顾兼容性和安全性。
2025-12-03 15:24:25
1440
原创 前端性能优化策略（面试一网打尽）
前端性能优化是一个“系统性工程”，核心是“从用户体验出发，结合底层原理和工程化实践，针对性优化”。面试中回答性能优化问题时，需避免“只罗列策略”，要讲清“原理+实践+效果”，结合项目案例体现自己的实操经验。本文覆盖了面试90%的高频考点，建议结合实际项目落地1-2个优化点（如图片懒加载、缓存配置），形成自己的“优化方法论”，面试时才能从容应对。
2025-12-03 15:20:51
849
原创 js对url进行编码解码（多种方式对比）
编码优先级：优先使用（参数编码）和encodeURI（完整URL编码），拒绝使用escape；参数必编码：只要参数可能包含中文、空格、等字符，必须用编码，再拼接URL；解码对应性encodeURI编码的内容用decodeURI解码，编码的内容用解码，不可交叉；后端配合：与后端约定统一编码格式（UTF-8），避免跨端解析乱码。URL编码解码是前端开发的“基础但关键”技能，核心在于区分encodeURI和的适用场景——前者保结构，后者保参数。
2025-12-03 15:14:46
708
原创 推荐五个常用的CSS动画库
本文推荐5个高效CSS动画库，帮助开发者快速实现专业动画效果： Animate.css - 全能基础动画库，100+预设效果，适合快速开发 Hover.css - 专注交互特效，轻量7KB，优化hover/active状态 Animista - 可视化定制平台，可在线生成专属CSS动画代码 Magic.css - 炫酷特效库，适合活动页等吸睛场景 Motion UI - CSS+JS结合，支持复杂序列动画和交互控制 选型建议根据项目需求匹配：基础动画选Animate.css，交互特效用Hover.css，创
2025-12-03 15:11:13
1130
原创 Vue3 Computed 深入讲解（聚焦 Vue3 特性）
Vue3 的 Computed（计算属性）核心定位仍是「基于响应式依赖的缓存式派生值计算」，但在组合式 API 加持下，用法更灵活、与响应式系统（refreactive）的配合更紧密，同时保留了 Vue2 中经实践验证的核心优势（依赖追踪+缓存）。以下从「核心原理→基础用法→高级场景→Pinia 集成→避坑指南」全面拆解 Vue3 专属特性。
2025-12-03 13:50:31
581
MBStyleGenerator Mapbox GL Style JSON文件生成
2025-12-04
QGIS Open Sans 字体安装失败解决方案
2025-12-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人