- 博客(255)
- 收藏
- 关注
RSS订阅原创 前端图像热点映射（点击图片上不同区域）
本文介绍了如何使用HTML图像映射(Image Map)实现图片不同区域的点击事件。通过<map>和<area>标签配合坐标定义，可以为图片的不同矩形区域绑定点击事件。文章提供了完整代码示例，展示了如何定义多个可点击区域，并处理点击事件跳转路由。同时推荐了image-map.net在线工具帮助获取坐标，并提醒注意图片缩放可能导致的坐标偏移问题。最后建议有条件的开发者可以考虑使用SVG作为替代方案。该方法为图片分区交互提供了简单有效的实现思路。
2025-12-23 19:40:01
80
原创 vue封装通用组件发布至npm仓库
本文介绍了如何使用Vite打包Vue3组件库并发布到npm仓库的完整流程。主要内容包括：1）初始化项目结构；2）配置打包工具（Vite+TypeScript）；3）关键配置文件（package.json、vite.config.ts、tsconfig.json）的设置要点；4）打包和发布步骤。重点说明了如何通过配置确保只发布编译后的代码(dist目录)，而不暴露源代码，同时支持TypeScript类型声明。最后简要介绍了npm账号登录和发布命令的使用方法。
2025-12-14 22:49:57
158
原创 wft-vue3-picture-marker（图片标记组件）的介绍使用
摘要：介绍了一个基于Vue3.4+、element-plus和d3.js的通用图片标记组件wft-vue3-picture-marker。该组件支持在任意静态图片上添加、编辑和操作标记点，适用于平面图、游戏地图等场景。核心特性包括多种图片源支持、流畅的缩放拖拽交互、标记点样式自定义、丰富的API和事件机制。文章详细说明了安装方法、基础使用示例以及API文档，展示了组件的自定义工具栏、标记回显、内置弹窗等功能。该组件已发布到npm，两天内下载量突破1000次
2025-12-14 17:09:46
246
原创 vue连接websocket
本文介绍了HTML5 WebSocket的使用方法，并提供了一个简单的封装类SocketUtil。该类包含连接、打开、发送消息、关闭连接等基本功能，使用TypeScript编写。文章还展示了在Vue组件中的实际应用示例，包括初始化连接、发送数据、接收消息和组件卸载时关闭连接等操作。该封装方案适用于一般WebSocket应用场景，代码简洁实用。
2025-11-30 16:08:21
201
原创 原生table中的td设置固定宽高（宽度超出自动换行、高度溢出滚动）
本文介绍了在原生HTML表格中实现固定宽高单元格的方法。由于<table>的表格布局模型限制，直接给<td>设置固定宽高和溢出滚动效果不可行。解决方案是在每个<td>内嵌套一个div容器，将样式和滚动控制交给这个div。通过设置table-layout:fixed、固定列宽、清除padding，并在内层div上设置max-height和overflow:auto，实现了单元格内容超出时自动换行和滚动显示的效果。这种方法比使用第三方UI库更灵活，便于自定义样式和处理特殊表格
2025-11-30 15:48:37
137
原创 实时记住滚动位置，下次进入页面自动滚动到上次的位置
摘要：本文演示了一个Vue3组件实现滚动位置记忆功能。通过设置固定高度的滚动容器，在用户滚动时使用sessionStorage记录滚动位置，并在下次进入页面时自动恢复。代码使用Composition API实现，包含数据获取、滚动事件监听和样式设置，适用于需要保持浏览位置的长列表场景。
2025-11-30 15:26:59
140
原创 vue使用d3实现图片的缩放、拖动、添加/删除标记等功能(完整版前端+后端)
上一篇已经有写该功能的demo了哈，自己玩自己研究看那一篇也是可以的，但真正用起来的时候会发现很多问题。上一篇主要的问题是坐标不准，就是添加标记存在数据库后，下次进来回显的时候坐标不对，因为每个人的电脑分辨率、浏览器缩放啥的都不一样，上一篇存的是我们当前点击的相对容器的真实坐标，分辨率不一样的话，容器的宽高会变化，但是我们的坐标存的是死的，所以会出现坐标不准。还些问题是换成Edge浏览器后底图没填满、进行缩放时图片的也会同等的逆向缩放，但是！
2025-11-02 18:56:05
243
原创 vue使用d3实现图片的缩放、拖动、添加/删除标记等功能（demo）
这篇文章介绍了一个基于Vue3和D3.js的伪地图交互组件实现方案。主要功能包括：地图图片加载、缩放拖动操作、标记点显示与交互（鼠标悬停信息展示、双击编辑、右键菜单删除/编辑）。文章提供了完整的Vue组件代码，包括主组件(index.vue)、自定义钩子(useMapImage.hook.ts)和右键菜单组件(Contextmenu/index.vue)。该方案采用了PNPM作为包管理工具，依赖d3.js实现核心地图功能，支持通过开关控制标记点编辑功能，并实现了标记点位置随地图拖动保持相对不变的特性。
2025-10-22 19:02:30
223
原创 使用d3实现图片的缩放和拖动
本文介绍了一个使用D3.js实现的图片缩放拖拽功能。通过引入D3.v7库，创建SVG容器和图片组，实现鼠标滚轮缩放和按住拖动的交互效果。代码设置了缩放范围（1-7倍），并防止图片移出容器边界。关键功能包括：1）初始化SVG尺寸；2）添加图片元素；3）配置zoom行为；4）限制变换范围确保不出现白边。该方案适合需要查看大图的场景，代码简洁，依赖轻量。
2025-10-21 14:57:08
67
原创 echarts监听dataZoom拖动缩放事件
本文介绍了如何通过ECharts实现图表数据缩放功能并向外抛出事件。通过监听"datazoom"事件获取缩放后的起始/结束索引和X轴值，使用防抖处理避免频繁触发。文章提供了完整的Vue组件代码，包括图表初始化、数据绑定、事件监听和销毁处理，并展示了如何获取缩放后的数据范围传递给父组件。该方案解决了官网未明确说明的"datazoom"事件监听问题，适用于需要响应图表缩放交互的场景。
2025-09-21 19:06:28
298
原创 uniapp实现view块级元素横竖屏切换
Uniapp实现图表横竖屏切换功能，通过CSS旋转和变换实现。核心思路是：使用isFullScreen变量判断当前状态，在横屏模式下将容器旋转90度，并设置宽高为100vh/100vw，通过transform调整位置避免错位。代码包含视图切换按钮、过渡动画效果及样式调整，虽然CSS实现略显复杂，但提供了基本可用的解决方案，开发者可根据需求进一步微调位置参数。该方案简单实用，适合大多数横竖屏切换场景需求。
2025-09-21 18:37:52
297
原创 echarts实现点击图表添加标记
本文介绍了如何扩展ECharts图表的事件监听功能。作者封装了一个Vue组件，通过在图表容器div上直接监听点击和右键事件，解决了ECharts原生事件只能监听特定位置的问题。点击图表时显示对应横轴数据，右键则清除标记。组件实现了响应式布局、数据监听和清理功能，并分享了一个使用经验：由于ECharts会清空容器内容，开发者需要将额外元素放在图表容器外部或使用右键等替代方案。该方案为需要扩展ECharts交互功能的开发者提供了参考。
2025-09-06 17:02:58
167
原创 uniapp连接websocket（附上前后端测试代码）
摘要：本文介绍了在uniapp中封装WebSocket连接的方法，包含前端和后端实现代码。前端通过uni.connectSocket封装了一个Socket类，提供连接、发送消息、接收消息和关闭连接等功能。后端使用Spring Boot的WebSocket实现，包含连接管理、消息处理和异常处理。文章还提供了页面调用示例和注意事项，如多连接场景下的对象管理建议。前后端代码均采用模块化设计，便于在项目中直接使用或扩展。
2025-08-31 19:31:27
631
1
原创 kkfileview预览Excel文件去掉左上角的跳转HTML预览、打印按钮
摘要：本文介绍了去除KKFileView预览.xlsx文件时左上角【跳转HTML预览】【打印】按钮的多种方法。首先推荐尝试通过URL参数控制（如office.viewState=hide、showMenu=false等），若无效则采用终极方案：解压修改jar包前端代码（officeweb.ftl文件），删除按钮相关代码后重新打包部署。文章详细说明了从备份jar包到最终重启服务的完整操作流程，适用于不同版本的KKFileView。（149字）
2025-08-19 18:34:02
1136
原创 使用nginx反向代理kkfile
本文介绍了在使用Nginx代理时修改文件服务访问路径的配置步骤。主要包含：1）修改后端返回的链接地址，添加/kkfile前缀；2）在Nginx中配置反向代理规则，将/kkfile请求转发到原文件服务地址；3）修改kkfile服务的配置路径和base.url；4）重启kkfile和minio服务（包括通过systemd管理或nohup方式启动）。通过这些步骤实现通过代理访问文件服务，同时保持原有功能不变。
2025-08-15 09:40:35
628
原创 【linux报错】nohup: failed to run command “java‘: No such file or directory
要解决这个问题，我们首先确保已经安装了java，有对应的jdk，如果还是报如上错误，那就是环境变量没配置，或者配置的不够！命令时，找不到该命令。这通常意味着 Java 没有安装，或者虽然安装了但没有正确配置环境变量。文件都需要配置一下哈，这样就可以全局使用java命令了。编辑你的 shell 配置文件（如。大家根据自己的情况 进行修改即可。
2025-08-14 13:56:55
673
原创 浏览器自动播放策略
本文介绍了浏览器自动播放限制的解决方案。由于浏览器禁止未经用户交互的自动播放，作者提出三步策略：1)初始化时创建静音的音视频元素；2)在用户操作时解除静音；3)需要播放时设置资源路径并调用play方法。文中提供了AudioPlayer工具类实现，包含插入DOM、解除静音、播放控制等方法，并演示了在Vue项目中的使用流程。该方法通过预加载和用户交互授权的方式，绕过了浏览器限制，实现了音视频的自动播放功能。
2025-08-09 22:11:34
273
原创 linux常用命令
本文汇总了Linux系统常用的终端命令及其功能，涵盖文件操作、系统管理、进程控制、网络工具等类别。包括基础命令如ls、pwd、cd，文件操作命令cp、mv、rm，文本处理工具grep、cat、less，系统管理命令ps、top、df，网络工具ssh、wget，以及权限管理chmod、chown等。同时介绍了进程控制命令kill、jobs，环境变量查看printenv，用户管理adduser、passwd等实用命令，为Linux系统日常使用提供快速参考。
2025-07-31 15:23:49
1121
原创 docker基础部署
本文介绍了作为前端开发者平时常用的Jenkins+Docker自动化部署流程。通过Jenkins配置Git地址和分支，实现代码提交即触发构建，自动打包镜像并推送至服务器。部署时需登录堡垒机执行Docker命令：查看容器状态(docker ps)、拉取镜像(docker pull)、修改版本标签、停止旧容器(docker stop)、启动新容器(sh start.sh)等操作。还提供了查看日志(docker logs)、删除镜像(docker rmi)等常用命令。这些基础运维知识能满足前端开发者的日常部署需求
2025-07-13 15:52:14
672
原创 uniapp实现钉钉网页应用jsapi鉴权、免登功能（前后端）
这篇详细讲述uniapp开发钉钉网页应用（钉钉微应用）中实现钉钉JSAPI的鉴权和身份免登相关的功能，包含前端和后端
2025-07-10 13:10:11
1114
2
原创 Vite项目打包使用gzip压缩
《vite-plugin-compression：优化Vite项目性能的压缩插件》摘要 vite-plugin-compression是一款专为Vite项目设计的插件，支持Gzip和Brotli压缩，能有效减小资源文件体积，提升页面加载速度。该插件特别适用于使用Vite构建的前端项目，包括Vue 3和基于Vite的uniapp项目。通过简单的配置（如设置压缩算法、文件后缀、压缩阈值等），开发者可以轻松实现资源压缩。实际案例表明，该插件在解决uniapp钉钉小程序版本上传问题中发挥了关键作用。用户可根据项目需
2025-07-08 12:43:07
307
原创 动态执行js
JavaScript动态执行代码有四种方式： eval：同步执行，在当前作用域运行代码（如示例输出a:2）； setTimeout：异步执行，在全局作用域运行字符串代码（输出a:1）； script标签：同步执行，通过创建脚本标签注入代码到全局（输出a:1）； Function构造函数：同步执行，在全局作用域生成函数执行（输出a:1）。 注意：不同方式的作用域和执行时机不同，应谨慎使用以避免安全风险。
2025-06-29 15:07:46
115
原创 Vue3中不太知道的事儿
《Vue组件通信与相关知识点总结》摘要：文章总结了Vue开发中组件通信的关键知识点：1.子传父事件是同步执行的，父组件事件先触发；2.父传子时未定义的props会保存在attrs中，事件同样可作为属性传递；3.介绍ref绑定的三种方式（常规ref、3.5新特性useTemplateRef和函数形式）；4.组件暴露方法的原理（defineExpose实际操作实例的exposed属性）；5.父组件可通过@vue:前缀监听子组件生命周期。这些知识点有助于开发者更深入理解Vue的组件通信机制。
2025-06-16 11:02:22
206
原创 微前端之micro-app数据通信
本文介绍了微前端框架micro-app的主子应用通信方式。主要内容包括：主应用向子应用传递数据的两种方式：通过组件props传递或使用setData方法子应用接收主应用数据的方法：window.microApp.getData()或监听addDataListener事件子应用向主应用发送数据的三种方式：dispatch方法、主应用监听datachange事件、主应用使用addDataListener监听环境配置要点：子应用需要支持跨域访问，vite应用建议使用iframe沙箱模式
2025-06-01 10:57:27
227
原创 @recogito/annotorious图像标注库
《Annotorious图像标注工具集成指南》介绍了如何在Vue项目中集成@recogito/annotorious图像标注库。核心步骤包括：通过pnpm安装主库及辅助工具包（多边形、标签、倾斜框等扩展功能）；在Vue单文件中初始化标注器并配置多种绘图工具；实现数据回显功能（支持批量添加或单独添加标注数据）和保存功能（获取所有标注数据）。示例代码展示了完整的组件实现，包含工具栏布局、图片容器和响应式样式，演示了如何通过API进行标注操作和数据管理。该方案适用于需要实现复杂图像标注功能的Web应用开发。
2025-05-27 16:36:07
364
原创 Vue3实现轮播表（表格滚动）
本文介绍了如何使用Vue3实现无缝滚动效果，并提供了一个简单的示例代码。首先，通过pnpm add vue3-seamless-scroll安装相关依赖。接着，在模板中使用Vue3SeamlessScroll组件，并通过v-model控制滚动，list属性绑定数据。示例中展示了如何通过onMounted钩子函数异步获取数据，并在数据加载完成后渲染滚动内容。此外，还提供了样式代码，确保滚动表格的布局和外观。文章最后提到，由于使用了Vue3和TypeScript，配置项需要标记为any类型以避免类型错误，并建议
2025-05-22 18:36:58
624
原创 前端上传图片前对图片先进行压缩
前端对图片压缩主要两种形式：一种是手动压缩项目中的静态资源图片，这样在打包的时候可以减小打包体积。另一种就是我们在上传图片到后端服务器之前在前端对当前的图片文件进行压缩。当然我们可以在上传前限制上传图片的大小，但其实限制图片大小体验不好，比如限制个2MB，现在的手机随便一拍原图可能就10多MB，所以我们这篇就说下对图片Blob的压缩方式。canvas是可以压缩图片的哈，不过它只能压缩JPG、JPEG格式图片，对png格式却无能为力。这篇说一下通过一个插件来实现对文件Blob的压缩。
2025-04-18 13:45:16
376
原创 Vue中将pdf文件转为图片
平时开发中，我们经常遇到的场景应该是调用后端接口返回给前端pdf格式的文件流，然后我们可以通过URL.createObjectURL的方式转为object url临时路径然后可以通过window.open的方式来打开一个新的浏览器页签来进行预览，效果如下图：但有时候这样满足不了的需求，它不想这样预览，不想要那么多乱七八糟的东西，我只要PDF文件中的内容，然后在项目页面中类似个弹窗似的直接展示pdf文件的内容。所以，这篇就来说一下，我们可以将pdf文件转为图片来进行展示。
2025-04-01 18:56:43
786
原创 uniapp选择文件使用formData格式提交数据
在vue项目中，我们有个文件，和一些其他字段数据需要提交的时候，我们都是使用axios 设置请求头中的Content-Type: multipart/form-data，然后new FormData的方式来进行提交。但是uniapp使用uni.request的方式就不行了..
2025-03-30 21:22:00
1280
原创 java中常用判空方法、两个值是否相等方法
java中感觉判空的一些方法太多了，感觉有点儿乱糟糟的，所以这篇就简单总结一下我在项目中常用的一些方法吧，并不全哈，只是自己常用的，平时也够用。
2025-03-03 17:14:20
432
原创 uniapp图像转换（获取本地选取或拍照的图片的base64、Blob、图像和base64的转换）
uniapp中提供了uni.chooseImage api 这个是从本地相册选择图片或使用相机拍照。这个api无论是在H5还是app还是小程序等都是适用的，回调函数中我们能拿到图片的路径列表，我们现在要把改路径转为base64编码。但如果不是小程序的话 上述代码就会getFileSystemManager报错， 所以我上面使用了#ifdef MP 条件编译。如果是H5、或者app端的话，我这里使用的uni Dcloud插件市场的一个插件。
2025-02-19 09:29:39
1372
原创 uniapp调用微信js-sdk获取当前地理位置信息（前后端）
uniapp官网提供了uni.getLocation方法，但是基本上不能使用，官方也有提出：然后我们接着官网往下划，可以看到有注意事项：因为我这里使用的是H5 微信公众号，所以就来介绍一下微信公众号中调用微信的JS-SDK来获取当前地理位置信息。uni-app 中为兼容微信小程序生态存在全局的 wx 对象，而微信 JS-SDK 也是注册全局的 wx 对象，为避免混淆，可以将微信 JS-SDK 中的 wx 对象改名先来说下整体的实现吧。
2025-01-26 14:11:42
627
原创 uniapp使用uni.navigateBack返回页面时携带参数到上个页面
我们平时开发中也经常遇到这种场景，跳转一个页面会进行一些操作，操作完成后再返回上个页面同时要携带着一些参数。其实也很简单，也来记录一下吧。假设从A页面 跳转到 B页面。
2025-01-24 11:20:48
2391
原创 springboot中DTO、VO、Entity相互转换
这个很简单，其实就是标识前端传递的参数字段是什么，就是允许我们后端接受的参数字段和前端传递的字段可以不一致，如果不一致我们后端就可以使用@JsonProperty进行映射。同样的我在VO中使用@JSONField注解，上面的例子是把DTO转为VO，VO中的@JSONField对应的就是DTO中的字段。在我们平时开发中，dto、vo、entity之间的相互转换是很频繁的操作，这篇就简单记录一下我在平时开发中转换的方法。VO：平时开发中，一般会定义VO（view object）来封装返回给前端的数据。
2025-01-21 15:22:23
1316
原创 uniapp（小程序、app、微信公众号、H5）预览下载文件（pdf）
在uniapp开发小程序或者H5中，都可以使用以下方式预览文件之前其实写过一篇，就是使用uniapp官网提供文件下载、文件保存、文件打开的API，感兴趣也可以去看下。
2025-01-17 17:30:40
921
原创 uniapp实现“到这儿去”、拨打电话功能
在 UniApp 中实现“到这儿去”的功能，即调起地图导航至指定位置，对于不同的平台（小程序、H5、App）有不同的处理方式。下面将简单介绍如何在这些平台上实现该功能，并讨论位置信息的获取。后面需求会用到，先来找一些相关资料，并不一定很准确，但也来记录一下（本人还未使用哦，但可以做个参考）
2025-01-15 16:53:58
576
原创 uniapp实现微信公众号网页（H5）授权登陆获取用户信息（前端+后端）
这篇说一下使用uniapp开发实现微信公众号网页授权、以及获取用户信息的前端、后端的实现。开始之前呢，先提一嘴uniapp开发微信小程序的微信登陆，之前也写过一篇，uniapp微信小程序登陆的，大家感兴趣可以去了解一下，因为这uniapp、一会儿小程序、一会儿公众号、一会儿app、一会儿h5的搞得有点儿乱糟糟的。
2025-01-12 20:44:04
3139
原创 uniapp页面高度设置（铺满可视区域、顶部状态栏高度、底部导航栏高度）
这里说几种在uniapp开发中，关于页面设置高度的几种情况。宽度就不说了哈，宽度设置百分比都会生效。首先我们要知道平时开发中，如果说没在uniapp做特殊处理，即正常情况下，所有的页面（.vue文件）中都是没有高度的（和vue一样），也就是说给最外层的的view标签设置高度为100%是没啥作用的，只要没内容高度依然是0。
2025-01-10 11:36:30
3299
face recognition demo（vue、h5、uniapp-h5、uniapp-wx）
2025-01-25
TexturePacker3.0.9（cocos做图集用到了）
2024-04-16
electron-quick-start-exe(cocos打包桌面程序 .exe)
2024-03-28
录屏软件obs-studio
2024-03-01
js解析Cron时间表达式为中文描述
2023-11-14
实现一个mini-vue
2023-07-30
基于Vue3+ts+AntV X6实现的流程图编辑器
2022-10-17
基于Vue2+element-ui+AntV X6实现的流程图编辑器
2022-10-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人