首页 layout 架子(element-plus菜单组件)

直接 cv 笔记中静态页面

菜单组件:
认识了解 el-menu整个菜单组件,el-menu-item菜单项,el-sub-menu多级菜单的标题,el-menu-item各个展开内容。也就是一级直接 el-menu-item,如果下面还有分类,就是 el-sub-menu

首页架子主要是左右两个部分,左边 aside ,右边 container,右侧又分为上下。

登录访问拦截:

也就是首页内容必须是登陆过的才能访问,未登录自然不能访问。

在router的 index.js进行访问拦截

可以直接在官网 vue-router 中找到导航守卫

用户基本信息获取和渲染

封装接口

因为是要存储到 pinia 中,所以要在 stores文件夹中的 user.js模块中 新建一个对象用来管理个人信息

调用 pinia中 useUserStore,使用其中的 getUser 方法得到

渲染昵称和头像,有昵称用昵称,没有昵称直接用账户名;有头像图片用头像图片,没有直接用默认的

该下拉菜单中前三个是一个导航跳转,点击即可跳到左边的个人中心下面内容

el组件中是 Dropdown 下拉菜单

在 el-dropdown 中,通常通过 @command 事件来处理 菜单项的点击事件,每个 el-dropdown-item会设置一个command属性,该属性值会在点击菜单项目时作为事件的参数传递给父组件的的事件处理函数

在 pinia 中设置清除个人信息函数,然后调用 

加个消息弹出框,防止误点直接退出了

要在 eslintrc.cjs中配置 ElMessageBox 才不会报错

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/20741.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关系中出现这10个信号,离分手就不远了(爱情友情都适用)

亲密关系的隐形裂痕 在一个阳光明媚却略显萧瑟的午后,咖啡杯里的咖啡已经凉透。小李盯着手机屏幕,那些曾经热烈的对话记录现在看起来如此陌生,仿佛隔着一层薄薄的雾。她终于意识到,这段关系已经悄然走向尽头。 亲密关系是一场精心…

CV -- YOLOv8 图像分割(GPU环境)

目录 参考视频: 标注 JSON转为TXT 训练 验证 参考视频: 使用 Yolov8 自定义数据集进行图像分割_哔哩哔哩_bilibili 标注 数据集: 我使用的是一些苹果数据集,可以在我的csdn资源中下载: https://download.csdn.net/do…

从函数到神经网络

所有一切的前提是,你要相信这个世界上的所有逻辑和知识,都可以用一个函数来表示。Functions describe the world ! 比如输入物体的质量和加速度,根据牛顿第二定律,就可以得到物体施加的力,这就是人工智能早期的思路&am…

Token Embedding(词嵌入)和Positional Encoding(位置编码)的矩阵形状关系及转换过程

在从零开始构建一个小型字符级语言模型时,简化的实现步骤是:数据准备→模型架构设计→训练→评估与生成。模型架构设计阶段的流程如下: 图1 模型架构设计阶段的流程 包含了输入层、嵌入层、解码器层和输出层。其中在嵌入层中包括了Token Embedding(词嵌入)和Positional En…

Bigemap Pro如何设置经纬网出图网格设置

第一步:打开bigemap pro软件,单击顶部网格选项第二栏,弹出经纬网设置对话框,如下图: 按作图需求自定义设置后,点击应用如下图: 第二步:设置好经纬网之后,进行作图&#x…

代码辅助工具

爱聚合 爱聚合包含各种AI工具 Fitten Code Fitten Code 小浣熊 小浣熊 Inscode InsCode 可以完整的创建一个应用并实现在线部署。而且可以更新需求一步一步实现代码。

JAVA中常用类型

一、包装类 1.1 包装类简介 java是面向对象的语言,但是八大基本数据类型不符合面向对象的特征。因此为了弥补这种缺点,为这八中基本数据类型专门设计了八中符合面向面向对象的特征的类型,这八种具有面向对象特征的类型,就叫做包…

原生稀疏注意力机制(NSA):硬件对齐且可原生训练的稀疏注意力机制-论文阅读

摘要 长上下文建模对于下一代语言模型至关重要,但标准注意力机制的高计算成本带来了巨大的计算挑战。稀疏注意力提供了一种在保持模型能力的同时提高效率的有前途的方向。本文提出了一种名为 NSA(原生可训练稀疏注意力机制) 的方法&#xff…

