joken1310 - 博客园

-D 是 npm/pnpm/yarn 等包管理工具的安装参数作用

摘要： -D 是 npm/pnpm/yarn 等包管理工具的安装参数，意思是：将包安装为开发依赖（开发环境依赖，Dev Dependencies）具体含义： • 这个包（vite-plugin-vue-mcp）只在开发过程中需要 • 不会被打包到最终的生产构建产物中 • 会写入到项目的 package. 阅读全文

posted @ 2026-02-27 22:00 joken1310 阅读(3) 评论(0) 推荐(0)

vue3 Suspense组件作用

摘要： Suspense 是 Vue 3 中一个非常有用的内置组件，它的核心作用是：在等待异步依赖（主要是异步组件或带有异步 setup 的组件）完成时，在组件树的上层统一展示一个加载中状态（fallback），而不是让每个地方都自己写 loading。简单来说，它解决的就是下面这种糟糕的用户体验：页阅读全文

posted @ 2026-02-27 21:51 joken1310 阅读(5) 评论(0) 推荐(0)

python项目运行基本方式，启动方式，必备文件

摘要： Python 项目如何运行？有哪些“必备文件”？下面这篇可以直接作为你博客的文章使用，你按需改标题/示例即可。一、Python 项目的基本结构先看一个常见的 Python 项目目录结构： my_project/ ├─ venv/ # 可选：虚拟环境目录 ├─ my_package/ # 项目源阅读全文

posted @ 2026-02-27 21:45 joken1310 阅读(13) 评论(0) 推荐(0)

用 Docker 和 Compose 部署项目实战

摘要：用 Docker 和 Compose 部署 Telegram Media Downloader 项目与目标项目git地址：https://github.com/tangyoha/telegram_media_downloader 这个项目是一个基于 Python 的 Telegram 媒体下载工具阅读全文

posted @ 2026-02-27 21:36 joken1310 阅读(13) 评论(0) 推荐(0)

spring boot 接口请求安全信息验证拦截处理

摘要： 🔐 Spring Security + JWT 认证体系分析 1. JwtAuthenticationFilter.java - JWT认证过滤器 🎯 作用这是整个JWT认证的核心过滤器，负责从HTTP请求中提取和验证JWT token。 🔍 工作原理 public class JwtAut 阅读全文

posted @ 2025-09-30 17:52 joken1310 阅读(47) 评论(0) 推荐(0)

spring boot 切面的机制和作用原理

摘要：切面（Aspect）的核心机制就是拦截（Interception），但切面的概念比单纯的拦截更加丰富和系统化。让我用一个更准确的比喻来解释： 🎯 拦截 vs 切面特性单纯的拦截（Interception） Spring AOP 切面（Aspect）目的阻止或修改方法调用模块化横切关注点阅读全文

posted @ 2025-09-30 17:42 joken1310 阅读(45) 评论(0) 推荐(0)

spring boot 切面如何使用示例

摘要： Spring AOP 切面使用指南：从入门到实战 📖 前言 Spring AOP（面向切面编程）是Spring框架的核心特性之一，它允许我们在不修改业务代码的情况下，为应用程序添加横切关注点（如日志、缓存、事务管理等）。本文将通过实际项目中的缓存实现案例，详细讲解Spring AOP的使用方式。阅读全文

posted @ 2025-09-30 17:30 joken1310 阅读(33) 评论(0) 推荐(0)

java1.8 运行spring boot 参考

摘要：基于您的 Maven settings.xml 配置文件，我来总结和优化这份关键经验指南： 🚀 Java、Maven、Spring Boot 环境搭建完整指南 🔧 Java 环境配置经验 1. Java版本选择建议推荐Java 8 (JDK 1.8) - 最佳兼容性，支持大部分Spring B 阅读全文

posted @ 2025-09-30 16:30 joken1310 阅读(157) 评论(0) 推荐(0)

react useEffect 是浅比较监听数据变化

摘要： useEffect 默认不会对对象进行深度监听，而是通过浅比较（shallow comparison）判断依赖项是否变化，即仅比较对象的引用地址而非内部属性值。以下是详细解析和解决方案： 1. 默认行为：浅比较机制原理：useEffect 使用 Object.is 或比较依赖项的引用地址。若对象阅读全文

posted @ 2025-07-12 21:32 joken1310 阅读(381) 评论(0) 推荐(0)

dojo1.x版本自定义组件

摘要： dojo1.x版本自定义组件 <!DOCTYPE html> <html> <head> <title>Dojo 1.x Custom Component Test</title> <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.1 阅读全文

