vue-element-admin集成方案如何运行以及代码解读

文章目录

      • 1.vue-admin-admin介绍
      • 2.运行方法
      • 3.代码解读
        • 3.1基础外层文件解读,以及eslint关闭(如下图)
        • 3.2内层src文件分析
          • 3.2.1 login流程解析

1.vue-admin-admin介绍

1.1 是一个后台前端解决方案(vue+elementui),内置i18国际化解决方案,动态路由,权限验证。
1.2可以快速搭建企业级中后台产品原型
1.3项目地址:项目地址

2.运行方法

2.1 运行指令如下

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 运行
npm run serve

2.2 结果截图(登录后)
在这里插入图片描述

3.代码解读

3.1基础外层文件解读,以及eslint关闭(如下图)

在这里插入图片描述

3.2内层src文件分析
3.2.1 login流程解析

3.2.1.1 找到src/views/login/login.vue文件
3.3.1.2 分析login流程

  • 1.点击登录执行的根函数如下
    在这里插入图片描述
  • 2.发起网络请求,存储token
    在这里插入图片描述
  • 登录前的拦截(有token放行,没有token重定向到login页面)
    在这里插入图片描述

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

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

相关文章

行业洞察 | 2024应用程序安全领域现状报告

在信息爆炸的时代,我们每天都在使用各种应用,从社交娱乐到工作学习,应用已经成为我们生活中不可或缺的一部分。然而,你是否知道,在这些便捷的背后,隐藏着巨大的安全风险? 近年来,应用…

Build a Large Language Model (From Scratch)附录D(gpt-4o翻译版)

来源:https://github.com/rasbt/LLMs-from-scratch?tabreadme-ov-file https://www.manning.com/books/build-a-large-language-model-from-scratch

Windows系统安装SSH服务结合内网穿透配置公网地址远程ssh连接

前言 在当今的数字化转型时代,远程连接和管理计算机已成为日常工作中不可或缺的一部分。对于 Windows 用户而言,SSH(Secure Shell)协议提供了一种安全、高效的远程访问和命令执行方式。SSH 不仅提供了加密的通信通道,…

单片机IO

一、简单GPIO口 保护二极管:IO引脚上下两边两个二极管用于防止引脚外部过高、过低的电压输入。 当引脚电压高于VDD时,上方的二极管导通,电压被钳位在VDD0.7V; 当引脚电压低于VSS时,下方的二极管导通,防止不…

设计模型 - 学习笔记

学习参考: https://blog.csdn.net/m0_65346405/article/details/136994128 《系统分析师教程》 《设计模式之禅》 一. 设计模式的5大原则 1. 单一职责原则 一个类应该只有一个变化因子。 就是说,一个类要变化,比如增加功能,那么引…

Elasticsearch 8.x 存储有无压缩?能压缩到多少?

1、认知前提 Elasticsearch 支持压缩,压缩方式默认为:LZ4 压缩算法。 具体参见: The default value compresses stored data with LZ4 compression, but this can be set to best_compression which uses DEFLATE for a higher compression r…

mybatis mapper.xml 比较运算符(大于|小于|等于)的写法: 转义和<![CDATA[]]>

文章目录 引言I 使用xml 原生转义的方式进行转义II 使用 <![CDATA[ 内容 ]]>引言 应用场景:查询时间范围 背景:在 *.xml 中使用常规的 < > = <= >= 会与xml的语法存在冲突 <![CDATA[]]> 比 转义符 来的繁琐 <![CDATA[]]> 表示xml解析器忽略…

Linux内网端口转公网端口映射

由于服务商做安全演练&#xff0c;把原先服务器内网的端口映射到外网端口全都关闭了&#xff0c;每次维护服务器特别麻烦&#xff0c;像数据库查询如果用原生的mysql 去连接&#xff0c;查询返回的结果乱了&#xff0c;非常不方便。 查了服务还是可以正常访问部分外网的&#x…

mongodb在windows环境安装部署

一、mongodb 1.释义 MongoDB 是一种开源的文档型 NoSQL 数据库管理系统&#xff0c;使用 C 编写&#xff0c;旨在实现高性能、高可靠性和易扩展性。MongoDB 采用了面向文档的数据模型&#xff0c;数据以 JSON 风格的 BSON&#xff08;Binary JSON&#xff09;文档存储&#x…

Unity射击游戏开发教程:(29)躲避敌人的子弹射击

