- 博客(87)
- 收藏
- 关注
RSS订阅
原创 leaflet学习笔记-初始化vue项目（一）
Leaflet是一款开源的轻量级交互式地图可视化JavaScript库，能够满足大多数开发者的地图可视化需求，其最早的版本大小仅仅38 KB。Leaflet能够在主流的计算机或移动设备上高效运行，其功能可通过插件进行扩展，拥有易于使用的、文档完善的API，提供了简单、可读性高的源代码。
2023-12-27 15:15:28
1006
原创 leaflet学习笔记-leaflet-ajax获取数据（五）
地图开发中都会用一些GeoJSON数据进行渲染，这是用就会需要加载GeoJSON数据，这时就可以使用leaflet-ajax进行数据的获取。
2023-12-27 15:08:09
930
原创 leaflet学习笔记-地图图层控制（二）
Leaflet的地图图层控件可控制两类图层：一类是底图图层（Base Layers），一次只能选择一个图层作为地图的背景图层，即底图图层，在地图图层控件中用单选按钮控制；另一类是覆盖图层（Overlays），也就是覆盖在底图上的其他图层，一次可以覆盖一个图层，也可以覆盖多个图层，甚至可以不覆盖任何图层，在地图图层控件中用复选框控制。
2023-12-27 15:00:59
1643
1
原创 天地图离线瓦片数据下载及本地化部署
摘要：本文详细介绍了在QGIS中使用天地图插件和Qtiles插件下载天地图XYZ切片到本地的完整流程。内容包括：天地图插件的安装与密钥配置、Qtiles插件的安装与参数设置、XYZ切片导出步骤（包括范围选择、缩放级别设置和瓦片格式选择）、常见问题解决方法以及将切片部署到Nginx服务器的操作指南。文章还提供了高级技巧，如批量导出多区域和使用Leaflet加载离线瓦片的方法，并附有操作截图和代码示例。该教程适用于需要获取天地图离线数据的用户，可用于野外作业或内网部署场景。
2025-07-21 18:53:59
983
原创 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
399
原创 前端开发冷知识-requestIdleCallback优化主线程任务调度的API
requestIdleCallback是浏览器提供的优化API，允许在空闲时段执行低优先级任务，避免阻塞关键渲染和交互。它适用于日志上报、数据预取等非紧急任务，需确保任务可拆分且耗时短（<5ms）。使用时要注意兼容性（不支持IE/旧Edge），避免DOM操作，并谨慎使用超时参数。与requestAnimationFrame、setTimeout相比，更适合后台任务处理。通过分片处理大数据等场景，能有效提升页面性能，但需设计冗余逻辑，因回调可能被跳过。关键任务应使用其他API。
2025-06-12 17:54:17
1023
原创 vite学习笔记-自定义构建信息打印vite插件
本文详细介绍了一个Vite构建信息插件，该插件在构建过程中显示友好的提示信息。主要功能包括构建开始时显示渐变色欢迎消息，构建完成后显示构建时间和打包大小统计。插件利用Vite的钩子机制，通过gradient-string、boxen等工具美化输出，并使用dayjs计算构建时长。核心设计考虑了异步处理、条件执行和用户体验，特别适合需要提升开发者体验的企业级项目。文章从功能概述、实现细节到工作流程，全面解析了该插件的设计与应用价值。
2025-06-12 09:41:11
1076
原创 web前端使用xlsx和file-saver实现前端表格table数据导出Excel功能
本文介绍了使用xlsx和file-saver库封装Vue Excel导出功能的方法。通过Composition API实现了一个可复用的useExcel Hook，支持自定义文件名、工作表名、文件格式和表头映射。文章详细解析了数据预处理、工作簿创建、文件生成和下载的实现步骤，并提供了使用示例。该方案封装良好、配置灵活，能满足大多数导出需求，同时提出了样式支持、大数据优化等扩展建议。这种实现方式简化了前端Excel导出的开发流程，提高了代码复用性。
2025-05-30 15:24:32
742
原创 vue3-slider-verify滑块验证插件简单封装
为了实现人机验证，需要使用第三方的插件实现验证操作。vue3-slider-verify 是一个适用于 Vue 3 的滑块验证插件，通过简单的配置和事件监听，可以实现滑动验证码功能，增强用户交互的安全性和趣味性。
2025-04-24 16:51:05
1014
原创 Vite+微前端Qiankun-状态管理
在微前端架构中，状态管理是一个重要的课题。由于子应用是独立的，它们之间可能需要共享状态或通信。以下是基于qiankun微前端架构的状态管理方案，结合Vue 3和Vite的实现。全局状态共享：使用qiankun的方法。子应用独立状态管理：使用Pinia或Vuex。子应用通信：使用EventBus或。
2025-03-19 18:20:04
631
原创 Vite+微前端Qiankun-子应用之间的路由跳转
前面一篇文章已经介绍了Vite+qiankun的基本部署，但是要真正在实际场景中使用qiankun微服务集成各个子项目，并且能真正流畅使用，目前做的还不够，还要根据使用场景进行配置调试。常用应用场景有子应用之间的路由跳转、公共依赖加载、状态管理、样式隔离等，后面如果发现新的场景还会继续整理更新。本文主要记录子应用之间的路由跳转。子应用之间的跳转：通过主应用的路由实现，使用或。子应用内部的路由：使用子应用自身的路由库（如vue-router）管理。路由前缀：确保子应用的路由前缀与主应用的路由前缀一致。
2025-03-19 15:21:11
1003
原创 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
585
原创 Vite+微前端Qinkun的基本部署
Qiankun是一个基于Single-SPA的微前端框架，由阿里巴巴团队开发并开源。它旨在帮助开发者将大型前端应用拆分为多个独立的子应用，从而实现更高效的开发、维护和部署。Qiankun 提供了一套完整的解决方案，支持多个独立的前端应用在同一个页面中运行，同时保持各自的独立性和隔离性。
2025-03-11 14:46:56
568
原创 JavaScript 中实现防抖（Debounce）和节流（Throttle）
一、防抖（Debounce）当事件触发时，设置一个定时器，在延迟时间内如果再次触发事件，清除之前的定时器并重新设置定时器。只有在延迟时间内没有再次触发事件，定时器到期时才执行目标函数。let timer;}, delay);// 示例使用let timer;：存储定时器的引用。：返回一个新的函数，每次调用时清除之前的定时器并设置新的定时器。：清除之前的定时器，防止之前的操作执行。：设置一个新的定时器，在delay毫秒后执行func函数。：定义一个事件处理函数。
2025-01-22 15:14:11
1154
原创 el-date-picker日期时间选择器的选择时间限制到分钟级别
有个需求是限制选择的时间，禁止选择当前时间的日期及时分，如果日期选择的不是今天，时间还是要能选择全天的时分- 使用组件：: 将用户选择的日期和时间绑定到date变量。: 表明此日期选择器可以同时选择日期和时间。: 定义日期和时间的显示格式。: 单独定义时间部分的显示格式。: 将对象的属性绑定到组件上，以实现对日期和时间选择的限制。: 从 Vue 3 的vue包中导入ref和computed函数。: 创建一个响应式的date变量，用于存储用户选择的日期和时间。
2025-01-09 16:48:20
1240
原创 基于CentOS的Docker + Nginx + Gitee + Jenkins部署总结（进阶）-- 接入钉钉通知功能
在实际项目会出现更多复杂需求，如一个项目多个端（admin、h5等）、多分支情况（dev、其他分支）、多接口环境（dev/prod/test等）、是否需要钉钉通知等个性化功能。
2025-01-07 15:10:38
1237
原创 基于CentOS的Docker + Nginx + Gitee + Jenkins部署总结
本文阐述在CentOS系统上运用PowerShell命令部署Docker、Nginx、Gitee（文中未详细提及Gitee相关配置，可根据实际情况与其他代码托管平台类比）和Jenkins，实现前端自动化部署的流程，包含从系统环境准备到项目配置与部署的完整步骤。
2025-01-03 18:16:18
1132
原创 在 CentOS 8 系统上安装 Jenkins 的全过程
我是一个前端开发，需要频繁将编写的前端系统打包更新到公司的linux服务器，觉得这种工作纯体力活，有时候太浪费时间，以前用过别人搭建的Jenkins可以很好的解决这个问题。
2024-12-25 16:57:05
889
原创 node.js基础学习-JWT登录鉴权（十四）
JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在各方之间安全地传输信息。它本质上是一个字符串，由三部分组成：头部（Header）、载荷（Payload）和签名（Signature）。。
2024-12-05 18:09:30
855
原创 node.js基础学习-mongoose+MongoDB的MVC（Model-View-Controller）（十三）
MVC（Model-View-Controller）是一种软件设计模式，用于将应用程序的逻辑、数据和界面进行分离，使得各个部分职责明确、便于开发、维护以及扩展。以下是一个在 Node.js 中使用 Mongoose、MVC 架构并额外添加了services。
2024-12-04 15:02:33
1187
原创 node.js基础学习-mongoose操作MongoDB（十二）
在 Node.js 应用中，路由用于处理不同的 URL 路径请求，决定应该执行什么操作；而 Mongoose 用于与 MongoDB 数据库进行交互，如进行数据的存储、查询、更新和删除。它们结合使用可以构建功能强大的 Web 应用，实现根据不同的请求对数据库进行相应的操作。
2024-12-04 14:53:03
797
原创 node.js基础学习-express框架-静态资源中间件express.static（十一）
在 Node.js 应用中，静态资源是指那些不需要服务器动态处理，直接发送给客户端的文件。常见的静态资源包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片（如 JPEG、PNG 等）、字体文件和音频、视频文件等。这些文件在服务器端存储，当客户端请求相应的资源时，服务器直接将文件内容发送给客户端，而不需要像动态路由那样进行数据处理或生成内容。
2024-12-03 12:02:19
870
原创 node.js基础学习-express框架-路由及中间件（十）
Express 是一个简洁、灵活的 Node.js Web 应用框架。它基于 Node.js 的内置 HTTP 模块构建，提供了一系列用于构建 Web 应用程序和 API 的功能，使开发者能够更高效地处理 HTTP 请求和响应，专注于业务逻辑的实现。其特点包括简单易用、中间件机制丰富、路由系统灵活等。通过使用 Express，可以快速搭建服务器，处理不同类型的请求，如网页渲染、数据接口提供等多种功能。
2024-12-02 18:10:39
1545
原创 node.js基础学习-crypto模块-加密解密（九）
对称加密使用相同的密钥进行加密和解密。非对称加密的原理就是得到被传输对象的公钥（publicKey）进行数据的加密操作，传输到对方后，对方通过自己的私钥（privateKey）进行解密操作。方法对数据进行加密，将其从 UTF - 8 格式转换为十六进制格式，最后使用。方法处理部分数据，将其从十六进制转换为 UTF - 8 格式，最后使用。方法进行解密，最后将结果转换为 UTF - 8 格式。）对加密数据进行解密，先将十六进制格式的数据转换为。方法进行加密，最后将结果转换为十六进制格式。
2024-12-02 11:36:54
1285
原创 node.js基础学习-zlib模块-压缩解压（八）
它提供了多种压缩算法的实现，其中最常用的是基于 DEFLATE 算法的压缩方式。这种算法在平衡压缩效率和压缩比方面表现出色，广泛应用于网络传输（如 HTTP 协议中的内容压缩）和文件存储等场景。Gzip 是一种流行的文件压缩格式，在网络传输中，服务器经常使用 Gzip 来压缩响应数据，以减少传输的数据量，提高传输速度。将压缩流与 HTTP 响应对象连接起来，当向压缩流写入数据并结束写入后，数据会经过压缩并发送给客户端。较高的压缩级别会消耗更多的 CPU 资源来换取更好的压缩效果。对象来配置压缩级别等参数。
2024-12-02 11:19:00
538
原创 node.js基础学习-fs模块-Stream流（七）
在 Node.js 的fs（文件系统）模块中，流（Stream）是一种处理数据的高效方式。它允许以连续的方式读取或写入数据，而不必将整个文件的内容一次性加载到内存中。这对于处理大型文件特别有用，因为它可以避免内存溢出问题，并且在数据处理过程中可以更早地开始处理部分数据，而不必等待整个文件读取完成。二、可读流（Readable Stream）
2024-12-02 10:47:36
1001
原创 node.js基础学习-fs模块-文件操作（六）
fs模块是 Node.js 内置的文件系统（File System）模块，它提供了一系列用于与文件系统进行交互的方法。通过fs模块，可以对文件或目录进行读取、写入、删除、重命名、查询状态等操作，这使得 Node.js 能够很好地处理本地文件相关的任务。
2024-11-29 18:00:36
1320
原创 node.js基础学习-cheerio模块-简单小爬虫（五）
学习cheerio模块，简单做一个爬取图片网站的图片，并且将这些图片下载到本地指定的文件夹下，很多图片网站都有一些反爬取的机制，找的好几个都会报302错误，所以我找了一个小的图片网站，这个没有反爬取机制，实现了一下，最后成功获取并下载到了图片，以下就是全部的完整代码，也不做太详细的记录了。启动以后就会将爬取到的图片下载到指定文件夹中。
2024-11-29 15:36:58
516
原创 node.js基础学习-http模块-JSONP跨域传值（四）
JSONP（JSON with Padding）是一种用于跨域数据传输的技术。在浏览器的同源策略限制下，一般情况下，JavaScript 不能直接从不同域的服务器获取数据。JSONP 通过利用标签的跨域特性来绕过这个限制。它本质上是一种非官方的跨域数据交互解决方案，主要用于从不同域名的服务器获取数据，在前后端分离的开发模式以及与第三方 API 交互等场景中发挥着重要作用。
2024-11-28 17:02:10
838
原创 node.js基础学习-querystring模块-查询字符串处理（三）
是 Node.js 中的一个内置模块，主要用于处理 URL 查询字符串。它提供了一些实用的方法来解析和格式化查询字符串，使得在处理 HTTP 请求中的查询参数等场景时非常方便。还可以防止sql注入二、解析查询字符串（parse方法）功能：将 URL 查询字符串解析为一个 JavaScript 对象。语法str：要解析的查询字符串。sep（可选）：用于分隔查询字符串中的键值对的字符，默认是。eq（可选）：用于分隔键和值的字符，默认是。options（可选）：一个包含。
2024-11-28 15:52:43
1023
原创 node.js基础学习-url模块-url地址处理（二）
前面我们创建了一个HTTP服务器，如果只是简单的这种链接我们是可以处理的，但是实际运用中一般链接都会带参数，这样的话如果我们只是简单的判断链接来分配数据，就会报404找不到链接。为了解决这个问题，我们这篇文章就介绍url模块来处理url地址。url模块有新旧两版用法，我们这篇文章就只介绍新的用法。在 Node.js 中，url模块提供了用于处理和解析 URL（统一资源定位符）的实用工具。
2024-11-28 10:33:48
937
原创 node.js基础学习-http模块-创建HTTP服务器、客户端（一）
http模块式Node.js内置的模块，用于创建和管理HTTP服务器。Node.js使用JavaScript实现，因此性能更好。使用http模块创建服务器，我们建议使用commonjs模块规范，因为很多第三方的组件都使用了这种规范。当然es6写法也支持。下面就是创建一个简单的Node.js服务器。，页面就会呈现以下这种。
2024-11-27 18:05:16
599
原创 自定义左边侧滑组件
是一个自定义的抽屉组件，用于在 Vue 项目中实现抽屉式布局，提供了丰富的可定制功能，方便展示额外信息或操作面板等内容，具备良好的交互性和样式扩展性。
2024-11-18 16:04:21
1239
原创 node.js学习笔记-Window下MongoDB数据库安装（二）
文档型数据库：MongoDB 以 BSON（Binary JSON）格式存储数据，BSON 是 JSON 的二进制表示形式，它允许更丰富的数据类型和更高效的数据存储和查询。文档型数据库的灵活性使得它能够轻松处理各种不同结构的数据，无需事先定义严格的表结构，这对于快速迭代的应用开发非常有利。高性能：MongoDB 通过使用内存映射文件、索引等技术，实现了高性能的数据读写操作。它能够自动处理数据在内存和磁盘之间的交换，以优化性能。
2024-11-13 18:42:08
1128
原创 node.js学习笔记-快速搭建一个 Express 项目的基本骨架（一）
是 Express 框架提供的一个应用程序生成器工具，它可以帮助你快速搭建一个 Express 项目的基本骨架，节省大量手动创建文件和配置的时间。
2024-11-11 15:26:25
1025
原创 web开发必备技术知识笔记-element-plus 表格单元格合并hook
我们需要将某一列table数据中，具有相同值的临近单元格进行行的合并，element-plus的table组件中也提供了这种合并行或列的例子，基于例子结合业务需求现在记录一个开发中编写的一个行合并的hook函数。
2024-10-15 14:46:17
619
原创 leaflet.motion台风路径动画绘制
在气象领域中，对台风的准确可视化呈现对于灾害预警和防范具有重要意义。本文将深入探讨一段使用 JavaScript 实现台风可视化功能的代码。原本只是简单的绘制台风的路径，但是后面的需求要求显示台风各个历史节点的动画绘制，于是难度增加了，最后还是使用leaflet的插件（）完成了动画需求，以下就来介绍我的动画实现方式，请多指教。
2024-08-05 18:27:29
784
原创 气象相关图表制作-字体图标、图片、折线的堆叠
开发工作中有个需要展示气温（折线）、天气（图片）、风羽（字体图标）的图表展示需求，之前用过highcharts的关于类似的chart，里面的风雨用的是自带的图片，但是现在要求风羽需要用字体图标渲染，于是我选择了比较熟悉的Echarts制作这个图表。
2024-06-27 18:02:47
531
原创 web开发必备技术知识笔记-async和await
async和await一起使用，可以使异步代码更易于理解和维护。async函数总是返回一个Promise对象。这里非常重要，虽然async和await可以像同步方式一样操作数据，但是async函数返回的不会是处理后的数据（return test;），始终都只会是一个Promise对象。await只能在async函数内部使用，用于等待Promise并返回其解决的值或抛出异常。通过使用try/catch结构，可以优雅地处理Promise的拒绝。
2024-06-04 14:57:25
349
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人