觉醒法师-CSDN博客

原创 Vue2+ElementUI实现无限级菜单

使用Vue2和ElementUI实现无限级菜单，通常菜单数据以树形结构存储，每个菜单包含多个子菜单，子菜单又可以继续包含更深层次的子菜单项。所以，需要使用递归形式，完成子项菜单的渲染。结合Element UI组件的el-menu和el-submenu组件来构建菜单结构，有子菜单时使用el-submenu，否则使用el-menu-item。可以通过自定义组件对Element-UI菜单组件递归渲染，也可以使用Vue的render方法完成Element-UI的菜单组件的渲染，...

2025-04-26 22:40:46 1156

原创 HarmonyOS NEXT - 电商App实例五（首页开发）

在HarmonyOS NEXT开发中，首页组成模块相对较多，需要使用到组件开发，这样开发者可以将应用中独立的业务模块抽取出来，单独创建一个模块。通过组件化，使得每个独立的业务模块都可以运行、降低开发成本和维护难度，从而大大提高开发效率。在前面的案例中，电商App的环境搭建、准备工作、网络请求、登录等功能都已讲完，接下来将开始App首页的开发。下面，我们将首页分为顶部导航栏模块、轮翻图模块、分类导航模块、推荐商品区模块，以及底部导航栏模块等五个组件。

2025-03-23 20:19:13 913

原创 HarmonyOS NEXT - 网络请求问题(http)

HTTP（HyperText Transfer Protocal，超文本传输协议）是一种用于传输超媒体文档（如HTML）的应用层协议，它是客户端和服务器之间通信的基础；无论是获取数据、提交表单、上传文件，HTTP都扮演着重要角色。HarmonyOS NEXT开发过程中，HTTP请求也是不可或缺的技术，用于实现客户端和服务器之间的数据交互。同时，也需要注意网络权限、数据格式、合理配置等问题，确保应用的稳定性，以及避免以上问题未设置到位而产生的HTTP请求错误。

2025-03-15 20:45:25 1209

原创 HarmonyOS NEXT - 电商App实例四（登录界面）

登录界面是用户进入App的第一步，因此需要简洁明了，同时保持品牌风格的一致性。如：顶部区域为品牌LOGO展示，增加品牌识别度；中间区域为登录表单，包含输入框和按钮；底部区域为其他登录方式、注册入口和忘记密码相关链接。在HarmonyOS中，使用ArkTS-UI框架完成登录界面的设计，会使用到Text组件、Textinput组件、Button组件、Image组件、Link组件、Row和Column布局容器等。数据交互方面，使用@State装饰器记录用户名和密码的表单数据状态

2025-03-13 07:53:21 827

原创 HarmonyOS NEXT - 电商App实例三（网络请求axios）

在HarmonyOS中进行网络请求开发时，可以使用"@ohos.net.http"库，该库支持常见的HTTP方法，能够满足大多数应用或元服务的需求。使用axios开发网络请求是一个非常常见的任务，尤其是Web前端开发者，对它非常熟悉。axios是一个基于Promise的HTTP客户端，支持浏览器和Node.js环境，使用简单且功能强大。在harmonyOS中，如果想使用axios，可以通过ohpn工具包下载安装。

2025-03-11 21:08:33 1386

原创 HarmonyOS NEXT - 电商App实例二（网络请求http）

在HarmonyOS中进行网络请求开发时，可以使用"@ohos.net.http"库，该库支持常见的HTTP方法，能够满足大多数应用或元服务的需求。使用axios开发网络请求是一个非常常见的任务，尤其是Web前端开发者，对它非常熟悉。axios是一个基于Promise的HTTP客户端，支持浏览器和Node.js环境，使用简单且功能强大。

2025-03-10 18:57:08 1169

原创 HarmonyOS NEXT - 电商App实例一（创建项目）

HarmonyOS为开发者提供了一套声明式的UI开发语言（ArkUI框架），它可以更加简单快捷地设计和实现复杂的UI布局。利用ArkUI框架，开发者可以实现灵活的布局管理、主题切换、动画效果等功能。这里，我们将使用HarmonyOS技术，使用DevEco Studio开发工具，运用ArkTS开发语言，开发一套电商App前端UI界面。界面功能包括首页、分类页面、商品详情页、购物车页面、我的页面。

