![](https://img-blog.csdnimg.cn/20210205113852873.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE【后台管理项目】
文章平均质量分 84
# VUE【后台管理项目】
Bruce小鬼
**高级测试开发**
- 技术是在不断打磨中成长,
- 能力是在不断采坑中成熟,
- 技术人的路就是在采坑中寻找乐趣,在成长过程中不断成熟。
> 书山有路勤为径,学海无涯苦作舟
关注:brucelong.blog.csdn.net
展开
-
一行代码解决VUE中el-tabs切换echarts图表不显示
这篇文章介绍下在el-tabs标签切换时echarts图表不显示的问题。原创 2023-01-05 16:48:15 · 4650 阅读 · 2 评论 -
P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态
P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态文章目录P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态1.概述2.mock接口返回token2.1.mock调用guid返回token2.2.mockjs官网guid方法3.配置store管理token3.1.新建user文件3.2.index.js导入user.js3.3.user内容4.登录和登出配置4.1.Login组件4.2.登出清除token和路由5.配置路由守卫5.1.配置路由拦截器6.登录和登出效果7.优化菜单原创 2021-02-22 16:29:05 · 1573 阅读 · 0 评论 -
P21-Vue3后台管理系统-权限管理-权限管理实现
P21-Vue3后台管理系统-权限管理-权限管理实现1.概述这篇文章介绍通过动态路由实现权限管理2.路由配置思想我们首先对项目进行分析将路由做个分类,分为动态路由和静态路由。需要权限管理的菜单路由分配到动态路由不需要权限管理的菜单分配到静态路由2.1.动静路由配置动态路由配置思想动态路由配置效果import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 导入组件con原创 2021-02-22 14:43:11 · 2119 阅读 · 0 评论 -
P20-Vue3后台管理系统-权限管理-权限管理思路
P20-Vue3后台管理系统-权限管理-权限管理思路1.概述这篇文章进入一个新的领域,介绍权限管理实现思想。根据用户的权限级别返回不同的菜单。实现思路动态路由后端返回的数据格式有要求,需要返回用户可访问菜单路由地址触发时机登陆成功的时候触发操作Cookie中存在对应数据,⾸次进⼊⻚⾯时2.权限接口数据2.1.权限接口结构permission.js文件mock数据,根据不同用户返回不同菜单index.js文件接收前端请求。2.2.permission.js文件内原创 2021-02-20 19:28:08 · 2952 阅读 · 1 评论 -
P19-Vue3后台管理系统-用户管理界面-新增用户和查询用户
P19-Vue3后台管理系统-用户管理界面-新增用户和查询用户1.概述这篇文章介绍新增用户和查询用户功能开发2.新增用户2.1.新增用户实现逻辑1.点击新建按钮绑定新增用户方法2.新增用户方法中调用form弹框控件3.在form弹框控件中调用confirm方法,该方法调用新增用户接口。2.2.新增用户效果3.根据姓名搜索用户3.1.搜索用户逻辑点击搜索后,将搜索用户名称作为查询条件传给查询用户数据接口,该接口返回符合条件的数据3.2.搜索用户效果4.新增用户原创 2021-02-20 17:39:32 · 3191 阅读 · 0 评论 -
P18-Vue3后台管理系统-用户管理界面-表格编辑和删除操作
P18-Vue3后台管理系统-用户管理界面-表格编辑和删除操作1.概述这篇文章介绍用户管理界面表格的编辑和删除操作。2.编辑操作实现2.1.CommonTable向父组件发送操作事件2.2.UserManage父组件接收子组件事件2.3.父组件输出操作表格的行数据3.封装弹出框组件当在表格上点击编辑后,需要弹出一个form表单的弹出框来修改数据。下面封装这个弹出框组件实现编辑功能。3.1.查看Element官网提供弹框组件3.2.创建dialog弹窗在UserMana原创 2021-02-20 16:01:20 · 3265 阅读 · 2 评论 -
P17-Vue3后台管理系统-用户管理界面-分页功能开发
P17-Vue3后台管理系统-用户管理界面-分页功能开发1.概述这篇文章介绍用户管理界面的分页功能实现。2.实现分页功能2.1.查看Element官网提供分页插件2.2.绑定当前页事件2.3.父组件监听子组件的事件UserManage父组件监听CommonTable子组件发送的事件,并处理事件返回对应结果给子组件。UserManage父组件监听子组件事件打印子组件事件发送的页数绑定getList方法请求当前页的数据分页效果3.优化table表格列宽Comm原创 2021-02-19 19:31:57 · 1203 阅读 · 0 评论 -
P16-Vue3后台管理系统-用户管理界面-Loading加载功能开发
P16-Vue3后台管理系统-用户管理界面-Loading加载功能开发1.概述这篇文章介绍用户管理页面的Loadding加载功能的实现。2.表格添加Loading功能在用户管理界面的表格上添加一个区域Loading加载效果,当表格请求数据过程中显示Loading加载效果,请求数据完成后关闭Loading加载效果。2.1.查看Element提供的Loading组件2.2.使用Loading组件模板在CommonTable组件的table标签上添加v-loading属性,实现Loadi原创 2021-02-19 17:37:20 · 1655 阅读 · 0 评论 -
P15-Vue3后台管理系统-用户管理界面-table表格封装
P15-Vue3后台管理系统-用户管理界面-table表格封装1.概述这篇文章继续介绍用户管理界面,在这篇文章中完成table表格封装2.新建表格组件2.1.新建CommonTable组件2.2.注册子组件在UserManage组件中注册CommonTable子组件...原创 2021-02-19 10:58:05 · 1894 阅读 · 1 评论 -
P14-Vue3后台管理系统-用户管理界面-form表单封装
P14-Vue3后台管理系统-用户管理界面-form表单封装1.概述这篇文章开始我们来介绍用户管理界面的开发,首先介绍用户管理界面的form表单开发。2.接口数据用户管理界面展示的数据是请求接口,由接口返回数据。这里我们通过mock模拟接口返回的用户管理界面数。2.1.index.js内容import Mock from 'mockjs'import homeApi from './home'import userApi from './user'// 设置mock响应时间为20原创 2021-02-17 16:05:00 · 1707 阅读 · 0 评论 -
P13-Vue3后台管理系统-Echart组件样式优化
P13-Vue3后台管理系统-Echart组件样式优化文章目录P13-Vue3后台管理系统-Echart组件样式优化1.概述2.柱状图&饼状图2.1.添加没有坐标轴数2.2.Home组件添加柱状图&饼状图数据2.3.Home父组件传递数据给子组件2.4.柱状图&饼状图效果展示3.图表样式优化3.1.美化图表颜色3.2.坐标轴添加颜色3.3.设置x轴文字颜色3.4.设置图例颜色3.5.设置提示信息3.6.设置饼图颜色和提示信息3.7.调整图表布局位置3.8.调整图表自适应浏览器窗口大原创 2021-02-17 09:41:55 · 1150 阅读 · 0 评论 -
P12-Vue3后台管理系统-Echart组件介绍
P12-Vue3后台管理系统-Echart组件介绍1.概述这篇文章开始我们将介绍Echart的使用。什么是Echart使用Echart步骤封装Echart思想2.Echart封装思想2.1.安装Echart# 进入到项目根路径cd vue-manage-system# 安装Echartyarn add echarts -S2.2.Echart介绍Echart官网https://echarts.apache.org/zh/index.htmlEchart入门官原创 2021-02-15 20:53:02 · 916 阅读 · 0 评论 -
P11-Vue3后台管理系统-开发首页table部分内容
P11-Vue3后台管理系统-开发首页table部分内容1.概述这篇文章我们介绍首页左侧下部table内容的开发。2.首页左侧table开发2.1.首页mock数据在mock文件夹下的home.js文件中配置了首页的mock数据模板。下面是home.js文件mock数据。import Mock from 'mockjs'// 图表数据let List = []export default { getStatisticalData: () => { for (l原创 2021-02-10 21:13:10 · 818 阅读 · 0 评论 -
P10-Vue3后台管理系统-开发首页图标外的内容
P10-Vue3后台管理系统-开发首页图标外的内容1.概述上篇文章完成了首页的布局,这篇文章开发首页图标外的内容。2.首页左侧用户信息我们先开发首页左侧上面card内容,该内容由两块内容构成。用户头像和昵称用户登录信息2.1.新增用户信息在Home.vue组件中添加用户信息和登录信息HTML内容,用户的头像是从data数据中动态获取。2.2.设置用户信息样式2.3.用户信息效果3.设置首页右侧数据区域3.1.添加数据区域内容数据区域的内容放到data中,原创 2021-02-10 18:29:16 · 759 阅读 · 0 评论 -
P9-Vue3后台管理系统-Element实现首页布局
P9-Vue3后台管理系统-Element实现首页布局文章目录P9-Vue3后台管理系统-Element实现首页布局1.概述2.首页布局介绍2.1.首页布局分析2.2.首页布局结构设计2.3.首页样式结构设计3.左侧空间布局3.1. 复制Element官网card代码3.2. 应用到Home.vue组件中4.右侧空间布局4.1.右侧全局布局4.2.数据区域布局5.设置首页样式5.1.设置首页右侧数据区域5.2.设置首页右侧折线图和graph图样式5.3.设置首页左侧布局样式6.首页布局和样式完整代码6.1原创 2021-02-09 16:30:19 · 1520 阅读 · 0 评论 -
P8-Vue3后台管理系统-mock与axios安装配置
P8-Vue3后台管理系统-mock与axios安装配置文章目录P8-Vue3后台管理系统-mock与axios安装配置1.概述2.安装mock与axios2.1.mock介绍2.2.安装mock与axios3.axios全局配置3.1.新建axios配置文件3.2.挂载axios到Vue实例4.Mock配置4.1.新建mock配置文件4.2.查看官网mock基础使用说明4.3.mock全局配置4.4.配置首页mock内容4.5.配置首页mock接口4.6.Home.vue请求mock接口4.7.查看Mo原创 2021-02-09 13:16:25 · 1032 阅读 · 0 评论 -
P7-Vue3后台管理系统-页面布局整体样式优化
P7-Vue3后台管理系统-页面布局整体样式优化文章目录P7-Vue3后台管理系统-页面布局整体样式优化1.概述2.优化CommonAside组件样式3.优化CommonHeader组件样式3.1.调整面包屑背景色4.优化CommonTab组件样式4.1.改变Tag标签主题样式4.2.改变Tag标签鼠标样式5.折叠导航栏面板5.1. 配置vuex管理导航栏是否折叠5.2.配置CommonHeader组件触发导航栏折叠事件5.3.配置CommonAside组件获取isCollapse值决定是否折叠导航栏5.原创 2021-02-08 19:03:16 · 1709 阅读 · 0 评论 -
P6-Vue3后台管理系统-构建业务组件连通公共组件
P6-Vue3后台管理系统-构建业务组件连通公共组件1.概述这篇文章我们将创建业务模块,并且与公共组件进行连通。2.构建业务模块2.1.构建Home2.2.构建VideoManage2.3.构建UserManage2.4.构建Other3.构建业务组件路由在router下的index.js文件配置业务路由映射关系表import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)//原创 2021-02-08 17:09:40 · 1041 阅读 · 0 评论 -
P5-Vue3后台管理系统-vuex切换tab页
P5-Vue3后台管理系统-vuex切换tab页文章目录P5-Vue3后台管理系统-vuex切换tab页1.概述2.添加tab标签页2.1.新建CommonTab组件2.2.Main.vue引入CommonTab组件2.3.创建Tag标签2.4.设置tag标签样式3.vuex切换tab页3.1.vuex添加两个方法管理tab页3.2.CommonTab组件使用vuex管理的tag3.3.设置tag标签为home时不可关闭3.4.CommonTab组件完整代码1.概述这篇文章添加一个tab标签实现快速原创 2021-02-08 15:03:12 · 1702 阅读 · 1 评论 -
P4-Vue3后台管理系统-顶部导航与左侧导航联动面包屑
P4-Vue3后台管理系统-顶部导航与左侧导航联动面包屑1.概述上篇文章实现了左侧边栏导航,这篇文章我们开发顶部导航。2.顶部导航栏设置2.1.设置导航栏背景色在Main.vue组建中设置Header导航栏背景色2.1.Header添加按钮官网中找到Button按钮–图标按钮–复制图标按钮代码应用到CommonHeader组件中官网搜索图标替换按钮默认图标2.2.添加头像下拉菜单Element官网找到点击触发下拉菜单复制点击触发下拉菜单代码应原创 2021-02-07 18:15:57 · 4783 阅读 · 0 评论 -
P3-Vue3后台管理系统-路由设计及左侧公用导航栏开发
P3-Vue3后台管理系统-路由设计及左侧公用导航栏开发1.概述这篇文章介绍项目的路由设计,和左侧导航栏开发。2.安装配置Element组件库2.1.安装Element# 1.进入到项目根路径cd .\base-learn\# 2.执行安装命令- 使用yarn包管理器安装,如果是npm包安装可以查看官网安装介绍- -S表示开发和生产环境都使用yarn add element-ui -S2.2.引用Element在Element官网复制Element模块在项目的main原创 2021-02-07 13:59:27 · 2131 阅读 · 1 评论 -
P2-Vue3后台管理系统-配置scss全局变量
P2-Vue3后台管理系统-配置scss全局变量1.概述将项目中重复使用的内容配置成全局变量,当需要改变内容时候只需要改变全局变量,不需要在代码中修改。2.配置scss全局变量2.1.新建scss文件夹scss文件夹管理所有scss文件,全局变量都配置到scss文件中。2.2.新建第一个全局配置文件在scss文件夹下新建 _variable.scss ⽂件,并配置全局变量。引入样式重置文件样式重置文件内容html, body, div, span, applet,原创 2021-02-05 16:03:47 · 1155 阅读 · 0 评论 -
P1-Vue3后台管理系统-创建&配置项目
P1-Vue3后台管理系统-创建&配置项目文章目录P1-Vue3后台管理系统-创建&配置项目1.概述2.创建项目2.1.创建Vue32.2.手动配置插件2.3.选择hash路由2.4.选择代码校验规范3.项目结构配置3.1.创建配置文件3.2.启动项目3.3.配置ESLint格式化3.4.初始化项目3.5.启动项目1.概述这篇文章开始进入一个新的专栏,这个专栏将介绍如何创建一个Web端后台管理系统2.创建项目2.1.创建Vue3# 创建vue3vue create vue-原创 2021-02-05 14:47:26 · 1302 阅读 · 1 评论