【自用】VUE 获取登录用户名 显示在其他页面上

news2024/11/24 6:24:47

大步骤一、准备工作

步骤1:

安装 js-cookie 依赖

npm install js-cookie --save

步骤2:

在登录页面中引入 js-cookie 依赖

<script>
import jsCookie from 'js-cookie';
</script>

大步骤二、在 登录页面 的vue文件 中使用它!

步骤1:

<script>
// xxx 是你data中的用户名
jsCookie.set('username',this.xxx)
</script>

在这里插入图片描述

大步骤三、在 其他页面 的vue文件 中使用它!

步骤1:

在其他页面中引入 js-cookie 依赖

<script>
import jsCookie from 'js-cookie';
</script>

步骤2:

设定一个 computed 计算属性,并在其中写入获取登录界面 cookies 的方法:

computed:{
  showUserName(){
    return jsCookie.get('username')
  }
},

在这里插入图片描述

步骤3:

在需要使用的地方使用 插值表达式 {{xxx}} 来使用它!
(请注意,我们需要用刚写好的函数来引用)

在这里插入图片描述

四、大工告成!

1.来看看效果吧!

1.1 登录页面,用户名为 LYL:

在这里插入图片描述
1.2 登录后,主页已经显示用户名了!

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[附源码]计算机毕业设计springboot基于JAVA技术的旅游信息交互系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