2025-03-09 18:54:43 1108

原创 VisActor/VTable - 自定义图标

在 VTable 中，我们可以使用自定义图标功能来提高表格的可读性和视觉效果。可以通过 icon 和 headerIcon 来分别分别配置表头及 body 显示的单元格图标。配置具体内容为ColumnIconOption类型的对象，也可以通过传递一个自定义函数，动态设置单元格的图标样式。在VTable中更新自定义排序图标，可以使用register.icon() 方法注册新的排序图标。

2025-03-05 22:42:40 728

原创 VisActor/VTable - 基本表格

基本表格是一种常见的可视化数据形式，用于展示和组织数据。它由行和列的网格状结构组成，以清晰、结构化的方式呈现大量数据。基本表格通常提供一些交互和可视化功能，使用户能够对数据进行查找、排序、分页和格式化等操作。

2025-03-02 12:48:10 882

原创 VisActor/VTable - 快速搭建表格

VTable源于VisActor体系，该体系是从字节跳动大量可视化场景沉淀而来，旨在提供面向叙事的智能可视化解决方案。VisActor包括渲染引擎、可视化语法、数据分析组件、图表组件、表格组件、GIS组件、图可视化组件、智能组件等多个模块，以及周边生态组成的可视化解决方案。VTable作为其中的表格组件库，基于可视化渲染引擎VRender进行封装，专为处理复杂的多维数据分析而设计。

2025-02-23 21:38:00 1482

原创 HarmonyOS NEXT - 记事本实例三 - 长按事件（变更分类信息和批量删除操作）

通过多选模式和弹框设计实现记录本App内容的分类功能，其优势在于操作效率高、用户体验好、界面简洁、用户体验好、界面简洁且扩展性强。在HarmonyOS中，技术实现和用户体验上都是可行的。

2025-02-18 07:36:07 1211 2

原创 HarmonyOS NEXT - 记事本实例二（关系型数据库数据存储）

开发一个记事本App的主要功能点包括以下几点：创建笔记：用户可以在应用中创建新的笔记，包括输入笔记标题、内容，以及记录创建时间和更新时间等。编辑笔记：用户可以对已创建的笔记进行修改。删除笔记：用户可以删除不需要的笔记。分类管理：笔记可以按照类别管理，自定义类别等。查询功能：支持按时间、标题或内容进行查询。选择数据库：这里使用关系型数据库（RelationalDatabase，RDB），它是一种基于关系模型来管理数据的数据库。

2025-02-16 21:19:20 1067

原创 HarmonyOS NEXT - 记事本实例一（界面搭建）

开发一个记事本App的主要功能点包括以下几点：创建笔记：用户可以在应用中创建新的笔记，包括输入笔记标题、内容，以及记录创建时间和更新时间等。编辑笔记：用户可以对已创建的笔记进行修改。删除笔记：用户可以删除不需要的笔记。分类管理：笔记可以按照类别管理，自定义类别等。查询功能：支持按时间、标题或内容进行查询。选择数据库：这里使用关系型数据库（RelationalDatabase，RDB），它是一种基于关系模型来管理数据的数据库。

2025-02-10 08:14:51 1442 3

原创 JS通过ASCII码值实现随机字符串的生成（可指定长度以及解决首位不出现数值）

在之前写过一篇“JS实现随机生成字符串（可指定长度）”，当时写的过于简单和传统，比较粗放。此次针对此问题，对随机生成字符串的功能进行优化处理，对随机取到的字符都通过程序自动来完成。在写之前，我们先了解下String.charCodeAt、Array.from()、String.fromCharCode等方法，以及随机获取指定范围中的值，这些在此次功能优化中起到关键作用。

2025-01-21 23:34:29 751

原创 HarmonyOS NEXT中模拟器TextInput表单类的无法输入中文字符问题

