- 博客(96)
- 收藏
- 关注
RSS订阅
原创 基于Vue+Python+Orange Pi Zero3的完整视频监控方案
本文提出基于Vue+Python+Orange Pi Zero3的视频监控方案，包含服务端和客户端的完整实现。服务端采用Python+Flask框架，通过OpenCV采集摄像头视频流并处理（添加时间/IP水印、运动检测），提供MJPEG格式视频流接口。客户端采用Vue构建交互界面，通过WebSocket实现视频实时播放和远程控制（调整分辨率、帧率等）。方案包含详细的环境配置说明、两端完整代码及注释，确保各模块清晰可懂。系统支持跨平台访问，具备低延迟、可扩展等特点，适用于智能家居、安防监控等场景。
2025-11-03 11:32:34
413
原创 leaflet学习笔记-初始化vue项目（一）
Leaflet是一款开源的轻量级交互式地图可视化JavaScript库，能够满足大多数开发者的地图可视化需求，其最早的版本大小仅仅38 KB。Leaflet能够在主流的计算机或移动设备上高效运行，其功能可通过插件进行扩展，拥有易于使用的、文档完善的API，提供了简单、可读性高的源代码。
2023-12-27 15:15:28
1085
原创 leaflet学习笔记-leaflet-ajax获取数据（五）
地图开发中都会用一些GeoJSON数据进行渲染，这是用就会需要加载GeoJSON数据，这时就可以使用leaflet-ajax进行数据的获取。
2023-12-27 15:08:09
1012
原创 leaflet学习笔记-地图图层控制（二）
Leaflet的地图图层控件可控制两类图层：一类是底图图层（Base Layers），一次只能选择一个图层作为地图的背景图层，即底图图层，在地图图层控件中用单选按钮控制；另一类是覆盖图层（Overlays），也就是覆盖在底图上的其他图层，一次可以覆盖一个图层，也可以覆盖多个图层，甚至可以不覆盖任何图层，在地图图层控件中用复选框控制。
2023-12-27 15:00:59
1814
1
原创 在 Ubuntu ARM 架构系统中安装并使用花生壳实现内网穿透
本文介绍了在ARM架构Ubuntu系统（如树莓派）上安装花生壳实现内网穿透的方法。首先需确保系统联网并注册花生壳账号，提供了一键脚本安装和手动下载两种安装方式。安装后通过命令行获取登录信息（SN码和初始密码），在管理平台配置内网映射规则。文中包含常用操作命令和注意事项，包括穿透失败排查方法、免费版限制说明及ARM64系统的适配提示。
2025-10-29 09:51:03
902
原创 Jenkins Ubuntu 安装指南
本文提供了两种Jenkins安装方法：官方包安装（推荐生产环境）和WAR包安装（备选方案）。官方包安装包含Java安装、Jenkins配置及服务启动步骤，并附有详细的故障排查指南。WAR包方式则提供更灵活的独立部署方案，包括创建系统服务的方法。两种方式都包含防火墙设置、初始访问和密码获取说明。文档特别强调端口冲突、Java环境等常见问题的解决方案，并建议根据实际环境选择安装方式，生产环境推荐官方包，开发测试可选用WAR包。全文提供了完整的命令代码和配置示例，便于直接操作使用。
2025-10-22 14:03:50
332
原创 香橙派 USB 摄像头完整教程 - fswebcam 详解
摘要：本文详细介绍了香橙派Zero 3配合USB摄像头的完整使用指南，包括硬件连接（推荐5V 2.5A电源）、系统检测（lsusb、/dev/video0）、软件安装（v4l-utils、OpenCV）和测试方法（V4L2工具、Python脚本）。提供了常见问题解决方案如设备识别失败、画面卡顿等，并建议了监控系统、视频流和AI视觉等进阶应用场景。重点强调了供电稳定性和分辨率调整等关键注意事项。（149字）
2025-10-15 12:50:00
372
原创 Orange Pi Zero 3 开机时自动运行python脚本，实现OLED信息打印服务
在Orange Pi Zero 3上设置开机自启脚本/home/orangepi/python3/oled_wifi_cpu_info.py，推荐使用systemd服务方式。重点步骤包括：创建服务文件时确保正确配置用户/组权限和绝对路径；设置网络依赖After=network-online.target；通过systemctl管理服务状态。若遇status=217/USER错误，可先以root身份测试或检查用户权限。备选方案可通过/etc/rc.local实现，但systemd更可靠且提供日志排查功能。需特
2025-09-21 00:20:20
861
原创 Orange Pi Zero 3 上使用 Python 控制 I2C OLED 屏幕
本文详细介绍了在Orange Pi Zero 3开发板上使用Python控制I2C接口的SSD1306 OLED屏幕的完整步骤。内容包括：硬件连接指南（VCC、GND、SDA、SCL引脚配置）、系统I2C接口启用方法、Python库（luma.oled）安装说明，以及完整的测试脚本代码。脚本演示了如何显示文字、绘制图形和实时时钟。最后提供了常见问题解决方案，如I2C总线识别、地址设置、权限问题等注意事项，帮助用户快速实现OLED屏幕控制。
2025-09-20 21:05:14
514
原创 OrangePi OS（OrangePi 操作系统）软件应用安装
摘要：OrangePi OS有两个版本——基于Arch Linux的OrangePi OS(Arch)和基于Android的OrangePi OS(Droid)。前者主要通过pacman或yay命令安装软件（支持官方仓库和AUR），后者则像安卓设备一样安装APK文件。用户需先区分系统版本：Arch版采用Linux终端操作方式，适合开发者；Droid版采用安卓应用安装方式，适合普通用户。关键区别在于Arch版使用.pkg.tar.zst软件包，Droid版使用.apk安装包。
2025-09-12 18:02:56
740
原创 Orange Pi 服务器搭建指南
香橙派服务器搭建指南 香橙派是性价比高的单板计算机，适合搭建轻量级服务器。你需要准备主板（如Orange Pi PC3）、16GB+存储卡、5V/2A电源等硬件。安装Armbian/Ubuntu系统后，配置网络并开启SSH远程访问。可安装Nginx、MySQL或Docker部署Web/数据库服务。安全方面需更新系统、配置防火墙，建议修改默认密码并使用SSH密钥登录。如需外网访问，可通过内网穿透工具（如cpolar）或路由器端口转发实现。通过1Panel等面板可简化管理。
2025-09-09 14:27:56
673
原创 基于 Leaflet 的地图框选截图功能完整实现详解
本文介绍了基于Leaflet的地图截图工具实现，包含核心逻辑和用户界面两部分。核心逻辑(UseMapScreenshot.js)封装了地图截图功能，提供矩形框选、区域截图、自动定位等功能，使用html2canvas实现截图并支持高清屏幕适配。用户界面(mapScreenshotTool.vue)采用Element UI组件，提供简洁的操作按钮和提示信息。该工具支持框选区域自动定位、截图下载等功能，并处理了资源清理和错误提示，适用于WebGIS系统中的地图截图需求。
2025-08-13 17:39:39
921
原创 天地图离线瓦片数据下载及本地化部署
摘要：本文详细介绍了在QGIS中使用天地图插件和Qtiles插件下载天地图XYZ切片到本地的完整流程。内容包括：天地图插件的安装与密钥配置、Qtiles插件的安装与参数设置、XYZ切片导出步骤（包括范围选择、缩放级别设置和瓦片格式选择）、常见问题解决方法以及将切片部署到Nginx服务器的操作指南。文章还提供了高级技巧，如批量导出多区域和使用Leaflet加载离线瓦片的方法，并附有操作截图和代码示例。该教程适用于需要获取天地图离线数据的用户，可用于野外作业或内网部署场景。
2025-07-21 18:53:59
2217
原创 CentOS 系统上部署一个简单的 Web 应用程序
本文介绍了在CentOS系统上部署静态网站的详细步骤：1）更新系统包；2）添加Nginx官方仓库并安装；3）启动并设置开机自启Nginx服务；4）配置防火墙放行HTTP/HTTPS流量；5）将网站文件放入默认目录/usr/share/nginx/html；6）测试Nginx配置语法；7）重新加载服务使配置生效。完成上述操作后，访问服务器IP即可看到默认的Nginx欢迎页面。整个过程涵盖了Web部署的基础配置流程。
2025-07-21 17:46:55
510
原创 前端开发冷知识-requestIdleCallback优化主线程任务调度的API
requestIdleCallback是浏览器提供的优化API，允许在空闲时段执行低优先级任务，避免阻塞关键渲染和交互。它适用于日志上报、数据预取等非紧急任务，需确保任务可拆分且耗时短（<5ms）。使用时要注意兼容性（不支持IE/旧Edge），避免DOM操作，并谨慎使用超时参数。与requestAnimationFrame、setTimeout相比，更适合后台任务处理。通过分片处理大数据等场景，能有效提升页面性能，但需设计冗余逻辑，因回调可能被跳过。关键任务应使用其他API。
2025-06-12 17:54:17
1117
原创 vite学习笔记-自定义构建信息打印vite插件
本文详细介绍了一个Vite构建信息插件，该插件在构建过程中显示友好的提示信息。主要功能包括构建开始时显示渐变色欢迎消息，构建完成后显示构建时间和打包大小统计。插件利用Vite的钩子机制，通过gradient-string、boxen等工具美化输出，并使用dayjs计算构建时长。核心设计考虑了异步处理、条件执行和用户体验，特别适合需要提升开发者体验的企业级项目。文章从功能概述、实现细节到工作流程，全面解析了该插件的设计与应用价值。
2025-06-12 09:41:11
1132
原创 web前端使用xlsx和file-saver实现前端表格table数据导出Excel功能
本文介绍了使用xlsx和file-saver库封装Vue Excel导出功能的方法。通过Composition API实现了一个可复用的useExcel Hook，支持自定义文件名、工作表名、文件格式和表头映射。文章详细解析了数据预处理、工作簿创建、文件生成和下载的实现步骤，并提供了使用示例。该方案封装良好、配置灵活，能满足大多数导出需求，同时提出了样式支持、大数据优化等扩展建议。这种实现方式简化了前端Excel导出的开发流程，提高了代码复用性。
2025-05-30 15:24:32
836
原创 vue3-slider-verify滑块验证插件简单封装
为了实现人机验证，需要使用第三方的插件实现验证操作。vue3-slider-verify 是一个适用于 Vue 3 的滑块验证插件，通过简单的配置和事件监听，可以实现滑动验证码功能，增强用户交互的安全性和趣味性。
2025-04-24 16:51:05
1344
原创 Vite+微前端Qiankun-状态管理
在微前端架构中，状态管理是一个重要的课题。由于子应用是独立的，它们之间可能需要共享状态或通信。以下是基于qiankun微前端架构的状态管理方案，结合Vue 3和Vite的实现。全局状态共享：使用qiankun的方法。子应用独立状态管理：使用Pinia或Vuex。子应用通信：使用EventBus或。
2025-03-19 18:20:04
729
原创 Vite+微前端Qiankun-子应用之间的路由跳转
前面一篇文章已经介绍了Vite+qiankun的基本部署，但是要真正在实际场景中使用qiankun微服务集成各个子项目，并且能真正流畅使用，目前做的还不够，还要根据使用场景进行配置调试。常用应用场景有子应用之间的路由跳转、公共依赖加载、状态管理、样式隔离等，后面如果发现新的场景还会继续整理更新。本文主要记录子应用之间的路由跳转。子应用之间的跳转：通过主应用的路由实现，使用或。子应用内部的路由：使用子应用自身的路由库（如vue-router）管理。路由前缀：确保子应用的路由前缀与主应用的路由前缀一致。
2025-03-19 15:21:11
1668
3
原创 Vue3组件+leaflet，实现重叠marker的Popup切换显示
GIS开发过程中，经常需要绘制marker，这些marker很大概率会有坐标相同导致的叠加问题，这种情况下会降低使用体验感。所以我们可以将叠加的marker的popup做一个分页效果，可以切换显示的marker。我们以leaflet为例，我们可以使用leaflet的popup展示marker的详细信息，简单的信息展示我们可以直接拼接html字符串就能解决，但是我们需要切换信息，这样就会涉及到dom的事件监听还有信息内容的动态更新，如果用js+html这样的方式实现起来非常复杂，于是我们看看能不能直接用vue
2025-03-15 10:04:33
686
原创 Vite+微前端Qinkun的基本部署
Qiankun是一个基于Single-SPA的微前端框架，由阿里巴巴团队开发并开源。它旨在帮助开发者将大型前端应用拆分为多个独立的子应用，从而实现更高效的开发、维护和部署。Qiankun 提供了一套完整的解决方案，支持多个独立的前端应用在同一个页面中运行，同时保持各自的独立性和隔离性。
2025-03-11 14:46:56
704
原创 JavaScript 中实现防抖（Debounce）和节流（Throttle）
一、防抖（Debounce）当事件触发时，设置一个定时器，在延迟时间内如果再次触发事件，清除之前的定时器并重新设置定时器。只有在延迟时间内没有再次触发事件，定时器到期时才执行目标函数。let timer;}, delay);// 示例使用let timer;：存储定时器的引用。：返回一个新的函数，每次调用时清除之前的定时器并设置新的定时器。：清除之前的定时器，防止之前的操作执行。：设置一个新的定时器，在delay毫秒后执行func函数。：定义一个事件处理函数。
2025-01-22 15:14:11
1290
原创 el-date-picker日期时间选择器的选择时间限制到分钟级别
有个需求是限制选择的时间，禁止选择当前时间的日期及时分，如果日期选择的不是今天，时间还是要能选择全天的时分- 使用组件：: 将用户选择的日期和时间绑定到date变量。: 表明此日期选择器可以同时选择日期和时间。: 定义日期和时间的显示格式。: 单独定义时间部分的显示格式。: 将对象的属性绑定到组件上，以实现对日期和时间选择的限制。: 从 Vue 3 的vue包中导入ref和computed函数。: 创建一个响应式的date变量，用于存储用户选择的日期和时间。
2025-01-09 16:48:20
1474
原创 基于CentOS的Docker + Nginx + Gitee + Jenkins部署总结（进阶）-- 接入钉钉通知功能
在实际项目会出现更多复杂需求，如一个项目多个端（admin、h5等）、多分支情况（dev、其他分支）、多接口环境（dev/prod/test等）、是否需要钉钉通知等个性化功能。
2025-01-07 15:10:38
1344
原创 基于CentOS的Docker + Nginx + Gitee + Jenkins部署总结
本文阐述在CentOS系统上运用PowerShell命令部署Docker、Nginx、Gitee（文中未详细提及Gitee相关配置，可根据实际情况与其他代码托管平台类比）和Jenkins，实现前端自动化部署的流程，包含从系统环境准备到项目配置与部署的完整步骤。
2025-01-03 18:16:18
1258
原创 在 CentOS 8 系统上安装 Jenkins 的全过程
我是一个前端开发，需要频繁将编写的前端系统打包更新到公司的linux服务器，觉得这种工作纯体力活，有时候太浪费时间，以前用过别人搭建的Jenkins可以很好的解决这个问题。
2024-12-25 16:57:05
1025
原创 node.js基础学习-JWT登录鉴权（十四）
JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在各方之间安全地传输信息。它本质上是一个字符串，由三部分组成：头部（Header）、载荷（Payload）和签名（Signature）。。
2024-12-05 18:09:30
910
原创 node.js基础学习-mongoose+MongoDB的MVC（Model-View-Controller）（十三）
MVC（Model-View-Controller）是一种软件设计模式，用于将应用程序的逻辑、数据和界面进行分离，使得各个部分职责明确、便于开发、维护以及扩展。以下是一个在 Node.js 中使用 Mongoose、MVC 架构并额外添加了services。
2024-12-04 15:02:33
1240
原创 node.js基础学习-mongoose操作MongoDB（十二）
在 Node.js 应用中，路由用于处理不同的 URL 路径请求，决定应该执行什么操作；而 Mongoose 用于与 MongoDB 数据库进行交互，如进行数据的存储、查询、更新和删除。它们结合使用可以构建功能强大的 Web 应用，实现根据不同的请求对数据库进行相应的操作。
2024-12-04 14:53:03
888
原创 node.js基础学习-express框架-静态资源中间件express.static（十一）
在 Node.js 应用中，静态资源是指那些不需要服务器动态处理，直接发送给客户端的文件。常见的静态资源包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片（如 JPEG、PNG 等）、字体文件和音频、视频文件等。这些文件在服务器端存储，当客户端请求相应的资源时，服务器直接将文件内容发送给客户端，而不需要像动态路由那样进行数据处理或生成内容。
2024-12-03 12:02:19
923
原创 node.js基础学习-express框架-路由及中间件（十）
Express 是一个简洁、灵活的 Node.js Web 应用框架。它基于 Node.js 的内置 HTTP 模块构建，提供了一系列用于构建 Web 应用程序和 API 的功能，使开发者能够更高效地处理 HTTP 请求和响应，专注于业务逻辑的实现。其特点包括简单易用、中间件机制丰富、路由系统灵活等。通过使用 Express，可以快速搭建服务器，处理不同类型的请求，如网页渲染、数据接口提供等多种功能。
2024-12-02 18:10:39
1652
原创 node.js基础学习-crypto模块-加密解密（九）
对称加密使用相同的密钥进行加密和解密。非对称加密的原理就是得到被传输对象的公钥（publicKey）进行数据的加密操作，传输到对方后，对方通过自己的私钥（privateKey）进行解密操作。方法对数据进行加密，将其从 UTF - 8 格式转换为十六进制格式，最后使用。方法处理部分数据，将其从十六进制转换为 UTF - 8 格式，最后使用。方法进行解密，最后将结果转换为 UTF - 8 格式。）对加密数据进行解密，先将十六进制格式的数据转换为。方法进行加密，最后将结果转换为十六进制格式。
2024-12-02 11:36:54
1425
原创 node.js基础学习-zlib模块-压缩解压（八）
它提供了多种压缩算法的实现，其中最常用的是基于 DEFLATE 算法的压缩方式。这种算法在平衡压缩效率和压缩比方面表现出色，广泛应用于网络传输（如 HTTP 协议中的内容压缩）和文件存储等场景。Gzip 是一种流行的文件压缩格式，在网络传输中，服务器经常使用 Gzip 来压缩响应数据，以减少传输的数据量，提高传输速度。将压缩流与 HTTP 响应对象连接起来，当向压缩流写入数据并结束写入后，数据会经过压缩并发送给客户端。较高的压缩级别会消耗更多的 CPU 资源来换取更好的压缩效果。对象来配置压缩级别等参数。
2024-12-02 11:19:00
626
原创 node.js基础学习-fs模块-Stream流（七）
在 Node.js 的fs（文件系统）模块中，流（Stream）是一种处理数据的高效方式。它允许以连续的方式读取或写入数据，而不必将整个文件的内容一次性加载到内存中。这对于处理大型文件特别有用，因为它可以避免内存溢出问题，并且在数据处理过程中可以更早地开始处理部分数据，而不必等待整个文件读取完成。二、可读流（Readable Stream）
2024-12-02 10:47:36
1094
原创 node.js基础学习-fs模块-文件操作（六）
fs模块是 Node.js 内置的文件系统（File System）模块，它提供了一系列用于与文件系统进行交互的方法。通过fs模块，可以对文件或目录进行读取、写入、删除、重命名、查询状态等操作，这使得 Node.js 能够很好地处理本地文件相关的任务。
2024-11-29 18:00:36
1387
原创 node.js基础学习-cheerio模块-简单小爬虫（五）
学习cheerio模块，简单做一个爬取图片网站的图片，并且将这些图片下载到本地指定的文件夹下，很多图片网站都有一些反爬取的机制，找的好几个都会报302错误，所以我找了一个小的图片网站，这个没有反爬取机制，实现了一下，最后成功获取并下载到了图片，以下就是全部的完整代码，也不做太详细的记录了。启动以后就会将爬取到的图片下载到指定文件夹中。
2024-11-29 15:36:58
552
原创 node.js基础学习-http模块-JSONP跨域传值（四）
JSONP（JSON with Padding）是一种用于跨域数据传输的技术。在浏览器的同源策略限制下，一般情况下，JavaScript 不能直接从不同域的服务器获取数据。JSONP 通过利用标签的跨域特性来绕过这个限制。它本质上是一种非官方的跨域数据交互解决方案，主要用于从不同域名的服务器获取数据，在前后端分离的开发模式以及与第三方 API 交互等场景中发挥着重要作用。
2024-11-28 17:02:10
946
原创 node.js基础学习-querystring模块-查询字符串处理（三）
是 Node.js 中的一个内置模块，主要用于处理 URL 查询字符串。它提供了一些实用的方法来解析和格式化查询字符串，使得在处理 HTTP 请求中的查询参数等场景时非常方便。还可以防止sql注入二、解析查询字符串（parse方法）功能：将 URL 查询字符串解析为一个 JavaScript 对象。语法str：要解析的查询字符串。sep（可选）：用于分隔查询字符串中的键值对的字符，默认是。eq（可选）：用于分隔键和值的字符，默认是。options（可选）：一个包含。
2024-11-28 15:52:43
1073
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人