- 博客(51)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 【前端开发】Vue中引入Sass、Scss
本文介绍了Vue项目中SCSS样式文件的配置和使用方法，包括创建全局样式文件、布局样式类，以及在vue.config.js中的配置。重点分析了常见问题及解决方案：样式重复编译（使用@use替代@import）、变量未定义（检查导入顺序）、@use规则冲突（确保最先声明）、私有成员访问（移除前缀）、变量重定义（更名变量）以及第三方库变量重写问题（通过新建文件导入）。文章提供了详细的代码示例和配置建议，帮助开发者正确管理Vue项目中的SCSS样式。
2024-01-16 15:05:05
5217
1
原创 【云技术】Minio 入门
本文介绍了使用Docker部署MinIO对象存储服务的方法，包括安装配置、控制台使用及Spring Boot集成指南。主要内容如下： Docker部署MinIO的详细命令，强调了数据目录挂载和控制台端口配置的必要性 MinIO控制台操作指南，包括桶创建与配置、用户权限管理等功能说明 Spring Boot集成MinIO的完整代码实现，提供配置类、工具类及文件上传示例 文章还特别提醒了部署注意事项，如必须挂载数据目录、控制台端口配置等关键点，并提供了个人博客链接供读者获取更多信息。 （字数：149字）
2022-07-29 10:59:11
11945
原创 【FAQ】解决qrcode.js二维码插件不支持中文的问题
本文针对Qrcode.js插件不支持中文的问题，提出了一种优化解决方案。通过分析源码发现乱码原因是插件采用UTF-16编码而未处理中文字符，作者编写了toUtf8转换函数将中文转为UTF-8格式。改版后的插件无需预先转码，直接支持中文显示，简化了开发流程。文章对比了新旧版本的使用方法，并提供了改进插件的Github下载地址，有效解决了中文乱码问题。
2019-03-02 22:27:22
12931
7
原创 【大前端】一个类实现 Quill 自定义图片大小扩展
本文介绍了一个基于Quill编辑器的图片调整功能实现方案。该方案通过监听编辑器事件，在用户选中图片时弹出调整工具栏，允许用户修改图片的宽高属性。主要实现步骤包括：1)获取当前选中图片的DOM节点和位置信息；2)监听输入框变化实时更新图片尺寸；3)通过计算位置实现弹出工具栏的精确定位。代码展示了核心实现逻辑，包括事件监听、DOM操作和尺寸计算等功能模块。该方案能够在不影响编辑器原有功能的情况下，为用户提供便捷的图片尺寸调整体验。
2025-11-18 10:26:58
168
原创 【大前端】5行代码教你如何快速实现无限滚动动画
这篇文章介绍了一个实现无限滚动的JavaScript类InfiniteScrolling。通过克隆元素并添加CSS动画，使内容可以无限循环滚动。关键实现包括：克隆子元素实现无缝衔接、添加CSS动画样式表、控制动画播放状态等。使用时只需创建实例并调用start()方法即可启动滚动，还提供了暂停和销毁功能。
2025-11-14 15:49:06
107
原创 【大前端】50行代码，教你实现轻量级 i18n 翻译插件
50行代码实现轻量级i18n插件，告别传统i18n方案。通过语言映射表自动翻译文本，无需手动维护key。使用MD5加密源文本作为key匹配翻译结果，支持异步数据翻译、支持中英文等任意语言切换、支持Vue/React框架。相比传统i18n方案更简洁高效
2025-10-29 17:32:37
261
原创 MCP Client 连接 TOTP Service
TOTP Service 提供两步验证码管理服务，现已支持MCP协议集成。用户可生成个人访问令牌后，在MCP客户端（如阿里通义灵码）中配置服务器地址[https://totp.cxjfun.top/sse]并添加授权头，即可通过MCP接口管理TOTP账户。支持添加账户、获取验证码、查看账户列表和删除账户等操作，所有功能均可通过MCP协议调用实现。该集成方案简化了TOTP账户的管理流程，提升了使用便捷性。
2025-08-14 09:26:09
375
原创 【大前端】vite忽略指定前缀的静态资源
本文介绍了在Vite开发中处理网络资源引用的解决方案。由于Vite默认会将import路径视为本地资源，当引用代理服务器上的网络资源时会出现问题。作者提出通过编写Vite插件，在transform生命周期中使用正则匹配特定前缀的import语句（如/csdn/），将其替换为字符串变量声明。这种解决方案避免了在开发时需要添加?url标识的繁琐操作，更符合实际开发需求。示例代码展示了如何实现一个简单的插件，将匹配到的import语句转换为const变量声明。
2025-08-07 17:38:10
349
原创 Docker部署Flask应用
以上代码是一个简单的Flask应用，但是在商业应用中，往往这不是最好的代码在商业化项目中，都会降代码进行解耦，达到最大代码复用率，例如代码中的app变量，那么如何搭建大型项目结构呢？可参照以下步骤Flask官网的解决方式将Flask应用打包进一个模块包中，然后通过setuptools的setup函数启动，因为Python是不希望直接运行一个模块包的例如：扫描二维码、条码项目。
2025-06-25 17:41:49
502
原创 OTP Authenticator - TOTP 验证器 | TOTP Service
TOTP Service是一个基于网页的双重验证管理平台（https://totp.cxjfun.top/），采用TOTP算法生成动态验证码。用户可通过注册账号、设置PIN码后添加TOTP密钥账户，管理密钥和恢复码。该服务摆脱对手机的依赖，提供集中化管理功能。平台操作简单，支持密钥存储和危险操作鉴权，适用于需要统一管理双重验证的场景。
2025-06-07 16:23:02
595
1
原创 【SOLUTION】Java 生成 TOTP 验证码
本文介绍一次性密码服务(OTP)，重点讲解基于时间的TOTP实现方式。TOTP相比HOTP更常用，只需客户端和服务端时间同步即可。文章提供了Java代码示例，展示如何通过共享密钥、时间窗口和HMAC-SHA1算法生成6位验证码。同时指出TOTP二维码应包含颁发组织、用户名和共享密钥三个要素，格式为otpauth://totp/{issuer}:{account}?secret={secretKey}&issuer={issuer}。特别强调每次重置TOTP绑定都应重新生成共享密钥，以确保安全性。
2025-05-29 17:04:36
424
原创 【FAQ】spring boot 3 集成 nacos
本文介绍了Spring Boot集成Nacos配置中心的基本步骤：1) 添加Nacos Config依赖(com.alibaba.cloud:spring-alibaba-nacos-config)；2) 配置Nacos连接参数，特别提醒当配置文件位于自定义命名空间时，需通过spring.nacos.config.namespace指定命名空间ID，否则默认会拉取public空间下的配置。文中提供了YAML配置示例，并附带Nacos官方文档参考链接，帮助开发者快速实现配置中心集成。（99字）
2025-05-27 16:16:12
567
原创 【大前端】Node Js下载文件
在Node.js中，获取远程文件通常使用fetch和axios两种方式。fetch是原生的API，通过arrayBuffer方法获取文件数据，并使用fs.writeFileSync将数据写入本地文件。axios是一个流行的HTTP客户端库，通过设置responseType为blob获取文件数据，并使用fs.createWriteStream将数据流写入本地文件。两种方法都能有效实现文件下载，开发者可以根据需求选择适合的方式。
2025-05-21 09:42:41
407
原创 【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
本文介绍了使用Node.js内置http.Server模块构建Web服务器的两种方法。重点讲解了http.Server的基本实现方式，包括创建服务器、端口监听、静态资源处理和路由管理等核心功能。文章提供了一个完整的项目结构示例，包含静态资源目录和服务器端代码实现，演示了如何处理普通请求和SSE（Server-Sent Events）请求。最后指出，虽然http.Server适合学习Node.js底层原理，但对于实际项目更推荐使用功能完善的Express框架。该实现特别适合需要深入理解HTTP请求处理流程的开
2025-05-21 09:41:29
561
原创 【随记】格式化文件大小
该代码定义了一个 formatFileSize 函数，用于将文件大小格式化为更易读的单位（如 B、KB、MB 等）。首先，通过 Math.log 和 Math.floor 计算文件大小的最小次方数 multiple，确定其所属的单位。然后，根据文件大小是否小于 1024 字节，决定是否进行格式化：若小于 1024 字节，直接返回原始大小；否则，将文件大小除以对应单位的字节数，并保留两位小数。最后，通过 multiple 索引单位字符，返回格式化后的字符串。
2025-05-21 09:36:10
213
原创 【大前端】使用纯CSS实现进度条
这段CSS代码通过radial-gradient和linear-gradient创建了一个带有圆点的进度条效果。radial-gradient用于绘制圆点，通过白色填充内部，红色绘制边框，并使用transparent使其余部分透明。两个linear-gradient分别用于绘制进度条和背景填充色。background属性中，前面的图层会覆盖后面的图层，圆点的偏移和进度条的宽度分别通过background-position和background-size设置。整体效果是一个红色圆点与红色进度条结合的设计。
2025-05-21 09:26:40
485
原创 【FAQ】 Python 连接 Mysql 连接异常退出 Process finished with exit code -1073741819 (0xC0000005)
pythone 连接MySql异常，需要将9.1.0 及以上版本换成 9.0.0。
2025-02-11 15:54:27
303
原创 【随记】实现元素自适应缩放
自适应布局方案对比 本文对比了两种实现元素自适应的解决方案： vh/vw方案：通过CSS单位控制宽高比例，但无法精确控制元素缩放空间大小，且受浏览器最小字体限制 JS缩放方案：通过监听容器变化，使用transform属性实现精确缩放，不改变元素实际宽高 重点介绍了JS方案的技术实现： 采用ResizeObserver监听元素变化 通过transform的scale属性实现无损缩放 详细计算了不同场景下的缩放比例和位移距离 提供了完整的TypeScript实现代码 该方案解决了传统CSS方案在极端缩放场景下的
2024-12-16 09:27:07
498
原创 上传ssh公钥到目标服务器
SSH密钥配置摘要 本文介绍如何快速配置SSH密钥访问：1) 使用ssh-keygen命令生成4096位的RSA密钥，需指定邮箱标识；2) 通过ssh-copy-id命令将公钥上传至目标服务器(示例为本地root用户)。这两个步骤可建立安全的免密SSH登录。
2024-12-06 21:07:40
587
原创 【解决方案】Vue 3 如何手动挂载元素到指定节点
摘要：本文探讨了在Vue开发中手动创建和挂载弹窗组件的解决方案。针对组件库功能不足的情况，文章详细介绍了在Vue 2.x和3.x中如何通过createVNode、h函数创建组件，使用render方法挂载组件，并提供销毁组件的实现方法。对于多层级弹窗问题，提出了基于响应式数据的动态渲染方案，避免组件重新渲染问题。最终方案通过维护组件栈和容器状态，实现了弹窗的稳定挂载与逐层关闭功能。
2024-12-05 15:41:27
2038
原创 【FAQ】使用Node.js 镜像 构建本地项目
在nodejs官方并没有提供使用node.js构建本地项目的方法，但是通过阅读官方文档，可以发现，官方在包管理器界面提供了如下语句。参数设置容器工作目录和目录映射（实现本地目录和容器内的工作目录实现实时同步）所以node.js容器是可以执行语句的。下面通过docker 的。代表当前本地工作目录。
2024-12-01 17:18:08
444
原创 【解决方案】VITE 忽略指定路径的资源
问题起因是因为项目需要引入服务器端的网络图片而在编写配置时发现，Vite并不支持排除指定前缀的资源唯一可以排外的只有 Rollup 的external选项可以排除外部依赖，但他只能排除外部依赖，不支持指定路径资源或指定前缀的资源，这就。。。。。
2024-11-22 15:03:24
1217
1
原创 【大前端】为什么需要 v-deep、:deep()
在单页面开发中，scoped样式会为预编译元素添加data-v-xx标记以避免样式污染，但无法控制动态挂载的子组件样式。解决方案有两种：一是移除scoped属性使样式全局化（但可能造成污染），二是使用:deep()或v-deep选择器（推荐），它能精准解除目标元素的标记而保留父级标记，既解决了样式控制问题又避免了全局污染。建议配合根节点自定义类名使用以提升代码可维护性。
2024-08-26 14:56:03
654
原创 【大前端】VUE使用TSX、JSX
在日常开发中，有时会遇到需要动态渲染组件的时候，比如：菜单栏，文件目录而普通的VUE SFC + TS/JS 模式并不能满足，这个时候就需要TSX/JSX了，那么VUE怎么使用TSX/JSX了？
2024-08-19 17:39:27
1124
原创 【大前端】JavaScript 监听文件选择弹窗关闭事件
在前端文件上传案例中，最常见的就是监听文件选择，而有的时候我们需要知道文件选择框是否已经关闭或点击了取消，传统得change事件只能获取值得更改不能监听取消事件；/*** 选择文件* @returns*///这里用异步是因为：文件选择本身就是异步，因为不确定用户什么时候选择文件//在内存中创建文件选择框//设置属性//点击，弹出文件选择框// 监听当前窗体得聚焦事件// 文件选择框弹出后：window 会触发blur 事件，关闭后会触发focus聚焦事件。
2024-08-16 10:50:17
905
原创 【FAQ】为啥MultipartFile 的InputStream available会为0
方法为0的情况，导致在文件上传到Minio后对象大小为0的情况。在Spring boot 文件上传案例中可能会存在获取。获取当前的读取位置判断文件大小的，所以如果。就可以了，通过断点可以发现传进来的。再获取一次输入流就行，因为他会在。通过源码可以看出，他这里继承了。改变了，那么他就有可能获取为0。在介绍问题原因前我们先探究下。方法，所以如果你在调用。
2024-08-05 13:53:49
757
原创 【SOLUTION】Spring Boot 集成 WebSocket
在面对大文件上传时通常遇到无法即时获取上传进度的问题，在没有WebSocket之前都是异步上传，然后通过轮询的方式实时获取上传进度。Spring如果想实现异步方法，需要在方法上添加。注解，并且在启动类或配置类上添加。方法执行，而是立即返回任务id。是异步方法，所以这里不会等待。
2024-07-24 15:17:04
1651
4
原创 【TOOLS】Chrome扩展开发
本文介绍了Chrome扩展开发的基本流程和进阶学习路径。主要内容包括：1) 入门教程部分讲解了通过manifest.json文件配置扩展项目；2) 进阶部分强调需要熟悉Chrome提供的API，并指出Manifest V3是当前主流版本；3) 扩展分发方式介绍了通过Chrome商店和自托管两种发布途径。文章还提供了官方文档链接作为学习资源，说明Chrome扩展开发相对简单，只需按照流程操作即可。适合想学习浏览器扩展开发的初学者阅读。
2024-07-11 16:00:29
1222
原创 【大前端】ECharts 绘制立体柱状图
本文介绍了两种立体柱状图的实现方式：纯色立体柱状图和渐变立体柱状图。重点展示了使用ECharts库实现的纯色立体柱状图代码示例，详细讲解了如何通过MarkPoint和颜色渐变来构建具有立体感的柱状图。文章包含完整的JavaScript代码实现，涉及柱体内外边框的设置、偏移量计算以及菱形装饰元素的添加方法。如需了解更多内容，可访问作者个人主页https://www.cxjfun.top/。
2024-04-30 14:57:16
2416
4
原创 【移动端】Flutter 自定义高德地图比例尺
本文介绍了Flutter中自定义高德地图比例尺的实现方法。由于官方未开放相关接口，通过分析AMap Android SDK源码发现可以利用getScalePerPixel方法获取比例尺数据。关键点包括：获取AMap实例、计算逻辑像素值，其中需要获取设备像素比(PDI)和物理尺寸，并通过公式物理宽度/2.54/PDI转换为1厘米对应的逻辑像素值。特别注意getScalePerPixel返回的是米/逻辑像素的单位。
2024-03-22 11:41:59
903
原创 【移动端】Flutter 获取Android AMap实例
本文的背景，是因为我在开发高德地图时，需要自定义高德比例尺位置和样式；但结果查看了AMap Flutter插件和AMap SDK源码后，发现AMap无法添加自定义MyMethodCallHandler的实现类！
2024-03-20 18:17:34
861
原创 【大前端】EChart 多系列柱状图绘制背景图
自定义图标适用于任何坐标系，且显示样式可根据需要自定义实现，所以更适用于多系列柱状图绘制背景图的需求自定义图标，起始坐标都是在左上角开始option = {tooltip: {},grid: {},xAxis: [],yAxis: [],series: [},//获取对应类目的axisTick中心点坐标//通过坐标系的宽度和类目数，计算单个类目的背景return {shape: {// 相对左上角坐标},},},name: '直接访问',},
2024-03-05 11:40:03
5858
4
原创 【移动端】Flutter 配置Android 开发环境
本文介绍了为Flutter配置Android开发环境的完整流程。首先需要下载并配置Android SDK路径，然后通过sdkmanager安装cmdline-tools工具包。接着授权Flutter访问Android SDK许可证，最后通过flutter doctor命令验证环境配置是否成功。文章提供了详细的命令行操作和截图说明，帮助开发者顺利完成Android开发环境的搭建。整个配置过程涉及SDK路径设置、工具安装和权限授权等关键步骤。
2024-02-22 10:59:50
854
原创 【移动端】IntelliJ IDEA 2023.3.4配置Android开发环境
Android 官方提供了和两种方式管理Android SDK在IDEA新UI中，找到菜单中的Tools菜单，在Android子菜单下可以找到和等。
2024-02-22 10:26:52
3249
5
原创 【解决方案】在Vue、HTML项目中使用@spacechart/translate 插件实现在线实时翻译、自定义翻译
在Vue、HTML项目中使用@spacechart/translate 插件实现在线实时翻译、自定义翻译
2024-02-02 10:49:20
2256
2
原创 【FAQ】NPM 引入本地依赖包
本文介绍了npm安装本地依赖包的两种方法：1）文件夹类型依赖，使用npm install <folder> --install-links命令，可实时编译修改并包含子依赖；2）压缩包类型依赖，通过npm install <tarball>命令安装本地或远程的.tar文件，适用于无外网环境。两种方式为不同场景提供了灵活的本地依赖管理方案。
2024-01-22 15:40:11
2819
原创 【解决方案】ECharts实现饼图径向渐变、线性渐变坐标计算
本文提供了两个用于计算饼图渐变坐标的函数。computedPieRadialGradient函数用于计算径向渐变坐标，通过数据数组计算每个扇区的起点/终点角度，并转换为X/Y/R坐标位置。computedPieLinearGradient函数则计算线性渐变坐标，将扇区角度转换为线性渐变的起点/终点向量坐标。两个函数都支持包含半径参数的数据输入，并返回包含位置信息的数组。主要采用三角函数计算角度转换，确保渐变效果能正确匹配饼图扇区的形状。
2024-01-11 08:42:55
1136
1
原创 【解决方案】window.print()打印指定元素
文章摘要：本文探讨了三种利用window对象打印指定元素的方法。1.直接替换当前页面的body内容，简单但可能影响框架页面功能；2.推荐使用iframe方法，可实现无感知打印且支持自定义，需注意同源限制；3.不推荐使用window.open方法，会产生可见子窗口影响用户体验。重点介绍了iframe方案的具体实现代码，包括动态创建iframe、深度拷贝目标元素和样式处理等细节。（149字）
2023-07-20 09:10:00
5678
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人