十八朵郁金香-优快云博客

原创用AI（Deepseek）做了配色网站-功能介绍【欢迎体验】

本文介绍了一个利用AI技术开发的配色网站，主要包含配色工具使用和配色方案展示两大功能模块。网站提供多种颜色主题（双色、三色、四色方案），支持颜色编码复制和对比度分析，并配备对比度检测器、色彩格式转换、智能配色推荐和图片色彩提取等实用工具。

2025-06-03 14:55:11 1487 33

原创一天时间，我用AI(DeepSeek)做了一个配色网站

用AI做了一个简易的配色网站。最近在开发颜色搭配主题的H5和小程序，想到需要补充web网站，因此有了这篇文章，现在和大家分享本次经历。

2025-04-13 17:11:10 3885 29

原创 vue3从0到1创建echarts案例示范，保姆级教程【图文+代码】

本篇文章演示如何快速且简单地在vue3中实现echarts图表。一些图表的样式，图表的参数等设置，需要大家自行进行查询学习。

2024-09-17 16:11:14 23158 40

原创【H5工具】一个简约高级感渐变海报H5设计工具

摘要：本文介绍了一个基于HTML5的在线渐变背景设计工具，具备颜色管理（支持2-4种颜色自定义）、渐变角度调节、文本编辑（20字符以内）及导出功能（PNG图片/CSS代码）。工具提供实时预览效果，已完成PC端和移动端适配。作者计划优化图片导出格式，并在平台推广该工具，定价9.99米永久使用，作为被动收入来源之一。该工具是继配色网站后开发的第二款完整产品。

2025-10-30 14:44:52 342 6

原创【2025年10月】有感、随笔

之前工作期间有时间的时候，我是有在多个平台输出内容（主要是csdn、小红书、公众号），后面慢慢地将“技术分享”的重点转移到“个人学习和商业化”，在小红薯上是发布自己开发的产品（小程序）和尝试‘商业化变现’；一直更新到最新一篇文章（9.29）。

2025-10-27 16:30:19 712

本文介绍了SSE（Server-Sent Events）技术在前端实时数据获取中的应用。SSE基于HTTP协议，允许服务器单向推送数据到客户端，相比轮询更高效，比WebSocket更轻量。文章对比了SSE与WebSocket的差异，详细展示了如何在Express后端设置SSE服务（包括响应头配置、连接维护和数据格式），以及如何在Vue2前端通过EventSource API建立连接、处理消息。最后提供了一个包含打字机动画效果的实现案例，演示了SSE在实时数据展示中的实际应用场景。

2025-09-29 16:52:15 992 31

原创实现美团购物车小球动画效果：从原理到代码

本文介绍了如何实现类似美团的购物车抛物线动画效果，通过HTML、CSS和JavaScript技术组合完成。关键实现包括：1.响应式商品网格布局；2.点击生成彩色小球；3.计算贝塞尔曲线控制点实现抛物线运动轨迹；4.使用Web Animations API执行动画；5.购物车图标接收反馈效果。该方案采用纯前端技术实现，适配移动端和PC端，包含重置功能，完整代码可直接使用。这种动画效果能显著提升电商应用的用户体验，展现了前端动画技术的实用价值。

2025-09-24 10:20:22 875 3

原创用【PinMe】轻松实现前端部署（文章附有演示案例）

摘要：PinMe是一款基于区块链和IPFS的去中心化前端部署工具，支持用户通过命令行或可视化界面轻松部署静态网站。与传统中心化部署工具相比，PinMe具有抗审查、数据持久性和隐私保护等优势，适合Web3应用开发。其操作简单，只需上传文件即可生成可访问的区块链域名链接，但访问速度可能受限于去中心化网络。传统部署工具则在性能稳定性和扩展性上更具优势。PinMe展现了Web3技术在前端部署领域的创新应用。

2025-09-22 19:11:12 1397 17

原创 Nano Banana制作3D立体打印效果图

Nano Banana 是 Google 于 2024 年推出的革命性 AI 驱动图像生成与编辑模型，正式名称为 Gemini 2.5 Flash Image。技术背景：Nano Banana 基于 Google DeepMind 最新的 Gemini 2.5 Flash Image 架构，采用原生多模态设计理念，将文本理解、图像生成、编辑处理等功能统一在一个模型中。

