相关文章 | 空格-Blog

上传ssh公钥到目标服务器

SSH密钥配置摘要本文介绍如何快速配置SSH密钥访问：1) 使用ssh-keygen命令生成4096位的RSA密钥，需指定邮箱标识；2) 通过ssh-copy-id命令将公钥上传至目标服务器(示例为本地root用户)。这两个步骤可建立安全的免密SSH登录。

【随记】实现元素自适应缩放

自适应布局方案对比本文对比了两种实现元素自适应的解决方案： vh/vw方案：通过CSS单位控制宽高比例，但无法精确控制元素缩放空间大小，且受浏览器最小字体限制 JS缩放方案：通过监听容器变化，使用transform属性实现精确缩放，不改变元素实际宽高重点介绍了JS方案的技术实现：采用ResizeObserver监听元素变化通过transform的scale属性实现无损缩放详细计算了不同场景下的缩放比例和位移距离提供了完整的TypeScript实现代码该方案解决了传统CSS方案在极端缩放场景下的

【解决方案】JavaScript 实现DOM、element-ui-table自动滚动

该工具类实现了一个自动轮播功能，支持水平和垂直方向的滚动。主要特性包括：通过定时器实现自动滚动效果支持自定义滚动方向(x/y)、步长、时间间隔等参数滚动到底部自动重置到起始位置监听滚轮事件，用户交互时暂停自动滚动响应窗口大小变化，重新计算布局提供平滑滚动动画效果包含完整的生命周期管理(启动、停止、重置) 核心方法包括创建实例、启动滚动、处理动画、监听事件和定时器管理等。

【解决方案】ECharts实现饼图径向渐变、线性渐变坐标计算

本文提供了两个用于计算饼图渐变坐标的函数。computedPieRadialGradient函数用于计算径向渐变坐标，通过数据数组计算每个扇区的起点/终点角度，并转换为X/Y/R坐标位置。computedPieLinearGradient函数则计算线性渐变坐标，将扇区角度转换为线性渐变的起点/终点向量坐标。两个函数都支持包含半径参数的数据输入，并返回包含位置信息的数组。主要采用三角函数计算角度转换，确保渐变效果能正确匹配饼图扇区的形状。

【移动端】uniapp：实现页面间通讯

本文介绍了uniapp中三种页面间通讯方式：1.路径参数传参，适合简单数据；2.EventChannel事件通道，推荐使用，监听仅限于源页和目标页；3.全局事件总线$emit/$on，可实现跨组件通讯但需注意事件命名和及时销毁。每种方式都给出了Vue2/Vue3下的实现代码示例，包括选项式和组合式API写法。开发者可根据实际场景选择合适方案，平衡耦合性和性能开销。

【移动端】Flutter 配置Android 开发环境

本文介绍了为Flutter配置Android开发环境的完整流程。首先需要下载并配置Android SDK路径，然后通过sdkmanager安装cmdline-tools工具包。接着授权Flutter访问Android SDK许可证，最后通过flutter doctor命令验证环境配置是否成功。文章提供了详细的命令行操作和截图说明，帮助开发者顺利完成Android开发环境的搭建。整个配置过程涉及SDK路径设置、工具安装和权限授权等关键步骤。

【移动端】Flutter 获取Android AMap实例

本文分析了高德地图Flutter插件中自定义比例尺功能无法实现的原因。通过查看AMap Flutter插件源码发现，AMapPlatformView类通过内部MapController等控制器管理地图功能，并将这些控制器注册为MyMethodCallHandler。由于myMethodCallHandlerMap是私有且初始化后无法扩展，导致开发者无法添加自定义的MethodCallHandler实现类，从而限制了对比例尺等功能的定制化需求。

【移动端】Flutter 自定义高德地图比例尺

本文介绍了Flutter中自定义高德地图比例尺的实现方法。由于官方未开放相关接口，通过分析AMap Android SDK源码发现可以利用getScalePerPixel方法获取比例尺数据。关键点包括：获取AMap实例、计算逻辑像素值，其中需要获取设备像素比(PDI)和物理尺寸，并通过公式物理宽度/2.54/PDI转换为1厘米对应的逻辑像素值。特别注意getScalePerPixel返回的是米/逻辑像素的单位。

【工具开发】VSCdoe 插件开发

本文介绍了在Azure DevOps上创建和发布VSCode扩展的完整流程。主要内容包括：1）环境准备（创建Azure账户、个人访问令牌和发布者账户）；2）安装必要的脚手架工具（yo和vsce）；3）项目创建与调试；4）扩展打包和发布步骤；5）常见API使用示例（信息提示、文件打开、配置获取）；6）常见问题解决方案（README修改要求、调试问题、静态资源加载限制）。特别强调了发布过程中的权限设置、本地资源加载路径限制等关键注意事项。

