- 博客(238)
- 收藏
- 关注
RSS订阅原创 Vue3 Element Plus 对话框加载实现
el-button @click="openDialog">打开对话框</el-button><el-button @click="openDialog">打开对话框</el-button>在 finally 块中关闭加载状态，确保异常情况下也能关闭加载。data.value = '加载完成的内容...';-- 使用 v-loading 指令 -->-- 你的实际内容 -->-- 你的实际内容 -->// 这里可以放置你的真实请求。title="加载中对话框"title="加载中对话框"
2025-05-17 08:25:55
423
原创 Nginx配置文件详解
Nginx 是一个高性能的 HTTP 服务器和反向代理服务器，广泛用于 Web 服务、负载均衡、缓存等场景。Nginx 的配置文件是其核心部分，通过配置文件可以控制 Nginx 的行为。一、Nginx配置文件结构Nginx 的配置文件通常位于，也可能包含其他子配置文件（如目录下的文件）。配置文件由多个组成，每个指令块包含一组相关的配置指令。1. 全局块从配置文件开始到events块之间的内容。主要设置影响 Nginx 整体运行的指令，如运行用户、进程数、日志路径等。。
2025-05-16 17:29:14
413
原创 Vue3 + Element Plus 使用 el-radio-group 实现标签式导航
组合实现导航标签效果，相比 Tabs 组件更灵活且更接近截图样式。通过 CSS 变量保持与 Element Plus 主题的一致性。保持与 Element Plus 默认设计语言一致。状态持久化（使用 localStorage）tabs 数据采用数组配置，方便后续维护。内容区域可根据实际需求接入表格或其他组件。路由集成（使用 vue-router）自定义激活状态的背景色和文字颜色。数量角标提示（在标签后添加数字）使用 100% 宽度适应容器。绑定当前激活的选项卡状态。点击切换时的平滑过渡。
2025-05-14 08:58:59
198
原创 JavaScript 对象增加属性
a: "abc",b: 1,c: truea: string;b: number;c: boolean;==>>...obj1,d: "add1",e: "add2"d: string;e: string;a: string;b: number;c: boolean;==>>d: "add1",e: "add2",...obj1a: string;b: number;c: boolean;d: string;e: string;
2025-05-14 08:25:38
169
原创 国产服务器部署Web项目指南
如ARM（鲲鹏）、LoongArch（龙芯）、MIPS（申威）等，需确认软件兼容性。：如统信UOS、银河麒麟、中标麒麟等（基于Linux内核），需使用对应的包管理工具（如。：使用国产云监控服务（如华为云APM）或Prometheus+国产化插件。：若使用ARM架构，需下载ARM版JDK（如华为鲲鹏JDK）。：如达梦（DM）、人大金仓（Kingbase）、华为高斯DB。：使用国产工具（如阿里云PTS）或开源工具（JMeter）。：需使用适配CPU架构的版本（如ARM64）。
2025-05-14 07:51:09
890
原创 java 中 pojo 的详细讲解
理解 POJO 的本质有助于编写更干净、更易维护的代码，同时也是掌握 Spring 等框架的基础（因为 Spring 的核心思想就是通过 POJO 构建应用）。❌ "带注解的就不是 POJO" → 添加注解（如 Lombok）后仍是 POJO，但依赖框架注解时会失去纯粹性。// 可以直接访问字段（不强制要求 getter/setter）@Entity // JPA 注解（此时严格来说是 POJO 的扩展）：按需添加框架注解（如 JPA/Hibernate 注解）：易于与各种框架集成（如通过注解增强）
2025-05-12 17:21:58
817
原创 服务器多JAR程序运行与管理指南
若多个JAR程序属于同一系统，可结合服务发现（如Consul、Eureka）和API网关（如Spring Cloud Gateway）统一管理。确保不同JAR程序写入的日志、临时文件等路径不重叠，防止文件锁冲突或数据混乱。通过工具（如Prometheus+Grafana）监控各JVM的资源使用情况。使用Docker为每个JAR程序创建独立容器，实现资源隔离和便捷管理。：每个JAR程序会启动独立的JVM实例，需通过。如果JAR程序是网络服务（如Web应用），）管理后台进程，避免终端关闭导致程序终止。
2025-05-12 17:10:35
514
原创 Java Spring Boot项目目录规范示例
以下是一个典型的 Java Spring Boot 项目目录结构规范示例，结合了分层架构和模块化设计的最佳实践：text复制下载src/├── main/│ │ ├── MyAppApplication.java # 主启动类│ │ ├── config/ # 配置类。
2025-05-12 16:58:51
711
原创 Java通配符导入性能与维护性分析
使用的主要问题在于代码可读性和维护性，而非性能。在常规开发中，遵循团队规范并结合 IDE 工具管理导入语句是最佳选择。如果包中类数量极多，可评估编译时间，但通常无需过度优化。
2025-05-12 10:59:34
307
原创 CSS实现图片垂直居中方法
* 可选：添加与文字的间距 */最终效果：图片将与同行的文字在垂直方向上完美对齐，无论字号如何变化都能保持居中状态。/* 图片自身垂直对齐 */display: inline-flex;/* 启用flex布局 */vertical-align: middle;/* 双重保障 */：将span转换为行内flex容器，保持行内特性同时可以使用flex布局。/* 垂直居中 */确保父级元素有足够的高度，垂直居中效果才能明显。：可选，用于增加图片与前面文字的间距。
2025-05-09 15:11:52
477
原创 数据库中存储过程与直接查询性能对比分析
存储过程在首次执行时会被数据库编译并缓存执行计划，后续调用直接使用缓存的计划，减少了重复解析和优化的开销。动态生成的查询可能因参数变化获得更优的执行计划，但需警惕 SQL 注入和重复解析开销。），但复杂或动态生成的查询可能需要每次解析和生成新计划，增加 CPU 开销。简单查询、动态条件多变的场景（如搜索过滤），或需利用数据库即时统计信息时。高频调用、复杂逻辑、需减少网络交互的场景（如报表生成、事务密集型操作）。逻辑分散在应用层，易调整但可能重复实现相同逻辑。的场景（如频繁执行的复杂查询），性能优势更明显。
2025-05-09 08:24:27
388
原创 Vue3项目目录重命名指南
'@components': path.resolve(__dirname, 'src/newDir') // 示例：自定义别名。'@': path.resolve(__dirname, 'src'), // 如果重命名了src目录需修改。"@components/*": ["src/newDir/*"] // 同步修改别名。检查搜索结果，逐一将旧路径替换为新路径（如。
2025-05-08 11:30:28
265
原创 Java日期格式化方法总结
java复制下载// 使用内置标准格式（如ISO日期时间格式）// 输出：2023-10-05T15:30:45.123。
2025-05-06 17:28:45
688
原创 前端Vue3 + 后端Spring Boot，前端取消请求后端处理逻辑分析
复制下载在业务逻辑中检查线程中断状态：```javawhile (!// 执行可中断的任务```在客户端断开时，调用 `Thread.interrupt()` 终止任务（需结合 `DeferredResult` 使用）。
2025-04-29 14:43:50
934
原创 Vue3取消网络请求的方法（AbortController）
Axios：使用或Fetch：必须依赖。组件销毁时清理：通过生命周期钩子自动取消未完成的请求，避免内存泄漏。错误处理：捕获取消错误，避免与常规错误混淆。根据项目使用的库选择对应方案即可实现请求取消。
2025-04-29 11:10:45
1039
原创 Vue3中Hooks与普通函数的区别
特性组合式函数 (Hooks)普通函数依赖上下文需在 Vue 组件上下文中调用可在任何地方调用响应式数据操作refreactive等响应式 API不涉及响应式系统生命周期钩子可调用onMounted等无法使用生命周期钩子副作用管理封装副作用（如事件监听、API 请求）通常无副作用返回值返回响应式数据或结构返回静态数据目的复用有状态逻辑封装无状态工具逻辑。
2025-04-28 18:36:13
571
原创 Vue3组合式API与函数式编程对比
组合式 API 是 Vue 特有的逻辑组织方式，虽然使用函数形式，但核心仍是响应式编程范式。函数式编程则是一种更严格的编程范式，二者解决的问题域不同，可以结合使用但不应等同视之。
2025-04-28 16:55:31
632
原创 Vue3中toRefs的用法详解
/ 返回 { x: Ref<number>, y: Ref<number> }// name 和 age 是 ref 对象。是一个用于处理响应式对象解构的实用函数，它能够保持解构后的属性的响应性。// 即使异步，模板仍响应。// 解构仍保持响应性。，你可以安全地解构响应式对象，同时保持数据的响应性，这在组合式 API 中尤为重要。这使得解构或展开响应式对象时，属性仍保持响应式。从组合式函数返回响应式对象，供其他组件解构使用。// ✅ 使用 toRefs 保持响应性。// ❌ 直接解构会丢失响应性！
2025-04-28 08:47:20
360
原创 Vue3 Hooks 定义与使用详解
错误：{{ error.message }}</div><div>鼠标位置：{{ x }}, {{ y }}</div><div v-if="loading">加载中...
2025-04-28 06:58:24
771
原创 JavaScript中主动抛出错误的方法
方法优点缺点封装函数简单直接，可控性强需手动调用，无法覆盖原生运算符Proxy 包装灵活，可监听复杂操作代码复杂度高静态检查（ESLint）在编码阶段发现问题需要配置工具链猴子补丁覆盖全局行为风险高，可能引发副作用生产代码推荐封装函数或静态检查，实验性项目可尝试 Proxy 或类型守卫。
2025-04-27 20:35:12
901
原创 Vue3项目目录结构规范建议
│ ├─ common/ # 基础通用组件（如按钮、输入框）├─ store/ # 状态管理（Pinia）│ ├─ modules/ # Pinia 模块化存储。├─ views/ # 页面级组件（路由页面）│ ├─ api.ts # Axios 实例配置。│ ├─ store/ # 模块专属 Pinia。
2025-04-27 16:57:41
923
原创 IntelliJ IDEA中Statistic代码统计插件使用指南
通过 Statistic 插件，你可以快速掌握项目的代码规模分布，优化代码维护策略。Statistic 插件暂不支持直接导出，但可手动复制统计表格或截图保存。Statistic 是 IntelliJ 平台专用插件，但类似插件（如。确保文件类型被正确识别（如自定义后缀文件需在 IDEA 中关联类型）。检查是否配置了正确的过滤规则（如排除测试目录）。：总览项目的代码行数、注释行数、空白行数等。（齿轮图标），添加需要排除的文件或目录（如。：按目录统计代码量，便于分析模块规模。：总行数（包括代码、注释、空行）。
2025-04-27 14:45:43
664
原创 Visual Studio Code中VS Code Counter代码统计插件使用指南
"Counter.exclude": ["**/node_modules/**", "**/dist/**", "**/*.json"], // 排除文件/文件夹。"Counter.fileExtensions": [".js", ".ts", ".py", ".java"], // 指定统计的文件类型。"Counter.outputFile": "counts.json", // 自定义输出文件名。在文件资源管理器中右键点击要统计的文件/文件夹。统计完成后，结果会显示在 VS Code 的。
2025-04-27 11:30:07
807
原创 Java + Spring Boot + MyBatis获取以及持久化sql语句的方法
编写拦截器获取BoundSql并处理参数，生成完整SQL。java复制下载})@Override// 格式化SQL，替换参数占位符", p));@Override@Overridejava复制下载@Bean@Bean。
2025-04-27 10:51:23
658
原创 JavaScript中setTimeout与await结合使用方法
直接无效，因为它不返回Promise。通过封装Promise，可以将setTimeout转换为await友好的形式，使代码更简洁（避免回调嵌套）。
2025-04-27 10:07:29
403
原创 Vue3中AbortController取消请求的用法详解
在 Vue3 中，用于取消fetch请求，避免组件卸载后仍执行异步操作导致的潜在问题（如内存泄漏或更新已销毁组件的状态）。
2025-04-26 15:48:58
598
原创 vue3并发请求Promise.all和Promise.allSettled
在 Vue3 中结合和响应式系统，能有效管理并发请求及状态，提升应用性能和用户体验。注意处理加载状态、错误及资源清理，以确保代码健壮性。
2025-04-26 10:29:28
769
原创 vue3中nextTick的作用及示例
在Vue 3中，nextTick是一个用于处理DOM异步更新的工具函数，确保在数据变化后操作最新的DOM。：Vue的响应式系统会将数据变更批量处理，异步更新DOM。nextTick允许你在下一次DOM更新循环结束后执行代码，确保能访问更新后的DOM。：直接修改数据后立即操作DOM可能无法获取最新状态，使用nextTick可避免此问题。：Vue 3的nextTick优先使用（微任务）调度回调。若环境不支持Promise，则降级到setTimeout（宏任务）。
2025-04-25 19:43:40
832
原创 前端防抖节流概念与示例讲解
当有人不断进出电梯时，电梯门不会关闭，直到所有人进出完毕（停止触发事件）后，才会真正关闭。：事件触发后，在固定时间间隔内，函数最多执行一次。即使事件持续触发，函数也会按固定频率执行。：事件触发后，延迟一段时间再执行函数。）如果直接绑定事件处理函数，会导致函数被频繁调用，可能引发性能问题甚至页面卡顿。// 如果距离上次执行的时间超过 delay，则执行函数。// 每次触发时，清除之前的定时器，重新开始计时。更适合“最终状态”场景（如搜索输入完成后的请求）。更适合“过程控制”场景（如滚动事件中的实时计算）。
2025-04-25 08:20:29
455
原创 Vue3 + TypeScript，使用provide提供只读的响应式数据的详细分析与解决方法
你的报错本质是类型系统的精确校验在发挥作用。接口属性显式声明readonly注入键类型精确匹配数据源类型一致性这三个步骤可以完美解决类型冲突，同时保持代码的类型安全和可维护性。这正是TypeScript在Vue 3项目中的核心价值体现——在编译阶段提前发现问题，而不是等到运行时。
2025-04-24 20:46:11
895
原创 Vue 的单文件组件（.vue 文件）script 标签的使用说明
Vue 版本最多 script 数量条件Vue 321 个普通 + 1 个setupVue 21无特殊属性实际开发中推荐保持单一<script>（或setup）以保证代码可维护性。若有特殊需求（如混合选项式与组合式 API），才使用双 script 模式。
2025-04-24 15:09:14
468
原创 Vue3 `＜script setup＞` 中使用export报错的解决方案
的设计目标是让组件的逻辑更简洁，所有顶层绑定都会自动暴露给模板，不需要显式导出。需要跨组件共享的常量应该通过模块系统（import/export）管理。是编译时语法糖，会被编译为组件的 setup() 函数。组件本身不是 ES 模块，无法直接导出绑定。语法中，不能直接使用 ES 模块的。如果是要给后代组件提供数据，应该使用。可以使用组合式 API + 普通。// 这里可以使用 setup 语法。// 直接声明即可，自动暴露给模板。// 普通 script 块导出。
2025-04-24 14:37:59
435
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人