vue3+element-plus 实现动态菜单和动态路由的渲染
在 Vue.js 中,使用 Vue Router 管理路由数据,并将其用于渲染 el-menu
(Element UI 的菜单组件)通常涉及以下几个步骤:
-
定义路由元数据:
在你的路由配置中,为每个路由项添加meta
字段,这个字段可以包含任何你想要传递给菜单的数据,例如菜单名称、图标等。 -
获取路由数据:
使用router
实例的getRoutes()
方法来获取当前注册的所有路由信息。 -
过滤和格式化数据:
根据需要过滤和格式化路由数据,以便它们可以被el-menu
组件使用。 -
将数据传递给组件:
将格式化好的路由数据传递给使用el-menu
的组件。 -
使用 v-for 渲染菜单:
在组件的模板中,使用v-for
指令来遍历路由数据,并渲染el-menu
。
实现效果
路由配置
首先是路由配置,要实现这个路由配置,你需要完成以下几个步骤:
-
注册 Vue Router:确保你已经在你的 Vue 应用中安装并注册了 Vue Router。
-
定义路由:使用 Vue Router 的
addRoute
方法动态添加路由。 -
使用路由:在应用中使用
<router-view>
来渲染对应的组件。 -
渲染菜单:如果你需要根据路由配置动态渲染菜单(例如使用 Element UI 的
el-menu
),你需要从路由配置中提取必要的信息。
下面是一个基本的实现示例:
main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 假设你有一个 router 文件const app = createApp(App);app.use(router).mount('#app');
router.js
import { createRouter, createWebHistory } from 'vue-router';
import Main from '../views/Main.vue';
import Home from '../views/Home.vue';
import Goods from '../views/goods.vue';
import Order from '../views/order.vue';const routes = [{path: '/',name: 'main',component: Main,children: [{path: 'home',name: 'home',component: Home,meta: { title: '主页', icon: 'house' },},{path: 'goods',name: 'Goods',component: Goods,meta: { title: '商品列表', icon: 'el-icon-shopping-cart-full' },},{path: 'order',name: 'Order',redirect: 'order/table',children: [{path: 'table',name: 'Table',component: Order,meta: { title: '订单列表', icon: 'el-icon-s-fold' },},],meta: { title: '订单', icon: 'el-icon-s-claim' },},],},
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes,
});export default router;
App.vue
<template><div id="app"><router-view></router-view></div>
</template><script>
export default {name: 'App',
};
</script>
动态渲染菜单
如果你想根据路由配置动态渲染菜单(el-menu),你可以在组件中使用 Vue Router 的 routes
属性。以下是一个使用组合式 API 的示例:
MenuComponent.vue
<template><el-aside :width="width"><el-menubackground-color="#fff"active-text-color="#409eff"class="aside-menu":collapse="isCollapse":default-active="activeMenu"><el-menu-item v-for="item in noChilden":index="item.path":key="item.path"@click="handlemenu(item)"><component class="icon" :is="item.meta.icon"></component><span>{{ item.meta.title }}</span> </el-menu-item><el-sub-menu v-for="item in hasChilden":index="item.path":key="item.path"><template #title><component class="icon" :is="item.meta.icon"></component><span>{{ item.meta.title }}</span></template><!-- <el-menu-item-group> --><el-menu-item v-for="subItem in item.children":key="subItem.path":index="subItem.path"@click="handlemenuchild(item,subItem)"class="sub-menu-deep"><component class="icon" :is="subItem.meta.icon"></component><span>{{ subItem.meta.title }}</span></el-menu-item><!-- </el-menu-item-group> --></el-sub-menu></el-menu></el-aside>
</template><script setup>import {ref,computed,onMounted} from 'vue'
import {useAllDataStore} from "@/store"
import {useRouter,useRoute} from 'vue-router'const list = ref([]);
const router = useRouter();
onMounted(() =>{
//找到根路由
const childRoutes = router.getRoutes().find(route => route.path === '/').children; list.value = childRoutes.filter(route => route.meta && route.meta.title);
console.log(list.value);
});
const hasChilden = computed(() => list.value.filter(item => item.children && item.children.length > 0))
const noChilden = computed(() => list.value.filter(item => !item.children || item.children.length === 0))const route = useRoute()
const handlemenu = (item) =>{router.push(item.path)}
const handlemenuchild = (item,subItem) =>{router.push(item.path+'/'+ subItem.path)
}
const activeMenu = computed(() => route.path)
</script><style lang="less" scoped>
.icon{width:18px;height: 18px;margin-right: 5px;
}
.el-menu {border-right: none;font-size: 20px;font-weight: bold;h3{line-height: 48px;text-align: center;}
}
.el-aside{height:100%;background-color: #fff;// box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.2);border-right: 1px solid #e4e7ed;
}</style>解释上面是怎么实现router 动态渲染菜单的
这段代码是一个使用 Vue 3 和 Element UI 库实现的侧边导航菜单组件,它通过 Vue Router 的路由信息动态渲染菜单项。下面是代码的详细解释:
布局中引入组件
<script setup>
import CommonAside from '@/components/.vue'
import CommonHeader from '../components/MenuComponent.vue';
import CommonTab from '@/components/CommonTab.vue'
</script><template><div class="common-layput"><el-container class="lay-container"><!-- 自定义左侧菜单组件 --><menu-component /><el-container><el-header class="el-header"><common-header /></el-header><el-main class="right-mian"><!-- 路由显示内容 --><router-view></router-view></el-main></el-container></el-container></div>
</template><style scoped lang="less">.common-layput,.lay-container{height:100%;}.el-header{background-color: #fff;box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.2);}
</style>
模板部分 (<template>
)
- 使用
el-aside
组件作为侧边栏容器。 el-menu
组件用于创建菜单,其中:background-color
和active-text-color
设置菜单的背景色和激活项的文字颜色。class
添加自定义类名。:collapse
属性用于控制菜单的展开和收起状态。:default-active
绑定当前激活的菜单项路径。
菜单项和子菜单项渲染
- 使用
el-menu-item
组件渲染没有子菜单的顶级菜单项。 - 使用
el-sub-menu
组件渲染带有子菜单的菜单项。
脚本部分 (<script setup>
)
- 引入必要的 Vue 组合式 API 钩子:
ref
,computed
,onMounted
,useRouter
,useRoute
。 list
引用用于存储从 Vue Router 获取的路由信息。
路由信息获取
- 在
onMounted
钩子中,使用useRouter
钩子的getRoutes
方法找到根路由'/'
的子路由,并筛选出包含meta
和meta.title
的路由,存储到list.value
。
计算属性
hasChilden
:计算属性,筛选出list.value
中具有子菜单的路由。noChilden
:计算属性,筛选出list.value
中没有子菜单的路由。
导航处理函数
handlemenu
:处理无子菜单项的点击事件,使用router.push
方法导航到点击的菜单项路径。handlemenuchild
:处理有子菜单项的点击事件,拼接父菜单和子菜单的路径,然后导航。
激活状态
activeMenu
:计算属性,根据当前路由的路径route.path
设置激活的菜单项。
样式部分 (<style>
)
- 定义了一些基本的样式来美化菜单,例如移除边框、设置字体大小和加粗。
总结
这个组件通过 Vue Router 的 useRouter
钩子获取当前路由的配置信息,并根据这些信息动态生成菜单项。使用 computed
属性来区分哪些路由有子菜单,哪些没有,然后相应地渲染 el-menu-item
或 el-sub-menu
。点击菜单项时,使用 router.push
方法来改变页面的路由,实现导航功能。并通过 useRoute
钩子获取当前激活的路由,然后设置 activeMenu
来决定哪个菜单项应该处于激活状态。这个组件是一个结合 Vue Router 和 Element UI 的动态菜单实现,它可以自动根据路由配置渲染出相应的菜单结构,并且能够响应路由变化,高亮显示当前激活的菜单项。
相关文章:
![](https://i-blog.csdnimg.cn/direct/55718f89fdf24d3bae5655fd0a02560b.jpeg#pic_center)
vue3+element-plus 实现动态菜单和动态路由的渲染
在 Vue.js 中,使用 Vue Router 管理路由数据,并将其用于渲染 el-menu(Element UI 的菜单组件)通常涉及以下几个步骤: 定义路由元数据: 在你的路由配置中,为每个路由项添加 meta 字段,…...
![](https://i-blog.csdnimg.cn/direct/38dc4798f7c94f238646993c545a55c1.png)
GO-学习-03-基本数据类型
数据类型:基本数据类型和复合数据类型 基本数据类型:整型、浮点型、布尔型、字符串 复合数据类型:数组、切片、结构体、函数、map、通道(channel)、接口 整型: package main import "fmt" im…...
![](https://i-blog.csdnimg.cn/direct/c221fb39be9f4b64b33eedf99fb20f23.png)
高并发场景下,系统的保护机制
伴随着分布式,微服务项目的快速发展。各个微服务的调用和通讯难免会出现依赖关系,如果上游服务在依赖下游服务的时候下游服务出现了故障从而导致下游服务的不可用,进一步导致了上游的服务被拖垮,就会发生服务雪崩,故障…...
![](https://www.ngui.cc/images/no-images.jpg)
服务器构建私有npm库(Docker + Verdaccio)
npm官网有时候因为网络原因包推不上去,那就简单构建个私有库 私有库不会被共享,且配置不需要太高1h2G就行 1.需要安装Docker,这个跳过了 2.生成配置文件 mkdir /home/verdaccio cd /home/verdaccio mkdir conf && mkdir storage &am…...
![](https://www.ngui.cc/images/no-images.jpg)
LabVIEW做二次开发时应该注意哪些方面?
在使用LabVIEW进行二次开发时,以下几个方面需要特别注意: 需求明确化: 确认并详细记录客户的需求,明确系统的功能、性能、可靠性等要求。制定详细的需求文档,并与客户反复确认,避免后期的需求变更和误解。 …...
![](https://www.ngui.cc/images/no-images.jpg)
docker配置上网代理获取镜像
一、添docker子配置档设置 1、创建目录 mkdir /etc/systemd/system/docker.service.d 2、创建http-proxy.conf文件,增加以下内容 cat > /etc/systemd/system/docker.service.d/http-proxy.conf <<EOF [Service] Environment“HTTP_PROXYhttp://192.168.0.2:8118…...
![](https://i-blog.csdnimg.cn/direct/f0bc6760a4164875b12135fdc2d406c0.png)
SqlSugar删除没有定义主键的实体类对应的数据库表数据
一般而言,使用SqlSugar的DbFirst功能创建数据库表实体类时,如果数据库表有主键,生成的实体类对应属性也会标识为主键,如下图所示。 但有时候生成的实体类没有自动配置主键,这时可以通过以下方式进行删除操作&…...
![](https://i-blog.csdnimg.cn/direct/e8fff55d5057449696510cc12e54a9ca.png)
虚拟机复制后网络不可用,报错“network.service - LSB: Bring up/down networking”
查询IP地址,eth33 没有显示IP地址 尝试重启,有报错,并且有提示,按照提示执行下看看 解决办法 chkconfig NetworkManager offsystemctl disable NetworkManager.serviceservice NetworkManager stopservice network restart 之后检…...
![](https://i-blog.csdnimg.cn/direct/5cb2d754219b4641a27c838fd2ead074.png)
Redis 7.x 系列【30】集群管理命令
有道无术,术尚可求,有术无道,止于术。 本系列Redis 版本 7.2.5 源码地址:https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 集群信息2.1 CLUSTER INFO 3. 节点管理3.1 CLUSTER MYID3.2 CLUSTER NODES3…...
![](https://i-blog.csdnimg.cn/direct/3a8324a80ec0488bbc9143e025734260.png)
将YOLOv8模型从PyTorch的.pt格式转换为TensorRT的.engine格式
TensorRT是由NVIDIA开发的一款高级软件开发套件(SDK),专为高速深度学习推理而设计。它非常适合目标检测等实时应用。该工具包可针对NVIDIA GPU优化深度学习模型,从而实现更快、更高效的运行。TensorRT模型经过TensorRT优化,包括层融合(layer …...
![](https://i-blog.csdnimg.cn/direct/8b5d6208c2304da7a2596d3276422fc9.png)
Hello SLAM(在Linux中实现第一个C++程序)
首先需要安装vim编辑器,输入命令 sudo apt install vim 在Ubuntu上安装好vim编辑器后,创建路径(/home/slambook/ch2),在该路径下创建一个cpp文档(touch hello.c),通过vim编辑器进行…...
![](https://img-blog.csdnimg.cn/img_convert/43df3a09e604e923d6c9a8c1dcbb5900.jpeg)
IPD推行成功的核心要素(十五)项目管理提升IPD相关项目交付效率和用户体验
研发项目往往包含很多复杂的流程和具体的细节。因此,一套完整且标准的研发项目管理制度和流程对项目的推进至关重要。研发项目管理是成功推动创新和技术发展的关键因素。然而在实际管理中,研发项目管理常常面临着需求不确定、技术风险、人员素质、成本和…...
![](https://img-blog.csdnimg.cn/img_convert/6779feb65dd563f8cd212f5f7891f97f.png)
C++ 鼠标轨迹API【神诺科技SDK】
一.鼠标轨迹模拟简介 传统的鼠标轨迹模拟依赖于简单的数学模型,如直线或曲线路径。然而,这种方法难以捕捉到人类操作的复杂性和多样性。AI大模型的出现,使得神诺科技 能够通过深度学习技术,学习并模拟更自然的鼠标移动行为。 二.…...
![](https://img-blog.csdnimg.cn/img_convert/df892013fe743bedcba1ba37de9142b7.png)
设计模式|观察者模式
观察者模式是一种行为设计模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。当主题对象发生变化时,它的所有观察者都会收到通知并更新。观察者模式常用于实现事件处理系统、发布-订阅模式等。在项目中,…...
![](https://www.ngui.cc/images/no-images.jpg)
python自动化运维 通过paramiko库和time库实现服务器自动化管理
目录 一.前言 二. 代码实现以及解析 2.1导入必要的库 2.2定义服务器信息 2.3创建 SSH 客户端连接函数 2.4执行远程命令函数 2.5获取系统信息函数 2.6重启服务函数 2.7 主函数 三.致谢 一.前言 在数字化时代,IT 基础设施的规模和复杂性不断增长&am…...
![](https://i-blog.csdnimg.cn/direct/a853fad274ab471694a9a0f4d5c11fb0.png)
HTML常用的转义字符——怎么在网页中写“<div></div>”?
一、问题描述 如果需要在网页中写“<div></div>”怎么办呢? 使用转义字符 如果直接写“<div></div>”,编译器会把它翻译为块,类似的,其他的标签也是如此,所以如果要在网页中写类似于“<div…...
![](https://i-blog.csdnimg.cn/direct/cfa74aabf49a42949293c1e31d7a511c.png)
shell-awk文本处理工具
1、awk概述 AWK 是一种处理文本文件的语言,是一个强大的文本分析工具。 它是专门为文本处理设计的编程语言,也是行处理软件,通常用于扫描、过滤、统计汇总工作 数据可以来自标准输入也可以是管道或文件 在 linux 上常用的是 gawk,awk …...
![](https://i-blog.csdnimg.cn/direct/d4630e9ad2c9438d9ab9409e2999530b.png)
如何在测试中保护用户隐私!
在当今数据驱动的时代,用户隐私保护成为了企业和开发团队关注的焦点。在软件测试过程中,处理真实用户数据时保护隐私尤为重要。本文将介绍如何在测试中保护用户隐私,并提供具体的方案和实战演练。 用户隐私保护的重要性 用户隐私保护不仅是法…...
![](https://i-blog.csdnimg.cn/direct/b2c66de1400548c1b0f8cdffc1e6c22e.png)
ARCGIS PRO DSK GraphicsLayer创建文本要素
一、判断GraphicsLayer层【地块注记】是否存在,如果不存在则新建、如果存在则删除所有要素 Dim GraphicsLayer pmap.GetLayersAsFlattenedList().OfType(Of ArcGIS.Desktop.Mapping.GraphicsLayer).FirstOrDefault() 获取当前map对象中的GetLayer图层 Await Queue…...
![](https://i-blog.csdnimg.cn/direct/b46abcbdbd9941368786495b849acd6a.png)
看板项目之vue代码分析
目录: Q1、vue项目怎么实现的输入localhost:8080就能自动跳到index页面Q2、组合饼状图如何实现Q3、vue项目如何实现环境的切换Q4、vue怎么实现vue里面去调用js文件里面的函数 Q1、vue项目怎么实现的输入localhost:8080就能自动跳到index页面 …...
![](https://www.ngui.cc/images/no-images.jpg)
lua 游戏架构 之 游戏 AI (七)ai_dead
定义一个名为ai_dead的类,继承自ai_base类。这个类用于处理游戏中AI在死亡状态下的行为逻辑。以下是对代码的具体解释: 1. **引入基类**: - 使用require函数引入ai_base类,作为基础类。 2. **定义ai_dead类**: …...
![](https://i-blog.csdnimg.cn/direct/a1fdfe1633e245ddab385bad39468978.png)
前端开发知识(一)-html
1.前端开发需掌握的内容: 2.前端开发的三剑客:html、css、javascript Vue可以简化JavaScpript流程。 Element(饿了么开发的) :前端组件库。 Ngix:前端服务器。 3.前端开发工具:vscode 1)按…...
![](https://www.ngui.cc/images/no-images.jpg)
身份证如何查验真伪?C#身份证二要素、三要素接口集成
身份证不仅是我们的身份证明,更是社会生活中的“通行证”,现在人们的衣食住行都离不开身份证。但对于提供服务的平台而言,如何对用户提供的身份信息进行真伪核验便成为了一大难题。别担心,今天小编为服务平台带来了身份证二要素、…...
![](https://i-blog.csdnimg.cn/direct/412d85acc3eb4de581497c4b0e4b4c30.png)
C++ | Leetcode C++题解之第290题单词规律
题目: 题解: class Solution { public:bool wordPattern(string pattern, string str) {unordered_map<string, char> str2ch;unordered_map<char, string> ch2str;int m str.length();int i 0;for (auto ch : pattern) {if (i > m) {…...
![](https://i-blog.csdnimg.cn/direct/49fd95a6642d442b91db8fecfc2ade03.png#pic_center)
Pytorch使用教学7-张量的广播
PyTorch中的张量具有和NumPy相同的广播特性,允许不同形状的张量之间进行计算。 广播的实质特性,其实是低维向量映射到高维之后,相同位置再进行相加。我们重点要学会的就是低维向量如何向高维向量进行映射。 相同形状的张量计算 虽然我们觉…...
![](https://img-blog.csdnimg.cn/img_convert/b5534a0bf6693f829416083212ca5317.png)
生成式AI:对话系统(Chat)与自主代理(Agent)的和谐共舞
生成式AI:对话与行动的和谐共舞 我们正站在一个令人激动的时代门槛上——生成式AI技术飞速发展,带来了无限的可能性。一个关键问题浮现:AI的未来是对话系统(Chat)的天下,还是自主代理(Agent&am…...
![](https://img-blog.csdnimg.cn/2c94d927ba5b4bd0941983f7b11083ca.png)
唯众物联网(IOT)全功能综合实训教学解决方案
一、引言 在信息技术日新月异的今天,物联网(IoT)作为推动数字化转型的关键力量,其触角已延伸至我们生活的方方面面,深刻地重塑了工作模式、生活习惯乃至社会结构的每一个角落。面对这一前所未有的变革浪潮,…...
![](https://i-blog.csdnimg.cn/direct/e9841afd63a34040b0135ebe490b18aa.jpeg#pic_center)
24证券从业考试报名『个人信息表』填写模板❗
24证券从业考试报名『个人信息表』填写模板❗ 1️⃣居住城市、通讯地址:写自己现居住的地址就可以。 2️⃣学历:需要注意的是学历填写的是考生已经取得的学历,在校大学生已经不具有报名资格,选择大专以上,或者是高中学…...
![](https://i-blog.csdnimg.cn/direct/49090629375348c08e1fb34990cec998.png)
深度学习系列70:模型部署torchserve
1. 流程说明 ts文件夹下, 从launcher.py进入,执行jar文件。 入口为model_server.py的start()函数。内容包含: 读取args,创建pid文件 找到java,启动model-server.jar程序,同时读取log-config文件ÿ…...
![](https://img-blog.csdnimg.cn/img_convert/27ef9388749f3542cfb17b5ca64a8180.jpeg)
算法日记day 20(中序后序遍历序列构造二叉树|最大、合并、搜索二叉树)
一、中序后序序列构造二叉树 题目: 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,…...
![](https://i-blog.csdnimg.cn/direct/7bb153dc661b4fd0bb54c5d8b54d31b6.png#pic_center)
【科研】# Taylor Francis 论文 LaTeX template模版 及 Word模版
【科研写论文】系列 文章目录 【科研写论文】系列前言一、Word 模板(附下载网址):二、LaTeX 版本方法1:直接网页端打开(附网址)方法2:直接下载到本地电脑上编辑下载地址说明及注意事项 前言 给…...
![](https://www.ngui.cc/images/no-images.jpg)
Linux网络配置及常见命令!
vim /etc/sysconfig/network-scripsts/ifcfg-ens33(图形界面配置网络) Xshell rz:上传(从Windows到Linux) sz:下载:(从Linux到Windows)(后接文件手工输入)…...
![](https://img-blog.csdnimg.cn/e0bbc0045f17463aaf31feabbd382099.gif)
linux之shell脚本实战
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…...
![](https://i-blog.csdnimg.cn/direct/c39377417ece4829bea10ebb63b6a42b.png)
文件上传漏洞(ctfshow web151-161)
Web151 F12修改源代码 exts后面png改为php 这样就可以上传php的文件了 Web152: 考点:后端不能单一校验 就是要传图片格式,抓个包传个png的图片 然后bp抓包修改php后缀解析 然后放包 Web153-web156 在php代码中可以使用“{}”代替“[]” …...
![](https://i-blog.csdnimg.cn/direct/e9c96deb542245fe99ff77f822d0bd31.png)
小猪佩奇.js
闲着没事 使用js 画一个小猪佩奇把 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</tit…...
![](https://img-blog.csdnimg.cn/img_convert/762d2fd6dccdc98c51ffc9ccfec34354.png)
人工智能AI合集:Ollama部署对话语言大模型-网页访问
目录 🍅点击这里查看所有博文 随着人工智能技术的飞速发展,AI已经不再是遥不可及的高科技概念,而是逐渐融入到我们的日常生活中。从智能手机的语音助手到家庭中的智能音箱,再到工业自动化和医疗诊断,AI的应用无处不在…...
![](https://i-blog.csdnimg.cn/direct/06a62301328d49a282bb7f8fc921261b.png)
CentOS搭建Apache服务器
安装对应的软件包 [roothds ~]# yum install httpd mod_ssl -y 查看防火墙的状态和selinux [roothds ~]# systemctl status firewalld [roothds ~]# cat /etc/selinux/config 若未关闭,则关闭防火墙和selinux [roothds ~]# systemctl stop firewalld [roothds ~]# …...
![](https://i-blog.csdnimg.cn/direct/6be1d1deba28480db213e1e6d349199b.jpeg)
CDGA|数据治理:安全如何贯穿数据供给、流通、使用全过程
随着信息技术的飞速发展,数据已经成为企业运营、社会管理和经济发展的核心要素。然而,数据在带来巨大价值的同时,也伴随着诸多安全风险。因此,数据治理的重要性日益凸显,它不仅仅是对数据的简单管理,更是确…...
![](https://www.ngui.cc/images/no-images.jpg)
32单片机bootloader程序
一,单片机为什么要使用bootloader 1、使用bootloader的好处 1) 程序隔离:可以同时存在多个程序,只要flash空间够大,或者通过外挂flash,可以实现多个程序共存,在多个程序之间切换使用。 2)方便程…...
![](https://www.ngui.cc/images/no-images.jpg)
MongoDB - 数组更新操作符:$、$[]、$pop、$pull、$push、$each、$sort、$slice、$position
文章目录 1. $1. 更新数组中的值2. 更新数组中的嵌入文档 2. $[]1. 更新数组中的所有元素2. 更新数组中的所有嵌入文档 3. $pop1. 删除数组的第一个元素2. 删除数组的最后一个元素 4. $pull1. 删除所有等于指定值的项2. 删除与指定条件匹配的所有项3. 从文档数组中删除项4. 从嵌…...
![](https://www.ngui.cc/images/no-images.jpg)
多GPU并行处理[任务分配、进程调度、资源管理、负载均衡]
1. 多GPU并行处理设计 设计思路: 实现基于多GPU的并行任务处理,每个GPU运行独立的任务,以加速整体的处理速度。 实现机制: 进程隔离: 利用multiprocessing.Process为每个GPU创建独立的工作进程。 GPU资源限制: 通过设置CUDA_VISIBLE_DEVICES环境变量&…...
![](https://www.ngui.cc/images/no-images.jpg)
项目部署到服务器
(相关资源都给出来了) 1 下载MobaXterm,然后打开 正常连接输入你的服务器IP,用户名可以起名为root 2 将JDK,Tomcat,mysql安装包 布置到服务器中(JDK官网地址:https://www.oracle.com/java/technologies/downloads/#java8 mysql官网地址: …...
![](https://i-blog.csdnimg.cn/direct/5f04be35679c4084879ea8df09b3c3d1.png)
Idea2024 创建Meaven项目没有src文件夹
1、直接创建 新建maven项目,发现没有src/main/java 直接新建文件夹:右击项目名->new->Directory 可以看到idea给出了快捷创建文件夹的选项,可以根据需要创建,这里点击src/main/java 回车,可以看到文件夹已经创建…...
![](https://www.ngui.cc/images/no-images.jpg)
LeetCode 2766.重新放置石块:哈希表
【LetMeFly】2766.重新放置石块:哈希表 力扣题目链接:https://leetcode.cn/problems/relocate-marbles/ 给你一个下标从 0 开始的整数数组 nums ,表示一些石块的初始位置。再给你两个长度 相等 下标从 0 开始的整数数组 moveFrom 和 moveTo…...
![](https://i-blog.csdnimg.cn/direct/2b4fd62f2a344856a34644e025f1eb67.gif)
基于STM32的农业大棚温湿度采集控制系统的设计
目录 1、设计要求 2、系统功能 3、演示视频和实物 4、系统设计框图 5、软件设计流程图 6、原理图 7、主程序 8、总结 🤞大家好,这里是5132单片机毕设设计项目分享,今天给大家分享的是智能教室。 设备的详细功能见网盘中的文章《8、基…...
![](https://www.ngui.cc/images/no-images.jpg)
go语言的命名规则
身为前端为什么去学go语言呢?我认为go在未来可能会给我带来一些收益。自认为收益是去做一件事情不可缺少的因素,就好像是你努力之后得到回报,努力的欲望会越来越强。《Head First Go》这本书里作者有一句话,如果你已经掌握了一门编…...
![](https://i-blog.csdnimg.cn/direct/81bd9dd05d1d4a509e384d392413bcdf.gif#pic_center)
新增ClamAV病毒扫描功能、支持Java和Go运行环境,1Panel开源面板v1.10.12版本发布
2024年7月19日,现代化、开源的Linux服务器运维管理面板1Panel正式发布了v1.10.12版本。 在这一版本中,1Panel新增了多项实用功能。社区版方面,1Panel新增ClamAV病毒扫描功能、支持Java和Go运行环境,同时1Panel还新增了文件编辑器…...
![](https://www.ngui.cc/images/no-images.jpg)
Windows通过命令查看mac : getmac
要查看本机网卡mac,可以通过ipconfig /all 显示,但输出内容过多 可以通过getmac命令查看 示例 C:\Users\Desktop> getmac物理地址 传输名称暂缺 没有硬件 1C-1B-B5-04-E2-7D \Device\Tcpip_{80096E40-D51D-490C-9AF7-…...
![](https://www.ngui.cc/images/no-images.jpg)
Android笔试面试题AI答之Android系统与综合类(1)
答案仅供参考,来着文心一言、Kimi.ai 目录 1.简述嵌入式实时操作系统,Android 操作系统属于实时操作系统吗?嵌入式实时操作系统简述Android操作系统是否属于实时操作系统 2.简述Android系统的优势和不足?3.简述Android的系统架构 ࿱…...
![](https://img-blog.csdnimg.cn/img_convert/77479749948f62635198a1d9154ebb5d.jpeg)
【Android】数据存储方案——文件存储、SharedPreferences、SQLite数据库用法总结
文章目录 文件存储存储到文件读取文件 SharedPreferences存储存储获取SharedPreferences对象Context 类的 getSharedPreferences() 方法Activity 类的 getPreferences() 方法PreferenceManager 类中的 getDefaultSharedPreferences() 方法 示例 读取记住密码的功能 SQLite数据库…...