fxshy的博客

原创 web端使用roslib.js-ros2djs-ros3djs实现ros机器人在网页端可视化

有技术问题可以留言交流。

原创 Cursor 前端Global Cursor Rules

本文档规定了前端JavaScript开发的规范准则，主要涵盖：1）技术栈默认使用现代JS(ES2019+)，尊重项目现有框架；2）代码风格要求采用camelCase/PascalCase命名，优先使用const/let和模块化；3）项目结构需遵循现有目录约定；4）强调上下文理解的重要性，要求先分析再编码；5）网络请求和状态管理应复用现有方案；6）修改代码时保持最小变更原则；7）样式修改需兼容原有结构；8）类型和测试需符合项目现有规范。整体采用简洁实用的中文技术文档风格。

原创 threejs编写加载本地的obj、gltf（glb）、3dtiles数据可视化页面

该HTML文档实现了一个基于Three.js的3D模型加载器，支持GLB、OBJ和3DTiles格式。主要功能包括：1) 动态加载多种3D模型格式；2) 分组管理不同格式的模型；3) 提供GUI控制界面切换不同图层；4) 自动调整相机位置适应场景；5) 支持模型加载状态显示。系统通过异步加载方式处理大量模型，并实现了错误重试机制。使用OrbitControls实现场景交互，并通过3D-Tiles-Renderer库高效渲染大规模3D瓦片数据。

原创 在 Vue 3 + Vite 项目中使用 Less 实现自适应布局：VW 和 VH 的应用

本文介绍了一个基于Vue项目的前端响应式布局实现方案。首先在utils.less中定义响应式单位换算函数（vw/vh）和字体大小适配函数，以1920x1080设计稿为基准进行动态计算。其次在vite.config.js中配置Less预处理器的全局引入，并设置路径别名。最后通过实际案例展示了如何使用这些函数来定义响应式元素尺寸（如.header-icon的宽高）和字体大小（如.result-title的18px字体）。该方案实现了元素和字体随视口尺寸的自适应缩放。

原创 python使用ffmpeg对视频进行转码

本文介绍了使用Python和FFmpeg进行视频格式转换的步骤。首先需要确保系统已安装FFmpeg并将其路径添加到环境变量中。然后通过Python脚本调用ffmpeg-python库实现格式转换，包括输入输出文件路径设置和转换命令执行。最后检查转换结果，并提供了常见问题的解决方法，如FFmpeg路径配置、权限问题和错误信息分析。该方案可以帮助用户快速实现视频格式转换需求。

原创 CentOS 7上安装并配置Nginx监听81端口的完整指南

本文详细介绍了在CentOS7上安装Nginx并配置监听81端口的完整流程。内容包括：系统更新、Nginx安装、端口配置、防火墙设置、服务启动验证等核心步骤。特别提供了前端部署和API代理配置方法，以及解决权限不足和SELinux限制的实用方案。通过本教程，用户可快速搭建Nginx服务器并处理常见问题，实现81端口的正常访问。

原创 解决 Web 应用加载地图资源时的 HTTP 与 HTTPS 混合内容问题

地图资源加载失败的主要原因是混合内容（HTTP/HTTPS协议冲突）和跨域请求（CORS）限制。解决方案包括：1）确保地图服务同时支持HTTP/HTTPS协议；2）统一使用HTTPS协议；3）检查并配置正确的CORS策略。建议在生产环境中强制使用HTTPS，避免混合内容安全问题，并确保服务器响应头包含正确的Access-Control-Allow-Origin设置。

原创 Vue3和element plus在el-table中使用el-tree-select遇到的change事件坑

摘要：在el-tree-select组件中使用change事件时，直接传递row对象无法获取最新数据。解决方案是通过$index结合tableData数组来获取当前行数据。示例代码展示了如何在el-table-column中使用el-tree-select，并通过scope.$index获取行索引，在handleTreeChange方法中根据索引从tableData中获取对应行数据，完成目录树或分类树的绑定操作。该方法确保了数据一致性，并提供了错误处理和成功提示功能。

原创 解决首次加载时白屏的问题,loading 占位

【代码】解决首次加载时白屏的问题,loading 占位。

原创 vue3 element plus 省市区街道 el-select 下拉联动选择代码

vue3 element plus 省市区街道 el-select 下拉联动选择代码

原创 vue3和element plus, node和express实现大文件上传, 分片上传,断点续传完整开发代码

本文实现了一个基于分片上传和断点续传的文件上传系统。前端使用Vue3+ElementPlus构建上传组件，支持5MB分片上传、进度显示和断点续传功能。后端采用Express框架处理文件分片，通过检查已上传分片实现断点续传，并在所有分片上传完成后合并文件。系统特点包括：1）前端实时显示上传进度；2）分片上传减少网络波动影响；3）自动检查续传状态；4）提供调试信息面板。后端配置了CORS支持跨域访问，并实现了分片合并逻辑。该方案适用于大文件可靠上传场景。

原创 cesium的3dtiles模型矫正工具

该工具可快速校正3D模型的地理位置偏差。使用方法：1）输入模型URL返回初始位置；2）手动调整经纬度中心点及XYZ旋转参数；3）导出transform数据替换tileset.json中的对应字段即可完成校正。操作简单，能确保模型下次加载时显示在正确位置。核心功能包括位置复位、参数调整和数据导出三个步骤。

