joken1310 - 博客园

mysql JOIN ON 多表查询用法

摘要：在 MySQL 中，JOIN ... ON 是用于多表查询的关键语法，通过指定表之间的关联条件，将多个表的数据组合起来。结合你之前提到的 RBAC 和权限管理场景，我会详细解释 JOIN ... ON 的用法，并以查询用户权限为例展示如何应用。 JOIN ... ON 基本概念 JOIN：用于连接多阅读全文

posted @ 2025-02-23 13:43 joken1310 阅读(1069) 评论(0) 推荐(0)

RBAC 权限管理设计模型

摘要： RBAC（Role-Based Access Control，基于角色的访问控制）是一种广泛应用于权限管理的模型，特别是在后台系统或企业级应用中。它的核心思想是通过“角色”来桥接用户和权限，从而实现灵活、高效的权限分配和管理。以下是对 RBAC 的详细解释，以及结合 MySQL 如何实现它的具体方案阅读全文

posted @ 2025-02-23 13:37 joken1310 阅读(1283) 评论(0) 推荐(0)

java常见的数据结构api

摘要：在 Java 中，常见的数据结构主要由 Java Collections Framework（JCF）提供，它是 Java 标准库的一部分，位于 java.util 包中。以下是常见的几种数据结构及其对应的 API，以及它们的主要特点和使用场景： 1. List（列表）特点：有序、可重复的元素集阅读全文

posted @ 2025-02-22 22:01 joken1310 阅读(167) 评论(0) 推荐(0)

spring boot一般的项目结构

摘要：以下是对 Spring Boot 项目目录结构及分层（包含 DAO 和 DTO）的简洁总结，重新整理后更清晰明了： 1. 典型 Spring Boot 项目目录结构 my-spring-boot-project/ ├── src/ │ ├── main/ │ │ ├── java/com/examp 阅读全文

posted @ 2025-02-22 21:57 joken1310 阅读(1866) 评论(0) 推荐(1)

spring boot 项目dto，什么是dto

摘要： 1. 什么是 DTO 定义：DTO 是一种设计模式，用于在不同层（如 Controller、Service）或不同系统（如微服务之间）之间传输数据的对象。特点：通常只包含数据（属性）和简单的 getter/setter，不包含业务逻辑。与数据库实体（Entity）或领域对象（Domain Ob 阅读全文

posted @ 2025-02-22 21:52 joken1310 阅读(2214) 评论(0) 推荐(0)

Spring Cloud Eureka 将 **Controller 层**、**Service 层** 和 **DAO 层** 剥离为独立微服务

摘要：以下是基于 Spring Cloud Eureka 将 Controller 层、Service 层和 DAO 层剥离为独立微服务的方法总结。整个过程通过服务注册与发现实现层与层之间的动态通信调用。 1. 总体思路目标：将传统单体应用的三层结构（Controller、Service、DAO）拆阅读全文

posted @ 2025-02-22 21:44 joken1310 阅读(233) 评论(0) 推荐(1)

Spring Cloud Eureka 如何使用，微服务

摘要： 1. 什么是 Spring Cloud Eureka 作用：服务注册：微服务启动时将自身信息（IP、端口、服务名等）注册到 Eureka Server。服务发现：客户端（包括网关或其他服务）可以从 Eureka Server 获取服务实例的地址，动态调用服务。核心组件： Eureka Serv 阅读全文

posted @ 2025-02-22 21:38 joken1310 阅读(367) 评论(0) 推荐(0)

react18 自动批处理更新，一次性更新多个修改的state的视图渲染

摘要：什么是自动批处理？自动批处理是 React 18 引入的一项性能优化特性。它指的是 React 会自动将多个状态更新（setState 调用）合并为一次重新渲染，而不是每次状态更新都单独触发一次渲染。这种优化减少了不必要的 DOM 操作，提升了应用的性能。关键点：批处理（Batching）：将阅读全文

