自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Mr. Zhang Xiaojian's Blog

欢迎来到本博主的主页,“海内存知己,天涯若比邻”。在这里,我愿与你分享所思所学,一同探索世间万象。“问渠那得清如许,为有源头活水来”,让我们共同遨游于知识的海洋,探寻灵感与智慧的源泉。

  • 博客(86)
  • 收藏
  • 关注

原创 自动生成树形目录结构:与 `el-tree` 和滚动定位结合的完整解决方案

函数清理标题中的 HTML 实体字符和多余空格,确保目录文本的可读性。通过解析 HTML 文档中的标题标签 或者 富文本框收集的数据(如。组件展示树形目录,并通过节点点击事件触发滚动定位。点击目录中的节点时,页面会平滑滚动到对应的内容部分。方法,根据节点信息定位到对应的文档内容。使用 Element Plus 的。数据格式的树形目录。

2025-03-20 21:32:36 387

原创 Vue 3 实现富文本内容导出 Word 文档:前端直出方案与优化实践

优势亮点🚀 300ms 内完成文档生成🖨️ 完美兼容 WPS/Office 等办公软件📦 零服务端依赖🔒 内容不经过网络传输扩展方向与后端协作实现模板化导出集成电子签名功能添加文档加密保护源码参考提示:生产环境建议添加文件大小监控,防止生成超大文档导致浏览器崩溃。

2025-03-05 18:42:37 1187

原创 Vue 3 实现 HTML 内容预览功能:仿 Word 样式与内存安全实践

/ 子组件暴露接口previewHtmlAsWord // 显式暴露预览方法});通过本文实现的预览组件具有以下优势:🚀性能优异:本地处理无需网络🔒安全可靠:沙箱隔离 + 内存自动回收📑专业呈现:完美还原 Word 版式🔄易于集成:开箱即用的组件化方案。

2025-03-05 18:28:28 659

原创 Vue 3 整合 WangEditor 富文本编辑器:从基础到高级实践

通过本文的实践,我们已经实现了:✅ 编辑器的完整集成✅ 云端图片上传✅ 数据双向绑定✅ 工具栏定制✅ 内存安全防护官方资源WangEditor 官网GitHub 仓库。

2025-03-05 18:23:10 542

原创 Vue3 使用 MinIO 实现文件上传功能详解

MinIO 是一款高性能的对象存储系统,专为大规模 AI/ML、数据湖和数据库工作负载而设计。它兼容亚马逊 S3 API,并支持软件定义存储,无需购买任何专有硬件即可在云上或普通硬件上部署分布式对象存储。

2025-02-20 11:33:50 392

原创 Go语言入门指南

Go语言,作为一门现代编程语言,自诞生以来便备受开发者青睐。它以其简洁的语法、高效的性能和强大的并发支持,迅速成为云服务开发、后端开发以及微服务架构中的热门选择。本文将从Go语言的历史背景、特性、安装方法到快速入门等方面进行详细介绍,帮助你快速上手这门语言。Go语言(Golang)由Google公司于2007年9月30日启动研发,并在2009年11月10日正式开源。它的设计初衷是为了满足大规模软件开发的需求,解决C++和Java等传统语言在构建大型系统时遇到的问题。Go语言的主要创造者包括:经过三年的研发,

2025-02-19 11:16:56 1048

原创 Vue 项目自动化:运行后自动打开浏览器的多种配置方法

在Vue工程化项目中,配置项目运行完成后自动在浏览器中打开是一项非常实用的功能,它能够显著提高开发效率。下面将详细介绍几种实现这一功能的方法。

2025-02-19 10:38:30 610

原创 前端项目零停机部署方案与最佳实践

将每个版本的前端资源部署到独立的目录中,而不是直接覆盖现有的文件。通过修改服务器配置(如 Nginx 或 Apache)来动态指向最新版本的目录。使用自动化部署工具(如 Jenkins、GitLab CI/CD、Ansible 等)来简化部署流程,减少手动操作带来的延迟。蓝绿部署是一种常见的零停机部署策略,通过同时运行两个版本的应用程序来实现无缝切换。创建一个软链接指向当前版本的目录,在部署时只需更改软链接的目标即可。只更新发生变化的文件,而不是删除整个目录再重新上传。

2025-02-12 17:36:28 705

原创 使用 Web Speech API 构建通用的语音播报工具函数

允许选择特定的声音类型。例如,在某些实现中可以选择男声、女声或者其他特色声音。本文聚焦于后者——语音合成(TTS),即通过 JavaScript 将文本转换为语音播放出来。这些事件可以帮助监控语音合成过程中的各个阶段,从而实现更复杂的交互逻辑。较低的值意味着较慢的语速,而较高的值则表示较快的语速。改变音调可以区分不同的说话者或者表达情感变化。: 定义了语音的语言环境。: 调整语音的音调高低,范围从。获取所有可用的声音列表来实现。: 控制语速,取值范围为。: 设置播放音量,范围为。

2025-02-12 14:26:45 334

原创 塑造未来:2025 年前端开发的新趋势与技术展望

2025年的前端开发技术为开发者提供了无尽的可能性。无论是边缘计算的兴起、WebAssembly的普及,还是AI工具的赋能,都在不断推动前端生态的演进。

2025-02-11 11:26:17 1924

原创 用户体验UP!响应式网页设计的CSS魔法

【代码】用户体验UP!响应式网页设计的CSS魔法。响应式网页设计的CSS技巧,响应式网页的CSS布局方案,响应式网页设计的CSS优化策略,响应式网页设计的CSS终极指南,9个必备CSS技巧

2025-02-11 11:11:43 559

原创 云效流水线部署前端项目

先删除旧目录,除了package.tgz 他为打包后的压缩文件,如果直接清空服务器目录,会报错,

2025-01-17 14:14:54 381

原创 在高德地图上加载3DTilesLayer图层模型/天地瓦片

提供的一个类,专门用于加载和渲染符合3D Tiles规范的数据。3D Tiles是一种开放标准,旨在高效地传输和渲染大规模三维地理空间数据集。提供的一个类,它允许你将Three.js场景作为一个图层添加到高德地图中。这个类封装了Three.js的核心功能,并与高德地图API进行了集成,使得我们可以轻松地在地图上展示3D内容。是Three.js中的一个类,用于为场景提供均匀的光照效果。同时,还可以添加其他类型的图层,比如瓦片图层,来丰富地图的内容。最后,我们需要初始化高德地图,并在地图加载完成后调用。

2025-01-06 17:57:01 982

原创 使用 js-cookie 和 localStorage/sessionStorage 构建高效的浏览器缓存管理

是一个轻量级的 JavaScript 库,提供了简洁的 API 来读取、写入和删除 Cookies。通常需要跨多个页面共享,并且可能涉及到安全性问题(如HTTPS),所以选择将其存储在 Cookies 中,而不是。两者的主要区别在于数据的生命周期不同,因此在实际应用中可以根据需求选择合适的存储方式。更加易用且功能丰富,支持自动编码/解码、路径和域设置等功能。此外,为了确保键名的一致性和可维护性,定义了一个。在不同页面之间的传递,还能利用。方法来为每个键添加前缀。提供的安全特性,如设置。

2024-12-21 16:38:04 353

原创 构建健壮的 Axios 请求管理器:提升 React 应用的 API 交互体验

首先,我们需要安装axiosaxios:用于发起 HTTP 请求。qs:用于序列化复杂的查询参数,支持点号表示法(如user.namenprogress:用于显示加载进度条,提升用户体验。:提供一些常用的 UI 组件,如 Toast 提示框。我们根据不同的错误类型(如超时、网络错误、接口路径找不到等)生成相应的错误提示信息。通过Toast组件显示这些提示,用户可以清楚地了解发生了什么问题,并采取相应的行动。现在,我们可以在项目的其他地方使用这个自定义的 Axios 实例来发起 API 请求。

2024-12-19 18:08:13 1103

原创 实现 React 电子签名功能:从零开始构建一个完整的解决方案

我们希望通过 React 构建一个简单的电子签名组件,用户可以在画布上手写签名,完成后可以保存签名并将其上传到服务器。用户可以在画布上自由绘制签名。提供“清除”按钮,允许用户重置签名。提供“保存”按钮,将签名保存为图片文件并上传到服务器。签名应以 Base64 格式保存,并转换为文件流后上传。使用 MinIO 作为文件存储服务,确保签名文件的安全性和持久性。

2024-12-19 18:00:13 747

原创 Electron electron-builder.yml 配置 (自定义包名,用户自定义安装目录...)

【代码】Electron electron-builder.yml 配置 (自定义包名,用户自定义安装目录...)

2024-12-12 11:43:57 1837 3

原创 Electron-Vite 项目搭建(Vue)

electron-vite如果一切设置正确,能够看到Electron 应用程序。完成上述步骤后,脚手架将会自动搭建好项目结构。的文件夹,并在其中创建一个。桌面应用

2024-12-12 11:30:12 966 1

原创 Vue3 实现拖拽小图片覆盖大图片并下载合并后的图片

2. 拖拽小图片使用 来引用大图片和小图片,并通过监听鼠标事件来实现拖拽功能。使用 HTML5 Canvas 来绘制合并后的图片,并提供下载功能。在组件挂载完成后,动态创建一个下载按钮并添加到页面中。

2024-11-09 15:47:45 1092

原创 Vue 3 对接保利威云点播播放器实践

首先,需要在项目中引入保利威的云点播播放器脚本。这个播放器的脚本可以从保利威的官网获取。我们将使用 Vue 3 的onMounted这些生命周期函数来加载和卸载播放器。

2024-10-24 17:34:19 581

原创 在 Vue 3 中实现电子签名组件

在 Vue 3 中实现一个简单的电子签名组件,并解决一个常见问题:当签名组件放在弹窗内时,鼠标绘制会出现偏移的问题。

2024-10-22 18:23:14 1620

原创 Vue3 使用CryptoJS加密

现在的互联网世界充满了各种各样的信息,有些信息非常重要,比如密码、个人信息等。如果我们把这些信息直接发送到服务器,别人可能会截取到,然后偷走我们的信息。为了避免这种情况发生,我们需要把重要的信息变成别人看不懂的东西,这就是加密的作用。CryptoJS 是一个非常好用的 JavaScript 库,它能帮我们加密和解密信息。另外还有一个叫“偏移量”的东西,它可以帮助我们更好地加密信息。这个函数接收加密后的文字,然后返回正常的明文。我们创建一个简单的 Vue 组件,让用户输入一些信息,然后可以加密和解密。

2024-10-12 11:19:42 1714

原创 Element-plus el-form、el-dialog 数据回显同时用时,重置失效问题

当第一次打开网页并点击“编辑”按钮时,虽然对话框变量变为 true 使对话框可见,但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制,DOM 实际上还未更新,因此表单组件内绑定了这些有值的初始数据。这样,在后续调用 resetFields 方法时,表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据,而不是空字符串。时,表单会回到上次设置的初始值,即回显的数据。

2024-10-12 10:41:56 872

原创 H5扫码 html5-qrcode + React中使用

是一个轻量级的库,可以让你在网页上轻松实现二维码扫描功能。它支持多种设备和浏览器,并且提供了丰富的配置选项。注:网络协议必须是HTTPS协议,否则访问不了手机摄像头。

2024-09-23 11:54:21 732

原创 Vue 3.5 版本“天元突破红莲螺岩”(Tengen Toppa Gurren Lagann)

探讨 Vue 3.5 中的一些关键更新。

2024-09-23 11:39:01 772

原创 React Zustand状态管理库的使用

Zustand 支持自定义中间件,可以用来添加日志记录、持久化状态等功能。

2024-09-19 15:20:54 998

原创 React + Vite 多环境配置

React + Vite 多环境配置 设置读取制定 .env文件 ,默认读取.env.production。

2024-09-19 14:31:24 696

原创 node_modules/@types/lodash-es/node_modules/@types/lodash/common/object.d.ts:1026:46

因为重新安装了依赖,一些外部库升级,用到了ts的新语法,报错内容就是TS语法不兼容。我的ts版本为4.5.5 所以在打包的过程中会报错。解决方案:提升ts至兼容版本,或直接升到最新版本。

2024-08-03 10:29:59 2407

原创 阿里ChatSDK使用,开箱即用聊天框

介绍:效果:智能助理ChatSDK,是在ChatUI的基础上,结合阿里云智能客服的最佳实践,沉淀和总结出来的一个开箱即用的,可快速搭建智能对话机器人的框架。它简单易上手,通过简单的配置就能搭建出对话机器人;同时它强大易扩展,通过丰富的接口和自定义卡片满足各种定制化需求。注意: npm包仅限阿里集团内部使用外部客户可以使用cdn方式引入ChatSDK,然后配置externals @ali/chatui-sdk为ChatSDK,详细怎么引入可以看:viteExternalsPlugin 插件管理外部依赖-CSD

2024-07-12 22:09:17 2625 1

原创 viteExternalsPlugin 插件管理外部依赖

viteExternalsPlugin 是一个 Vite 插件,用于将指定的模块或库配置为外部依赖。比如从项目 index.html 中引入一些SDK文件,我这个是引入的CHATUI。直接想引入插件一样引入即可。

2024-07-12 20:14:54 1340 3

原创 Vue3 Element-plus 多表单同时校验

【代码】Vue3 Element-plus 多表单同时校验。

2024-06-18 17:18:57 626 1

原创 Element-plus DatePicker 日期选择器【正则校验时间范围】

Element-plus DatePicker 日期选择器【正则校验时间范围

2024-04-24 17:44:33 685

原创 将本地分支还原到上游状态 【Git Reset:重置本地分支】

是一种破坏性操作,会删除您在本地的所有未提交更改。请务必在执行此操作之前确保您不再需要这些更改,因为它们将无法恢复。:首先,需要知道您的本地分支对应的上游分支的名称。命令将本地分支重置为指定的上游分支的状态。命令查看您的远程仓库信息,找到对应的上游仓库以及分支名称。相同的提交,丢弃本地的所有未提交更改。这将会将您的本地分支指向与。,则可以执行以下命令。

2024-03-18 10:10:00 864

原创 Linux服务器常用命令大全

【代码】Linux服务器常用命令大全。

2024-03-14 10:33:36 465

原创 Docker命令大全

Docker是一个用于开发、部署和运行应用程序的开源平台。它通过容器化技术来实现轻量级、快速部署的应用程序环境。

2024-03-14 10:28:57 941

原创 前端批量下载文件

批量下载上传到OSS的文件,下载文件乱码问题,表格批量下载

2024-02-05 16:42:52 621

原创 HarmonyOS开发工具DevEco Studio安装以及汉化

支持ArkTS/TS语法规则、最佳实践及通用编程规范检查,支持自定义检查范围、生效规则及告警级别;支持HAR包的编译构建,并支持配置HAR包的混淆能力,生成相应的静态共享包;支持HAR包引用方的构建打包,支持HAR包的编辑联想。支持在Stage模型和模块化编译方式下开发HSP,以及共享HSP给应用内其他模块使用;OHPM CLI作为鸿蒙生态三方库的包管理工具,支持OpenHarmony共享包发布、安装和依赖管理。面向HarmonyOS应用及元服务开发者提供的集成开发环境(IDE), 助力高效开发。

2024-02-05 12:00:05 1109

原创 OSS上传【下载乱码问题】

【代码】OSS上传下载乱码问题。

2024-01-26 16:46:21 799

原创 Vue3 Element-plus表格导出excel文件

【代码】Vue3 Element-plust表格导出excel文件。

2024-01-25 17:32:46 862 3

原创 Element-plus upload上传限制文件类型,文件大小

【代码】Element-plus upload上传限制文件类型,文件大小。

2024-01-25 17:18:48 2060

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除