DeepSeek联网搜索

deepseek 0、前言1、未联网2、联网2.1 SerpAPI2.2 SerpAPIDeepseek 0、前言 为获取最新消息,需给deepseek联网 1、未联网 from dotenv import load_dotenv from langchain_deepseek import ChatDeepSeekload_dotenv()# 1、模型 model ChatDeepSeek(model"d…

MySQL 的存储引擎简介

使用show engines可以查看安装的MySQL的引擎相关信息 MySQL 的引擎不止这么多,这只是安装的这个版本有的引擎。可以看到,只有 InnoDB 支持事务,其他的引擎都是不支持事务的。 说几个我了解的比较多的引擎: InnoDB InnoDB 是MyS…

DeepBI助力跨境电商打破流量垄断:AI驱动的亚马逊广告投放新打法

#亚马逊广告优化# 亲爱的亚马逊跨境电商卖家们,是否曾因亚马逊的广告打法不清晰,或是纠结于亚马逊广告费用过高,或是为亚马逊电商广告怎么投放合适的问题而苦恼?在竞争激烈的亚马逊市场中,广告投放效果平平&#xff0…

保护大数据的最佳实践方案

在当今数字化时代,保障大数据安全的重要性再怎么强调也不为过。 随着科技的迅猛发展以及对数据驱动决策的依赖日益加深,企业必须将保护其宝贵信息置于首位。 我们将深入探讨保障大数据安全的流程,并讨论关键原则、策略、工具及技术&#xf…

解决DeepSeek服务器繁忙的有效方法

全球42%的企业遭遇过AI工具服务器过载导致内容生产中断(数据来源:Gartner 2025)。当竞品在凌晨3点自动发布「智能家居安装指南」时,你的团队可能正因DeepSeek服务器繁忙错失「净水器保养教程」的流量黄金期⏳。147SEO智能调度系统…

DeepSeek核心算法解析:如何打造比肩ChatGPT的国产大模型

注:此文章内容均节选自充电了么创始人,CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》(人工智能科学与技术丛书)【陈敬雷编著】【清华大学出版社】 文章目录 DeepSeek大模型技术系列一DeepSeek核心算法解析:如何…

山石网科×阿里云通义灵码,开启研发“AI智造”新时代

近日,山石网科正式宣布全面接入阿里云通义灵码企业专属版,这标志着山石网科在研发智能化、自动化领域迈出重要一步,为研发工作注入强大的AI动力,实现多维度的效率飞跃。 此次合作,阿里云通义灵码依托强大的AI能力&…

Linux部署DeepSeek r1 模型训练

之前写过一篇windows下部署deepseekR1的文章,有小伙伴反馈提供一篇linux下部署DeepSeek r1 模型训练教程,在 Linux 环境下,我找了足够的相关资料,花费了一些时间,我成功部署了 DeepSeek R1 模型训练任务,结…

学习kafka和flink

kafka kafka安装一套流程 方法一:启动需安装zookeeper和kafka 【Kafka】Windows下安装Kafka(图文记录详细步骤) 安装Tzq2018写的上面链接安装的,一切很顺利,除了zookeeper的环境变量不管如何配置都不管用&#xff0…

安装海康威视相机SDK后,catkin_make其他项目时,出现“libusb_set_option”错误的解决方法

硬件:雷神MIX G139H047LD 工控机 系统:ubuntu20.04 之前运行某项目时,处于正常状态。后来由于要使用海康威视工业相机(型号:MV-CA013-21UC),便下载了并安装了该相机的SDK,之后运行…

K8s 之端口暴露(The Port of K8s is Exposed)

K8s 之端口暴露 Kubernetes 是一个用于管理容器化应用程序的流行工具。然而,关于它的工作原理存在一些误解。最常见的误解之一是关于 Kubernetes Pod 中的端口暴露。本文将解释 Kubernetes 中端口暴露的真相。 1 误解 像许多 Kubernetes 新手一样,我最…

科普:Docker run的相关事项

一、镜像名(含标签)太长 如,通过如下命令行: docker pull designthru2019/dify:56c6d1af0944dbdb5e0115cb623ff0e118a4ac62拉取的镜像名(及标签)太长,可以通过改名的方法变短。 在 Docker 中&…