[附源码]Python计算机毕业设计SSM泸定中学宿舍管理系统设计(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

python零基础入门(完整版)

1python软件下载 我们需要下载python语言翻译器&#xff08;也就是运行环境&#xff09;&#xff0c;和一个用来写python的软件&#xff0c;用它写python语言比较方便 首先打开百度&#xff0c;下载org 然后点击下载 然后选择一个稳定版本下载 然后会跳转到一个页面&#xff0c…

kubernetes-service详解

kubernetes-service详解 文章目录kubernetes-service详解一、Service操作一&#xff1a;创建集群内部可访问的Service操作二&#xff1a;创建集群外部也可访问的Service二、pod详解pod的资源清单pod 配置基本配置镜像拉取启动命令环境变量端口配置资源配额一、Service 虽然每个…

NumPy 数组应用初探

NumPy是Python中科学计算的基本包。它是一个Python库&#xff0c;提供了一个多维数组对象&#xff0c;各种派生对象&#xff08;如屏蔽数组和矩阵&#xff09;&#xff0c;以及对数组进行快速操作的各种例程&#xff0c;包括数学、逻辑、形状操作、排序、选择、I/O、离散傅立叶…

Python-可视化单词统计词频统计中文分词

可视化单词统计词频统计中文分词项目架构新建文件单词计数全文单词索引中文分词统计词频源代码项目架构 新建一个文件&#xff0c;输入文件的内容&#xff0c;查询此文件中关键字的出现的次数&#xff0c;关键字出现的位置&#xff0c;将所有的文本按照中文分词的词库进行切割…

运筹说 第76期 | 最短路问题

通过前面的学习&#xff0c;我们已经学会了图与网络问题中图的基本概念和最小树问题&#xff0c;本期小编带大家学习最短路问题。 一 最短路问题 最短路问题是网络理论中应用最广泛的问题之一。许多优化问题可以使用这个模型&#xff0c;如设备更新、管道敷设、线路安排、厂区…

tensorboard attempted to bind to port 6006,but it was already in use

我尝试运行tensorboard是遇到错误 这篇博客给了两个解决方案&#xff1a;

弹出 think-cell 许可证密钥窗口丨使用教程

think-cell需要使用有效的许可证密钥才能运行。每次启动 Microsoft PowerPoint 或 Microsoft Excel 时&#xff0c;都会检查许可证密钥。若您的系统上找不到任何有效的许可证信息&#xff0c;或许可证密钥即将到期&#xff0c;则会显示 think-cell 许可证密钥对话窗口。 thin…

UDP-糖,UDP-GlcNAc 5′-二磷酸尿嘧啶核苷-N-乙酰半乳糖胺二钠盐 UDP-N-acetylglucosamine

产品名称&#xff1a; UDP-GlcNAc 5′-二磷酸尿嘧啶核苷-N-乙酰半乳糖胺二钠盐 UDP-N-acetylglucosamine 产地&#xff1a;西安 规格&#xff1a;1mg 5mg 10mg 纯度&#xff1a;99% 用途&#xff1a;仅用于科研 温馨提示&#xff1a;仅用于科研&#xff0c;不能用于人体…

R语言法国足球联赛球员多重对应分析(MCA)

数据集 fooball球员在场上的位置 数据来自国际足联的视频游戏FIFA 。游戏的特点是在游戏的各个方面评价每个球员的能力。等级是量化变量&#xff08;介于0和100之间&#xff09;&#xff0c;但我们将它们转换为分类变量。所有能力都被编码在4个等级&#xff1a;1.低/ 2.平均/ …

Spring、SpringMVC和SpringBoot

常用的java框架有: SSH组合 SpringMVCSpringHibernate SSM组合 SpringMVCSpringMybatis&#xff08;流行组合&#xff09; SpringBoot springCloud 权限管控框架 Shiro、SpringSecurity 一. 概念 1. Spring Spring是一个开源容器框架&#xff0c;可以接管web层&#xf…

显卡---显卡驱动---CUDA---Cudnn

1. 背景 最近在follow百度的CAE这篇论文时&#xff0c;源码需要的环境为&#xff1a; python 3.7 cuda: 11.0 cudnn: 8.0.4 gcc 8.2 该版本要求与我目前使用的服务器上的CUDA版本不相符合。因此搜索了一篇国外小哥的文章&#xff0c;讲述了如何在一台服务器上安装多个CUDA和Cud…

【MySQL】数据库机房架构与跨城容灾详解(实战篇)(MySQL专栏启动)

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;专注于研究 Java/ Liunx内核/ C及汇编/计算机底层原理/源码&#xff0c;就职于大型金融公司后端高级工程师&#xff0c;擅长交易领域的高安全/可用/并发/性能的架构设计与演进、系统优化与稳定性建设。 &#x1…

平衡搜索树——红黑树小记

文章目录红黑树定义规则操作规则平衡调整规则规则代码插入平衡调整代码左旋、右旋红黑树 定义 红黑树是一种 “平衡” 二叉 搜索树 “平衡”: 相比较于AVL树来说&#xff0c;是一种弱平衡 在红黑树中&#xff0c;任意从根到叶子的路径中&#xff0c;LEN(最长的路径)< 2*LE…

Keras深度学习实战(39)——音乐音频分类

Keras深度学习实战&#xff08;39&#xff09;——音乐音频分类0. 前言1. 数据集与模型分析1.1 数据集分析1.2 模型分析2. 歌曲流派分类模型2.1 数据加载与预处理2.2 模型构建与训练3. 聚类分析小结系列链接0. 前言 音乐音频分类技术能够基于音乐内容为音乐添加类别标签,在音乐…

爬虫基本原理

爬虫基本原理 网络爬虫的本质 爬虫是模仿用户在浏览器或者某个应用上的操作&#xff0c;把操作的过程实现自动化的程序 数据的传输是由客户端和服务器来进行交互的&#xff0c; 他们进行交互的层是传输层&#xff0c;遵守TIP/IP协议 我们在查询一个网址之后发生了四个步骤 …

spring复习05,spring整合mybatis,声明式事务

spring复习05,spring整合mybatis,声明式事务spring整合mybatis1. 在pom.xml中导入依赖2. 创建实体类3. 创建Mapper接口4. 配置mybatis核心配置文件5. 编写映射文件Mapper.xml6. 编写数据源配置7. sqlSessionFactory8. sqlSessionTemplate9. 需要给接口加实现类10. 将实现类注入…

JavaScript获取DOM元素相关信息和属性

getBoundingClientRect 获取到元素盒模型的一些信息,得到的结果是没有单位的,不包含滚动条的距离,不包含margin&#xff0c;包含border和padding width 宽度&#xff08;包含边框&#xff09; height 高度&#xff08;包含边框&#xff09; left 从元素最左边到可视区最左边距…

Ansible 企业级自动化运维实战

一、Ansible 简介 如果Ansible不采用0mq(ZeroMQ),在操作1000个以下的节点性能还可以,如果操作1000个以上的节点,性能就很差。 目前来说Ansible支持local,ssh,0mq,Ansible用ssh来管理被管理主机是最常见的方法。 saltstack简称salt,默认采用0mq(ZeroMQ),支持数万…