当前位置: 首页 > news >正文

Vue实现动态路由的后端控制

在传统开发后台管理系统时,都会涉及权限控制这一功能需求 即:根据不同登录的角色账号来使用该账号拥有的功能,也就是说系统左边的菜单栏不是固定不变的。

首先是基础路由配置带有component的。

const allRoutes = [// 基础路由{path: '/',name: 'login',component: () => import("@/views/LoginView.vue")},{path: '/404',name: '404',component: () => import('@/views/Error/404View.vue')},// 动态路由容器(登录后内容){path: '/layout',name: 'layout',component: () => import('@/Layout/MainLayout.vue'),children: [{path: '/home',name: '首页',id: 1,pid: 0,// redirect: "/index",//默认重定向的页面component: () => import('@/views/homeView.vue'),},{id: 2,pid: 0,redirect: null,path: '/comp',name: '门诊',children: [{id: 3,pid: 2,redirect: null,component: () => import('@/views/payView.vue'),path: "/pay",name: "门诊缴费记录",},{id: 4,pid: 2,redirect: null,component: () => import('@/views/reservationView.vue'),path: "/reservation",name: "预约记录",}]},{ id: 8,pid: 0,path: '/hospital',name: '住院',children: [{id: 9,pid: 8,redirect: null,component: () => import('@/views/hospitalView.vue'),path: "/hospitalpay",name: "住院缴费记录",},{id: 10,pid: 8,redirect: null,component: () => import('@/views/roomView.vue'),path: "/room",name: "房间管理",},{id: 11,pid: 8,redirect: null,component: () => import('@/views/inpatientView.vue'),path: "/inpatient",name: "住院人",}]},]},
]

然后是后端接口返回的数据,我就先用假数据进行代替了。配置的基础路由和假数据要一致就行。假数据就是动态路由(会发生改变的)

const dynamicRouteConfigs = [// 动态路由容器(登录后内容){path: '/home',name: '首页',id: 1,pid: 0,},{id: 2,pid: 0,redirect: null,path: '/comp',name: '门诊',children: [{id: 3,pid: 2,redirect: null,path: "/pay",name: "门诊缴费记录",},{id: 4,pid: 2,redirect: null,path: "/reservation",name: "预约记录",}]},{ id: 8,pid: 0,path: '/hospital',name: '住院',children: [{id: 9,pid: 8,redirect: null,path: "/hospitalpay",name: "住院缴费记录",},{id: 10,pid: 8,redirect: null,path: "/room",name: "房间管理",},{id: 11,pid: 8,redirect: null,path: "/inpatient",name: "住院人",}]},// {//   id: 12,//   pid: 0,//   redirect: null,//   path: '/userinfor',//   name: '用户管理',//   children: [{//     id: 13,//     pid: 12,//     redirect: null,//     path: "/user",//     name: "用户管理",//   },{//     id: 14,//     pid: 12,//     redirect: null,//     path: "/role",//     name: "角色管理",//   },{//     id: 15,//     pid: 12,//     redirect: null,//     path: "/admin",//     name: "管理员管理",//   },{//     id: 27,//     pid: 12,//     redirect: null,//     path: "/visit",//     name: "就诊卡",//   }]// },// {//   id: 16,//   pid: 0,//   path: '/department',//   name: '科室管理',//   children: [{//     id: 24,//     pid: 16,//     redirect: null,//     path: "/departments",//     name: "科室管理",//   }]// },// {//   id: 17,//   pid: 0,//   path: '/hospitals',//   name: '医院信息',//   redirect: null,//   children: [{//     id: 18,//     pid: 17,//     redirect: null,//     path: "/hospitalList",//     name: "医院信息",//   },{//     id: 19,//     pid: 17,//     redirect: null,//     path: "/doctor",//     name: "医生管理",//   },{//     id: 20,//     pid: 17,//     redirect: null,//     path: "/scheduling",//     name: "医生排班管理",//   },{//     id: 21,//     pid: 17,//     redirect: null,//     path: "/label",//     name: "标签管理",//   },{//     id: 22,//     pid: 17,//     redirect: null,//     path: "/drug",//     name: "药品管理",//   },{//     id: 23,//     pid: 17,//     redirect: null,//     path: "/physical",//     name: "体检管理",//   },{//     id: 26,//     pid: 17,//     redirect: null,//     path: "/trends",//     name: "医院动态",//   }]// }
];