posted @ 2025-07-12 19:00 joken1310 阅读(10) 评论(0) 推荐(0)

dojo 给dom元素指定组件data-dojo-type

摘要：在 Dojo 1.x（Dojo Toolkit）中，data-dojo-type 属性用于声明式地指定一个 DOM 元素关联的 Dojo 组件或模块的 JavaScript 代码。它告诉 Dojo 的解析器（dojo/parser）将某个 HTML 元素实例化为特定的 Dojo 组件（通常是 Di 阅读全文

posted @ 2025-07-12 18:52 joken1310 阅读(51) 评论(0) 推荐(0)

git rebase和merge对比

摘要：在 Git 中，rebase 和 merge 都是用于整合分支代码的工具，但它们的实现方式和效果有显著差异。以下是对它们的对比，涵盖定义、用途、优缺点及适用场景： 1. 定义 Git Merge：将两个或多个分支的提交历史合并，创建一个新的“合并提交”（merge commit），保留所有分支的提阅读全文

posted @ 2025-06-19 20:48 joken1310 阅读(230) 评论(0) 推荐(0)

vite插件如何自定义实现

摘要：编写一个 Vite 插件可以让你自定义构建过程，添加额外的功能或优化。Vite 插件的开发基于 Rollup 插件标准，但增加了对 Vite 特定环境的支持。下面是一个简单的指南，教你如何开始编写自己的 Vite 插件。步骤 1: 设置你的插件文件首先，创建一个新的 JavaScript 或 T 阅读全文

posted @ 2025-06-17 21:40 joken1310 阅读(272) 评论(0) 推荐(0)

axios 获取blob数据，但是不能获取file对象数据

摘要：在使用 Axios 时，你只能直接获取到 Blob 对象，而不是 File 对象。这是因为：根本原因 HTTP 协议限制 HTTP 响应本质是二进制数据流（Blob），不包含文件的元信息（如文件名、修改时间等）。这些元数据通常通过响应头（如 Content-Disposition）额外传递，但浏览阅读全文

posted @ 2025-06-10 22:54 joken1310 阅读(160) 评论(0) 推荐(0)

axios 如何获取blob数据的文件名

摘要：在使用 Axios 下载文件时，默认情况下，Blob 数据不会包含文件名（因为 Blob 本身没有 name 属性）。但你可以通过以下方法获取文件名：从响应头 Content-Disposition 提取文件名服务器通常会在响应头 Content-Disposition 中返回文件名，格式如：阅读全文

posted @ 2025-06-10 22:51 joken1310 阅读(400) 评论(0) 推荐(0)

blob 和file对象的区别

