Vue3-黑马(十四)

目录:

(1)vue3-进阶-router-令牌-前端路由

(2)vue3-进阶-router-令牌-前端路由

(3)vue3-进阶-pinia1

(4)vue3-进阶-pinia2


(1)vue3-进阶-router-令牌-前端路由

下面我们来看tocken的第二个用途, 作为前端路由的跳转依据

我们想要实现这样一个,当没有登录后是不能访问主页的信息,没有登录要跳到登录页面,我们在跳转主页之前做一个检查判断是否含有tocken,有tocken放行,没有tocken调回登录页面

在路由中添加代码,在每次跳转路由前进行执行这个函数:beforeEach

访问主页: 

 

 调回登录页面

 我们vue的页面单页面程序,不管你的组件有多少,它最外层的html页面只要一个index.html:

 

其他组件在这个页面的中的title显示时一样的。

用一个函数afterEach用解决页面标题一样的问题 ,路由跳转之后执行

 

(2)vue3-进阶-router-令牌-前端路由

tocken的另外一个作用,是后端Api的访问依据,前端访问后端,需要前端的请求携带一个tocken,这个tocken用于身份的校验

 

前端访问请求需要携带tocken ,axios在请求拦截器中添加携带tocken

 导入当时存入的tocken变量

 

 发现登录获取菜单的请求携带了一个请求头,把获取的tocken请求发送给服务器,经过拦截器验证,验证成功才会返回正确信息

 

(3)vue3-进阶-pinia1

这样一个需求在登录成功后,在右上角不仅显示用户名还有真实姓名和性别,用户的基本信息 

在菜单一种可以修改当前登录的用户信息,更新数据库,修改成功后在主页组件右上角也要同时更新,但是你会发现这是两个组件,外面那个主页组件是不会变化的,这是遇到的问题,怎么解决呢?需要一个新的技术pinia,可以针对多个组件之间实现数据的共享,这个数据是响应式的数据 

 那么象使用LocalStorage不行吗?把菜单数据存入localStorage,因为登录成功后把数据存入localStorage后进行页面的跳转,跳转后进入主页面,当页面加载时可以在从LocalStorage中获取,但是修改页面信息没有实现页面跳转所以是不行的,不会主动触发读取locaStorage,除非加一个按钮触发代码来读取更新后的信息

pinia就想vuex一样实现不同组件的数据共享问题

首先安装

 

在main.ts引入pinia

 创建文件夹:存放数据共享的数据

 先定义一个固定的共享数据:

在主页引入:使用这个共享数据

 

 

P1组件使用这个共享数据

 

使用Mounted函数,通过Object.assign进行对象的赋值,因为上面的表单对象已经跟dto对象绑定了,直接把共享数据跟dto对象进行赋值 

为什么共享数据userInfo直接跟表单进行绑定呢?因为如果进行了绑定,当在这个页面修改时,右上角就会立马改动,用不到下方的确定按钮啦

 

 在P1这个组件中更新数据保存到共享数据中

修改一下内容: 

 点击确定:

 

 (4)vue3-进阶-pinia2

 useRequest一般用到组件里

 

 

 

 我们用的是vue的component组合式API,见不到this

在主页面:调用这个方法

 

 在P1组件点击确定的按钮:调用这个方法更新数据

 

 点击确定,更新了数据库,主页组件也同时更新

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ARM学习笔记_2 模式,寄存器,流水线

ARM arm体积小功耗低性能高,支持thumb ARM双指令集,兼容8/16位器件;大量使用寄存器,指令定长,寻址简单。 ARM是32位架构,Word 32bit, half Word 16bit. 模式 用户模式是用户程序的模式&#…

GPT-2(Transformer Decoder)的TensorFlow实现(附源码)

文章目录 一、GPT2实现步骤二、源码 一、GPT2实现步骤 机器学习模型的开发实现步骤一般都包含以下几个部分:   1. 遵照模型的网络架构,实现每一层(Layer/Block)的函数;   2. 将第1步中的函数组合在一起&#xff0c…

Typecho搭建和美化

概述 Typecho是一款轻量级的开源PHP博客系统,它简单易用,界面整洁,性能高效,主题、插件众多。我使用的是腾讯云轻量服务器,Typecho的应用模版,一键安装环境。构建自己的博客网站,记录生活、分享…

容器简单介绍

目录 一、容器简介​编辑 二、容器和虚拟化技术差异 三、容器基本概念 四、容器技术对企业优势 五、容器的工具 一、容器简介 docker只是容器工具,真正容器技术是LXC (linux container) 二、容器和虚拟化技术差异 虚拟机模式&#xff…

AI人工智能逻辑回归的原理、优缺点、应用场景和实现方法

逻辑回归(Logistic Regression)是一种常见的机器学习算法,它被广泛应用于分类问题。在人工智能(Artificial Intelligence,简称AI)领域中,逻辑回归是一种简单而有效的算法,可以用于许…

vue+elementui+nodejs高校校园在线打印预约系统

在线提交文档进行打印 首页简单介绍系统 语言 node.js 框架:Express 前端:Vue.js 数据库:mysql 数据库工具:Navicat 开发软件:VScode 顶部或主页按钮转到打印 用户可以登录 查看历史打印记录 用户分学生和非学生 学生可以享有优惠…