然后就进行改变判断,通过遍历两个数组,判断两者的name或者path相同的时候将其放入一个新数组中。 

然后再声明一个变量等于component,就是添加基础路由的component组件

// 权限过滤方法修正
const filterRoutes = (dynamicRouteConfigs, allRoutes) => {console.log('动态路由', dynamicRouteConfigs);console.log('基础路由', allRoutes);// 递归查找匹配的路由(排除404和首页)const findMatchedRoute = (routes, target) => {for (const route of routes) {// 跳过排除的路由if (['404', 'home'].includes(route.name)) continue;// 检查当前路由是否匹配if (route.name === target.name || route.path === target.path) {return route; // 返回匹配的路由对象}// 递归检查子路由if (route.children) {const matchedChild = findMatchedRoute(route.children, target);if (matchedChild) return matchedChild;}}return null; // 未找到匹配项};// 过滤并合并componentreturn dynamicRouteConfigs.map(route => {const matchedRoute = findMatchedRoute(allRoutes, route);console.log(matchedRoute);if (matchedRoute) {// 保留原路由配置,并注入 componentreturn {...route,component: matchedRoute.component // 关键:添加基础路由的组件};}return null; // 未匹配的路由会被过滤}).filter(route => route !== null); // 过滤掉未匹配项
};

最后进行动态添加,并且把数据进行存储,在菜单页面进行渲染即可。

// 动态添加路由到layout
const addDynamicRoutes = (roles) => {// 清空已有动态路由const layout = router.getRoutes().find(r => r.name === 'layout')layout.children.forEach(child => {router.removeRoute(child.name)})// 过滤并添加新路由const allowedRoutes = filterRoutes(dynamicRouteConfigs, allRoutes); allowedRoutes.forEach(route => { router.addRoute('layout', route); });console.log(allowedRoutes);sessionStorage.setItem('menuPath',JSON.stringify(allowedRoutes));//存储的筛选过的动态路由sessionStorage.setItem('menuName',JSON.stringify(router.getRoutes()));//存储的所有动态路由// 确保404最后处理router.addRoute({ path: '/:pathMatch(.*)*',redirect: '/404'})
}

相关文章:

Vue实现动态路由的后端控制