期在做HarmonyOS系统的Demo时，发现DevEcoStudio中Previewer预览模拟器，或者是设备管理中的模拟器，使用TextInput在UI界面上都无法输入中文字符，经过反复研究发现网上并未给出相应好的解决方案。在鸿蒙官网问答论谈上，也出现了不少这类求助；都是模拟器无法输入中文，只能使用真机测试。不过官网下载位置说明有写：如果您需要下载HarmonyOSNEXT版本的开发工具，请从下载中心获取。进入“下载中心”可以下载最新版本

2025-01-18 12:49:16 906

原创 CSS如何让一个盒子或内容在指定区域中上下左右居中

要使用CSS让盒子或内容在其父元素中上下左右居中，可以使用多种方法。例如：flexbox布局、使用grid布局、box布局、使用position定位和transform结合、以及表格属性等等，相关属性来实现内容的上下左右的居中。

2025-01-11 22:06:52 1463

原创 ECharts中通过仪表盘绘制自定义圆环进度条图表

在ECharts中，可以通过仪表盘、饼图、自定义图表等功能组合，实现下图中未闭合的圆环进度条效果。仅需要以下几步即可完成：1、使用仪表盘可绘制同未闭合圆环的进度条（即未完成部分进度和已完成部分进度），以及文字部分。2、使用饼图可绘制出中间透明扇形区域，根据进度条长度变换其面积大小。3、使用自定义图表绘制已完成进度条末端上白色圆点，以及文字后的底图。

2024-12-25 16:26:52 1959

原创 ECharts中通过饼图(type为pie)绘制出仪表盘进度条

在ECharts中，可以通过多个饼图系列（series）来实现仪表盘形式的进度条，如下图，需要通过以下几个饼图完成。一个饼图用于进度条背景底色（未完成部分）；一个饼图用于进度条颜色（已完成部分）；一个饼图用于进度条上白色圆点，跟随已完成进度条变更位置；一个饼图用于进度条中间扇形透明背景色，跟随已完成进度条变更面积大小；最后一个饼图用于中间圆环和文字显示。所以，要完成下图进度条，需使用五个饼图来完成图例绘制。

2024-12-22 11:40:18 1259

原创 ECharts中线性图添加图表标线和图表标点以标记最大值和最小值

在ECharts中，可以通过series中的markLine和markPoint属性来分别设置图表的标线和标点。在下面的例子中，markLine用于添加一个标记最大值的标线，而markPoint用于添加标记最大值和最小值的标记点。可以根据需要调整markLine和markPoint的data属性，以设置不同的标记类型和名称。

2024-12-19 22:26:30 1336

原创 ECharts中多图表联动且主图表增加选中时的高亮效果

在实际开发中，当遇到两个图表联动，主表为柱状图，副表为线性图；当选中主表某地区时，需要将此地区进行高亮处理，并更新副表数据；此时，主表中须使用到splitArea属性，给选中区域添加背景色，表示该区域已被选中。我们此次完成是指定区域的电量发电量以及使用率等数据展示，并且当主表切换地区时，更新区域的高亮样式，以及实时更新副表中使用率数据。

2024-12-17 23:11:07 1149

原创 ECharts的柱状图表中当数据量较少时不易触发点击事件使用getZr()方法来替换触发事件

EChart的getZr()方法用于获取图表的渲染器对象，该对象可以用于监听图表的点击事件。例如下面的柱状图，某些量较少或为0时，触发点击事件比较困难，但也希望能点击空白区域时触发或取消某些操作。如上图，南京数据量较少，成都为0，当鼠标放上去时很难让捕捉到这两个区域的点击事件，此时则希望可以点击垂直方向的空白区域，也可以触发该区域点击事件。那么，接下来我们将来了解下这个功能将如何实现。

2024-12-10 14:38:40 1107

原创 EChart中如何绘制显示不同区域的散点图？

在ECharts中，要实现区域内散点图的绘制，可以使用 series 类型为 scatter 的散点图，并且通过配置项的设置，并且通过两个xAxis横坐标来绑定数据，来实现区域散点图效果图。

2024-12-03 14:27:00 1507

原创 ECharts中如何绘制电量柱状图表？