2025-09-15 09:50:55 1148 11

原创一文搞懂跨域：从原理到解决方案

本文介绍了前端开发中常见的跨域问题及其解决方案。跨域指浏览器出于安全考虑限制不同域名、协议或端口间的资源请求。主要解决方案包括： CORS（跨域资源共享）：现代浏览器标准方案，通过服务器设置响应头实现跨域访问，支持多种请求类型； JSONP：利用script标签特性实现跨域，仅支持GET请求，安全性较差；代理服务器：开发环境常用方案，通过中间服务器转发请求规避跨域限制。生产环境推荐使用CORS，JSONP适合兼容旧浏览器，代理则主要用于开发调试。

2025-09-11 14:00:00 633 12

原创深入解析：ES6 中 class 与普通构造器的区别

本文深入对比了JavaScript中ES6 class与ES5构造函数的区别。表面看class是构造函数的语法糖，但本质存在四大差异：1) class必须通过new调用，构造函数可随意调用；2) class原型方法默认不可枚举；3) class默认启用严格模式；4) class方法不能作为构造函数使用。通过Babel转译揭示了class的内部实现机制，并解答了将class转换为等构造函数的面试题。结论指出，虽然两者功能相似，但class提供了更严格的语法限制和更清晰的代码结构，推荐在现代开发中使用。

2025-09-10 14:17:24 1010 9

原创如何优雅解析和展示结构化文本内容

本文介绍了如何优雅处理后端返回的带样式结构化文本数据。传统字符串处理方式会丢失样式信息，而正确做法是先解析JSON数据，再逐段处理。文章提供了完整的前端实现方案，核心是解析JSON后遍历每个文本片段，动态创建span元素并应用对应CSS样式。关键点包括：JSON数据解析、CSS属性驼峰式转换、使用textContent保留换行效果。这种处理方式能准确还原后端数据中的所有样式和格式，适用于各类结构化文本展示场景。

2025-09-01 15:56:36 395 3

原创前端文件下载的三种方式：URL、二进制与 Base64 的深度解析

本文探讨了Web应用中三种主流文件下载方式：URL直接下载、二进制数据下载和Base64编码下载。URL下载通过创建链接标签实现，适合大文件；二进制下载需要前端转换Blob对象，适用于动态生成文件；Base64编码适合小型文件，但会增加体积。三种方式在数据体积、内存占用、适用文件大小等方面各有特点。文章还提供了通用的前端处理方案，可根据不同返回数据类型自动选择合适的下载方式。选择时应考虑后端接口设计、文件大小和权限控制等因素。

2025-08-27 10:41:35 1337 2

原创【Express】常用中间件用法：会话管理、输入验证（文章附有完整代码示范）

Express 是一个简洁而强大的 Node.js Web 应用框架，它提供了丰富的中间件来帮助开发者快速构建 Web 应用。前面我写的express专栏中很少涉及express中间件的用法，因此现在补充一些常用的中间件。并展示如何将它们有效地结合起来，以构建一个功能更强大、更安全的 Express 应用。

2025-08-22 10:00:00 1545 5

原创 Express 后端三层模型：让你的 API 架构更优雅

Express后端开发中的三层模型（Routes、Services、DAO）是实现模块化开发的核心架构。路由层负责接收请求和返回响应，服务层处理业务逻辑，DAO层专注数据操作。这种分层设计使各层职责明确，降低了代码耦合度，提高了复用性和可维护性。通过清晰的协作流程（请求→路由→服务→DAO→响应），实现了高效的数据流转，符合单一职责原则，便于测试和扩展。实践表明，这种架构能有效解决代码混乱和维护困难的问题。

2025-08-21 14:11:44 141 2

原创 express+Vue2进行项目实战-景点后台管理系统（中篇）

本文介绍了Express+Vue2景点后台管理系统的前端开发过程，重点讲解了页面功能的实现。主要包括：1. 使用vue-admin-template模板实现的登录页和首页；2. 通过配置路由实现景点管理菜单层次结构；3. 详细开发了景点管理页面的三大部分：搜索模块（支持字段选择和内容输入）、列表展示模块（包含图片预览和多列信息展示）、弹窗模块（统一处理添加和编辑功能）。文章提供了完整的代码示例，并强调虽然暂未连接后端数据，但已构建好前端框架逻辑，为后续数据对接打好基础。