【大前端】使用纯CSS实现进度条

这段CSS代码通过radial-gradient和linear-gradient创建了一个带有圆点的进度条效果。radial-gradient用于绘制圆点，通过白色填充内部，红色绘制边框，并使用transparent使其余部分透明。两个linear-gradient分别用于绘制进度条和背景填充色。background属性中，前面的图层会覆盖后面的图层，圆点的偏移和进度条的宽度分别通过background-position和background-size设置。整体效果是一个红色圆点与红色进度条结合的设计。

【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯

本文介绍了使用Node.js内置http.Server模块构建Web服务器的两种方法。重点讲解了http.Server的基本实现方式，包括创建服务器、端口监听、静态资源处理和路由管理等核心功能。文章提供了一个完整的项目结构示例，包含静态资源目录和服务器端代码实现，演示了如何处理普通请求和SSE（Server-Sent Events）请求。最后指出，虽然http.Server适合学习Node.js底层原理，但对于实际项目更推荐使用功能完善的Express框架。该实现特别适合需要深入理解HTTP请求处理流程的开

【大前端】为什么需要 v-deep、deep()

在单页面开发中，scoped样式会为预编译元素添加data-v-xx标记以避免样式污染，但无法控制动态挂载的子组件样式。解决方案有两种：一是移除scoped属性使样式全局化（但可能造成污染），二是使用:deep()或v-deep选择器（推荐），它能精准解除目标元素的标记而保留父级标记，既解决了样式控制问题又避免了全局污染。建议配合根节点自定义类名使用以提升代码可维护性。

【大前端】VUE使用TSX、JSX

在日常开发中，有时会遇到需要动态渲染组件的时候，比如：菜单栏，文件目录而普通的VUE SFC + TS/JS 模式并不能满足，这个时候就需要TSX/JSX了，那么VUE怎么使用TSX/JSX了？

【大前端】JavaScript 监听文件选择弹窗关闭事件

在前端文件上传案例中，最常见的就是监听文件选择，而有的时候我们需要知道文件选择框是否已经关闭或点击了取消，传统得change事件只能获取值得更改不能监听取消事件；/*** 选择文件* @returns*///这里用异步是因为：文件选择本身就是异步，因为不确定用户什么时候选择文件//在内存中创建文件选择框//设置属性//点击，弹出文件选择框// 监听当前窗体得聚焦事件// 文件选择框弹出后：window 会触发blur 事件，关闭后会触发focus聚焦事件。

【大前端】50行代码，教你实现轻量级 i18n 翻译插件

50行代码实现轻量级i18n插件，告别传统i18n方案。通过语言映射表自动翻译文本，无需手动维护key。使用MD5加密源文本作为key匹配翻译结果，支持异步数据翻译、支持中英文等任意语言切换、支持Vue/React框架。相比传统i18n方案更简洁高效

【TOOLS】Project 2 Maven Central

本文介绍了将项目发布到Maven中央仓库的完整流程。首先需要在Sonatype官网注册账号并生成User Token，配置到Maven的settings.xml中。其次需要详细配置项目的POM.xml文件，包括：设置Java版本项目基本信息私库地址配置开发者信息和许可证打包插件(maven-source-plugin和maven-javadoc-plugin) 发布插件(central-publishing-maven-plugin等) 配置完成后，项目即可通过Maven命令发布到中央仓库。整个过

【TOOLS】Chrome扩展开发

本文介绍了Chrome扩展开发的基本流程和进阶学习路径。主要内容包括：1) 入门教程部分讲解了通过manifest.json文件配置扩展项目；2) 进阶部分强调需要熟悉Chrome提供的API，并指出Manifest V3是当前主流版本；3) 扩展分发方式介绍了通过Chrome商店和自托管两种发布途径。文章还提供了官方文档链接作为学习资源，说明Chrome扩展开发相对简单，只需按照流程操作即可。适合想学习浏览器扩展开发的初学者阅读。

【FAQ】使用NodeJs镜像构建本地项目

在nodejs官方并没有提供使用node.js构建本地项目的方法，但是通过阅读官方文档，可以发现，官方在包管理器界面提供了如下语句。参数设置容器工作目录和目录映射（实现本地目录和容器内的工作目录实现实时同步）所以node.js容器是可以执行语句的。下面通过docker 的。代表当前本地工作目录。

【FAQ】为啥MultipartFile 的InputStream available会为0