摘要： Blob 和 File 是 JavaScript 中处理二进制数据的两个接口，主要用于浏览器环境。它们的核心区别如下：定义与来源 Blob (Binary Large Object) 通用的二进制数据容器，可存储任意类型的数据（如文本、图像、音频等）。通过代码动态创建（如 new Blob(da 阅读全文

posted @ 2025-06-10 22:48 joken1310 阅读(143) 评论(0) 推荐(0)

vue computed原理

摘要： Vue 3 computed 原理解析总结 Vue 3 的 computed 是基于观察者模式（Observer Pattern）和惰性求值（Lazy Evaluation）实现的响应式数据派生机制，其核心原理可总结如下：核心角色角色 Vue 3 对应部分作用 Subject（被观察者阅读全文

posted @ 2025-06-10 22:44 joken1310 阅读(185) 评论(0) 推荐(0)

computedAsync 是 VueUse 库中的一个实用工具

摘要： computedAsync 是 VueUse 库中的一个实用工具，它允许你创建基于异步操作的计算属性。这对于需要根据一些异步数据源（例如从网络请求获取的数据）来更新组件的状态非常有用。使用 computedAsync 首先，确保你已经在项目中安装了 VueUse： npm install @vue 阅读全文

posted @ 2025-06-10 22:26 joken1310 阅读(180) 评论(0) 推荐(0)

vue3 computed怎么知道函数内部有哪些依赖需要更新的

摘要：在 Vue 3 中，computed 属性能够自动追踪其依赖的数据，并且仅在这些依赖发生变化时重新计算结果。这主要归功于 Vue 的响应式系统和它的依赖收集机制。当你定义一个 computed 属性时，Vue 会执行你的 getter 函数（即你传递给 computed 的函数），并在执行期间追踪阅读全文

posted @ 2025-06-10 22:18 joken1310 阅读(77) 评论(0) 推荐(0)

git 添加自定义命令

摘要： git config --global alias.cm '!git commit --no-verify' cm 是自定义命令名字字符部分是自定义命令执行内容阅读全文

posted @ 2025-05-17 21:04 joken1310 阅读(45) 评论(0) 推荐(0)

react18使用Zustand store

摘要： Zustand 是一个轻量且易于使用的状态管理库，适用于 React 应用。它提供了简单而强大的 API 来管理全局状态，并且与 React 的开发体验非常契合。下面我们将通过一个具体的案例来探讨 Zustand 的使用，并解释其优势。 🧩 什么是 Zustand？ Zustand 是一个基于 R 阅读全文

posted @ 2025-05-17 20:39 joken1310 阅读(170) 评论(0) 推荐(0)

vscode tailwind插件：Tailwind CSS IntelliSense 如何使用

摘要：完善Tailwind CSS IntelliSense插件配置指南一、插件安装打开VS Code扩展市场搜索"Tailwind CSS IntelliSense"插件点击安装二、VS Code用户配置安装完成后，需要在VS Code中进行额外配置以确保插件在tsx文件中正常工作：打开V 阅读全文

posted @ 2025-05-17 18:34 joken1310 阅读(3263) 评论(0) 推荐(1)

react18 mobx 使用示例

摘要： index.tsx import { observer } from "mobx-react-lite"; import React, { useEffect } from "react"; import counterStore from "./store"; // 将组件包装为观察者组件 con 阅读全文

posted @ 2025-05-17 17:43 joken1310 阅读(56) 评论(0) 推荐(0)

React18 中实现子组件向父组件暴露数据和方法的实践

摘要：在 React 中实现子组件向父组件暴露数据和方法的实践在 React 的组件开发中，我们经常需要实现父子组件之间的通信。通常情况下，我们使用 props 从父组件向子组件传递数据和方法。但在某些特殊场景下，我们需要让子组件主动暴露数据和方法给父组件。本文将通过一个具体示例来演示如何实现这一需求。阅读全文

posted @ 2025-05-17 17:17 joken1310 阅读(132) 评论(0) 推荐(0)

react18 useTransition示例场景示例代码

摘要：示例代码 import React, { useState, useTransition } from "react"; const App = () => { const [isPending, startTransition] = useTransition(); const [inputVal 阅读全文

posted @ 2025-05-17 17:04 joken1310 阅读(42) 评论(0) 推荐(0)

react slot 插槽简易实现

摘要： React 中模拟实现 Slot 插槽功能的示例教程在 React 中虽然没有原生的 slot 语法（如 Vue 或 Web Components），但可以通过 props.children 或命名插槽的方式来模拟类似功能。本文将基于两个组件文件详细讲解一个使用“插槽”模式的完整示例。 📁 文件阅读全文

posted @ 2025-05-17 16:57 joken1310 阅读(318) 评论(0) 推荐(0)

tailwind css 安装教程

摘要： 🎨 Tailwind CSS 在项目中的使用总结 1. 🧱 项目结构概览你的 React 管理后台模板项目集成了 Tailwind CSS，用于构建响应式、高度定制化的 UI 组件。主要文件结构如下： src/ ├── index.css ├── tailwind.config.js └── 阅读全文

posted @ 2025-05-17 16:43 joken1310 阅读(881) 评论(0) 推荐(0)

React Context 使用总结

摘要： 🧠 React Context 使用总结 1. 创建 Context 在 TestModalContext.tsx 中创建了一个 Context，用于跨组件层级共享数据。 export const TestModalContext = createContext<TestModalContextT 阅读全文

posted @ 2025-05-17 16:39 joken1310 阅读(94) 评论(0) 推荐(0)

React18 Outlet 作用:router的子路由内容

摘要：在 React 18 中，Outlet 是由 React Router（通常是 react-router-dom）提供的组件，用于在嵌套路由中渲染子路由的内容。它是 React Router v6 及以上版本中实现嵌套路由的核心组件。 Outlet 的作用 Outlet 充当子路由的占位符，告诉 R 阅读全文

posted @ 2025-05-17 12:48 joken1310 阅读(267) 评论(0) 推荐(0)

react18 Suspense 作用:等待异步加载内容

摘要： React 的 <Suspense> 组件来处理异步加载内容，具体用在 [react-router-dom](file://f:\my_code_2024\react-template-admin-main\node_modules\react-router-dom) 的 <Outlet /> 上，阅读全文

posted @ 2025-05-17 12:45 joken1310 阅读(94) 评论(0) 推荐(0)

react18 普通table 列表和新增修改弹窗表单案例

摘要：列表代码 import React, { useState, useMemo } from "react"; import { Space, Table, Tag, Form, Input, Button, Pagination } from "antd"; import type { TableP 阅读全文

posted @ 2025-05-17 12:33 joken1310 阅读(47) 评论(0) 推荐(0)

React 18 需要掌握的核心知识点

摘要： React 18 引入了多项重要更新和优化，以下是需要掌握的核心知识点： 1. 并发渲染（Concurrent Rendering） React 18 的核心改进是并发渲染，允许 React 在渲染过程中中断、暂停或优先处理高优先级任务（如用户交互），从而提升应用的响应速度。通过 createRo 阅读全文

posted @ 2025-05-12 21:54 joken1310 阅读(123) 评论(0) 推荐(0)

React 18 中 useCallback 和 useMemo 的区别

摘要： React 18 中 useCallback 和 useMemo 的区别 useCallback 和 useMemo 都是 React 18 中的性能优化 Hook，但它们有不同的用途： useCallback 作用：记忆化函数，避免函数在每次渲染时都重新创建。使用场景：当需要将函数作为 pro 阅读全文

posted @ 2025-05-12 21:50 joken1310 阅读(134) 评论(0) 推荐(0)

如何在React 18中优化大型组件的性能？

摘要：在React 18中优化大型组件的性能可以通过多种策略和最佳实践来实现。以下是一些具体的建议： 1. 使用React.memo进行优化对于那些渲染代价较高且不经常更新的组件，可以使用React.memo来包裹它们。这样，当父组件重新渲染时，如果传递给这些子组件的props没有改变，React将跳过阅读全文

posted @ 2025-05-12 21:33 joken1310 阅读(95) 评论(0) 推荐(0)

如何在项目中有效利用React 18的新功能

摘要：要在项目中有效利用React 18的新功能，可以从以下几个方面入手： 1. 升级到React 18 首先，确保项目已升级到React 18版本。升级过程中，注意解决可能出现的兼容性问题，并参考官方文档进行必要的代码调整。 2. 使用新的渲染API 替换ReactDOM.render()为create 阅读全文

posted @ 2025-05-08 22:31 joken1310 阅读(75) 评论(0) 推荐(0)

React 18中关于Hooks的经典面试题

摘要：以下是一些React 18中关于Hooks的经典面试题：基础理解类 React Hooks的设计动机是什么？解决类组件的“嵌套地狱”问题，使组件逻辑更清晰。使状态逻辑更易于复用和组合，通过自定义Hook实现逻辑提取。降低学习成本，无需理解复杂的class语法和this绑定。使用Hooks时阅读全文

posted @ 2025-05-08 22:26 joken1310 阅读(500) 评论(0) 推荐(0)

react18 useReducer 可以不同组件共享数据吗

摘要：是的，useReducer 可以实现不同组件之间的数据共享。通常，我们会结合 React.createContext 和 useContext 钩子来实现这一功能。以下是具体步骤： 1. 创建上下文在项目的共享模块中，使用 React.createContext 创建一个上下文对象： import 阅读全文

posted @ 2025-05-08 22:18 joken1310 阅读(49) 评论(0) 推荐(0)

react18 slot写法

摘要：在React 18中，实现插槽（slots）的功能主要有以下两种方式： 1. 使用 props.children 子组件（MyComponent.js） import React from 'react'; function MyComponent(props) { return ( <div> < 阅读全文

posted @ 2025-05-08 21:41 joken1310 阅读(185) 评论(0) 推荐(0)

el-image-viewer图片预览使用

摘要： el-image-viewer 是 Element UI 提供的图片查看器组件，用于放大查看图片，支持缩放、拖拽、多图浏览等。以下是使用方法：安装 Element UI 若未安装 Element UI，使用以下命令安装： # 使用 npm npm install element-ui --save 阅读全文

posted @ 2025-05-08 21:36 joken1310 阅读(1713) 评论(0) 推荐(0)

Vue3 中 v-html 的安全性控制 dompurify库使用

摘要： Vue3 中 v-html 的安全性控制在 Vue3 中使用 v-html 指令时需要特别注意安全性问题，因为它会直接将 HTML 内容渲染到 DOM 中，可能导致 XSS（跨站脚本攻击）漏洞。安全性风险 v-html 的主要风险是：可能执行恶意脚本可能加载外部资源可能修改 DOM 结构阅读全文

posted @ 2025-05-07 21:40 joken1310 阅读(895) 评论(0) 推荐(0)

joken-前端工程师