- 博客(32)
- 收藏
- 关注
RSS订阅原创 JavaScript中实现季度日期范围判断的技术解析
摘要：本文介绍了一个通用的季度判断算法，用于验证目标季度是否在指定时间范围内。核心功能包括：1）采用YYYY-Q[1-4]格式的正则验证；2）数值化转换（year*4+quarter）；3）防御性编程设计（输入验证、错误降级处理）；4）函数式编程优化（map管道处理）。该算法具有业务场景适配性，支持默认参数配置和错误监控，通过早期返回和容错设计确保业务连续性，适用于各类季度范围判断场景。
2025-10-29 17:07:46
129
原创 Nginx清除浏览器缓存的三个缓存响应头的关系详解
三个缓存响应头（Cache-Control、Pragma、Expires）的关系及使用建议：Cache-Control作为HTTP/1.1标准优先级最高，Pragma和Expires主要用于兼容旧版本。虽然现代浏览器完全依赖Cache-Control，但建议生产环境同时设置三个响应头，以兼容老旧设备、CDN和代理服务器。最佳实践推荐配置包含Cache-Control的多种指令、Pragma的no-cache以及Expires的过去时间，确保最广泛的兼容性，且额外配置带来的性能开销极小。根据不同场景可选择最小
2025-10-27 14:23:23
432
原创 年份与季度筛选组件封装
季度筛选组件摘要 该季度筛选组件提供了直观的时间范围选择功能，主要包含以下特点： 结构设计： 采用年份+季度双选择器组合 支持起始和结束时间设置 包含错误提示和操作按钮区域 核心优化： 使用QUARTER_MAP实现季度数字映射 采用计算属性自动处理数据逻辑 独创时间戳比较算法（年*4+季度数） 实现自动验证监听机制 交互功能： 双向数据绑定确保状态同步 年份选择自动联动验证 统一验证方法集中处理逻辑 支持重置和提交操作 技术实现： 基于Vue的响应式数据管理 使用v-model、v-for等指令 通过$e
2025-10-24 16:44:34
297
原创 Nginx 配置参数详解
Nginx配置参数精要指南 核心配置模块 全局块：基础服务器设置 worker_processes：建议设为CPU核数 worker_connections：单进程最大连接数 error_log：错误日志路径和级别 events块：网络连接优化 use epoll：Linux高效事件模型 multi_accept on：批量接受新连接 连接数公式：worker_processes × worker_connections http块：HTTP全局配置 日志格式、压缩、缓冲区设置 gzip压缩优化文本资源 超
2025-10-20 15:49:37
944
原创 Cursor 科技感的登录页面提示词
本文介绍了基于Vue3的登录页面设计与实现方案。采用<script setup>语法和Ant Design Vue组件库构建响应式界面，包含动态背景效果。核心功能包括表单验证、密码加密、API调用和用户信息管理，使用Pinia进行状态存储，结合session/localStorage实现数据持久化。系统通过Vue Router管理导航，具备完善的错误处理机制，支持多种交互方式。技术实现上注重代码结构清晰、响应式数据管理和安全措施，同时提供了丰富的视觉动画效果。整体方案兼顾功能完整性和用户体验，适
2025-10-17 17:10:41
449
原创 目标：用 Vue 3（Composition API）实现一个智能输入框，使用单个 contenteditable div（不允许叠加模板层），内嵌可编辑占位片段，满足以下交互与视觉要求。 技术
本文介绍了一个严格遵循交互规范的Vue 3智能输入框实现方案。该组件采用单个contenteditable div作为输入容器，内嵌4个可编辑占位片段（日期、开始时间、结束时间、人数）。关键特性包括：1) 点击占位符精准定位光标；2) 智能删除处理，当删除最后一个字符时自动恢复占位提示并调整光标位置；3) 纯CSS实现占位提示，无需覆盖层；4) 规范化内容处理，确保正确判断空状态。组件通过beforeinput事件拦截特殊删除场景，同时保持其他输入行为的原生流畅性，所有占位符独立运作互不干扰。代码结构清晰，
2025-10-11 16:18:02
543
原创 创建动态省略号组件与使用说明
如何创建一个动态省略号组件，用于在有限空间内优雅展示长文本。该组件基于Vue 3和Ant Design Vue开发，主要功能包括： 核心特性： 自动检测文本溢出情况，仅在内容溢出时显示Tooltip提示 支持单行和多行文本省略（通过-webkit-line-clamp实现） 使用ResizeObserver实时监测尺寸变化，动态调整显示状态 技术实现： 通过比较scrollWidth/clientWidth或scrollHeight/clientHeight判断是否溢出 提供灵活的样式控制，适配不同布局场景
2025-09-24 17:19:59
349
原创 Cursor 生成 Tailwind CSS 加 Ant Design Vue 的前端项目提示词模板
最终生成的项目结构应同时包含两种框架的典型使用模式，并通过组合应用展示样式系统的协同工作能力。
2025-04-14 11:17:19
663
原创 大屏数据可视化专项提示词指南，涵盖布局设计、图表集成、动态效果和数据处理等核心场景
通过以上提示词，可快速生成专业级数据可视化大屏项目，建议结合实际业务需求组合不同技术方案，并优先考虑性能优化策略。
2025-04-14 10:50:47
1175
原创 Cursor 生成前端项目与页面的提示词指南
用 [React/Vue/Next.js/Nuxt.js] 创建一个新项目，包含以下配置：TypeScript、路由系统、状态管理（Redux/Pinia）、ESLint + Prettier。“创建一个使用 [Tailwind CSS/Ant Design/Element Plus] 的 [React/Vue] 项目模板，包含主题配置和响应式布局示例”“生成一个包含 Express/Nest.js 后端和 React/Vue 前端的全栈项目结构，支持 RESTful API 通信和 JWT 鉴权”
2025-04-14 10:49:08
3684
原创 前端开发AI提示词模板记录
以下是一份整理好的前端AI提示词模板，适用于与AI对话生成代码、设计建议、优化方案等场景。可根据具体需求调整参数和内容：生成响应式页面结构创建交互组件CSS样式优化配色方案生成UI组件设计动效建议四、性能优化类模板加载速度优化打包配置优化`为基于Webpack的React项目提供构建优化方案，要求：内存泄漏检测`编写JavaScript内存泄漏检测方案，包含：文档自动化`为以下React组件生成Markdown格式文档：[粘贴组件代码]要求包含：测试用例生成流程图生成`
2025-03-25 14:19:22
1540
原创 git更新远程新创建的分支到本地
远程分支与本地分支的同步与更新方法：通过git fetch获取远程分支信息后，使用git checkout --track创建本地跟踪分支。关键命令包括git remote update origin -p（更新并清理无效分支）、git branch -r（查看远程分支）和git pull（同步代码）。注意定期fetch更新分支状态，遇到冲突需手动解决。这些操作确保本地与远程仓库保持同步，同时清除已删除的远程分支引用。
2024-08-07 14:25:18
238
原创 Ant Design Vue this.$message.error 方法 参数 content 使用VNode方式换行
【代码】Ant Design Vue this.$message.error 方法 参数 content 使用VNode方式换行。
2024-06-19 15:26:32
922
原创 前端工时分析
1. 需要理解业务逻辑，需要做数据校验，对于类似下拉数据，图片上传，可能还要和后端沟通，数据从哪里取，分别表示什么意思，怎么上传图片，提交数据后，成功后要怎么做，以及失败的异常处理。2. 然后前端还得查看后端接口文档，看哪些字段需要额外处理，最后还得自测，甚至可能在真正对接前，需要自己造mock接口（这里是有对应组件的情况，可能没有直接可用的组件时间要更长）1. 后端开发这个字段可能关联四五个表单，还要处理数据，写接口文档。2. 用户刷新界面，许不需要时时保存输入数据，做怎么样的处理。
2024-06-03 18:30:25
1172
原创 Sass详细解释
继承了这些样式，并添加了他们自己的样式。符号来定义变量，这可以帮助你维护颜色、字体、大小等常见的样式值。Mixin 允许你定义可重用的样式块，并在整个样式表中调用它们。符号定义，与Mixin相似，但不会立即生成代码，而是等待被。Sass 提供了许多内置函数，用于处理颜色、字符串和其他值。Sass 提供了插值功能，允许你在选择器或属性名中使用变量。Sass 支持在颜色和其他数值上进行基本的数学运算。指令，允许一个选择器继承另一个选择器的所有样式。是一个占位符，它定义了一个共享的样式块。Sass 占位符使用。
2024-05-22 10:46:45
477
原创 Ant Design React 的getFieldDecorator属性里面的rules校验规则，及其样例
自定义验证函数，返回 Promise 或直接调用 callback 进行验证结果处理。字段值的类型，例如 'email'、'url' 等，会进行对应的格式校验。类型：function(value: any) => any。用于字符串和数字类型的字段，表示字段值的最小和最大长度或值。字段值的枚举类型，指定字段值必须是枚举数组中的某一个。描述：在验证之前对字段的值进行转换。用于字符串类型的字段，指定字段值的格式。字段值的长度（仅对字符串类型有效）。，即如果值为纯空格，则校验不通过。指示要使用的验证器的。
2024-05-17 15:07:57
1443
1
原创 toISOString()处理时间少一天踩坑记录
原因：原本我是想处理一下后台返回的时间问题，我需要展示：年月日，但是后台返回了：年月日时分秒，开始我是这么写的：（"2024-05-01 00:00:00" 会导致出现 "2024-04-30" 的情况，：date.toISOString().全球通用时间，会减8个小时, 我们在东8区。
2024-05-13 11:36:36
1720
原创 js 操作符笔记
JavaScript 操作符主要包括赋值操作符（=）、比较操作符（==、===、!==、>、=、>>）和其他操作符（typeof、instanceof）。赋值操作符（=）：将值赋予变量，如。位操作符：在二进制位上执行操作。其他操作符：执行特定功能。
2023-11-29 17:04:38
465
1
原创 echarts图表金额补0
echarts图表金额补0：运用echarts图表显示金额数据时会出现小数点后有0的数据不显示的情况，这是因为图表帮我们处理啦，咋处理回来哩，就是下面这行代码咯 ，在。
2023-11-23 19:13:19
909
原创 vue3项目创建流程-基于 vite + vue3
命令初始化Vue.js项目时，您需要确保您的开发环境中已经安装了Node.js和npm。此外，该命令会使用最新的Vue.js版本，因此如果您需要使用特定的版本，可以使用类似。这些依赖项包括Vue.js的核心库、相关的插件和工具，以及一些标准的开发工具，例如Babel和Webpack等。命令是用于初始化一个新的Vue.js项目，并使用最新版本的Vue.js作为项目的入口。文件之前，该命令会要求您输入一些关于项目的信息，例如项目名称、版本号、描述等。这个命令会创建一个新的npm项目，并在项目目录下生成一个。
2023-07-05 19:05:09
504
1
原创 new FormData()数据转换为字符串
首先我们要运用到两个方法：Object.fromEntries(）和 JSON.stringify()1、 Object.fromEntries() 把键值对列表转换为一个对象。2、JSON.stringify() 对象转换为字符串。
2023-05-08 19:53:38
1668
原创 请求时向useState()内添加数值，但是结果还是上一次的原因
原因：这是由于React里事件分为合成事件和原生事件，合成事件和钩子函数都是异步的，原生事件是同步的。由于useState是异步事件，所以会出现异步更新问题。在调用setData()的过程中，不要试图立即获取数据状态的变化。问题：React开发中经常会遇到，请求时向useState()内添加新数值，但是结果还是上一次的。调用：使用时，不再用saveData，使用lastQuestionRef.current。解决方案2：使用Object.assign存储数据。解决方案1：使用useRef存储数据。
2023-04-26 18:00:29
1105
原创 ant design vue 中的table组件里的filter的位置问题
改成：right: initial;代码如下，就可以右对齐啦。查看F12查看样式后有个。
2023-04-10 16:55:26
413
原创 设计模式之 —— 什么是 mvvm
2、MVVM 思想：MVVM 的一个重要特性，双向绑定，意思就是当 M 层数据进行修改时，VM 层会监测到变化，并且通知 V 层进行相应的修改，反之相同 mvc 和 mvvm 都是一种设计思想。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。mvc 是单向的，而 mvvm 是双向的，并且是自动的，也就是数据发生变化自动同步视图，视图发生变化自动同步数据，同时解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
2022-09-05 11:37:45
546
原创 操作符 ?. 、?? 、 ??= 、? : 的用法和理解
) 操作符的功能类似于( . )链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。空值合并操作符（?）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。）与逻辑或操作符（ || ）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的。...
2022-08-30 13:50:10
2771
原创 Git 提交代码单词
git log -2 --pretty=format:"%h | %an | %ar | %s" %h提交最近简写id值 %an 作者名字 %ar 作者修订日期，按多久以前的方式显示 %s 提交说明。git log -2 --pretty=oneline 在一行显示 最近两条信息 不写 -2 就是在一行上显示 所有提交历史git log --pretty=oneline。注意：以上 3 个开源项目托管平台，只能托管以 Git 管理的项目源代码，因此，它们的名字都以 Git 开头。
2022-08-22 10:46:55
453
2
原创 JS基础用法
如果只删除了一个元素，则返回只包含一个元素的数组。parseInt(sting) 取整 不保留小数点 （没有进位问题，就取前面的数，小数点后面不论大小，都不要）字符串型：有单双引号的 双“”单''，嵌套关系时外单内双，或者外双内单，还有字符串拼接用+号：数值相加字符相连。arr.indexOf(要查找的内容) 数组中查找给定元素的第一个索引 存在则返回索引号，不存在则返回-1。deleteCount为0时，则表示不删除元素，从start位置开始添加后面的几个元素到原始的数组里面。
2022-08-22 10:45:04
83
原创 CSS 选择器
焦点伪类： :focus悬浮伪类： :hover前置伪类：p ::after 往p元素前面追加内容后置伪类：p ::before 往p元素后面追加内容光棍伪类：p :empty 选择没有子元素的p标签取反伪类：div: not(p) 选择div下所有不是p标签的元素首个选择器： div p:first-of-type 或:first-child 选择div下面第一个p标签末尾选择器： ul li:last-child 或 last-of-type 选择ul下最后一个li
2022-08-22 10:42:28
2144
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人