【C#】GridControl增加选择列(不用二次点击)

系列文章 【C#】单号生成器(编号规则、固定字符、流水号、产生业务单号) 本文链接:https://blog.csdn.net/youcheng_ge/article/details/129129787 【C#】日期范围生成器(开始日期、结束日期) 本文链接:h…

黑马Redis原理篇

黑马Redis原理篇 1、数据结构1.1、动态字符串SDS1.2、IntSet1.3、Dict1.4、ZipList1.5、QuickList1.6、SkipList1.7、RedisObject1.8、五种数据结构1. String(小EMBSTR,大RAW (SDS),少量整数INT)2. List(Redis3.2之后使用QuickList实现&#…

electron 使用electron-packager打linux-x64包与linux-arm64包,解决打包缓慢问题

使用electron-packager打linux-x64包与linux-arm64包,解决下载zip打包缓慢问题 在使用electron-packager打包的过程中,需要在第一次下载electron版本对应的zip文件,下载很缓慢,而且还可能出现每次都在下载zip的情况 解决思路是提前下载好zip文…

【Jmeter第三章】Jmeter给请求添加请求头

给请求加上请求头最常见的场景就是在请求头上添加token了,这里也拿添加token来举例 1、添加某个请求的请求头 1、选中HTTP请求,右键添加 2、添加请求头 2、添加公共的请求头信息 其实步骤和上面是一样的,只不过是选择:线程组…

Midjourney提示词资源、使用技巧、艺术家资源网站收录

为了帮助艺术家们使用Midjourney更专业、准确地创作更完美的艺术作品,我们收录了一些Midjourney提示词资源分享、提示词书写技巧、相关专业工具,同时还有一些相关艺术家资源帮艺术家们找到创作灵感。有很多是社区内资深玩家分享的云文档,资源…

2023彩虹易支付最新原版安装教程(内附源码)

此源码已通过检查,确认无后门,且所有代码开源,无加密文件。 测试日期 2023年5月21日 源码已扫描无后门,不放心的也可以自己再去扫描一遍 2023年5月22日 各个功能接口测试完毕,均可用 选中下方可查看下载链接 http…

初识linux之网络基础概念

目录 一、网络发展 1. 独立模式 2. 网络互联 二、认识协议 1. 为什么要有协议 2. 什么是协议 三、网络协议初识 1. 协议分层 2. 协议分层的优点 3. 理解分层 4. OSI七层模型 4.1 概念 4.2 模型形式 4.3 各层的作用 5. TCP/IP五层(或四层&#xff09…

23 KVM管理虚拟机-使用VNC密码登录虚拟机

文章目录 23 KVM管理虚拟机-使用VNC密码登录虚拟机23.1 概述23.2 前提条件23.3 操作步骤 23 KVM管理虚拟机-使用VNC密码登录虚拟机 本章介绍使用VNC密码登录虚拟机的方法。 23.1 概述 当虚拟机操作系统安装部署完成之后,用户可以通过VNC协议远程登录虚拟机&#…

HTTP介绍、原理

HTTP 与 HTTPS 有哪些区别? HTTP 是超文本传输协议,信息是明文传输,存在安全风险的问题。HTTPS 则解决 HTTP 不安全的缺陷,在 TCP 和 HTTP 网络层之间加入了 SSL/TLS 安全协议,使得报文能够加密传输。HTTP 连接建立相…

C++编译和链接

目录 一、源代码的组织 ①头文件(*.h) ②源文件(*.cpp) ③主程序(main函数所在的程序) ④从源代码到可执行文件,编译的过程有三大步骤: 1)编译预处理 2&#xff09…

Matlab - Plot in plot(图中画图)

Matlab - Plot in plot(图中画图) 这是在MATLAB中创建一个嵌入式图形的示例,可以在另一个图形中显示。 与MATLAB中的“axes”函数相关。 Coding % Create data t linspace(0,2*pi); t(1) eps; y sin(t);% Place axes at (0.1,0.1) with w…

Winform窗体利用WebApi接口实现ModbusTCP数据服务

在上位机开发过程中,有时候会遇到需要提供数据接口给MES或者其他系统,今天跟大家分享一下,如何在Winform等桌面应用程序中,开发WebApi接口,提供对外modbus设备的数据服务。通讯模型是: 为了更好地演示应用场…

Qt- QSS样式表用法及用例说明

这里写自定义目录标题 QSS样式表用法1.Qt样式表语法2.选择器3.属性列表4.冲突解决5.全局添加QSS QSS样式表用法 整理qss样式表语法知识,方便今后查看。 1.Qt样式表语法 Qt样式表支持各种属性、伪状态和子控件,可以自定义小部件的外观 selector { attr…

Day01 关系型数据MySQL简介与多平台安装配置

文章目录 第一章 数据库简介1.1 数据库的简介1.2 数据库的分类 第二章 数据库的安装与配置2.1 安装: Windows版2.2 卸载: Windows版2.3 安装: Mac直装版2.4 卸载: Mac直装版2.5 安装: Mac Homebrew版2.6 卸载: Mac Homebrew版2.7 启动、停止mysql服务2.8 登录到MySQL2.9 修改密…