- 博客(518)
- 资源 (16)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 2025年--常用JS工具函数整理(utils.js)
使用场景：从数组中删除所有重复的值，实现方式很多，我们采取最简单的方式。一行代码搞定。uniqueArr 方法将传入的数组转换为Set，然后再解构为数组返回。
2023-01-05 12:02:00
795
原创 web前端开发VScode必备插件(磨刀不误砍柴工)
Bracket Pair Colorizer友好的给括号加上不同的颜色，便于区分不同的区块，使用者还可以定义括号类型和颜色，尤其是 Dart 语言开发，尤为重要。Terminal编辑器中内嵌一个似 cmd 终端程序，直接在编辑器中运行终端命令。Path Intellisense插件自动提示文件路径，支持各种文件无脑快速引入，非常方便。JavaScript(ES6) code snipp...
2020-01-03 09:06:32
1881
原创 uniapp -- 列表垂直方向拖拽drag组件
需要在小程序中实现拖拽排序功能，所以就用到了m-drag拖拽组件，在开发的过程中，发现该组件在特殊的场景下会有些问题，并对其进行了拓展。
2025-04-01 16:43:51
160
原创 vue3 -- el-upload（element-plus）封装多图上传组件
【代码】vue3 -- el-upload（element-plus）封装多图上传组件。
2025-03-04 09:37:30
118
原创 vue3 -- 集成 amap（高德地图）
本文介绍了如何在 Vue 3 项目中集成高德地图（AMap），并使用 PoiPicker 实现地点搜索功能。此外，还在组件卸载时清理地图实例，防止内存泄漏。优化后的代码结构清晰，拆分了 initMap 和。AMapLoader 异步加载高德地图 API，并初始化 Map 实例。POI（兴趣点）选择后，在地图上添加标记（Marker），并通过 InfoWindow。PoiPicker，绑定搜索输入框，实现地点选择功能。loadAMapUIPoiPicker 逻辑，提高了可读性和可维护性。
2025-02-10 11:19:27
266
原创 vue3 -- 基于el-statistic实现动态数字滚动效果并封装卡片组件
vue3 -- 基于el-statistic实现动态数字滚动效果并封装卡片组件。
2025-02-07 10:02:38
207
原创 uniapp -- Vue3 MQTT集成（H5、小程序）踩坑记录
在使用 uniapp 进行项目开发时，我需要实现一个关键功能，即利用 MQTT.js 进行订阅操作。然而，在集成 MQTT 的过程中，遇到了兼容性问题。期间与作者进行了沟通。解决方案是：有些库需要额外处理。
2025-01-16 15:18:38
680
原创 vue3 -- 项目中封装 MQTT 功能
MQTT（Message Queuing Telemetry Transport） 是一种轻量级的消息发布/订阅协议，专为低带宽、不稳定或高延迟的网络环境设计，特别适合物联网（IoT）应用。它基于客户端-服务器模型，使用 发布者、订阅者 和 主题 的机制。物联网通信：在设备之间传输数据，比如智能家居、传感器网络。实时消息推送：在聊天应用、通知系统中实现实时消息更新。设备监控和远程控制：监控设备状态并发送指令（如开关控制）。数据采集：将多个设备数据上传至服务器进行处理和分析。
2025-01-10 14:11:17
202
原创 缘起缘灭，随遇而安
然而，当旅途到了尽头，或者缘分已尽时，便该分手。生活中充满了无常与变化，我们无法预知下一秒会发生什么事情，也无法确定谁会陪我们走到最后。人生如同一条曲折蜿蜒的道路，我们在路上走着，不断前行。在这条道路上，我们会与无数人相遇、结伴而行，走过一程又一程。缘深或缘浅，缘聚或缘散，都是生命中无法掌控的变数。因为缘分这东西，强求不得，不属于自己的终究会离我们远去。人与人之间的关系就像一场旅行，有些人只是短暂地出现在我们的生命中，成为过客；在这漫长而又短暂的人生旅途中，愿我们都能在遇见时珍惜、离别时感恩、重逢时欢喜。
2024-12-17 15:15:13
177
原创 uniapp -- 实现页面滚动触底加载数据
效果首选，是在pages.json配置开启下拉刷新{ "path": "pages/my/document/officialDocument", "style": { "navigationStyle": "custom", "enablePullDownRefresh": false, //配置后，可以下拉刷新，上拉加载` "onReachBottomDistance": 100 }},代码<template&g
2024-12-09 15:30:29
448
原创 uniapp -- 发布微信小程序主包大小超过2M限制解决思路
本文记录一下解决该问题的一个方向，通过分包优化、代码压缩、资源管理等多维度手段，跨越那2M的界限。创建分包目录结构：在项目的根目录下，为每个子包创建一个单独的文件夹，并在项目配置文件app.json中声明这些分包。配置页面路径：确保在app.json中的pages数组里正确引用了分包下的页面路径，使用//格式。优化资源加载：利用分包机制，将图片、音频等静态资源随所属功能一同放入对应子包，减少主包体积。删除冗余代码：定期审查代码库，移除未使用的变量、函数和组件，避免不必要的代码膨胀。
2024-11-21 16:53:23
901
原创 vue2 -- el-form组件动态增减表单项及表单项验证
在数据录入场景（如订单信息录入）中，可根据实际情况（如商品种类增加）动态添加表单项（如商品相关信息）。包含必填项验证和数据格式验证（如邮箱、电话格式），防止错误数据提交。// 此处执行错误的逻辑。// 执行父组件回调。
2024-11-06 17:29:08
443
原创 NGINX 部署项目时，遇到刷新页面导致 404
通过以上配置，你的 NGINX 将正确处理所有请求，避免刷新页面导致的 404 错误。此时，所有的 URL 请求都会被重定向到。，并由前端路由器（如 React Router 或 Vue Router）处理具体的路由。首先，确保你的项目已经构建完毕，并且所有静态文件（如。文件等）都位于一个目录下，例如。
2024-06-05 10:52:16
1823
原创 Windows系统中配置 Redis 监听特定的 IP 地址
监听所有接口存在安全风险，确保在生产环境中有适当的防火墙和安全措施。文件，这是 Redis 的配置文件。在 Redis 安装目录中找到。保存并关闭配置文件。
2024-06-05 09:11:25
630
原创 git -- 清除本地分支以及删除远程分支
参数用于删除已经被合并到当前分支的分支。参数用于清理本地已删除的远程分支引用。这个命令会从远程仓库中删除指定的分支。参数用于强制删除未被合并的分支。这样，就成功地清除了本地和远程的。假设你有一个分支名为。
2024-06-05 08:51:38
1376
原创 Linux系统虚拟机开放某个端口流程
核实Nginx配置文件中指定的代理端口是否正确，并且该端口已经在虚拟机上正确监听，没有被防火墙或系统安全策略限制。在Linux虚拟机上运行Nginx时，前端调用Nginx代理的接口请求显示‘请求超时’。确认本机与虚拟机之间的网络连接是否稳定，以及是否存在任何可能的网络延迟或阻塞。
2024-05-17 09:13:20
396
1原创 vue3 -- 项目使用自定义字体font-family
引入字体文件： 首先，确保你的字体文件（通常是.woff、.woff2、.ttf等格式）位于项目中的某个目录下，比如src/assets/fonts/。在全局样式中定义字体： 在你的全局样式文件中（通常是App.vue或者一个单独的样式文件），使用@font-face规则引入字体文件，并定义字体名称。在Vue 3项目中使用自定义字体（font-family）的方法与在普通的HTML/CSS项目中类似。
2024-04-18 15:18:40
2003
原创 在uniapp开发的H5页面中，当我们使用浏览器的刷新功能时，会导致页面栈被清空，从而出现无法返回的跳转问题。
导航栏组件项目引入了uview-ui,直接进入u-navbar源码位置去修改。
2024-01-27 11:33:50
592
原创 vue2 -- 截图工具html2canvas
其中，this.$refs.capture 是一个引用，它可以指向组件内的某个 HTML 元素，以便让 html2canvas 截取该元素。:这样就可以在 Vue 中使用 html2canvas 实现截图功能了。在回调函数中，可以根据需要对生成的 Canvas 元素进行进一步处理，比如显示在页面上、下载为图像文件或上传到服务器等操作。1：安装 html2canvas 库。可以将网页中的指定元素或整个页面截取为图片，以便保存或分享。:3：编写截图逻辑。在 Vue 中使用 html2canvas 实现。
2024-01-18 14:14:36
688
原创 TypeScript入门实战笔记 -- 07 接口类型与类型别名：这两者的用法与区别分别是什么？
在以上示例中，你可能会觉得接口类型仅能用来定义对象的类型，但是接口类型还可以用来定义函数的类型（备注：仅仅是定义函数的类型，而不包含函数的实现），具体示例如下。/** 单独的函数实践 */在示例第 1~3 行，我们定义了一个接口类型 StudyLanguage，它有一个函数类型的匿名成员，函数参数类型 ProgramLanguage，返回值的类型是 void，通过这样的格式定义的接口类型又被称之为可执行类型，也就是一个函数类型。
2023-12-26 14:54:14
186
原创 TypeScript入门实战笔记 -- 06 类类型：如何高效使用类型化的面向对象编程利器？
在上面的例子中我们可以看到，第 3 行 Son 类的 lastName 属性是私有的，只在 Son 类中可见；类的最后一个特性——类的类型和函数类似，即在声明类的时候，其实也同时声明了一个特殊的类型（确切地讲是一个接口类型），这个类型的名字就是类名，表示类实例的类型；在第 1～5 行，我们定义了一个包含 x、y、add 属性和方法的接口类型（详见 07 讲），然后在第 6～12 行实现了拥有接口约定的x、y 属性和 add 方法，以及接口未约定的 addTwice 方法的NumAdder类。
2023-12-18 10:48:50
159
原创 TypeScript入门实战笔记 -- 05 函数类型：返回值类型和参数类型到底如何定义？
在上述代码中，函数 log3 的函数参数 x 的类型为可选的联合类型 number | string，但是因为默认参数字符串类型是联合类型 number | string 的子类型，所以 TypeScript 也会检查通过。因此，如果我们将默认值设置为字符串类型，编译器就会抛出一个 ts(2322) 的错误。在上述代码中，在添加返回值类型的地方，我们通过“参数名 + is + 类型”的格式明确表明了参数的类型，进而引起类型缩小，所以类型谓词函数的一个重要的应用场景是实现自定义类型守卫（详见第 11 讲）。
2023-12-15 14:39:43
402
原创 TypeScript入门实战笔记 -- 04 什么是字面量类型、类型推断、类型拓宽和类型缩小？
1：使用vscode 新建一个 04.Literal.ts 文件，运行下列示例。2：执行 tsc 04.Literal.ts --strict --alwaysStrict false --watch 执行：nodemon 04.Literal.js 前面我们已经学习了 TypeScript 的基本语法和基础类型，接下来通过几个例子温习一下（为了避免命名冲突，后续示例中会引入一对花括符 {} 创建块级作用域）：看着上面的示例，定义基础类型的变量都需要写明类型注解，TypeScript 太麻烦了吧？在示
2023-12-14 11:41:03
176
原创 TypeScript入门实战笔记 -- 03 复杂基础类型：TypeScript 与 JavaScript 有何不同？
在恒为 false 的类型守卫条件判断下，变量的类型将缩小为 never（never 是所有其他类型的子类型，所以是类型缩小为 never，而不是变成 never）。注意：类型断言的操作对象必须满足某些约束关系，否则我们将得到一个 ts(2352) 错误，即从类型“源类型”到类型“目标类型”的转换是错误的，因为这两种类型不能充分重叠。我们可以对被注解为 any 类型的变量进行任何操作，包括获取事实上并不存在的属性、方法，并且 TypeScript 还无法检测其属性是否存在、类型是否正确。
2023-12-13 14:33:29
171
原创 TypeScript入门实战笔记 -- 02 简单基础类型：TypeScript 与 JavaScript 有何不同？
TypeScript 其实就是类型化的 JavaScript，它不仅支持 JavaScript 的所有特性，还在 JavaScript 的基础上添加了静态类型注解扩展。这里我们举个例子来说明一下，比如 JavaScript 中虽然提供了原始数据类型 string、number，但是它无法检测我们是不是按照约定的类型对变量赋值，而 TypeScript 会对赋值及其他所有操作默认做静态类型检测。
2023-12-12 13:44:11
154
原创 TypeScript入门实战笔记 -- 01 如何快速搭建 TypeScript 学习开发环境？
特别需要注意的是，VS Code 默认使用自身内置的 TypeScript 语言服务版本，而在应用构建过程中，构建工具使用的却是应用路径下 node_modules/typescript 里的 TypeScript 版本。基于它，我们无须在本地安装环境，只需要一个浏览器即可随时学习和编写 TypeScript，同时还可以方便地选择 TypeScript 版本、配置 tsconfig，并对 TypeScript 实时静态类型检测、转译输出 JavaScript 和在线执行。
2023-12-11 10:23:41
545
原创 TypeScript入门实战笔记 -- 开篇 为什么要选择 TypeScript ？
TypeScript 是一种静态类型检查的编程语言，它由 Microsoft 开发和维护。相比竞争对手 Facebook 的 Flow，TypeScript 更具备类型编程的优势，而且还有 Microsoft、Google 这两家国际大厂做背书。越来越多的主流框架（例如 React、Vue 3、Angular、Deno、Nest.js 等）要么选用 TypeScript 编写源码，要么为 TypeScript 提供了完美的支持。随着 TypeScript 的普及，TypeScript 在国内（国内滞后国外）
2023-12-09 16:57:20
167
原创 vue2 -- 解决el-table自适应高度,页面不显示多条滚动条，超出的部分让el-table内部出现滚动条。
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的：只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。页面上布局是头部-面包屑，中间-表格，底部-分页组件。需要使表格高度需要自适应屏幕。\src\mixins\TableHeight.js 新建 TableHeight.js 文件。首先先import导入js文件，mixins中使用。
2023-12-06 11:04:45
1321
原创 vue2 - SuperMap3D加载基于Nginx服务生成的3DTileset模型切片服务地址
在Vue2中，我们可以利用SuperMap3D加载基于Nginx服务生成的3DTileset模型切片服务地址。这种技术能够实现高性能的三维地理数据展示和交互，通过Nginx服务快速响应客户端请求并转发到后端服务。结合Vue2和SuperMap3D的API，可以轻松集成并渲染地理数据，实现流畅的用户体验和快速的数据加载速度。这样的技术组合为用户呈现出令人印象深刻的地理信息可视化效果，为三维地图应用提供了强大的支持。
2023-11-17 10:21:36
765
原创 vue2 - SuperMap3D添加S3M图层
SuperMap iClient3D for WebGL/WebGPU 提供多种接口，支持在创建好的三维场景中添加种类丰富的数据图层。在此以添加地形图层为例介绍使用WebGPU方式加载的方法。(1).通过open接口将整个场景打开，这种方法简单易操作且不易出现遗漏图层的情况。
2023-11-16 13:42:50
700
SuperMap iClient3D for WebGL 吊机模型文件
2023-11-08
前端关于 CSS，你该做好这 20 件事
2022-04-21
AMandroidstudio.zip
2020-11-23
Svn使用操作步骤.zip
2020-03-29
HTML页面JS引入的位置不同，会延迟浏览器对DOM的渲染吗？
2021-06-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人