- 博客(81)
- 收藏
- 关注
RSS订阅
原创 leaflet学习笔记-初始化vue项目（一）
Leaflet是一款开源的轻量级交互式地图可视化JavaScript库，能够满足大多数开发者的地图可视化需求，其最早的版本大小仅仅38 KB。Leaflet能够在主流的计算机或移动设备上高效运行，其功能可通过插件进行扩展，拥有易于使用的、文档完善的API，提供了简单、可读性高的源代码。
2023-12-27 15:15:28
949
原创 leaflet学习笔记-leaflet-ajax获取数据（五）
地图开发中都会用一些GeoJSON数据进行渲染，这是用就会需要加载GeoJSON数据，这时就可以使用leaflet-ajax进行数据的获取。
2023-12-27 15:08:09
894
原创 leaflet学习笔记-地图图层控制（二）
Leaflet的地图图层控件可控制两类图层：一类是底图图层（Base Layers），一次只能选择一个图层作为地图的背景图层，即底图图层，在地图图层控件中用单选按钮控制；另一类是覆盖图层（Overlays），也就是覆盖在底图上的其他图层，一次可以覆盖一个图层，也可以覆盖多个图层，甚至可以不覆盖任何图层，在地图图层控件中用复选框控制。
2023-12-27 15:00:59
1509
1
原创 Vite+微前端Qiankun-状态管理
在微前端架构中，状态管理是一个重要的课题。由于子应用是独立的，它们之间可能需要共享状态或通信。以下是基于qiankun微前端架构的状态管理方案，结合Vue 3和Vite的实现。全局状态共享：使用qiankun的方法。子应用独立状态管理：使用Pinia或Vuex。子应用通信：使用EventBus或。
2025-03-19 18:20:04
481
原创 Vite+微前端Qiankun-子应用之间的路由跳转
前面一篇文章已经介绍了Vite+qiankun的基本部署，但是要真正在实际场景中使用qiankun微服务集成各个子项目，并且能真正流畅使用，目前做的还不够，还要根据使用场景进行配置调试。常用应用场景有子应用之间的路由跳转、公共依赖加载、状态管理、样式隔离等，后面如果发现新的场景还会继续整理更新。本文主要记录子应用之间的路由跳转。子应用之间的跳转：通过主应用的路由实现，使用或。子应用内部的路由：使用子应用自身的路由库（如vue-router）管理。路由前缀：确保子应用的路由前缀与主应用的路由前缀一致。
2025-03-19 15:21:11
471
原创 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
431
原创 Vite+微前端Qinkun的基本部署
Qiankun是一个基于Single-SPA的微前端框架，由阿里巴巴团队开发并开源。它旨在帮助开发者将大型前端应用拆分为多个独立的子应用，从而实现更高效的开发、维护和部署。Qiankun 提供了一套完整的解决方案，支持多个独立的前端应用在同一个页面中运行，同时保持各自的独立性和隔离性。
2025-03-11 14:46:56
413
原创 JavaScript 中实现防抖（Debounce）和节流（Throttle）
一、防抖（Debounce）当事件触发时，设置一个定时器，在延迟时间内如果再次触发事件，清除之前的定时器并重新设置定时器。只有在延迟时间内没有再次触发事件，定时器到期时才执行目标函数。let timer;}, delay);// 示例使用let timer;：存储定时器的引用。：返回一个新的函数，每次调用时清除之前的定时器并设置新的定时器。：清除之前的定时器，防止之前的操作执行。：设置一个新的定时器，在delay毫秒后执行func函数。：定义一个事件处理函数。
2025-01-22 15:14:11
984
原创 el-date-picker日期时间选择器的选择时间限制到分钟级别
有个需求是限制选择的时间，禁止选择当前时间的日期及时分，如果日期选择的不是今天，时间还是要能选择全天的时分- 使用组件：: 将用户选择的日期和时间绑定到date变量。: 表明此日期选择器可以同时选择日期和时间。: 定义日期和时间的显示格式。: 单独定义时间部分的显示格式。: 将对象的属性绑定到组件上，以实现对日期和时间选择的限制。: 从 Vue 3 的vue包中导入ref和computed函数。: 创建一个响应式的date变量，用于存储用户选择的日期和时间。
2025-01-09 16:48:20
998
原创 基于CentOS的Docker + Nginx + Gitee + Jenkins部署总结（进阶）-- 接入钉钉通知功能
在实际项目会出现更多复杂需求，如一个项目多个端（admin、h5等）、多分支情况（dev、其他分支）、多接口环境（dev/prod/test等）、是否需要钉钉通知等个性化功能。
2025-01-07 15:10:38
1173
原创 基于CentOS的Docker + Nginx + Gitee + Jenkins部署总结
本文阐述在CentOS系统上运用PowerShell命令部署Docker、Nginx、Gitee（文中未详细提及Gitee相关配置，可根据实际情况与其他代码托管平台类比）和Jenkins，实现前端自动化部署的流程，包含从系统环境准备到项目配置与部署的完整步骤。
2025-01-03 18:16:18
1045
原创 在 CentOS 8 系统上安装 Jenkins 的全过程
我是一个前端开发，需要频繁将编写的前端系统打包更新到公司的linux服务器，觉得这种工作纯体力活，有时候太浪费时间，以前用过别人搭建的Jenkins可以很好的解决这个问题。
2024-12-25 16:57:05
798
原创 node.js基础学习-JWT登录鉴权（十四）
JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在各方之间安全地传输信息。它本质上是一个字符串，由三部分组成：头部（Header）、载荷（Payload）和签名（Signature）。。
2024-12-05 18:09:30
751
原创 node.js基础学习-mongoose+MongoDB的MVC（Model-View-Controller）（十三）
MVC（Model-View-Controller）是一种软件设计模式，用于将应用程序的逻辑、数据和界面进行分离，使得各个部分职责明确、便于开发、维护以及扩展。以下是一个在 Node.js 中使用 Mongoose、MVC 架构并额外添加了services。
2024-12-04 15:02:33
1154
原创 node.js基础学习-mongoose操作MongoDB（十二）
在 Node.js 应用中，路由用于处理不同的 URL 路径请求，决定应该执行什么操作；而 Mongoose 用于与 MongoDB 数据库进行交互，如进行数据的存储、查询、更新和删除。它们结合使用可以构建功能强大的 Web 应用，实现根据不同的请求对数据库进行相应的操作。
2024-12-04 14:53:03
771
原创 node.js基础学习-express框架-静态资源中间件express.static（十一）
在 Node.js 应用中，静态资源是指那些不需要服务器动态处理，直接发送给客户端的文件。常见的静态资源包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片（如 JPEG、PNG 等）、字体文件和音频、视频文件等。这些文件在服务器端存储，当客户端请求相应的资源时，服务器直接将文件内容发送给客户端，而不需要像动态路由那样进行数据处理或生成内容。
2024-12-03 12:02:19
813
原创 node.js基础学习-express框架-路由及中间件（十）
Express 是一个简洁、灵活的 Node.js Web 应用框架。它基于 Node.js 的内置 HTTP 模块构建，提供了一系列用于构建 Web 应用程序和 API 的功能，使开发者能够更高效地处理 HTTP 请求和响应，专注于业务逻辑的实现。其特点包括简单易用、中间件机制丰富、路由系统灵活等。通过使用 Express，可以快速搭建服务器，处理不同类型的请求，如网页渲染、数据接口提供等多种功能。
2024-12-02 18:10:39
1471
原创 node.js基础学习-crypto模块-加密解密（九）
对称加密使用相同的密钥进行加密和解密。非对称加密的原理就是得到被传输对象的公钥（publicKey）进行数据的加密操作，传输到对方后，对方通过自己的私钥（privateKey）进行解密操作。方法对数据进行加密，将其从 UTF - 8 格式转换为十六进制格式，最后使用。方法处理部分数据，将其从十六进制转换为 UTF - 8 格式，最后使用。方法进行解密，最后将结果转换为 UTF - 8 格式。）对加密数据进行解密，先将十六进制格式的数据转换为。方法进行加密，最后将结果转换为十六进制格式。
2024-12-02 11:36:54
1119
原创 node.js基础学习-zlib模块-压缩解压（八）
它提供了多种压缩算法的实现，其中最常用的是基于 DEFLATE 算法的压缩方式。这种算法在平衡压缩效率和压缩比方面表现出色，广泛应用于网络传输（如 HTTP 协议中的内容压缩）和文件存储等场景。Gzip 是一种流行的文件压缩格式，在网络传输中，服务器经常使用 Gzip 来压缩响应数据，以减少传输的数据量，提高传输速度。将压缩流与 HTTP 响应对象连接起来，当向压缩流写入数据并结束写入后，数据会经过压缩并发送给客户端。较高的压缩级别会消耗更多的 CPU 资源来换取更好的压缩效果。对象来配置压缩级别等参数。
2024-12-02 11:19:00
447
原创 node.js基础学习-fs模块-Stream流（七）
在 Node.js 的fs（文件系统）模块中，流（Stream）是一种处理数据的高效方式。它允许以连续的方式读取或写入数据，而不必将整个文件的内容一次性加载到内存中。这对于处理大型文件特别有用，因为它可以避免内存溢出问题，并且在数据处理过程中可以更早地开始处理部分数据，而不必等待整个文件读取完成。二、可读流（Readable Stream）
2024-12-02 10:47:36
890
原创 node.js基础学习-fs模块-文件操作（六）
fs模块是 Node.js 内置的文件系统（File System）模块，它提供了一系列用于与文件系统进行交互的方法。通过fs模块，可以对文件或目录进行读取、写入、删除、重命名、查询状态等操作，这使得 Node.js 能够很好地处理本地文件相关的任务。
2024-11-29 18:00:36
1242
原创 node.js基础学习-cheerio模块-简单小爬虫（五）
学习cheerio模块，简单做一个爬取图片网站的图片，并且将这些图片下载到本地指定的文件夹下，很多图片网站都有一些反爬取的机制，找的好几个都会报302错误，所以我找了一个小的图片网站，这个没有反爬取机制，实现了一下，最后成功获取并下载到了图片，以下就是全部的完整代码，也不做太详细的记录了。启动以后就会将爬取到的图片下载到指定文件夹中。
2024-11-29 15:36:58
486
原创 node.js基础学习-http模块-JSONP跨域传值（四）
JSONP（JSON with Padding）是一种用于跨域数据传输的技术。在浏览器的同源策略限制下，一般情况下，JavaScript 不能直接从不同域的服务器获取数据。JSONP 通过利用标签的跨域特性来绕过这个限制。它本质上是一种非官方的跨域数据交互解决方案，主要用于从不同域名的服务器获取数据，在前后端分离的开发模式以及与第三方 API 交互等场景中发挥着重要作用。
2024-11-28 17:02:10
778
原创 node.js基础学习-querystring模块-查询字符串处理（三）
是 Node.js 中的一个内置模块，主要用于处理 URL 查询字符串。它提供了一些实用的方法来解析和格式化查询字符串，使得在处理 HTTP 请求中的查询参数等场景时非常方便。还可以防止sql注入二、解析查询字符串（parse方法）功能：将 URL 查询字符串解析为一个 JavaScript 对象。语法str：要解析的查询字符串。sep（可选）：用于分隔查询字符串中的键值对的字符，默认是。eq（可选）：用于分隔键和值的字符，默认是。options（可选）：一个包含。
2024-11-28 15:52:43
935
原创 node.js基础学习-url模块-url地址处理（二）
前面我们创建了一个HTTP服务器，如果只是简单的这种链接我们是可以处理的，但是实际运用中一般链接都会带参数，这样的话如果我们只是简单的判断链接来分配数据，就会报404找不到链接。为了解决这个问题，我们这篇文章就介绍url模块来处理url地址。url模块有新旧两版用法，我们这篇文章就只介绍新的用法。在 Node.js 中，url模块提供了用于处理和解析 URL（统一资源定位符）的实用工具。
2024-11-28 10:33:48
780
原创 node.js基础学习-http模块-创建HTTP服务器、客户端（一）
http模块式Node.js内置的模块，用于创建和管理HTTP服务器。Node.js使用JavaScript实现，因此性能更好。使用http模块创建服务器，我们建议使用commonjs模块规范，因为很多第三方的组件都使用了这种规范。当然es6写法也支持。下面就是创建一个简单的Node.js服务器。，页面就会呈现以下这种。
2024-11-27 18:05:16
556
原创 自定义左边侧滑组件
是一个自定义的抽屉组件，用于在 Vue 项目中实现抽屉式布局，提供了丰富的可定制功能，方便展示额外信息或操作面板等内容，具备良好的交互性和样式扩展性。
2024-11-18 16:04:21
1074
原创 node.js学习笔记-Window下MongoDB数据库安装（二）
文档型数据库：MongoDB 以 BSON（Binary JSON）格式存储数据，BSON 是 JSON 的二进制表示形式，它允许更丰富的数据类型和更高效的数据存储和查询。文档型数据库的灵活性使得它能够轻松处理各种不同结构的数据，无需事先定义严格的表结构，这对于快速迭代的应用开发非常有利。高性能：MongoDB 通过使用内存映射文件、索引等技术，实现了高性能的数据读写操作。它能够自动处理数据在内存和磁盘之间的交换，以优化性能。
2024-11-13 18:42:08
1099
原创 node.js学习笔记-快速搭建一个 Express 项目的基本骨架（一）
是 Express 框架提供的一个应用程序生成器工具，它可以帮助你快速搭建一个 Express 项目的基本骨架，节省大量手动创建文件和配置的时间。
2024-11-11 15:26:25
982
原创 web开发必备技术知识笔记-element-plus 表格单元格合并hook
我们需要将某一列table数据中，具有相同值的临近单元格进行行的合并，element-plus的table组件中也提供了这种合并行或列的例子，基于例子结合业务需求现在记录一个开发中编写的一个行合并的hook函数。
2024-10-15 14:46:17
563
原创 leaflet.motion台风路径动画绘制
在气象领域中，对台风的准确可视化呈现对于灾害预警和防范具有重要意义。本文将深入探讨一段使用 JavaScript 实现台风可视化功能的代码。原本只是简单的绘制台风的路径，但是后面的需求要求显示台风各个历史节点的动画绘制，于是难度增加了，最后还是使用leaflet的插件（）完成了动画需求，以下就来介绍我的动画实现方式，请多指教。
2024-08-05 18:27:29
612
原创 气象相关图表制作-字体图标、图片、折线的堆叠
开发工作中有个需要展示气温（折线）、天气（图片）、风羽（字体图标）的图表展示需求，之前用过highcharts的关于类似的chart，里面的风雨用的是自带的图片，但是现在要求风羽需要用字体图标渲染，于是我选择了比较熟悉的Echarts制作这个图表。
2024-06-27 18:02:47
490
原创 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
318
原创 antd table列选中效果实现
开发中有一个需要呈现不同时间点各个气象要素的值需求，我觉得一个table可以实现这类数据的展示，只是因为时间点时关注的重点，所以需要列选中效果，清晰的展示时间点下的要素数据。我选择的是antd的table组件，这个组件没有列选中的效果，所以还是需要自己动手丰衣足食，改造一下。这个功能的难点在于列选中效果，我们需要给他一个背景加上边框，虽然antd的table没有列选中效果，但是它提供了customCell，customHeaderCell，我们可以根据这些回调函数的特点灵活使用实现列选中效果。效果
2024-05-29 14:22:08
1306
原创 linux系统装载nginx的笔记
作为一个前端开发，自己部署一个前端项目是不是很正常的事情，所以我在这里记录一下自己在linux环境中通过nginx部署前端项目的步骤，方便后面查看。
2024-03-28 12:48:22
711
原创 自定义时间轴组件
开发工作中常常有一个通过启动时间轴切换地图图层切换的功能需求，但是又很难找到一个满足要求的时间轴，所以自己撸了一个，目前还有一些功能需要改进，这里先记录一下代码。
2024-02-26 18:14:30
570
原创 航空领域中气象常识笔记
由于现在我涉及的项目都是跟气象有关，所以我现在要学习和积累一些气象中的名词和常识，以下为在开发航空领域系统过程中我认为重要的一些知识点记录。
2024-02-20 09:34:40
563
原创 leaflet学习笔记-带过滤的图例（九）
图例不只能够帮助我们在查看地图的时候更加方便容易地分辨不同颜色代表的要素，本文要介绍的图例组件还可以按需求过滤掉不用显示的要素，使地图的更能清晰的显示我们需要显示的内容。
2024-01-22 11:36:27
940
原创 leaflet学习笔记-贝塞尔曲线绘制（八）
两点之间的连线是很常见的，但是都是直直的一条线段，为了使连线更加平滑，我们可以使用曲线进行连线，本功能考虑使用贝塞尔曲线进行连线绘制，最后将线段的两端节点连接，返回一个polygon。给定不同的点 P0 和 P1，线性贝塞尔曲线只是这两点之间的一条线。相当于线性插值。接受一条线，通过应用贝塞尔样条算法返回一个弯曲的版本。
2024-01-11 15:07:03
1325
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人