在ECharts中绘制电量柱状图表，可以使用类型为pictorialBar的象形柱图来实现，象形柱图是可以设备各种具象图形元素（如图片、SVG PathData 等）的柱状图。用于有至少一个类目轴或时间轴的直角坐标系上。每个象形图形根据基准柱的定位，是通过 symbolPosition、symbolOffset 来调整其于基准柱的相对位置。

2024-12-02 15:54:50 1245

原创 ECharts柱状图和饼图混搭并相互联动数据，以及解决tooltip显示问题

在实际开发中，有时会遇到两种图表，并且相互有着联动的效果；这种情况下，可以通过两个画板来实现，也可以通过一个画板来实现。该篇将介绍通过一个画板，如何实现柱头图和饼图的绘制，并且点击柱头图时，更新饼图信息；以及，在最后讲解如何解决饼图中tooltip信息不显示问题。如上图，我们创建了一个ECharts实例，并设置了option配置对象；series数组包含两个对象，一个是类型为bar的柱状图系列，另一个是类型为pie的饼图系列。通过这种方式，你可以在同一个画板上展示不同类型的图表。

2024-11-25 09:16:46 1269

原创 Echarts中线性图当鼠标悬浮在某条单线上不能触发mouseover事件问题解决

在项目中，在做线性图表时，遇到一个需求是：在鼠标悬停在某条单线上时，只显示当前线的信息，这样则需要触发mouseover事件。如上图，当鼠标放到图表上时，通过tooltip中的formatter回调函数返回的参数为两条线的数据集，所以通过循环始终会同时显示两条线数据；如果想单独显示一条，则需要通过鼠标事件获取当前鼠标在哪条线上，则须获取seriesIndex的值。

2024-11-24 12:19:09 1100 2

原创 Vue开发-ant-design-vue使用Modal弹框时控制台出现 [Vue warn]: Failed to resolve directive: ant-portal

近期在项目中，在控制台发现一个警告信息【[Vue warn]: Failed to resolve directive: ant-portal】，虽然不影响Modal弹框的使用，但是看着挺碍眼，一操作就频繁出现。，其实让它消失很简单，有两个解决方案，选择一种自己使用的即可。

2024-11-16 21:39:59 633

原创 HarmonyOS开发 - Ability往页面(Pages)中传递数据

在程序中，页面之间传递数据或数据共享，可以实现页面间的平滑过渡，避免重复加载数据，提高应用的响应速度和流量度；另外，数据传递机制使得页面更容易被重用，可以通过传入不同参数，来适应不同的上下文内容，以及根据需要传递数据，实现按需加载，减少内存消耗和提高应用的性能等。这篇将通过LocalStorage、EventHub、全局变量，以及Preferences用户首选项等功能，实现Ability向页面(Pages)中传递数据。

2024-11-05 18:03:22 2020

原创 HarmonyOS开发 - 餐饮APP中多门店多窗口打开实例补充

specified启动模式为指定实例模式，有一些特殊场景，例如多门店应用中每次打开一个门店能新建一个门店实例，而重复打开同一个门店都是同一门店实例。在每个门店上多点几次，会发现不停的打开新窗口。这时希望同一门店，重复点击始终打开同一门店实例窗口，而不是重复创建新实例窗口。解决此问题，要在启动UIAbility之前，为该UIAbility实例指定一个唯一的字符串instanceKey，这样在调用startAbility()方法时，应用就可以根据指定的instanceKey来识别响应请求的UIAbility实例

2024-11-03 22:31:14 1166

原创 HarmonyOS开发 - 餐饮APP中多门店多窗口打开实例

餐饮APP可以实现多门店的多窗口打开，能提升管理效率和顾问体验。在HarmonyOS中提供了三种启动模式：singleton（单实例模式）、multiton（多实例模式）和specified（指定实例模式）。具体实现时，可以在应用的module.json5配置文件中设置启动模式，将UIAbility的启动模式设置为多实例模式，可以配置文件中 "launchType": "multiton"。这样设置后，每次调用startAbility()方法都会创建一个新的实例，允许同时存在多个应用界面。

2024-10-30 08:25:12 999