原创 node快速静态服务(带CORS)

node快速静态服务(带CORS)

原创 后端返回数据超出长度前端精度问题解决json-bigint

【代码】后端返回数据超出长度前端精度问题解决json-bigint。

原创 vue3和elementPlus中的el-dropdown-menu中的背景样式修改

vue3和elementPlus中的el-dropdown-menu中的背景样式修改

原创 vue3 vite7 Windows下的 docker跑前端项目热更新,实现代码的热更新

这个命令的意思是：用。

原创 Windows下开启了代理使用docker启动项目遇到安装包遇到超时构建不成功问题

本文介绍了Docker容器中配置npm镜像源和代理的方法。关键点包括：1）设置淘宝镜像源加速npm下载；2）Windows/Mac下通过gateway.docker.internal配置代理，解决容器与宿主机网络隔离问题；3）--network="host"模式的优缺点及适用场景，特别说明其在Linux和Windows/Mac下的差异；4）提供完整的Dockerfile配置示例，包含代理设置、依赖安装和Vite开发服务器启动命令。文章还附有成功和失败的构建截图，帮助开发者直观理解配置效果

原创 前端大文件上传,分片,断点续传

----

原创 div自定义滚动条

【代码】div自定义滚动条。

原创 element Plus 修改 el-tree 勾选框样式

【代码】element Plus 修改 el-tree 勾选框样式。

原创 cherryStudio electron因为环境问题无法安装解决方法或打包失败解决方法

cherryStudio electron因为环境问题无法安装解决方法或打包失败解决方法

原创 Web Worker 实战：让前端计算不卡顿

【代码】Web Worker 实战：让前端计算不卡顿。

原创 ArcGIS-JS-图层加载大全

原创 Cesium加载EPSG:4547坐标系WMTS地图：自定义TilingScheme实现高效无偏移渲染

原生cesium自定义tilingScheme加载EPSG:4547WMTS地图服务丝滑流畅解决地图偏移问题

原创 vue2和element,vue3和elementPlus表单的坑

【代码】vue2和element,vue3和elementPlus表单的坑。

原创 el-dialog的显示关闭并不会销毁组件, 如果在弹框里面使用了组件需要实时v-if销毁,否则会有bug

【代码】el-dialog的显示关闭并不会销毁组件, 如果在弹框里面使用了组件需要实时v-if销毁,否则会有bug。

原创 ai聊天流式响应，阻塞式和流式响应 nginx遇到的坑

问题现在做ai的流式请求，在开发环境使用代理访问接口，显示是正常的。上到正式环境，代理通过nginx配置可以访问到流式接口。在本地测试postman请求流式接口，返回的东西是流式返回， 在正式环境里面使用postman请求流式接口是阻塞式的返回，这个是哪里出的问题导致的。你描述的这个问题很可能是导致的。你在本地开发环境和正式环境的区别主要有两个关键点：本地代理或直接访问时能正常返回流式响应；正式环境通过后，请求就变成了阻塞式，Postman 收到的是一次性返回，而不是边传输边输出。

原创 GitLab 一台电脑下面多个账号导致代码拉不下来

2-在本电脑中自己账号有权限的项目,执行一次代码拉取,会让你输入账号密码,这个信息会被记录到。, 把这个文件下记录的账号信息删除(是否需要备份自行决定,这里面的是其它人多一些账号信息)是否记录了自己的账号信息, 重新拉取没有拉去下来的项目代码。1-在win下面找到用户,在用户下找到配置项。

原创 WebGIS 实时渲染学习路线

1️⃣。

原创 vue3 + element-uiPlus 对复杂对象型数组进行表单验证完整代码

【代码】vue3 + element-uiPlus 对复杂对象型数组进行表单验证完整代码。

原创 Vue3父子组件双向绑定值用例

【代码】Vue3父子组件双向绑定值用例。

原创 vue3中使用语法糖子组件更新父组件的值, 不能用value

【代码】vue3中使用语法糖子组件更新父组件的值, 不能用value。

原创 element table 表头header-cell-style设置的表头不生效

我抓耳挠腮的看了半天，最后手写了个样式进去，但还是气不过，把他改过来，最后在多次查资料（搜索）终于找到了原因，或许是表格父级元素使用了flex布局的原因，只要加个!important就可以了，像这样。header-cell-style是官网写的修改el-table表头样式的回调，且说header-row-style不生效也就罢了，header-cell-style也不生效是不是有点过分。

原创 浏览器中的 preview 和 response 的值不一致,精度掉失,导致请求接口出错,后台把数字转成字符串解决

js 前端 浏览器 preview 和 response 的值不一致,精度掉失

原创 element select 下拉框不能回显--坑

element select 下拉框不能回显--坑

原创 vue3中关闭卡片每次打开的都是上一个Echarts,是因为Options指引问题导致,其实已经销毁了,是Options没有深拷贝

原创 js 数组对象找出互斥项

【代码】js 数组对象找出互斥项。

原创 vue3 elementPlus 时间格式YYYY-MM-DD HH:mm:ss

vue3 elementPlus 时间格式YYYY-MM-DD HH:mm:ss

原创 vue3解决el-descriptions的label被挤压换行以及内容过长时换行问题

el-descriptions的label

原创 el-descriptions中的label宽度修改不生效,设置宽度即可

【代码】el-descriptions中的label宽度修改不生效,设置宽度即可。