在这篇文章中,我将介绍如何创建一个可以使玩家火力无效的敌人。创建的行为如下...... 当玩家向敌人开火时,敌人会向左或向右移动。向左或向右的移动是随机选择的,并在一段时间后停止敌人的移动。如果敌人移出屏幕,它就会绕到另一边。将一个精灵拖到画布上,将其缩小以匹配游…

mdb转gdb实现过程介绍(2)三种方式实现GDB数据库的读、写,并将实现方式与ArcGIS环境共存配置

一、内容提示 通过解析mdb地理数据库&#xff0c;获取了图层之间的组织结构、空间参考、表字段属性等信息。 下一步&#xff0c;就是将数据输出到GDB中。 下面详细介绍python3.9版本&#xff0c;读写GDB数据的方法&#xff1a; &#xff08;1&#xff09;使用ArcPy创建GDB、读写…

【MySQL基础篇】函数及约束

1、函数 函数是指一段可以直接被另一段程序程序调用的程序或代码。 函数 - 字符串函数 MySQL中内置了很多字符串函数&#xff0c;常用的几个如下&#xff1a; 函数功能CONCAT(S1,S2,...,Sn)字符串拼接&#xff0c;将S1,S2,...,Sn拼接成一个字符串LOWER(str)将字符串str全部…

STM32第十二课:ADC检测烟雾浓度(MQ2)

文章目录 需求一、MQ-2 气体传感器特点应用电路及引脚 二、实现流程1.开时钟&#xff0c;分频&#xff0c;配IO2.配置ADC的工作模式3.配置通道4.复位&#xff0c;AD校准5.数值的获取 需求实现总结 需求 使用ADC将MQ2模块检测到的烟雾浓度模拟量转化为数字量。 最后&#xff0c…

【ElementPlus源码】Button 按钮

文章目录 准备工作属性方法模板使用到的hooksuse-propuseDeprecated 看源码时候做的笔记。 准备工作 本地开发 | Element Plus (element-plus.org) 文档与源码对应&#xff1a;docs/examples/button 组件源码位置&#xff1a; packages/components/button/src 属性 定义在 …

C++面试宝典30题丨第一题:开灯

专栏导读 见得题目越多&#xff0c;考试时抽中的概率也越大。每一题都有详细的解答思路和独有的视频讲解。 本文收录于&#xff1a;C面试宝典&#xff08;送视频讲解&#xff09; ☆☆☆购买专栏后&#xff0c;请加微信会私发讲解视频&#xff01; 题目描述 一条名叫Mango的街…

图书管理系统(持久化存储数据以及增添新功能)

目录 一、数据库表设计 二、引入MyBatis 和MySQL 驱动依赖 三、配置数据库 & 日志 四、Model创建 五、枚举类 常量类用户登录 六、用户登录 七、添加图书 八、图书列表 九、修改图书 十、删除图书 十一、批量删除 十二、强制登录 十三、前端代码 &#xff0…

使用 HBuilder X 进行 uniapp 小程序开发遇到的问题合集

文章目录 背景介绍问题集锦1. 在 HBuilderX 点击浏览器运行时&#xff0c;报 uni-app vue3编译器下载失败 安装错误2.在 HBuilderX 点击微信小程序运行时&#xff0c;报 微信开发者工具打开项目失败&#xff0c;请参阅启动日志错误 背景介绍 HBuilder X 版本&#xff1a;HBui…

餐饮界的新传奇:沃可趣员工社区,让品牌关怀在指尖流淌

咖啡师与顾客发生肢体冲突、员工用咖啡粉泼顾客……某精品咖啡一天爆出两个大瓜&#xff01; 很快有网友指出咖啡店员工长期遭受重压&#xff0c;与品牌之间存在根本矛盾。 同样做餐饮的老牌快餐&#xff0c;门店密度与之不相上下&#xff0c;却很少发生这样的暴雷。 不仅因…

六.核心动画 - 特殊图层①

引言 本专栏到目前为止已经介绍了CALayer&#xff0c;了解了它的绘画和动画功能。但是Core Animation图层不仅仅能够用于图片和颜色&#xff0c;本篇博客就来介绍一下一些CALayer的子类特殊图层&#xff0c;来进一步扩展Core Animation的绘图能力。 特殊图层 Core Animation…

Vue实现金钱输入框组件自动带千位逗号

新建PriceInput.vue <template><div id"bord"><el-inputv-model"inputValue"v-bind"$attrs":maxlength"maxlength"input"handleInput"focus"handleFocus"blur"handleBlur"change"h…