原创 HarmonyOS开发 - 餐饮APP首页开发实例

该篇将使用HarmonyOS完成餐饮APP的首页开发，其中包含商品展示轮播图、应用分类、商品列表、页面导航等功能。将使用到DevEco Studio开发工具，以及仿真设备创建等。并且使用到自定义组件、@State装饰器、@Styles、@Extend、@Builder等知识；以及如何通过低代码界面（visual文件）搭建页面内容和样式设置，以及转换为ets文件。

2024-10-28 08:21:38 1700

原创 HarmonyOS开发 - 本地持久化之实现LocalStorage支持多实例

用户首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。实现LocalStorage过程中，在基础上再增加对json对象数据存储能力，还实现了数据缓存具有时效性等功能。不过LocalStorage示例为单例模式，当在多个module情况下，不希望所有数据都存储在一个Preferences实例中，这就需要LocalStorage能够支持多Preferences实例功能。

2024-10-27 11:23:05 903

原创 HarmonyOS开发 - 本地持久化之实现LocalStorage实例

用户首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。该篇将使用“用户首选项”实现LocalStorage实例，而用户首选项只能存储三种数据类型，在对Preference实例封装过程中，在基础上再增加对json对象数据存储能力，并且实现数据缓存具有时效性等功能。

2024-10-26 14:16:04 1544

原创 HarmonyOS开发 - ohpm环境变量配置

ohpm作为OpenHarmony三方库的包管理工具，支持OpenHarmony共享包的发布、安装和依赖管理。所在在使用第三方库插件时，需要通过ohpm进行下载和安装。但是打开CMD命令窗口后，输入ohpm -v报错“'ohpm' 不是内部或外部命令，也不是可运行的程序或批处理文件。

2024-10-21 18:47:00 2498

原创 Vue3入门 - provide和inject组合使用

provide和inject是用于实现依赖注入的一对API。它们允许在组件树中传递和接收数据，而不需要通过每一层显式地传递props。在语法中，provide可以用来提供一个值，而inject可以用来接收一个已经提供的值。provide是setup函数内部的一个函数，必须在setup函数内部调用它。在方法中调用provide时报错：TableNormal.vue:152 [Vue warn]: provide() can only be used inside setup().

2024-10-08 17:12:13 1008

原创 Vue3+TS项目 - ref和useTemplateRef获取组件实例

在Vue2中，子组件使用的是选项式 API ，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。而在Vue3中，子组件使用的组件是默认私有的：一个父组件无法访问到一个使用了的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露。

2024-10-04 11:26:43 2246

原创 VSCode开发Vue3+TS项目中遇到各种波浪线（诊断信息）

在使用Visual Studio Code（VSCode）开发Vue3 + TypeScript项目时，会遇到各种波浪线错误（诊断信息），这些问题或错误通常由以下几人原因引起的：typeScript配置问题、ESLint配置问题、Vetur或Volar插件问题、项目依赖问题、第三方插件问题、重启VSCode。解决方法有：检查错误类型、搜索解决问题等

2024-09-28 08:27:27 1757

原创 Vue2项目中vuex如何简化程序代码，提升代码质量和开发效率

Vuex为Vue中提供了集中式存储 + 库，其主要分为state、getter、mutation、action四个模块，它们每个担任了不同角色，分工不同；Vuex允许所有的组件共享状态抽取出来，以一个全局单例模式管理，状态集中存储在同一个地方，并且以相同的方式访问和修改。虽然Vuex在Vue中担任重要的角色，通过可预测化的状态管理模式来帮助开发者更好地管理复杂应用的状态。但是当遇到某些模块业务属性较多情况下，定义和管理也是相当繁琐，尤其是对其命名和调用，所以此时则需要通过有效地简化程序代码，来减少不必要的冗

2024-09-27 15:06:23 743

HarmonyOS+APP+餐饮app+Demo

PHP的排序和查找方法

Java随机产生数组元素并无重复元素方法

Java迷你DVD管理系统

Frontend反编译软件加jad文件

C语言程序设计(第三版)-谭浩强

Java数组排序三种方法

空空如也