- 博客(778)
- 资源 (12)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 现代网站的常见风格分为以下 9 大类
现代网站设计风格主要分为9大类：1)极简风-强调留白与简洁，适合作品集；2)黑暗风-深色背景凸显科技感；3)多彩插画风-活泼明快，适合教育类；4)扁平化-纯色线条，功能导向；5)霓虹未来风-赛博科技感；6)玻璃拟态-半透明毛玻璃效果；7)材料设计-谷歌规范，系统感强；8)杂志排版风-注重字体与视觉冲击；9)动态交互风-丰富动效增强体验。每种风格在配色、适用场景和关键词上各具特色，可根据项目需求选择对应设计语言。
2025-07-10 09:35:54
326
原创 Marker SVG（可缩放矢量图形）绘制图形
绘制矩形和圆形，尝试修改 fill 与 stroke。，去除图标制作，专注于前端开发中的绘制与使用。数据可视化（饼图、折线图、柱状图）网站图标（logo、icon）UI 元素（按钮、装饰线条）：用 path 画一条波浪线。标签及 viewBox。：给矩形添加渐变填充。
2025-07-10 08:32:57
544
原创 项目中字典数据的优化办法
字典数据优化方案：前端项目中，字典数据（如状态、类型等）通常存储于Vuex，但页面刷新会导致数据丢失，需重复调用接口。优化方案采用localStorage+Vuex结合：页面加载时先检查localStorage缓存，若存在未过期数据则直接存入Vuex使用；若无缓存则调用接口获取数据，同时存入Vuex和localStorage。该方案减少接口请求，提升加载速度，优化用户体验。核心流程：检查缓存→有则用，无则取→同步存储。
2025-07-08 12:58:43
205
原创 mysql2/promise 中 execute 和 query 的使用
MySQL2/promise提供了execute和query两种查询方法： execute使用预处理语句，严格类型检查，防SQL注入但参数限制多 query直接拼接SQL，对LIMIT/OFFSET等参数更宽松 最佳实践：高频查询和写入操作用execute，特殊参数场景用query 注意execute处理LIMIT/OFFSET时需直接拼接数字常量 （字数：99）
2025-07-08 09:56:39
260
原创 Google 浏览器调试工具切换成“中文”
这篇教程介绍了如何将Google浏览器调试工具切换为中文界面。操作步骤包括：1.打开调试工具并进入设置；2.在语言选项中选择中文；3.关闭浏览器后重启，确认弹出的提示窗口。完成设置后，调试工具界面将显示为中文，方便用户理解各项功能。该操作简单易行，有助于提升非英语用户的调试体验。
2025-07-07 08:30:19
208
原创 在 js 中怎么生成最可靠的唯一值
本文探讨了在JavaScript中生成可靠唯一值的几种方法，针对常见的重复问题提出了三种解决方案：1) 添加重试逻辑的组合token生成方式；2) 数据库查重机制；3) 改进的token生成算法。重点分析了基于SHA256哈希（结合用户ID和时间戳）与纯随机数两种生成方式的优劣，指出前者在可追溯性和业务可用性上更具优势。推荐使用包含时间戳、随机字符串和用户哈希的组合算法，这种方案既保证唯一性又便于问题排查。
2025-07-04 10:55:42
643
原创 Element 的 Message 多个显示时，只显示一个的封装办法
本文介绍了如何优化Element UI的Message组件，使其在显示多个相同消息时只展示一个。通过创建自定义Message工具类实现以下功能： 消息缓存和去重管理，防止重复显示相同消息 支持success、error、warning、info四种类型消息 提供closeAll()和closeByType()方法关闭消息 自动清理过期消息缓存，防止内存泄漏 完全兼容原有this.$message用法 实现步骤包括创建message.js工具类、修改main.js全局配置、更新API和公共方法中的调用方式。优
2025-07-03 22:34:52
301
原创 Vue 项目在哪里加载「字典数据」最好
【最佳实践】Vue项目中建议在App.vue的created()生命周期中调用Vuex action初始化字典数据，配合Vuex统一管理。具体实现：1)在Vuex store创建dictionary模块存储数据；2)App.vue启动时调用fetchDictDataaction；3)全局组件通过$store访问缓存数据。优势：单次请求、全局可用、维护简单。特殊场景可采用路由守卫刷新（实时性要求高时）或SSR预取方案。进阶优化可添加本地缓存和过期策略。
2025-07-03 17:58:54
392
原创 Vue 项目集成 Docsify 使用说明（2） 添加权限控制
本文介绍了在Vue项目中为Docsify文档页面添加权限控制的4种方案：路由层面保护（推荐）、Vue组件层面保护、Docsify HTML层面保护和登录重定向机制。核心是通过路由守卫、组件检查、HTML脚本和跳转优化，确保只有登录用户才能访问文档。方案包括代码示例和测试场景说明，可灵活扩展到其他页面。4层机制共同保障文档安全性和用户体验。
2025-07-01 15:51:50
523
原创 Vue 项目集成 Docsify 使用说明（1）
本文介绍了在Vue项目中集成Docsify文档系统的两种方案。推荐使用iframe嵌入方式，通过在Vue项目中创建DocsifyPage.vue组件，并在public/docs目录下配置Docsify文档结构（包括index.html、README.md、侧栏导航等文件）。iframe方案简单安全，与Vue主应用隔离。文章还提供了详细的Docsify配置示例，包括主题设置、搜索功能和移动端优化等。另一种方案是直接集成Docsify，但复杂度较高。整体方案包含文档目录结构说明和代码实现示例，帮助开发者快速搭建
2025-07-01 11:57:23
957
原创 使用 em 单位的好处，以及 em、rem、px 的区别
摘要：文章探讨了使用em单位的好处及其与其他单位的区别。em作为相对单位，能根据父元素字体大小自动调整，提供更好的响应式设计和用户体验，尤其尊重用户浏览器字体设置。与rem(根元素相对)和px(绝对单位)不同，em特别适合底部组件设计，确保可读性和一致性。使用.875em等比例值能有效协调元素大小，体现了现代Web开发对可访问性和响应式设计的重视。
2025-06-29 18:11:31
219
原创 Vue 实现拖拉拽组件 vue-draggable-plus
vue-draggable-plus是一款支持Vue 2/3的拖拽组件库，基于Sortable.js开发，功能更强大且维护活跃。主要特点包括：支持双向数据绑定(v-model)、跨列表拖拽(group)、拖拽排序/嵌套/克隆等操作，并提供完整的TypeScript类型支持。安装简单，只需npm install vue-draggable-plus，通过Vue.use注册即可使用。常用配置包括设置禁用(disabled)、克隆处理(clone)和指定唯一键(itemKey)。该组件是vuedraggable的
2025-06-25 21:28:17
340
原创 为什么短信验证、邮件验证、临时令牌都建议存Redis呢？
摘要：Redis 更适合存储短信验证码、邮件验证码等短时数据，因其支持自动过期（TTL）、读写速度快且避免污染数据库。典型场景包括验证码存储（如 sms:code:13812345678）和临时令牌，Redis 的隔离性和高效清理机制提升了安全性。相比 MySQL 需手动维护，Redis 通过 SET key value EX seconds 实现自动化管理，适合高并发场景，代码示例展示了如何设置和获取验证码。结论：Redis 是临时数据的首选，数据库存储此类数据不推荐。
2025-06-23 18:52:20
228
原创 DOM 中 scrollWidth（实际内容宽度） 和 clientWidth（可视区域宽度）
scrollWidth和clientWidth是判断内容溢出的关键DOM属性。clientWidth表示元素可视宽度（不含滚动条和边框），而scrollWidth反映实际内容总宽度。若内容未溢出，两者相近；若溢出，scrollWidth更大。通过比较二者可检测溢出情况，常用于实现省略号或提示功能。例如：100px宽度的容器内220px内容会使scrollWidth(220)>clientWidth(100)，表明需要处理溢出。
2025-06-21 19:10:49
182
原创 Nodejs 操作数据库时，代码解决同步执行的写法
本文介绍了 Node.js 中实现批量删除文件的两种方法：传统嵌套回调写法和基于 Promise 的封装写法。嵌套写法结构直观但容易产生回调地狱；Promise 写法通过链式调用提升了代码可读性和复用性，并支持统一错误处理。两种方式均需要验证用户权限和文件存在性，Promise 写法更适合复杂业务逻辑的编排，推荐在现代项目中优先采用。文章最后对比了两种方法在可读性、错误处理、复用性和控制流方面的差异。
2025-06-21 14:00:10
151
原创 私有 Word 文件预览转 PDF 实现方案
本文介绍了一种私有Word文件在线预览方案，通过后端将.doc/.docx转换为PDF实现浏览器预览。主要内容包括： 方案概述：利用LibreOffice将Word文件转换为PDF后返回前端 实现步骤： 后端判断Word文件类型 安装LibreOffice转换工具 安装中文字体避免乱码 转换流程及PDF文件处理 优化建议：缓存PDF、错误重试、任务队列等 前端实现：使用Blob对象和临时URL进行预览 该方案解决了Word文件无法直接浏览器预览的问题，同时提供中文支持和性能优化建议。
2025-06-21 00:33:43
470
原创 .docx 和 .doc 都是 Word 文档格式的区别
.docx和.doc是Word文档的两种主要格式，区别显著。.docx是Word 2007及以后版本采用的新格式，采用XML+ZIP压缩结构，具有体积小、稳定性好、兼容性强等优势；而.doc是Word 97-2003使用的旧二进制格式，文件较大且兼容性差。当前推荐优先使用.docx格式。类似地，Excel（.xlsx）和PPT（.pptx）也采用XML+ZIP的新格式取代旧二进制格式（.xls/.ppt）。
2025-06-21 00:01:07
321
原创 使用 Buffer.from(file.originalname, ‘latin1‘).toString(‘utf8‘) 以后不出现乱码是为什么？
中文文件名上传乱码的解决方案：当使用multipart/form-data上传文件时，文件名可能被错误地用Latin1编码解析导致乱码。通过Buffer.from(file.originalname, 'latin1').toString('utf8')可手动纠正编码：先将乱码字符串按Latin1还原为原始字节，再用UTF-8正确解码。该方法适用于处理multer等中间件接收中文文件名时出现的"文件"类乱码问题，有效恢复原始文件名如"文件.txt"。最佳实践建
2025-06-20 16:27:32
241
原创 GitHub Copilot 配置快捷键
你可以在 VS Code 中自定义 GitHub Copilot 的快捷键：（macOS）输入，点击进入。copilot设置快捷键。
2025-06-20 16:18:55
362
原创 GitHub Copilot 是什么，怎么使用
GitHub Copilot是由GitHub与OpenAI联合开发的AI编程助手，能自动补全代码、根据注释生成代码、提供API参考用法等。支持Python、JavaScript等多种主流语言，可在VS Code、JetBrains等主流IDE中使用。提供30天免费试用，个人版年费100美元。该工具能显著提升编程效率，例如输入注释即可自动生成斐波那契数列函数代码。
2025-06-20 16:01:33
365
原创 Mysql数据库实现外键约束（Foreign Key Constraint），防止“孤儿数据”
摘要： files 表通过外键约束 files.folder_id 关联 folders.id，确保文件必须属于有效目录。外键强制数据一致性，防止无效引用，如删除目录时通过 ON DELETE CASCADE 自动删除关联文件。可通过 SHOW CREATE TABLE files 查看外键定义，其结构包含字段（如文件名、大小、上传时间）、索引及表配置（InnoDB引擎、UTF8mb4字符集）。外键约束既保障数据完整性，也需操作时验证目录存在性。
2025-06-20 11:00:01
749
原创 Express 中用于返回响应的两种常用方法 res.status(200).json() 和 res.status(200).send()
在 Express 中，res.json() 和 res.send() 的区别主要在于响应格式和数据类型处理。res.json() 会自动设置 Content-Type 为 JSON 并转换数据为 JSON 格式，适合 API 响应；而 res.send() 可返回任意类型数据（文本/HTML/Buffer），适合非结构化响应。建议 API 统一使用 res.json() 返回 JSON 数据，需要返回 HTML 或纯文本时使用 res.send()。两种方法都能返回对象，但 res.json() 更为可靠
2025-06-20 10:32:49
198
原创 Mysql2/promise 返回，await 使用总结
本文介绍了MySQL查询操作的不同返回结构： SELECT返回数组[rows, fields]，其中rows是记录数组 INSERT返回插入结果对象，包含affectedRows和insertId等字段 UPDATE返回更新结果，重点关注affectedRows和changedRows DELETE返回删除结果，主要查看affectedRows 特别注意：必须使用数组解构[result]获取操作结果，直接解构对象会导致错误。
2025-06-19 22:20:17
310
原创 Cursor开发工具Prettier格式插件配置
这篇JSON配置文件摘要了VS Code编辑器及相关插件的个性化设置，主要包括：Tabnine AI补全的实验性自动导入、文件类型关联映射、Emmet扩展支持、Git自动拉取、编辑器缩进格式（2空格）、Prettier格式化规则（单引号/不换行/保留分号）、代码迷你地图启用等优化配置，同时关闭了部分插件的自动功能和提示信息。这些设置共同优化了开发环境的代码编辑、格式化和版本控制体验。
2025-06-19 13:16:36
113
原创 Cursor添加Prettier插件格式化vue代码
Prettier代码格式化配置指南 摘要：本文详细介绍了Prettier代码格式化工具的使用方法，重点说明了如何通过VS Code配置实现"一行显示"的特殊格式化效果。内容包括：1) Prettier插件安装步骤；2) 关键配置参数说明，特别是通过设置超长printWidth(10000)实现代码强制单行显示；3) 其他常用Prettier选项如单引号、无分号、无尾逗号等设置。文中还附带了完整的配置示例和详细注释，帮助开发者理解每个参数的作用。
2025-06-18 07:42:51
259
原创 使用 Unicode 图标显示什么时候推荐，什么时候不推荐
在代码中使用Unicode图标（如📄📋）是可行的，但适用性因项目而异： ✅ 推荐场景： 小型/个人项目：直观快捷，无需额外资源。 移动端/Web页面：兼容性好，避免图标库依赖。 ⚠️ 谨慎使用： 企业级项目：不同系统/浏览器显示可能不一致。 定制化UI：无法控制颜色和风格统一。 📌 建议： 小型项目直接使用Unicode图标，商业项目推荐iconfont/SVG方案，动态场景可用JS映射管理（如Vue示例）。
2025-06-16 08:42:51
313
原创 图表工具 ECharts vs Chart.js 对比
ECharts和Chart.js是两大主流前端图表库，各具特色。ECharts由百度开发，提供丰富图表类型（含地图和复杂交互），适合大数据量和企业级应用，但配置较复杂；Chart.js社区驱动，轻量易用，适合简单图表和快速开发。在Vue项目中，两者均有专用封装（vue-echarts/vue-chartjs）。选择建议：复杂可视化用ECharts，轻量需求选Chart.js。
2025-06-14 11:13:18
529
原创 不同的数据库操作方式：MongoDB（NoSQL）和 MySQL/SQL
本文对比了 MongoDB 和 MySQL 两种数据库在用户查询与更新操作中的不同写法。MongoDB 采用异步 await 语法，使用 findOne 和 updateOne 方法进行 JSON 数据操作，而 MySQL 采用回调函数或 async/await 执行 SQL 查询。优化建议包括增加错误处理、改用 Promise 风格及使用 ORM 工具。关键区别在于：MongoDB 适合非结构化数据，语法更灵活；MySQL 适合结构化数据，需注意 SQL 注入防护。推荐写法均采用 try/catch 进行
2025-06-02 00:46:48
855
原创 数据库 MongoDB (NoSQL) 与 MySQL (SQL) 的写法对比
摘要：MongoDB(NoSQL)与MySQL(SQL)数据库在结构和操作上存在显著差异。MySQL采用表格结构，需预定义模式，使用SQL语言；MongoDB采用文档存储(BSON)，无需预定义模式。对比显示MongoDB在数据模型灵活性、扩展性和JSON支持方面优势明显，适合非结构化数据和敏捷开发；而MySQL在事务支持、复杂查询和数据完整性方面更强，适合结构化数据和高一致性要求场景。实际应用中可根据需求选择或混合使用两种数据库技术。
2025-06-02 00:39:30
456
原创 res.json() vs res.send() 的区别
Express.js 中 res.json() 与 res.send() 的区别 res.json() 和 res.send() 都是 Express.js 的响应方法，主要区别在于数据处理方式： res.send() 自动推断 Content-Type，支持字符串、JSON 和 Buffer 等数据类型； res.json() 强制设置 Content-Type 为 JSON，无论输入类型如何都会转为 JSON 格式。 使用建议： 明确返回 JSON 时优先用 res.json()（如 API 响应） 需
2025-06-01 23:29:23
416
原创 Redis 存储邮件验证码的完整代码
本文介绍了一个基于Redis和Node.js实现的高性能邮件验证码系统。系统通过Redis存储验证码并设置过期时间，包含发送验证码和验证接口。关键功能包括：防刷机制限制60秒内只能发送一次、验证码5分钟有效、IP限流防止滥用。文章还提供了安全增强选项如加密存储验证码，以及生产环境部署建议如Redis密码认证和持久化配置。该系统具备高性能、防刷能力和生产级可靠性，适用于各种需要邮件验证的场景。
2025-06-01 23:18:27
278
原创 邮件验证码存储推荐方式
摘要： 邮件验证码存储推荐使用 Redis，因其具备高性能、自动过期（TTL）、原子性操作及分布式支持等优势。对比内存（Map）易丢失、数据库性能低等缺点，Redis 通过 SETEX 命令存储验证码并设置有效期，结合加密存储和防刷策略（如限制尝试次数）可显著提升安全性。生产环境中建议配置 Redis 集群和高可用方案，并遵循 业务前缀:唯一标识 的键名设计规范。完整流程示例涵盖发送、验证及防刷逻辑，适用于绝大多数高并发场景。其他方案（如内存或数据库）仅推荐用于开发测试或特定需求场景。
2025-06-01 23:05:26
1043
原创 Cursor 中三个选项 Agent 、 Ask 和 Manual 含义
Cursor提供三种AI交互模式：Agent模式让AI主动处理代码任务（如生成/重构代码）；Ask模式需手动提问获取AI建议；Manual模式则完全关闭AI功能。推荐根据需求选择：Agent适合自动化操作，Ask适合针对性提问，Manual适合纯手动编程。各模式切换灵活，满足不同开发场景需求。（149字）
2025-06-01 16:05:54
1409
原创 Css样式中设置gap: 12px以后左右出现距离问题解析
摘要： 问题现象是flex布局的gap属性在单子元素容器中产生了间距，原因在于框架默认添加的::before/::after伪元素被gap识别为子节点。通过开发者工具可验证伪元素存在，导致.el-input与伪元素间各产生12px间距。解决方案包括：1) 清除伪元素布局影响（推荐用display:none）；2) 改用margin-left替代gap控制间距。该问题常见于Element-UI等框架的表单项布局场景。（150字）
2025-05-30 17:16:27
760
原创 微信扫码登录 - 公众号网页授权，总结（二）返回指定页面
本文介绍微信扫码登录公众号网页授权的回调处理流程，重点说明如何根据授权状态返回不同页面。核心步骤包括：1) 校验授权完整性，判断是否获取用户信息权限；2) 检查是否为匿名用户；3) 查询用户是否关注公众号；4) 根据判断结果返回对应的HTML页面（授权失败页/未关注页/已关注页）。文中提供了完整的代码实现，包括用户信息获取、关注状态检查和页面返回逻辑，并附有流程图说明整个判断流程。通过该方案可实现针对不同授权状态的差异化页面展示。
2025-05-27 11:56:47
184
原创 微信扫码登录 - 公众号网页授权，总结（一）成功返回聊天界面
本文总结了微信扫码登录的实现流程：1) 后端生成带授权链接的二维码；2) 用户扫码后通过微信授权获取用户信息；3) 回调处理逻辑包括获取access_token、查询用户数据或注册新用户；4) 最终返回自动关闭页面。关键点包含二维码生成、OAuth2授权、用户信息获取及数据库操作，通过WebSocket实现前后端登录状态同步，完成闭环登录流程。
2025-05-27 11:43:16
334
原创 解决 Tailwind CSS 代码冗余问题
Tailwind CSS 虽然功能强大，但容易导致 HTML 类名冗长和代码冗余。为解决这一问题，可以采取多种策略：使用 @apply 指令提取重复样式、创建可复用组件、借助编辑器插件优化开发体验、启用 JIT 模式提升性能、自定义工具类以满足特定需求、使用 clsx 或 classnames 库动态管理类名，以及定期重构和抽象代码。其中，定期维护和升级是确保代码简洁高效的关键。通过这些方法，可以有效减少 Tailwind CSS 的冗余问题，提升代码可读性和可维护性。
2025-05-18 19:15:08
339
原创 Vue 中生成源码映射文件，配置 map
在Vue.js项目中，开启开发环境的源码映射（source map）可以通过修改vue.config.js文件来实现。具体步骤如下： 配置vue.config.js：在项目根目录新建或修改vue.config.js文件，添加以下代码： const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { devt
2025-05-18 04:04:33
299
原创 Flowbite 和 daisyUI 那个好用？
Flowbite 和 daisyUI 是基于 Tailwind CSS 的组件库，各有特色。daisyUI 上手简单，支持多主题切换，适合快速开发和轻量项目；Flowbite 设计更正式，组件丰富，适合企业级应用。daisyUI 天然兼容 Vue，Flowbite 需额外插件。两者社区活跃，但 Flowbite 更新更频繁。选择取决于项目需求：daisyUI 适合个人项目和快速迭代，Flowbite 更适合企业官网和管理后台。
2025-05-17 15:29:48
577
Royal TSX 是一款跨平台的远程桌面和连接管理工具，专为 macOS 设计 它主要用于管理和连接到不同类型的远程计算机和服务
2024-12-31
Selenium-IDE 插件
2024-05-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人