2025-08-19 09:59:52 956 5

原创【实用案例】录音分片上传的核心逻辑和实现案例【文章附有代码】

本文介绍了一种基于分片上传技术的录音文件上传解决方案。前端通过MediaRecorder API实现录音功能，将大文件分割成5MB的分片，采用MD5校验和断点续传机制确保上传可靠性。后端使用Express框架接收分片并合并成完整文件。该方案解决了大文件上传限制问题，支持暂停/继续功能，并具备扩展性，可应用于视频、文档等多种大文件上传场景。

2025-08-11 16:55:52 624 12

原创通俗易懂的浏览器事件循环指南

JavaScript是单线程的，这意味着它一次只能执行一个任务。为了处理异步操作（比如定时器、网络请求等），浏览器引入了事件循环机制。不断地从任务队列中取出任务并执行。事件循环的工作流程可以简单概括为以下几个步骤：执行同步代码。执行微任务队列中的所有任务。执行一个宏任务。重复上述过程。

2025-08-07 10:30:00 584 1

原创【Vant Weapp】下拉菜单+自定义卡片的封装+跳转详情页【演示+代码】

本文介绍了如何在小程序中使用vant weapp组件库的下拉菜单(DropdownMenu)与卡片列表结合的开发实践。文章首先详细说明了开发环境准备，包括Vant组件库的安装和配置步骤，然后提供了自定义卡片组件的实现方案，包括组件下载引入、页面示范和数据结构设计。文中还展示了如何通过下拉菜单实现商品分类筛选功能，并补充了点击卡片跳转详情页的案例实现，包括轮播图展示和商品详情布局。最后给出了完整的代码仓库地址供开发者参考使用。该方案解决了官方示例中下拉菜单未与卡片列表结合的问题，为小程序开发提供了实用参考。

2025-08-04 09:39:08 941 9

原创【Uni-app开发笔记】录音和会话列表的双向联动【效果展示+代码获取】

本文介绍了前端开发中实现音频与文本双向联动的技术方案。核心思路是通过建立音频时间与文本片段的映射关系，实现播放时自动高亮对应文本，点击文本跳转到对应音频位置的功能。文章详细解析了数据结构设计、音频驱动文本、文本驱动音频的实现逻辑，以及状态管理和异常处理等关键技术点。作者以uni-app为例，展示了如何通过AI辅助完成95%的代码实现，强调理解核心逻辑比掌握具体技术更重要。该方案适用于录音转写、会议记录等需要音文同步的场景，具有较高的实用价值。

2025-07-31 17:32:50 757 9

原创【Vue学习笔记】状态管理：Pinia 与 Vuex 的使用方法与对比【附有完整案例】

本文分享了Vue项目中状态管理的实践经验，重点对比了Vuex和Pinia两种方案。文章首先介绍了状态管理的适用场景，然后详细讲解了Vuex4.x的核心概念和使用方法，包括State、Mutations、Actions、Getters的配置和在组件中的调用方式。接着介绍了Pinia的安装配置、核心概念以及组件使用方法，并提供了完整的代码示例。最后从模块化、TypeScript支持、代码简洁性等维度对两者进行对比，建议新项目优先选择Pinia，而现有Vuex项目可根据实际情况决定是否迁移。

2025-07-24 17:25:42 775 1

原创【Echarts】“折线+柱状”实现双图表-家庭用电量可视化【文章附完整代码】

本文介绍了使用ECharts实现家庭用电量可视化监控的实战案例。通过Vue3+ECharts组合，实现了双图表联动展示（折线图显示实时功率波动，柱状图展示平均用电趋势），并采用智能颜色映射技术（根据用电负荷自动切换蓝/绿/橙/红等颜色）。案例模拟了真实家庭用电场景，按时间段生成特征数据（凌晨低功率、傍晚高负荷），并设置5秒自动更新机制。文章详细讲解了核心功能实现步骤，包括图表架构搭建、动态数据生成、颜色映射配置等，最后提供了源代码获取方式。该案例适合前端新手快速入门数据可视化开发。

2025-07-07 14:26:40 1359 9