方法为0的情况，导致在文件上传到Minio后对象大小为0的情况。在Spring boot 文件上传案例中可能会存在获取。获取当前的读取位置判断文件大小的，所以如果。就可以了，通过断点可以发现传进来的。再获取一次输入流就行，因为他会在。通过源码可以看出，他这里继承了。改变了，那么他就有可能获取为0。在介绍问题原因前我们先探究下。方法，所以如果你在调用。

Docker部署Flask应用

以上代码是一个简单的Flask应用，但是在商业应用中，往往这不是最好的代码在商业化项目中，都会降代码进行解耦，达到最大代码复用率，例如代码中的app变量，那么如何搭建大型项目结构呢？可参照以下步骤Flask官网的解决方式将Flask应用打包进一个模块包中，然后通过setuptools的setup函数启动，因为Python是不希望直接运行一个模块包的例如：扫描二维码、条码项目。

【随记】QQ邮箱账号异常登录

文章分析了异常登录QQ邮箱的IP地址，发现是网易邮箱服务器(m153.mail.126.com)的访问。作者推测这是因使用网易邮箱大师APP所致，认为该应用存在隐私问题，决定停止使用。文章配有两张截图佐证分析过程。

【移动端】IntelliJ IDEA 2023.3.4配置Android开发环境

Android 官方提供了和两种方式管理Android SDK在IDEA新UI中，找到菜单中的Tools菜单，在Android子菜单下可以找到和等。

【大前端】vite忽略指定前缀的静态资源

本文介绍了在Vite开发中处理网络资源引用的解决方案。由于Vite默认会将import路径视为本地资源，当引用代理服务器上的网络资源时会出现问题。作者提出通过编写Vite插件，在transform生命周期中使用正则匹配特定前缀的import语句（如https://totp.cxjfun.top/csdn/），将其替换为字符串变量声明。这种解决方案避免了在开发时需要添加?url标识的繁琐操作，更符合实际开发需求。示例代码展示了如何实现一个简单的插件，将匹配到的import语句转换为const变量声明。

【大前端】ECharts 绘制立体柱状图

本文详细介绍了如何使用ECharts库在JavaScript中创建带有纯色和渐变效果的立体柱状图，包括MarkPoint的使用以及SVG的应用，展示了如何设置各种图形的样式和位置。

【大前端】EChart 多系列柱状图绘制背景图

自定义图标适用于任何坐标系，且显示样式可根据需要自定义实现，所以更适用于多系列柱状图绘制背景图的需求自定义图标，起始坐标都是在左上角开始option = {tooltip:{},grid:{},xAxis:[],yAxis:[],series:[},//获取对应类目的axisTick中心点坐标//通过坐标系的宽度和类目数，计算单个类目的背景return {shape:{// 相对左上角坐标},},},name:'直接访问',},

【前端开发】Vue中引入Sass、Scss

本文介绍了Vue项目中SCSS样式文件的配置和使用方法，包括创建全局样式文件、布局样式类，以及在vue.config.js中的配置。重点分析了常见问题及解决方案：样式重复编译（使用@use替代@import）、变量未定义（检查导入顺序）、@use规则冲突（确保最先声明）、私有成员访问（移除前缀）、变量重定义（更名变量）以及第三方库变量重写问题（通过新建文件导入）。文章提供了详细的代码示例和配置建议，帮助开发者正确管理Vue项目中的SCSS样式。

【云技术】Minio 入门

本文介绍了使用Docker部署MinIO对象存储服务的方法，包括安装配置、控制台使用及Spring Boot集成指南。主要内容如下:Docker部署MinIO的详细命令，强调了数据目录挂载和控制台端口配置的必要性 MinIO控制台操作指南，包括桶创建与配置、用户权限管理等功能说明 Spring Boot集成MinIO的完整代码实现，提供配置类、工具类及文件上传示例文章还特别提醒了部署注意事项，如必须挂载数据目录、控制台端口配置等关键点，并提供了个人博客链接供读者获取更多信息

【FAQ】解决qrcode.js二维码插件不支持中文的问题

本文针对Qrcode.js插件不支持中文的问题，提出了一种优化解决方案。通过分析源码发现乱码原因是插件采用UTF-16编码而未处理中文字符，作者编写了toUtf8转换函数将中文转为UTF-8格式。改版后的插件无需预先转码，直接支持中文显示，简化了开发流程。文章对比了新旧版本的使用方法，并提供了改进插件的Github下载地址，有效解决了中文乱码问题。

【FAQ】解决Element UI Form resetFields、clearValidate不起效和不显示验证状态等问题

本文分享了在使用Element-UI表单组件时遇到的三个常见问题：1) 表单ref重复导致无法获取组件；2) el-form-item的prop与v-model不匹配；3) 表单model字段与rules验证规则字段不一致。通过具体代码示例，作者详细说明了每个问题的表现和解决方法，包括修改ref名称、统一prop与v-model绑定、确保model与rules字段对应等。这些经验对于使用Element-UI开发表单功能具有实用参考价值。