posted @ 2025-02-22 21:10 joken1310 阅读(727) 评论(0) 推荐(0)

react18 性能优化方式

摘要： React 18 引入了许多新特性，为性能优化提供了更多可能性，同时保留了之前版本的优化手段。以下是 React 18 中常见的性能优化方式，涵盖新特性、现有工具以及最佳实践。我会详细讲解每种方法，并提供适用场景和示例代码。一、React 18 新特性带来的性能优化 1. 并发渲染（Concurr 阅读全文

posted @ 2025-02-22 21:05 joken1310 阅读(384) 评论(0) 推荐(0)

react Suspense lazy 延迟加载组件，按需加载组件

摘要：什么是 Suspense？ Suspense 是 React 中用于“暂停”渲染的工具，允许你在组件等待某些异步资源（比如动态加载的组件或数据）时，显示一个备用的 UI（称为 fallback）。React 18 增强了 Suspense 的功能，特别是对服务端渲染和并发渲染的支持。核心作用：处理阅读全文

posted @ 2025-02-22 20:59 joken1310 阅读(802) 评论(0) 推荐(0)

react18 useTransition 用于非紧急视图更新

摘要：什么是 useTransition？ useTransition 是一个 Hook，用于标记某些状态更新为“过渡”（Transition），告诉 React 这些更新不是紧急的，可以延迟执行。这样 React 可以优先处理高优先级的任务（比如用户输入），避免界面卡顿。返回值：一个数组 [isPen 阅读全文

posted @ 2025-02-22 20:56 joken1310 阅读(338) 评论(0) 推荐(0)

React 18 常见面试题及解答

摘要： React 18 常见面试题及解答 1. React 18 带来了哪些主要的新特性？回答： React 18 引入了几个重要特性：并发渲染（Concurrent Rendering）：通过时间切片（Time Slicing）和优先级调度，优化了渲染性能，用户交互更流畅。新的根 API（Root 阅读全文

posted @ 2025-02-22 20:53 joken1310 阅读(905) 评论(0) 推荐(0)

vue3 tsx组件中直接定义样式style写法

摘要：在 Vue 3 中使用 TSX（TypeScript + JSX）时，情况与 React 有所不同。Vue 3 的 TSX 支持允许你在组件中以 JSX 的方式编写模板，但其样式处理的机制与 React 的内联样式或 CSS-in-JS 有所区别。Vue 3 的 TSX 本身并没有像 React 那阅读全文

posted @ 2025-02-22 18:46 joken1310 阅读(1748) 评论(0) 推荐(0)

tsx中直接定义样式style写法

摘要：在 TSX（TypeScript + JSX）中，你可以直接在组件中定义样式，主要有以下几种方式。这些方式利用了 React 的特性，并结合 TypeScript 的类型系统来确保类型安全。以下是详细说明和示例： 1. 内联样式（使用 style 属性） React 支持通过 style 属性直接为阅读全文

posted @ 2025-02-22 18:44 joken1310 阅读(1199) 评论(0) 推荐(0)

react 常用的ts类型

摘要：在 React 中使用 TypeScript 时，除了 React.FC（FunctionComponent）之外，还有许多常用的类型和接口可以帮助开发者更好地定义组件、事件、状态等。这些类型主要来自 @types/react 和 @types/react-dom 包。以下是 React 中常用的一阅读全文

posted @ 2025-02-22 18:41 joken1310 阅读(448) 评论(0) 推荐(0)

js 在某个条件下停止遍历的实现方式

摘要：在 JavaScript 中，为了在某个条件下停止循环遍历，有多种实现方式，每种方法适用于不同的场景。以下是总结的常见方法及其特点、用法和适用场景： 1. 使用 for 循环 + break 描述传统的 for 循环通过 break 语句在满足条件时立即跳出循环。示例 const arr = [ 阅读全文

posted @ 2025-02-22 18:37 joken1310 阅读(362) 评论(0) 推荐(0)

useImperativeHandle 能直接暴漏state给外部吗？

摘要：在 React 中，useImperativeHandle 的设计初衷并不是直接暴露原始数据（如 state 的值），而是用来定制通过 ref 暴露给外部的接口。通常情况下，它确实更常用于暴露函数（例如 getter 或 setter），但这并不意味着你不能通过它间接暴露数据。关键在于，useImp 阅读全文

posted @ 2025-02-22 18:32 joken1310 阅读(178) 评论(0) 推荐(0)

react18 组件如何暴露state给外部组件

摘要：在 React 18 中，如果你想将某个组件的 state 暴露给外部组件调用，通常可以通过以下几种方式实现。这种需求常见于父组件需要直接访问子组件的内部状态，或者子组件需要向外部提供某种可控的接口。以下是具体的实现方法：方法 1：通过 ref 和 useImperativeHandle Reac 阅读全文

posted @ 2025-02-22 18:30 joken1310 阅读(185) 评论(0) 推荐(1)

js 如何正确的判断是否数字

摘要：在 JavaScript 中，判断一个值是否是数字（包括 0）时，需要特别注意，因为像 isNaN() 或简单类型检查可能会因为类型转换或边界情况导致结果不准确。以下是几种正确判断包括 0 在内的数字的方法，以及它们的适用场景。方法 1：结合 typeof 和 isNaN 使用 typeof 检查阅读全文

posted @ 2025-02-22 18:27 joken1310 阅读(1441) 评论(0) 推荐(0)

react vite项目中使用ant design ui

摘要：我将为你详细讲解如何在 Vite 项目中使用 Ant Design UI（简称 Antd），并结合 React 18 提供完整示例。Vite 是一个现代化的前端构建工具，相比 Create React App，它启动更快、支持按需加载更简单，非常适合搭配 Antd 开发高效的 React 应用。 1 阅读全文

posted @ 2025-02-22 18:22 joken1310 阅读(1340) 评论(0) 推荐(0)

react 同层级比较算法总结

摘要：以下是 React 同层级比较算法（即 Diff 算法中“只比较同级”的部分）的简洁总结，涵盖其核心原理、规则和关键点： React 同层级比较算法总结定义 React 的 Diff 算法通过只比较同层级节点的方式，高效对比新旧虚拟 DOM（VDOM）树，找出变化部分并更新真实 DOM。这是 Fi 阅读全文

posted @ 2025-02-22 18:15 joken1310 阅读(121) 评论(0) 推荐(0)

react fiber架构的好处分析

摘要：我来通过具体示例和场景，讲解 Fiber 架构在 React 中的好处，帮助你直观理解它的优势。Fiber 架构是 React 16 引入并在 React 18 中进一步优化的核心机制，主要好处包括可中断渲染、优先级调度、支持并发特性和提升复杂应用的性能。以下是详细举例： 1. 可中断渲染：避免阻阅读全文

posted @ 2025-02-22 18:13 joken1310 阅读(229) 评论(0) 推荐(0)

react18 diff算法

摘要： React 18 的 Diff 算法（也称为 Reconciliation 算法）是 React 核心机制的一部分，用于高效比较新旧虚拟 DOM（VDOM），找出变化部分并更新真实 DOM。下面我将详细讲解其原理，包括核心思想、步骤、优化策略以及 React 18 中的改进。 1. Diff 算法的阅读全文

posted @ 2025-02-22 18:07 joken1310 阅读(452) 评论(0) 推荐(0)

react useEffect 原理

摘要：以下是 useEffect 原理的简洁总结，涵盖其核心机制和工作流程： useEffect 原理总结定义 useEffect 是 React Hooks 提供的副作用处理工具，用于在函数组件中执行渲染后的操作（如数据获取、订阅事件），替代类组件的生命周期方法。核心原理副作用调度：将副作用逻辑阅读全文

posted @ 2025-02-22 18:04 joken1310 阅读(391) 评论(0) 推荐(0)

js Object.is 使用原理

摘要：以下是 Object.is() 原理的总结，涵盖其核心机制、比较规则以及与内存引用地址的关系： Object.is() 原理总结定义 Object.is(value1, value2) 是 JavaScript ES6 引入的静态方法，用于比较两个值是否“相同”，基于 SameValue 算法返阅读全文

posted @ 2025-02-22 17:57 joken1310 阅读(148) 评论(0) 推荐(0)

node npx的作用

摘要： npx 是一个随 npm（版本 5.2.0 及以上）一起安装的工具，它的主要作用是执行 npm 包中的二进制文件。换句话说，npx 允许你在不全局安装某个包的情况下，直接运行该包提供的命令行工具。以下是 npx 的主要功能和使用场景： 1. 执行本地安装的包如果你通过 npm install < 阅读全文

posted @ 2025-02-18 21:17 joken1310 阅读(598) 评论(0) 推荐(0)

yarn安装依赖时报错certificate has expired at TLSSocket.onConnectSecure

摘要：解决方式: yarn config set strict-ssl false 阅读全文

posted @ 2025-02-18 21:11 joken1310 阅读(89) 评论(0) 推荐(0)

tsx 引入的子组件必须大写开头命名

摘要：在 TSX 或 JSX 中，组件名必须以大写字母开头。这是 JSX 的语法规则之一，也是 React 和 Vue 3 TSX 写法中的一条重要约定。原因：区分 HTML 标签和自定义组件在 JSX/TSX 中，小写字母开头的标签会被解析为 HTML 元素（如 <div>、<span> 等），而大阅读全文

posted @ 2025-02-18 20:49 joken1310 阅读(117) 评论(0) 推荐(0)

js try finally如何使用

摘要：在 JavaScript 中，try...finally 语句用于定义一个代码块，在尝试执行某些可能抛出错误的代码后，无论是否发生异常，都会执行 finally 块中的代码。它通常用于清理操作（如关闭文件、释放资源等）。以下是 try...finally 的基本用法和详细说明：语法 try { 阅读全文

posted @ 2025-02-18 20:47 joken1310 阅读(261) 评论(0) 推荐(0)

css 设置元素高度 overflow auto，如何出现滚动条的时候，元素的宽度不撑大

摘要：在 CSS 中，当设置 overflow: auto 时，如果内容超出容器的高度，会触发滚动条的显示。然而，默认情况下，滚动条可能会占用额外的空间，导致容器的宽度发生变化（例如内容区域变窄）。为了避免这种情况，可以通过以下方法确保容器的宽度不被撑大。方法 1：使用 box-sizing: bord 阅读全文

posted @ 2025-02-18 20:45 joken1310 阅读(1517) 评论(0) 推荐(0)

vue3 tsx写法如何使用scss class样式

摘要：在 Vue 3 的 TSX 写法中，如果你的 SCSS 文件中定义了一个类似 .abc-cbd 这样的类名（非嵌套样式），可以直接通过 CSS Modules 导出的对象来访问并使用它。以下是详细的实现步骤和示例： 1. SCSS 文件定义假设你的 SCSS 文件中定义了如下类名： styles 阅读全文

posted @ 2025-02-18 20:41 joken1310 阅读(473) 评论(0) 推荐(0)

css 标签高度百分比的实现方式

摘要：在 CSS 中，实现高度百分比的方式有多种，以下是常见的几种方法及其适用场景： 1. 基于父容器的高度百分比原理：子元素的 height 百分比值基于其直接父容器的高度。条件：父容器的高度必须明确（例如通过 height 属性设置固定值或百分比）。示例代码：<div class="parent 阅读全文

posted @ 2025-02-18 20:33 joken1310 阅读(183) 评论(0) 推荐(0)

react18 子组件暴漏数据或者非法给父组件方式，useImperativeHandle 使用

摘要：首先，我们需要定义一个接口来描述我们希望暴露给父组件的方法。然后，在 useImperativeHandle 中实现这些方法，并确保它们符合这个接口。 TypeScript 示例代码 import React, { useRef, useImperativeHandle, forwardRef, M 阅读全文

posted @ 2025-02-06 22:31 joken1310 阅读(122) 评论(0) 推荐(0)

react useMemo和vue3 computed对比

摘要： React useMemo 用途：主要用于记忆化计算结果，避免在每次渲染时都执行昂贵的计算。使用方式：接受一个函数和一个依赖项数组作为参数。只有当依赖项数组中的值发生变化时，才会重新执行给定的函数并返回新的计算结果；否则，它将返回上一次计算的结果。适用场景：优化性能，特别是在处理复杂或耗时的计算阅读全文

posted @ 2025-02-06 22:20 joken1310 阅读(270) 评论(0) 推荐(0)

react18 provide 使用，跨层级组件传递数据

摘要：在 React 中，Context API 提供了一种无需手动通过 props 传递数据的方式，就可以让组件树中的任何层级的组件访问到某些数据的方法。Provider 是 Context API 的一部分，它允许你将值传递给整个组件树中的所有消费者（Consumer），而不需要在每个层级手动传递 p 阅读全文

posted @ 2025-02-06 22:11 joken1310 阅读(405) 评论(0) 推荐(0)

react18 响应式数据的创建方式hook

摘要： React 18 中监听数据变化通常涉及使用内置的 Hooks，如 useState、useEffect 和 useReducer。对于更复杂的状态管理，还可以结合第三方库如 Redux 或 MobX。下面是这些 Hooks 的具体使用方法示例： 1. useState useState 是 Rea 阅读全文

posted @ 2025-02-06 22:03 joken1310 阅读(233) 评论(0) 推荐(0)

js ArrayBuffer 二进制基本数据暂存对象

摘要： ArrayBuffer 是 JavaScript 中用于表示二进制数据的低级对象。它是一段固定长度的连续内存区域，通常用于处理文件、图像、音频、视频等二进制数据。ArrayBuffer 本身只是一个字节数组，不能直接操作，需要通过类型化数组（Typed Array）或DataView来访问和修改其内阅读全文

posted @ 2025-01-25 21:14 joken1310 阅读(352) 评论(0) 推荐(0)

js 迭代器next和生成器yield的区别

摘要：迭代器（Iterator）和生成器（Generator）是 JavaScript 中用于处理遍历和惰性求值的两个重要概念。它们密切相关，但有明显的区别。以下是它们的核心区别和联系： 1. 迭代器（Iterator）定义：迭代器是一个对象，它实现了迭代器协议，即具有 next() 方法。 next( 阅读全文

posted @ 2025-01-25 21:10 joken1310 阅读(169) 评论(0) 推荐(0)

vue3 组件打印出来是一个对象，这个对象是 Vue 组件实例的内部表示

摘要：在 Vue 3 中，打印某个组件实例时，确实会显示一个对象。这个对象是 Vue 组件实例的内部表示，包含了组件的状态、方法、生命周期钩子、响应式数据等信息。以下是详细说明： 1. 组件实例的结构当你打印一个 Vue 组件实例时，会看到一个包含以下内容的对象：常见属性： $data：组件的响应式数阅读全文

posted @ 2025-01-25 21:06 joken1310 阅读(182) 评论(0) 推荐(0)

ts enum使用小写英文作为key

摘要：在 TypeScript 中，enum 的键（key）可以是小写，但需要注意以下几点： 1. enum 的键可以是小写 TypeScript 的 enum 允许使用小写字母作为键名。例如： enum Status { active = 'ACTIVE', inactive = 'INACTIVE', 阅读全文

posted @ 2025-01-25 21:04 joken1310 阅读(117) 评论(0) 推荐(0)

joken-前端工程师