基于vue2开发的后台管理系统
简单的登录页面
用户名采用了简单的长度检测
实现简单 密码的显示和隐藏
- 向服务器发送axios post请求,根据用户密码返回数据
数据包含一个token和对应角色的动态路由表
- 处理路由关系表,注册路由
使用Element UI 根据注册的路由信息遍历生成侧边栏,路由对应子路由生成子菜单
并且绑定路由跳转
问题
路由问题,对于单个一级菜单和二级菜单对应的
<router-view>
相同,单个菜单和二级菜单对应的路由等级要相同
在遍历时,一级菜单对应一级路由,二级菜单对应二级路由
使用路由重定向Redirect 将一级菜单对应的一级路由定向到其子二级路由。
- 遍历的侧边栏收缩问题
由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一,但是却嵌套了<div>,而导致收折就隐藏不了文字
折叠时:css将部分span 和div diaplay:none
- 侧边栏折叠按钮
使用全局事件总线进行通讯,传递数据让侧边栏组件收缩
css动画搜索框隐藏和显示
头像
页签
面包屑
页签数据记录访问过的页面,保存到vuex中,根据页签数据生成页签元素,根据当前路由和页签数据中的路由信息进行比对,使得当前页签激活
删除
从数组中将对应的页签数据删除
//在router beforeEach 中实现全局事件总线用于传递数据
//如何获取this
//在router.js文件中定义一个函数,并且导入到入口文件中在vue的beforecreated钩子中调用该函数,并且将this(指向vue实例)以参数的形式传入。
向服务端发送请求获取文章内容和列表
使用正则将文章的第一行提取出来当做文章的标题
侧边的文章列表切换文章
Element UI的图标
添加点击事件调用函数将点击的图标title 复制到粘贴板
svg图标
安装svg-loader,编辑svg组件 调用svg组件
角色权限
根据登录的角色设定不同的路由表
登录时获取服务端的动态路由,并且动态注册路由
将路由存在vuex中
页面刷新vuex重新初始化会使得动态路由丢失
- 在created钩子获取存在localStorage中的登录信息根据登录信息向服务端发起请求获取动态路由
指令权限
设定自定义指令 实现按钮级别的权限控制
也可以通过v-if实现权限控制
- 简单的路由嵌套
使用el-upload
文件数量限制limit
文件类型判断
头像的查看
- 使用dialog显示头像放大
头像删除
- 将存储上传的filelist中删除对应数据
点击下载按钮向服务端发送请求
服务端打开文档流
设置对应响应头
创建Bolb数据
创建路径
设置下载名称
使用第三方QuillEditor
分页
通过设定的单页数据量和表格数据总量计算出分页的各项数据
根据页数和单页数据条数检索到当前页面显示的数据,存放到当前显示数组中,修改单页数据条数,从新计算获取页面表格
编辑
- 获取当前行的数据,传入编辑dialog中,修改后将数据返回,修改表格数据
删除
- 将当前行数据从数组中移除
添加
获取表格数据最后的id+1
将数据添加到数组中
使用全局事件总线和vuex进行数据通信