MCP Client 连接 TOTP Service

TOTP Service 提供两步验证码管理服务，现已支持MCP协议集成。用户可生成个人访问令牌后，在MCP客户端（如阿里通义灵码）中配置服务器地址[https://totp.cxjfun.top/sse]并添加授权头，即可通过MCP接口管理TOTP账户。支持添加账户、获取验证码、查看账户列表和删除账户等操作，所有功能均可通过MCP协议调用实现。该集成方案简化了TOTP账户的管理流程，提升了使用便捷性。

【云技术】Nacos 入门

本文介绍了Nacos中间件在服务端和客户端的部署与使用方案。服务端推荐使用Docker容器化部署，通过Nginx代理实现安全访问；客户端分别针对Spring Boot和Spring Cloud框架提供了详细配置指南。在Spring Boot中需要手动注册服务，而Spring Cloud则支持自动服务发现。文章还特别强调了版本兼容性问题，并提供了版本对应关系表。通过Nacos可以实现配置管理和服务注册发现功能，为微服务架构提供支持。

【解决方案】window.print()打印指定元素

本文探讨了三种利用window对象打印指定元素的方法。1.直接替换当前页面的body内容，简单但可能影响框架页面功能；2.推荐使用iframe方法，可实现无感知打印且支持自定义，需注意同源限制；3.不推荐使用window.open方法，会产生可见子窗口影响用户体验。重点介绍了iframe方案的具体实现代码，包括动态创建iframe、深度拷贝目标元素和样式处理等细节。（149字）

【解决方案】Vue 3 如何手动挂载元素到指定节点

本文探讨了在Vue开发中手动创建和挂载弹窗组件的解决方案。针对组件库功能不足的情况，文章详细介绍了在Vue 2.x和3.x中如何通过createVNode、h函数创建组件，使用render方法挂载组件，并提供销毁组件的实现方法。对于多层级弹窗问题，提出了基于响应式数据的动态渲染方案，避免组件重新渲染问题。最终方案通过维护组件栈和容器状态，实现了弹窗的稳定挂载与逐层关闭功能。

【解决方案】JavaScript实现元素缩放元素、拖拽

本文介绍了通过CSS transform属性实现元素缩放和偏移的方法。关键点包括：使用scale属性进行缩放，translate实现相对位置偏移，transform-origin设置缩放原点。重点阐述了偏移量计算公式的原理，即根据鼠标当前位置计算缩放中心点。文中还提供了完整的实现代码示例，包含鼠标拖拽、滚轮缩放等交互功能，并处理了不同浏览器的兼容性问题。该方法适用于div和图片等元素的缩放控制，避免了直接修改width/height带来的布局问题。

【移动端】Android Activity实现上下左右切换动画

本文介绍了Android中实现Activity切换动画的配置方法。通过在AndroidManifest.xml中为Activity设置特定主题（Anim_Left_Right_ActivityTheme或Anim_Top_Bottom_ActivityTheme），可以控制左右或上下切换效果。在styles.xml中定义了四种动画类型：打开/关闭时的进入/退出动画。anim文件夹包含8个XML文件，使用translate标签定义动画路径，通过fromXDelta/toXDelta和fromYDelta/to

【SOLUTION】Spring Boot 集成 WebSocket

在面对大文件上传时通常遇到无法即时获取上传进度的问题，在没有WebSocket之前都是异步上传，然后通过轮询的方式实时获取上传进度。Spring如果想实现异步方法，需要在方法上添加。注解，并且在启动类或配置类上添加。方法执行，而是立即返回任务id。是异步方法，所以这里不会等待。

【FAQ】uni-app：vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

在uniapp微信小程序开发中，全局注册的组件可能无法显示，这是已知bug。解决方案是使用easycom自动扫描功能，通过在pages.json中配置custom规则实现组件自动注册。例如配置U-(.*)匹配规则，将<U-TabBar/>自动关联到@/components/TabBar/index.vue组件文件。这种方式比传统Vue全局注册更可靠，可解决uniapp中小程序组件不显示的问题。（143字）

【FAQ】NPM 引入本地依赖包

本文介绍了npm安装本地依赖包的两种方法：1）文件夹类型依赖，使用npm install <folder> --install-links命令，可实时编译修改并包含子依赖；2）压缩包类型依赖，通过npm install <tarball>命令安装本地或远程的.tar文件，适用于无外网环境。两种方式为不同场景提供了灵活的本地依赖管理方案。