在传统开发后台管理系统时,都会涉及权限控制这一功能需求 即:根据不同登录的角色账号来使用该账号拥有的功能,也就是说系统左边的菜单栏不是固定不变的。 首先是基础路由配置带有component的。 const allRoutes [// 基础路由{path: /,name…...

​AI训练中的专有名词大白话版

​AI训练中的专有名词大白话版 ​1. 数据集(Dataset)​ 👉 ​人话:AI的“练习题题库”,包含一堆带答案的题目(比如猫狗照片标签)。 🔹 ​例子: 训练集(练习…...

kafka 与 RocketMQ对比

问题 1: 为什么使用消息队列?服务搭建KafkaRocketMQ编写 docker-compose.yml运行docker compose修改配置文件(解决网络问题)创建一个 topic运行skd尝试发送与接收功能 压力测试:Kafkabatch-size(批量大小)分区数:发送数据(MB/s)消费-线程数(15 分区) RocketMQ生产生产者数量批…...

instnatid模型加载器放在哪里

一般根据节点名称来放,如果没有就新建 ComfyUI\models\instantid...

Spring Boot自动配置原理解析

文章目录 前言一、SpringBootConfiguration二、EnableAutoConfiguration2.1、AutoConfigurationPackage2.2、Import(AutoConfigurationImportSelector.class) 三、ComponentScan四、自动配置源码4.1、获取所有候选的自动配置类4.2、过滤不满足条件的自动配置 总结 前言 在常规的…...

LlamaIndex实现(基于PDF|CSV文件)RAG检索增强生成:NaiveRAG

什么是 RAG? RAG(Retrieval-Augmented Generation,检索增强生成) 是一种结合 信息检索(Retrieval) 和 文本生成(Generation) 的AI技术,用于提升大语言模型(L…...

分布式系统面试总结:3、分布式锁(和本地锁的区别、特点、常见实现方案)

仅供自学回顾使用,请支持javaGuide原版书籍。 本篇文章涉及到的分布式锁,在本人其他文章中也有涉及。 《JUC:三、两阶段终止模式、死锁的jconsole检测、乐观锁(版本号机制CAS实现)悲观锁》:https://blog.…...

vue3搭建实战项目笔记三

vue3搭建实战项目笔记三 3.1.行高偏移问题3.2.谷歌浏览器上不能定位3.2.2 移动端css隐藏滚动条 3.3.获取列表的数据3.3.1 服务器返回十万条数据3.3.2 分页展示数据3.3.2 防止展示数据为空报错 3.4.上拉加载数据3.4.1 加载更多数据3.4.2 监听页面滚动到底部3.4.3 监听滚动的时机…...

【商城实战(101)】电商未来已来:新技术引领商城发展新航向

【商城实战】专栏重磅来袭!这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建,运用 uniapp、Element Plus、SpringBoot 搭建商城框架,到用户、商品、订单等核心模块开发,再到性能优化、安全加固、多端适配,乃至运营推广策略,102 章内容层层递进。无论是想…...

深入解析最大公约数(GCD)与最小公倍数(LCM)的C++实现

深入解析最大公约数(GCD)与最小公倍数(LCM)的C实现 一、GCD与LCM的数学定义 1. 最大公约数(GCD) 两个或多个整数共有约数中最大的一个。 例如: GCD(12, 18) 6GCD(21, 14) 7 2. 最小公倍数…...

低功耗LPWAN模块开发指南:远距离无线通信与边缘计算融合实战‌

在远程资产追踪、野外环境监测等场景中,稳定可靠的长距离通信与超低功耗是系统设计的核心挑战。eFish-SBC-RK3576通过 ‌原生双UART接口 USB OTG扩展能力‌ ,可无缝集成主流LPWAN模组(LoRa/NB-IoT),实现“数据采集-边…...

【质量管理】纠正、纠正措施和预防的区别与解决问题的四重境界

“质量的定义就是符合要求”,我们在文章【质量管理】人们对于质量的五个错误观念-CSDN博客中提到过,这也是质量大师克劳士比所说的。“质量的系统就是预防”,防止出现产品不良而造成的质量损失。 质量问题的解决可以从微观和宏观两个方面来考…...

STM32F103_LL库+寄存器学习笔记12 - 提高串口通讯程序的健壮性:异常监控 + 超时保护机制

导言 首先,进行USART和DMA状态监测、记录异常状态并主动处理,是高健壮性嵌入式系统开发的核心思想之一。 这种机制看似复杂,实则能有效保障系统长期、稳定地运行: 提升通讯可靠性。降低维护成本。增强系统自恢复能力。 因此&…...

搜索-BFS

马上蓝桥杯了,最近刷了广搜,感觉挺有意思的,广搜题类型都差不多,模板也一样,大家写的时候可以直接套模板 这里给大家讲一个比较经典的广搜题-迷宫 题目问问能否走到 (n,m) 位置,假设最后一个点是我们的&…...

Keil调试(RTT Debug 断点)

调试 打印操作 方式接口优缺点串口打印TXRX简单,但是占用串口,速度慢,重定向fputc简单RTT打印SWDIOSWCLK速度快,不占额外接口,直接移植RTT库断点打印SWDIOSWCLKDebug的时候断点操作SWOSWDIOSWCLKSWO需要连接SWO引脚,重定向fputc简单 这里我只介绍RTT打印和断点打印; 一. RT…...

【jQuery】插件

目录 一、 jQuery插件 1. 瀑布流插件: jQuery 之家 http://www.htmleaf.com/ 2. 图片懒加载: jQuery 插件库 http://www.jq22.com/ 3. 全屏滚动 总结不易~ 本章节对我有很大收获,希望对你也是~~~ 一、 jQuery插件 jQuery 功能…...

leetcode 28 Find the Index of the First Occurrence in a String

直接用kmp算法 class Solution { public:int strStr(string haystack, string needle) {return kmp(haystack,needle);}int kmp(std::string &text,std::string &pattern){int n text.size();int m pattern.size();if(m 0)return 0;std::vector<int> next;ne…...

nginx 动静分离

一.动静分离 1.动静分离的好处 Apache Tocmat 严格来说是一款java EE服务器&#xff0c;主要是用来处理 servlet请求。处理css、js、图片这些静态文件的IO性能不够好&#xff0c;因此&#xff0c;将静态文件交给nginx处理&#xff0c;可以提高系统的访问速度&#xff0c;减少…...

1.2 斐波那契数列模型:LeetCode 面试题 08.01. 三步问题

动态规划解三步问题&#xff1a;LeetCode 面试题 08.01. 三步问题 1. 题目链接 LeetCode 面试题 08.01. 三步问题 题目要求&#xff1a;小孩上楼梯&#xff0c;每次可以走1、2或3步&#xff0c;计算到达第 n 阶台阶的不同方式数&#xff0c;结果需对 1e9 7 取模。 2. 题目描述…...

关于AutoMapper

AutoMapper 概述 AutoMapper 是一个基于约定的对象 - 对象映射库&#xff0c;主要用于在不同对象类型之间自动映射属性值。它能根据配置的映射规则&#xff0c;将源对象的属性值填充到目标对象中&#xff0c;避免了手动编写大量繁琐的对象映射代码。 作用 提升开发效率&…...

是否每一层之间都要线性变换和激活函数?

1. 神经网络层的基本组成 一个典型的神经网络层通常包含两个步骤&#xff1a; 线性变换&#xff08;加权求和&#xff09;&#xff1a; z Wx} b 其中W 是权重矩阵&#xff0c;b是偏置向量&#xff0c;是输入&#xff0c;z 是线性输出。激活函数&#xff1a; 其中&#xff0c…...

golang 的reflect包的常用方法

目录 reflect 包方法总结 类型 (Type) 方法 值 (Value) 方法 代码示例&#xff1a; reflect 包方法总结 p : Person{Name: "小明", Age: 22}t : reflect.TypeOf(&p)v : reflect.ValueOf(p) 类型 (Type) 方法 方法名描述示例               Na…...

CentOS 7 安装 EMQX (MQTT)

CentOS 7 安装 EMQX 通过 Yum 源安装 EMQX 支持通过 Yum 源安装&#xff0c;您可通过以下 Yum 命令从中自动下载和安装 EMQX。 通过以下命令配置 EMQX Yum 源&#xff1a; curl -s https://assets.emqx.com/scripts/install-emqx-rpm.sh | sudo bash安装以下依赖项&#xff…...

Flask项目部署:Flask + uWSGI + Nginx

目录 1,网络架构 2,环境安装 2.1,安装yum:Shell软件包管理器 2.2 安装python 2.3 安装uWSGI 2.4 安装Flask 3,上传工程包到服务器,打包Flask项目 4,创建和配置 uwsgi 配置文件 uwsgi.ini 4.1配置文件 4.2配置文件注释详解 5,启动服务 6,安装nginx 7,nginx配置 8,…...

软件工程面试题(十五)

1、servlet 创建过程以及ruquest,response,session的生命周期? Servlet的创建过程: 第一步 public class AAA extends HttpServlet{ 实现对应的doxxx方法 } 第二步: 在web.xml中配置 <servlet> <servlet-name></servlet-name> <servlet-c…...

当Kafka化身抽水马桶:论组件并发提升与系统可用性的量子纠缠关系

《当Kafka化身抽水马桶&#xff1a;论组件并发提升与系统可用性的量子纠缠关系》 引言&#xff1a;一场OOM引发的血案 某个月黑风高的夜晚&#xff0c;监控系统突然发出刺耳的警报——我们的数据发现流水线集体扑街。事后复盘发现&#xff1a;Kafka集群、Gateway、Discovery服…...

python和Java的区别

Python和Java是两种流行的编程语言&#xff0c;它们之间有一些重要的区别&#xff1a; 语法&#xff1a;Python是一种动态类型的脚本语言&#xff0c;语法简洁明了&#xff0c;通常使用缩进来表示代码块。Java是一种静态类型的编程语言&#xff0c;语法更为严格&#xff0c;需要…...

QFlightInstruments飞行仪表控件库

QFlightInstruments 是一个开源的飞行仪表控件库&#xff0c;专为基于 Qt 的应用程序设计。它提供了一系列仿真实飞机仪表的组件&#xff0c;适用于飞行模拟软件、航空电子系统或任何需要高仿真飞行仪表显示的项目。 主要功能 高仿真飞行仪表&#xff1a;包括空速表、高度表、…...

可发1区的超级创新思路(python\matlab实现):MPTS+Lconv+注意力集成机制的Transformer时间序列模型

首先声明,该模型为原创!原创!原创!且该思路还未有成果发表,感兴趣的小伙伴可以借鉴! 应用场景 该模型主要用于时间序列数据预测问题,包含功率预测、电池寿命预测、电机故障检测等等。 一、模型整体架构(本文以光伏功率预测为例) 本模型由多尺度特征提取模块(MPTS)…...

Nginx — Nginx版本升级

例如&#xff1a;将10.224.11.220、10.224.11.221、10.208.11.220 三台服务器上的Nginx从1.21.1版本升级到1.23.3版本。 一、Nginx升级步骤 步骤一&#xff1a;备份老版本的Nginx&#xff08;10.224.11.220、10.224.11.221、10.208.11.220&#xff09; #关闭Nginx cd /usr/l…...

CSS学习笔记6——网页布局

目录 一、元素的浮动属性、清除浮动 清除浮动的其他方法 1、使用空标签清除浮动影响 2、使用overflow属性清除浮动 3、使用伪元素清除浮动影响 原理 overflow属性 二、元素的定位 1、相对定位 2、绝对定位 ​编辑 3、固定定位 z-index层叠等级属性 一、元素的浮动…...

C语言【指针二】

引言 介绍&#xff1a;const修饰指针&#xff0c;野指针 应用&#xff1a;指针的使用&#xff08;strlen的模拟实现&#xff09;&#xff0c;传值调用和传指调用 一、const修饰指针 1.const修饰变量 简单回顾一下前面学过的const修饰变量&#xff1a;在变量前面加上const&…...

第十六届蓝桥杯模拟二(串口通信)

由硬件框图可以知道我们要配置LED 和按键 一.LED 先配置LED的八个引脚为GPIO_OutPut,锁存器PD2也是,然后都设置为起始高电平,生成代码时还要去解决引脚冲突问题 二.按键 按键配置,由原理图按键所对引脚要GPIO_Input 生成代码,在文件夹中添加code文件夹,code中添加fun.…...

Java List 集合取交集、并集、差集、补集

在Java中&#xff0c;集合操作是编程中非常常见的需求&#xff0c;尤其是在处理数据集合时&#xff0c;如List、Set等。本文将详细介绍如何在Java中实现List集合的交集、并集、差集和补集操作&#xff0c;并提供代码示例和实现方法。 1. 交集操作 交集是指两个集合中都存在的元…...

SkyWalking+Springboot实战

1、下载SkyWalking APM 1.手动下载 Downloads | Apache SkyWalkinghttps://skywalking.apache.org/downloads/ 2.链接下载 https://dlcdn.apache.org/skywalking/10.2.0/apache-skywalking-apm-10.2.0.tar.gzhttps://dlcdn.apache.org/skywalking/10.2.0/apache-skywalking-…...

【小兔鲜】day01 项目、Vue3介绍、组合式API、小案例

【小兔鲜】day01 项目、Vue3介绍、组合式API、小案例 0. 市场上Vue前端工程师用到的技术1. Vue3小兔鲜先导课1.1 技术栈1.2 项目规模1.3 项目亮点1.4 课程安排 2. 认识Vue32.1 Vue3组合式API体验 3. create-vue创建Vue3项目3.1 新建项目结构3.2 小节3.3 补充说明npm init vuela…...

【Pandas DataFrame】

以下是 Pandas DataFrame 的核心知识点总结&#xff0c;用结构化分类帮你高效记忆关键操作和概念&#xff1a; 1. 基础操作 创建DataFrame 方法代码示例说明从字典创建df pd.DataFrame({A: [1,2], B: [3,4]})字典键为列名&#xff0c;值为数据从列表创建df pd.DataFrame([[…...

华为OD机试2025A卷 - 生成回文素数(Java Python JS C++ C )

最新华为OD机试 真题目录:点击查看目录 华为OD面试真题精选:点击立即查看 题目描述 求出大于或等于 N 的最小回文素数。 如果一个数大于 1,且其因数只有 1 和它自身,那么这个数是素数。 例如,2,3,5,7,11 以及 13 是素数。 如果一个数从左往右读与从右往左读是一…...

Jenkins教程(自动化部署)

Jenkins教程(自动化部署) 1. Jenkins是什么&#xff1f; Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具&#xff0c;广泛用于项目开发&#xff0c;具有自动化构建、测试和部署等功能。Jenkins用Java语言编写&#xff0c;可在Tomcat等流行的servlet容器中运行&…...

C#里使用libxl的对齐/边框/颜色

一份好的EXCEL文件,通道会有不同的颜色和边框来表示。 以便表示一些重要的信息,这样才能让人们一眼就看到需要关注的信息。 如下面所示: 要显示上面的内容,需要使用下面的例子: private void button12_Click(object sender, EventArgs e){var book = new ExcelBook();if…...

虚拟pinctrl驱动

之前呢&#xff0c;我们讲解了在内核中pinctrl子系统是怎么实现的&#xff0c;今天我们来尝试一下自己去写一个pinctrl子系统&#xff1a; 首先呢&#xff0c;我们来看看一个pinctrl子系统需要做的事情: 上面的话&#xff0c;我们看了一个pinctrl子系统需要的三大功能以及在驱…...

pycharm虚拟环境项目转移后配置解释器

添加解析器提示&#xff1a;无效的 Python SDK 解决方法 在到电脑安装python解析器&#xff0c;复制&#xff1a;python.exe和pythonw.exe 项目虚拟环境venv/Scripts Python解释器添加 项目现有虚拟环境&#xff0c;就可以正常使用...

蓝桥杯嵌入式学习笔记

用博客来记录一下参加蓝桥杯嵌入式第十六届省赛的学习经历 工具环境准备cubemx配置外部高速时钟使能设置串口时钟配置项目配置 keil配置烧录方式注意代码规范头文件配置 模块ledcubemx配置keil代码实现点亮一只灯实现具体操作的灯&#xff0c;以及点亮还是熄灭 按键cubemx配置k…...

0201-jsx语法基础-jsx-仿低代码平台项目

文章目录 1.jsx标签2.jsx属性3.jsx 事件3.1 声明事件3.2 使用事件&#xff08;对象&#xff09; 4. typescript类型基础4.1 类型声明4.2 事件函数传递自定义参数 5.插入js变量6. 条件判断7. 循环结语 1.jsx标签 jsx标签与html标签区别&#xff1a; 首字母大小写 大写是自定义组…...

在MCU工程中优化CPU工作效率的几种方法

在嵌入式系统开发中&#xff0c;优化 CPU 工作效率对于提升系统性能、降低功耗、提高实时性至关重要。Keil 作为主流的嵌入式开发工具&#xff0c;提供了多种优化策略&#xff0c;包括 关键字使用、内存管理、字节对齐、算法优化 等。本文将从多个方面介绍如何在 Keil 工程中优…...

Elasticsearch 的搜索功能

Elasticsearch 的搜索功能 建议阅读顺序&#xff1a; Elasticsearch 入门Elasticsearch 搜索&#xff08;本文&#xff09;Elasticsearch 搜索高级Elasticsearch 高级 1. 介绍 使用 Elasticsearch 最终目的是为了实现搜索功能&#xff0c;现在先将文档添加到索引中&#xff0c…...

【鸿蒙5.0】向用户申请麦克风授权

#效果图 步骤 在 config.json 里声明权限&#xff1a;在项目的 config.json 文件中添加麦克风权限的声明&#xff0c;告知系统应用需要使用该权限。检查权限状态&#xff1a;在代码里检查应用是否已经获得了麦克风权限。请求权限&#xff1a;若应用未获得麦克风权限&#xff0…...

数据结构与算法分析:树与哈希表(一)

遇到的问题&#xff0c;都有解决方案&#xff0c;希望我的博客能为你提供一点帮助。 一、概述 背景&#xff1a;链表处理大量数据时&#xff0c;线性访问耗时多。二叉查找树多数操作平均运行时间为 O (log N)&#xff0c;相对于链表树更加高效。 1.预备知识 1.1. 树的定义与…...

VBA第三十四期 VBA中怎么用OnKey事件

我们在VBA设计中经常需要使用到OnKey方法&#xff0c;特别是在窗口设计中比如我们想用到翻页按键&#xff0c;则就可以来建立一个OnKey事件。Setup_OnKey过程运行以后&#xff0c;就会达到最终效果&#xff0c;按PgDn键会将指针下移一行&#xff0c;按PgUp键会将指针上移一行。…...

HarmonyOS NEXT开发进阶(十五):日志打印 hilog 与 console.log 的区别

文章目录 一、前言二、两者区别对比三、HiLog 详解四、拓展阅读 一、前言 在日常开发阶段&#xff0c;日志打印是调试程序非常常用的操作&#xff0c;在鸿蒙的官方文档中介绍了hilog这种方式&#xff0c;前端转过来的开发者发现console.log也可以进行日志打印&#xff0c;而且…...