- 博客(183)
- 资源 (11)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 在浏览器中使用 Three.js 从零构建一个可交互、可扩展、性能可控的 3D 场景，需要掌握哪些核心概念（场景、相机、渲染、物体、坐标、光照、材质、交互、动画、模型加载、性能优化与工程化），以及它们
Three.js 3D场景构建的核心流程遵循「模拟现实世界视觉逻辑」的原则，包含11个关键环节：从基础坐标系统开始，通过场景容器组织3D元素，借助相机确定观察视角，配合物体、材质和光照构建视觉内容，使用渲染器输出画面，再通过动画和交互实现动态效果，最后通过模型加载引入复杂内容，并以性能优化保障流畅运行。这些环节环环相扣，其中坐标系统是定位基础，场景是容器核心，相机决定视角，物体+材质+光照构成视觉主体，渲染器实现最终输出，动画与交互增强体验，模型加载扩展内容，性能优化确保落地可行性。理解这一完整流水线是掌握
2026-01-30 17:28:45
683
原创 Mapbox GL JS 表达式 (expression) 条件样式设置 完全指南
Mapbox GL JS表达式完全指南：动态样式设置核心技巧 摘要：本文系统讲解Mapbox GL JS中表达式(expression)的使用方法，这是实现动态样式设置的核心技术。内容涵盖：1)表达式的基本概念和执行逻辑，强调其JSON数组格式和高效渲染特性；2)三大基础表达式(get、比较运算符、逻辑运算符)的语法和组合使用；3)三大条件表达式(match/case/interpolate)的适用场景和完整示例，重点展示如何根据要素属性动态设置fill-color/circle-color等样式。文章提供
2026-01-15 14:04:25
643
原创 vue2和3分别如何在脚手架环境中设置环境变量?
Vue2和Vue3环境变量配置差异主要体现在脚手架工具上：Vue2仅支持Vue CLI，而Vue3同时支持Vue CLI和Vite。Vue2使用VUE_APP_前缀和process.env访问变量，文件需放在根目录并按环境命名（如.env.development）。Vue3在Vite中则使用VITE_前缀和import.meta.env访问，且需在vite.config.js中通过loadEnv加载变量。两者都支持自定义环境（如测试环境），但Vite作为新一代工具，提供了更简洁的配置方式。关键区别在于变量前
2025-12-16 14:12:22
652
原创 如何使用http-server --cors启动页面?
摘要：本文详细介绍如何使用 http-server --cors 启动本地静态页面服务并解决跨域问题。首先需安装 Node.js 环境，然后通过 npm 全局安装 http-server 工具。启动时添加 --cors 参数开启跨域支持，并可通过 -p 指定端口、-c-1 禁用缓存。文章包含完整安装步骤、验证方法、常见问题解决方案，并对比了该方法与浏览器禁用跨域的区别，推荐作为纯前端开发的跨域解决方案。适用于 Windows/Mac/Linux 系统，适配所有主流浏览器。
2025-12-16 14:07:54
1197
原创 修改chrome配置,关闭跨域校验
摘要：本文详细介绍如何通过修改Chrome启动参数关闭跨域校验（2025最新版适用）。核心步骤包括：Windows快捷方式/命令行修改、Mac/Linux终端命令执行，均需添加--disable-web-security和强制参数--user-data-dir。启动后Chrome会显示安全警告提示，需注意此配置仅限开发使用（存在安全风险），推荐优先考虑服务端代理方案。验证成功后，使用普通方式重启Chrome即可恢复跨域保护。
2025-12-16 14:05:18
992
原创 修改chrome配置,关闭跨域校验
摘要：本文详细介绍如何通过启动参数修改Chrome浏览器配置以关闭跨域校验（2025最新版适用）。关键步骤包括：Windows系统通过快捷方式或命令行添加--disable-web-security和--user-data-dir参数；Mac/Linux系统使用终端执行相应命令。特别强调：1）操作前必须关闭所有Chrome进程；2）新版本强制要求--user-data-dir参数；3）该配置存在重大安全风险，仅限开发使用。文末提供验证方法、安全注意事项及恢复默认配置的方案，并建议优先考虑服务端代理等替代方案
2025-12-16 10:56:04
1091
原创 面向对象和面向过程的区别是什么?
面向对象（OOP）和面向过程（POP）是两种核心编程范式。OOP以对象为中心，将问题拆解为独立对象，通过封装、继承和多态实现高扩展性；POP则以步骤为中心，通过函数顺序执行任务。OOP适合大型复杂系统，便于维护扩展；POP适合小型工具，执行效率高。两者并非对立，OOP方法内部仍使用POP逻辑。选择时需根据项目规模、复杂度及维护需求决定，通常大型业务系统采用OOP，底层开发和小工具使用POP。
2025-12-12 17:57:39
942
原创 lombok的几个核心注解是什么?
Lombok核心注解总结（150字）： Lombok通过注解简化Java开发，主要包含： 字段方法简化：@Data聚合Getter/Setter/ToString等；@Getter/@Setter单独控制访问权限 构造器生成：@NoArgsConstructor/@AllArgsConstructor/@RequiredArgsConstructor满足不同初始化需求 日志简化：@Slf4j自动生成Logger变量 对象构建：@Builder实现链式创建，@Value创建不可变类 实用工具：@NonNull
2025-12-12 17:12:22
721
原创 springboot项目中与接口文档有关的注解
本文介绍了Spring Boot项目中Swagger和Knife4j的核心注解使用。Swagger分为Swagger 2/Springfox和OpenAPI 3/SpringDoc两个主流版本，Knife4j是其增强版。文章详细分类了Swagger 2的核心注解，包括全局配置类注解（如@EnableSwagger2）、接口类注解（如@Api）、方法注解（如@ApiOperation）、参数注解（如@ApiImplicitParam）以及实体字段注解（如@ApiModelProperty）。同时提供了配置类和
2025-12-12 17:06:12
910
原创 堡垒机的集中管控具体体现在哪些方面？
堡垒机的核心在于"集中管控"，通过统一身份认证、权限控制、访问路径、操作审计、风险防控和策略管理六大维度，构建运维安全闭环。它将分散的运维操作整合为统一体系，实现一人一号、最小权限、全程审计和风险拦截，解决账号混乱、权限滥用等痛点。这种集中管控模式不仅能降低安全风险，还能提升运维效率，满足合规要求，适用于企业级运维场景。
2025-12-08 14:44:35
776
原创 在Spring Boot项目中使用RestTemplate发送请求时如何处理响应？
Spring Boot中使用RestTemplate处理HTTP响应时，主要通过getForObject、getForEntity和exchange三种方法实现。getForObject适合简单场景，直接返回响应体；getForEntity提供完整响应信息（状态码、头信息等）；exchange则适用于复杂类型和自定义请求。文章详细讲解了如何解析字符串响应、映射到实体类、处理集合/嵌套JSON数据，以及获取响应头和Cookie等常见场景，涵盖了90%的实际开发需求。
2025-12-05 14:55:50
571
原创 在springboot项目中怎么发送请求,设置参数,获取另外一个服务上的数据
摘要： Spring Boot调用外部服务的核心是通过HTTP客户端发送请求并解析响应，主要提供三种方案：同步的RestTemplate、响应式的WebClient和声明式的OpenFeign。以RestTemplate为例，需先配置Bean，支持GET/POST请求，处理路径参数、查询参数及JSON/表单请求体。示例包括获取用户（路径参数）、分页查询（请求参数）、新增用户（JSON请求体）和登录（表单参数）。可通过UriComponentsBuilder安全构建URL，并配置超时和异常处理。适用于简单场景
2025-12-05 14:53:35
737
原创 JDK8,JDK11,JDK17,JDK21都有哪些不同和改进?
摘要： JDK8至JDK21作为Oracle长期支持版（LTS），呈现清晰的演进路径：JDK8奠定函数式编程基础（Lambda/Stream），JDK11精简模块化并移除冗余，JDK17引入记录类、密封类等语法完善，JDK21通过虚拟线程和模式匹配实现现代高并发。生产选型需结合需求——老系统适用JDK8，新项目推荐JDK17/21。核心改进涵盖语言特性（从函数式到模式匹配）、并发模型（线程池到虚拟线程）、GC性能（G1到ZGC/Shenandoah）等，逐步解决代码冗余、类型安全和性能瓶颈问题。
2025-11-28 09:14:46
365
原创 ES5,ES6,ES7语法都有哪些不同和改进?
摘要：ES5、ES6（ES2015）、ES7（ES2016）的语法差异主要体现在变量声明、函数特性、字符串处理、数组操作和对象增强等方面。ES5奠定了JavaScript基础语法，但存在变量提升、无块级作用域等问题；ES6通过引入let/const、箭头函数、模板字符串等特性，大幅简化代码并解决ES5痛点；ES7仅补充了数组includes()等轻量级优化。核心逻辑是：ES5为基础，ES6为颠覆性升级，ES7为小补丁，开发者应优先掌握ES6的核心改进。
2025-11-28 09:09:26
366
原创 使用ES5语法实现一个Promise
摘要：本文使用ES5语法实现符合Promise/A+规范的Promise，通过构造函数替代class，原型链挂载实例方法，构造函数挂载静态属性和方法。实现包括then、catch、resolve/reject等核心功能，使用var替代let/const，普通函数替代箭头函数，并处理this指向问题。代码保留了异步执行、状态管理、链式调用等Promise核心特性，同时确保ES5环境兼容性。测试用例验证了基本成功/失败场景、链式调用和值穿透等功能。
2025-11-27 19:01:02
328
原创 使用js实现一个promise
本文实现了一个符合Promise/A+规范的MyPromise类，包含状态管理、链式调用、错误捕获等核心功能。关键特性包括：1）三种不可变状态（pending/fulfilled/rejected）；2）通过回调数组支持多个then调用；3）then方法返回新Promise实现链式调用；4）resolvePromise方法处理返回值；5）catch方法作为语法糖；6）静态resolve/reject方法。实现中采用setTimeout模拟微任务，确保回调异步执行，并自动捕获同步错误。测试用例验证了基本功能、
2025-11-27 18:58:50
385
原创 Vue3 中如何在 setup 语法糖下，通过 Layer 弹窗组件弹出自定义 Vue 组件？
本文详细介绍了在 Vue3 的 setup 语法中结合 Layer 弹窗组件加载 Vue 组件的方法。核心思路是通过手动创建 Vue 组件实例并挂载到 Layer 生成的 DOM 容器中，同时处理组件的生命周期和通信逻辑。文章首先介绍了 Layer 的两种引入方式（CDN 和 npm），然后详细阐述了实现原理，包括创建临时容器、实例化 Vue 组件、绑定事件监听等关键步骤。最后提供了一个完整的代码示例，展示了如何封装可复用的弹窗逻辑，并推荐将其优化为通用 Hook 以提高代码复用性。这种方法实现了 Vue
2025-11-25 00:15:00
447
原创 openlayers的常用api
OpenLayers（v7+）是一个轻量灵活的开源GIS库，支持多投影和数据源。核心功能包括地图初始化、图层管理（矢量/WMS/XYZ瓦片）、视图控制等。摘要要点： 支持CDN和npm两种引入方式，默认使用Web Mercator投影（EPSG:3857） 提供完整地图初始化示例，包含OSM底图加载和坐标转换 详细展示矢量图层操作，包括GeoJSON数据加载、样式设置和动态更新 支持多种数据源类型（OSM/XYZ/WMS等）和图层控制（显示/隐藏/删除） 包含视图控制API，支持带动画/无动画的视角切换 适
2025-11-24 14:17:06
980
原创 JS如何动态添加style样式
本文介绍了在 JavaScript 中动态添加样式的三种核心方法：操作元素内联样式（精准控制单个元素）、创建<style>标签（批量全局样式）和修改已有样式表（微调现有样式）。详细展示了每种方法的实现代码，包括Vue3 setup语法中的特殊用法，并强调注意事项如样式优先级、性能优化和内存管理。适用于前端开发中需要动态调整样式的各种场景，如主题切换、交互效果等。
2025-11-24 11:09:37
821
原创 GitHub 上查找中国乡镇经纬度范围数据的开源项目
GitHub上有多个开源项目提供中国乡镇级经纬度数据，包括边界范围和点位坐标。主要项目包括：rooma1989/china_geo_data提供乡镇GeoJSON边界数据；xiangyuecn/AreaCity-JsSpider-StatsGov含高德地图源数据；modood/Administrative-divisions-of-China提供官方统计坐标数据；GaryBikini/ChinaAdminDivisonSHP为专业GIS格式。数据格式有GeoJSON、Shapefile和CSV/JSON可选
2025-11-21 16:56:37
844
原创 清朝的九品到一品 , 分别对应现在的什么级别
清朝职位：都察院左右副都御史、宗人府丞、通政使司通政使、大理寺卿、詹事府詹事、顺天府尹等。清朝职位：太子少师、太子少傅、太子少保、内务府总管、各省总督、各部左右侍郎等。清朝职位：协办大学士、督察院左右都御史、各部尚书、巡抚、提督九门步军统领等。清朝职位：佥都御史、通政使司副使、大理寺少卿、知府、知州（直隶州）等。清朝职位：内阁侍读、国子监司业、堂主事、各部院主事、知县（普通县）等。清朝职位：左右春坊庶子、光禄寺少卿、六科给事中、同知（普通府）等。清朝职位：知县（重要县）、县丞（重要县）、州同（重要州）等。
2025-11-21 16:25:04
1194
原创 Vue中父组件监听子组件挂载完成
摘要： 父组件监听子组件挂载完成的核心逻辑是：子组件在mounted生命周期中通过$emit（Vue2/选项式）或defineEmits（Vue3组合式）发送自定义事件（如mounted-complete），父组件通过@事件名监听并执行后续操作。Vue3组合式需用defineExpose暴露子组件方法，若子组件含异步逻辑需在异步完成后发送事件。注意事项包括事件命名规范（推荐kebab-case）、避免重复触发及兜底判断。
2025-11-21 15:14:11
785
原创 前端浏览器请求里面的timing里面分别有 resource scheduling 和 connection start 还有 request/response 这些分别是什么意思?
HTTP请求生命周期的三个阶段解析： Resource Scheduling（资源调度） 浏览器对资源进行优先级排序、队列等待和预处理，受并发连接数限制（HTTP/1.1默认6个）。关键指标：Queueing（排队时间）、Stalled（阻塞时间）。 Connection Start（连接建立） 包含DNS解析、TCP握手和HTTPS加密协商（如有）。耗时受网络延迟影响，HTTPS会增加100-300ms。关键指标：Domain Lookup、Connecting、SSL/TLS。 Request/Resp
2025-11-20 11:22:17
1027
原创 什么是分布式?什么是微服务?什么是集群?什么是单体?这些都是什么?又有什么关联?
本文梳理了四大架构演进路径：单体应用→集群→分布式→微服务。单体应用将所有功能打包在一起，适合小项目；集群通过复制单体解决高并发问题；分布式拆分业务为独立服务，适合中大型系统；微服务是分布式的细化版，强调极小服务粒度与独立部署。关键区别在于：集群是多实例相同服务，分布式是不同服务分工协作，微服务则是极细粒度分工。架构选择取决于业务规模，小项目用单体，中大型用分布式/微服务，集群作为通用扩展手段。演进本质是从"一体化"到"精细化拆分"的过程。
2025-11-13 17:14:13
703
原创 什么是死信队列?
文章摘要 死信队列（DLQ）是消息中间件中存储无法正常消费消息的特殊队列，避免消息丢失或阻塞业务。消息成为死信的条件包括：过期、队列满、消费拒绝或重试耗尽。其核心价值在于保障消息不丢失、维持业务流畅、辅助问题排查，并支持延迟处理和业务解耦。工作流程为：消息满足死信条件后自动从原队列转移到死信队列，供后续处理。例如订单支付场景中，未支付订单消息过期后进入死信队列触发补偿逻辑。死信队列本质是消息系统的容错机制，区别于普通队列和重试队列，确保异常消息可追溯与处理。
2025-11-13 15:09:25
347
原创 在Vue项目中让layer弹窗直接加载Vue组件
摘要 本文介绍了在Vue项目中让layer弹窗直接加载Vue组件的极简方案。针对Vue2和Vue3分别提供了3步实现方法：1)全局引入layer；2)创建弹窗组件；3)通过临时DOM挂载组件到layer中。重点解决了传统layer弹窗需要拼接字符串DOM的痛点，实现了Vue组件的复用和便捷调用。同时强调了关键注意事项：必须使用type:1页面层、及时清理组件实例、正确处理scoped样式等问题。该方案简洁高效，可显著提升开发体验和维护性。
2025-11-10 15:04:24
514
原创 java8中常用的工具函数
Java 8 核心特性摘要 Stream API：提供链式流式操作(filter/map/reduce等)，支持并行处理，简化集合操作 Optional：封装可能为null的值，强制显式处理空值，避免NPE 新日期时间API：线程安全的LocalDate/LocalTime/LocalDateTime替代旧Date/Calendar Lambda表达式：支持函数式编程，(参数)->表达式语法简化匿名类 方法引用：通过::运算符简化Lambda表达式(如String::toUpperCase) 典型应用
2025-10-17 17:26:41
932
原创 JS中DOM的API使用
JavaScript DOM API 提供了操作网页内容的核心方法，主要包括：获取元素（选择器API）、修改内容（textContent/innerHTML）、操作属性（setAttribute/getAttribute）、修改样式（style/classList）、节点增删改（createElement/appendChild/remove）、事件处理（addEventListener）以及节点关系遍历（parentNode/children等）。这些API使开发者能够动态更新页面内容、样式和结构，实现丰
2025-08-25 15:36:26
729
原创 TypeScript中的枚举
TypeScript枚举（Enum）是一种用于定义命名常量集合的类型，主要分为数值枚举、字符串枚举和异构枚举。数值枚举支持自动递增和反向映射，字符串枚举提供更好的可读性。枚举支持常量枚举（const enum）以优化性能，以及计算成员等特性。相比联合类型，枚举更适合需要运行时访问的场景，而联合类型更轻量。枚举常用于状态码、选项等固定值集合，提供类型安全性和代码组织性。
2025-08-20 17:00:56
950
原创 java中的枚举
Java枚举（Enum）摘要 枚举是Java中定义固定常量集合的特殊类型，比传统常量更安全可读。核心特性： 基本定义：使用enum声明，常量默认是单例实例（如Weekday.MONDAY）； 进阶用法：支持成员变量、构造方法（私有）、普通方法及抽象方法（每个常量需实现）； 内置方法：如values()、valueOf()等，便于遍历和转换； 优势：类型安全、可读性强、功能灵活，适合状态、分类等场景。 枚举在switch语句中表现优异，能有效避免无效值，提升代码健壮性。
2025-08-20 16:59:26
738
原创 vue中动态设置class类名和style样式
Vue中动态设置class和style主要通过v-bind指令实现，支持对象语法、数组语法和计算属性。动态class通过:class绑定CSS类，对象语法最常用，能根据条件独立判断类名添加；数组语法可直接组合类名或嵌套条件判断；复杂逻辑建议使用计算属性。动态style通过:style绑定内联样式，对象语法支持驼峰或短横线属性名，值可为变量；数组语法可合并多个样式对象；计算属性适合处理复杂样式逻辑。两者的核心差异在于：class基于预定义CSS类，适合复用率高场景；style直接绑定内联样式，适合动态性强的实
2025-08-20 15:28:11
1918
原创 js计算两个经纬度之间的角度
本文介绍了在JavaScript中计算两点经纬度之间方位角的方法，基于球面三角学公式。通过将经纬度转换为弧度，计算经度差，并应用球面方位角公式，最终得到0°~360°的方位角。文章提供了详细的实现代码，并解释了方位角的含义（正北为0°，顺时针递增）及注意事项，如经纬度单位转换和误差范围。示例计算北京到上海的方位角约为123°，表示东南方向。
2025-08-18 16:43:44
583
原创 css中px转rem的计算公式
CSS中px转rem的公式为：目标rem值 = px值 ÷ 根元素font-size。1rem等于<html>元素的font-size值（单位px）。例如，根元素font-size为16px时，24px=1.5rem；设为10px（62.5%优化）时，30px=3rem。关键是根据根元素的font-size进行除法计算，设为10px可简化运算（n px=n/10 rem）。
2025-08-18 15:39:29
652
原创 css中em和rem的使用
CSS中的em和rem都是相对长度单位，但参考基准不同：em基于父元素的font-size，适合局部比例控制，但多层嵌套时可能出现尺寸累积问题；rem基于根元素的font-size，全局统一可控，适合整体布局和响应式设计。实际开发中常混合使用，用rem定义全局框架，用em调整组件内部细节。响应式设计时可通过修改根元素font-size实现批量适配。
2025-08-18 15:23:26
714
原创 java中常见的报错类型,以及对应的含义和解决思路
Java开发中常见报错类型及解决方法摘要： 空指针异常（NullPointerException）：未初始化对象时操作，需判空或主动校验； 类型转换异常（ClassCastException）：转换前用instanceof检查类型兼容性； 数组越界（ArrayIndexOutOfBoundsException）：确保索引在有效范围内； 非法参数（IllegalArgumentException）：方法内部校验参数合法性； IO异常（IOException）：文件/网络操作需检查资源状态并关闭流； 并发修改异
2025-08-18 14:19:23
466
原创 java中map的api详细使用
Java中的Map接口用于存储键值对数据，具有键唯一、值可重复的特性。主要实现类包括HashMap（无序高效）、LinkedHashMap（维护插入顺序）、TreeMap（按键排序）和线程安全的ConcurrentHashMap。核心操作包含put添加/修改元素、get获取值、remove删除元素，以及通过keySet()、values()和entrySet()进行遍历。不同实现类各有特点：HashMap查询效率O(1)，TreeMap支持排序，LinkedHashMap保持插入顺序。典型用法包括初始化Ma
2025-08-15 14:51:25
827
原创 什么是Redis的哨兵模式
Redis哨兵模式是官方提供的高可用解决方案，通过自动监控主从节点、故障检测和主从切换，实现Redis服务的持续可用。哨兵集群由多个节点组成，负责监控节点状态、自动故障转移、通知异常和提供配置。工作原理包括主观/客观下线判断、领导者选举和故障转移流程。部署需要3个以上哨兵节点，与主从架构配合，适合对可用性要求高的生产环境。哨兵模式解决了主节点故障需手动切换的问题，是Redis集群化部署的关键高可用机制。
2025-08-15 14:49:00
402
原创 nginx配置代理服务器
反向代理：用于服务器端转发请求到后端服务，配置核心是locationproxy_pass+ 头信息传递。正向代理：用于客户端代理，需配置resolver和代理端口。注意路径匹配规则和超时设置，生产环境建议配置 SSL 证书。根据实际需求修改proxy_pass地址、端口和路径即可。
2025-08-13 16:42:17
1669
原创 openlayers如何解决一个范围内point元素过多的问题
OpenLayers处理大量点数据时性能优化方案：主要采用点聚合（ol.source.Cluster合并近距离点）、分级加载（按缩放级别动态显示）、可视范围过滤（仅渲染视野内点）、WebGL加速（WebGLPointsLayer支持10万+点）和瓦片化预渲染（静态数据）。点聚合实现简单，通过设置聚合距离和动态样式平衡性能与交互；WebGL方案适合超大数据，但交互受限。开发者可根据数据量级（千级/万级/10万+）和动态需求选择合适方案，核心思路是减少同时渲染的要素数量。
2025-08-13 14:40:18
943
原创 TypeScript中的数组非空判断
TypeScript中判断数组非空需要满足两个条件：1) 数组不为null/undefined；2) 数组长度大于0。关键实现需使用Array.isArray()确保类型安全，并通过类型守卫(arr is T[])让TS自动推断类型。文章提供了基础判断方法、分场景处理方案，以及使用可选链和空值合并操作符的简化写法，最后推荐封装通用工具函数isNonEmptyArray，支持泛型且保证类型安全。核心步骤为：先排除null/undefined，再验证数组类型，最后检查长度。
2025-08-13 14:06:14
450
制作地图线路流动效果，类似于echarts上的地图轨迹
2021-04-26
TA创建的收藏夹 TA关注的收藏夹
TA关注的人