原创分享在日常开发中常用的ES6知识点【面试常考】

本文总结了JavaScript ES6中常用数据处理技巧，包括：1）箭头函数简化回调；2）解构赋值快速提取数据；3）扩展运算符合并/复制对象；4）数组高阶方法(map/filter/reduce)处理数据；5）模板字符串动态生成内容；6）Promise/async处理异步；7）解构默认值防错；8）Set/Map实现去重和快速查找。这些特性在管理系统开发中尤其实用，如用户数据过滤、表格渲染、异步加载等场景。文章提供了具体代码示例，建议结合MDN文档深入掌握ES6特性。

2025-06-12 16:29:43 596 3

原创 Vue.js $emit的介绍和简单使用

Vue组件通信：$emit使用详解摘要：本文详细解析Vue中$emit方法实现子组件向父组件通信的机制。$emit作为Vue内置方法，通过触发自定义事件并传递数据实现组件间通信。文章介绍了基本语法和工作流程，并列举表单提交、状态变更通知、列表项交互三种典型应用场景。最佳实践包括事件命名规范、参数结构化、结合v-model使用等。最后对比了$emit与其他通信方式的适用场景，说明$emit最适合处理简单组件间的子→父数据传递，具有实现简单、耦合度低的优势。

2025-06-11 10:30:17 2672 3

原创结合AI提取并保存百度网盘的目录【详细，附有代码】

本文介绍了三种导出百度网盘目录结构的方法，重点分享了通过Python编程实现的方案。首先通过Navicat连接百度网盘的SQLite数据库文件(BaiduYunCacheFileV0.db)，获取文件路径数据；然后使用Python编写脚本，将数据导出为CSV格式的索引文件。文中提供了优化后的代码，支持用户自定义输入文件路径，并默认将输出文件保存在桌面。该方法解决了网盘无法直接导出目录层级的问题，为文件管理提供了便利。案例还提示了可能存在的编码问题和筛选功能的扩展思路。

2025-05-06 14:58:35 1773 9

原创【Uni-App】嵌入悬浮球全局组件的详细教程和防踩坑点

近期接到一个业务需求是为为h5页面嵌入悬浮球，而且还得是全局（所有页面就可以看见了），在开发的过程中也遇到一些坑，在此和大家一起学习、讨论。

2025-03-28 17:25:22 1998 12

原创【组件化思想】常用框架（react/vue/小程序）的父子通信案例

的完整流程。

2025-03-24 09:50:20 305 1

原创整理和总结微信小程序的高频知识点

近期萌生了一些想法，感觉可以做一个小程序作为产出。但小程序做得比较少，因此边做边复习。整理和总结了一些高频知识点和大家一起分享。封装程度：模板只是简单的代码片段复用，封装程度较低；组件则是高度封装的代码单元，包含结构、样式和逻辑。数据和样式隔离：模板没有数据和样式隔离，使用时可能会受外部环境影响；组件默认有样式隔离，数据和逻辑也相对独立。复杂度：模板使用简单，适合简单场景；组件相对复杂，需要处理生命周期、事件等，但能应对复杂需求。

2025-03-20 16:41:58 2010 1

原创程序员的英语学习| 当我开始用deepseek学习英语单词 Day10（第一期结束）

同义词+例句+常见搭配📄单词来源文章：Birmingham：New faces each day, but coordination is paying off | 伯明翰:每天都有新面孔，但协作正在取得成效。

2025-03-15 15:54:11 913

原创程序员的英语学习| 当我开始用deepseek学习英语单词 Day09

词性分类+同义词+例句+常见搭配📄单词来源文章：Housing migrants：Hostel environment | 住房移民：像住旅馆一样。

2025-03-14 17:20:09 838 1

原创程序员的英语学习| 当我开始用deepseek学习英语单词 Day08

同义词+例句+常见搭配📄单词来源文章：A 'breakthrough' in the four-day workweek | 实现四天工作周的“突破”一、单词分析：- (n.) 试验；试用同义词：experiment, test例句：The new drug is undergoing clinical trials.翻译：这种新药正在进行临床试验。常见搭配：clinical trial（临床试验）, trial period（试用期）- (n.) 计划；方案。

2025-03-13 18:00:40 894 1