权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作权限. 我们的设计把页面导航菜单和页面操作按钮统一存储在菜单数据库表中,菜单表中包含以下权限关注点. 菜单类型 菜单类型代码页面资源的类型.类型包括,0:目录   1:菜单   2:按钮'. 权限标识 权限标识即是代表此页面资源,用来进行权限控制的唯一标识,主要是进行增删改查的权限控制. 权限标识包…

用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 export const save = (params) => { return axios({ url: '/user/save', method: 'post', params }) }// 删除 export const del = (params) => { return axios({ url…

使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 5 跟之前的版本使用方式差别较大,功能是强大了,图标也更丰富了,但使用也变得更加复杂了. 本人还是比较喜欢之前的使用方式,安装容易…

使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩展开按钮触发收缩状态的修改,导航菜单需要根据收缩状态来设置导航栏的宽度.这样就需要在收缩状态变更时刷新导航菜单样式.后续类似的组件状态共享还会有许多.为了解决组件间状态的共享,增加组件交互的易用性,我们引入 vuex 专门管理应用状态. 2. 安装依赖 执行以下命令,安装 vuex 依赖. yarn…

组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组件. Home.vue <template> <div class="container"> <!-- 导航菜单栏 --> <MenuBar></MenuBar> <!-- 头部区域 --> <HeadBar&g…

自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add element-theme --dev 2.安装chalk主题 安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码,这里从 npm 安装. yarn add element-theme-chalk -D 3.初始化变量文件 主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调…

技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供的UI框架 开发环境 Node JS(npm) Visual Studio Code(前端IDE) 安装Visual Studio Code 下载地址: 官网下载地址 Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端IDE, 根据自己的系统下载相应的版本进行安装.…

系统备份还原 在很多时候,我们需要系统数据进行备份还原.我们这里就使用MySql的备份还原命令实现系统备份还原的功能. 后台接口准备 系统备份还原是对数据库的备份还原,所以必须有后台接口的支持,我们准备好了接口,相关内容可以查阅后台篇. backup:系统备份创建接口,会在服务端_backup目录下生成以时间戳相关的备份目录,目录下有MySQL的备份SQL. delete:系统备份删除接口,传入页面查询得到的备份名称作为参数,删除服务端备份记录. findRecord:系统备份查询接口,查询所有…

动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口模块化 我们向来讲究模块化,之前接口都集中在,interface.js,我们现在把它改名为 api.js,并把里边原来登录.用户.菜单的相关接口都转移到我们新建的接口模块文件中. 模块化之后的文件结构如下图所示 模块化之后,模块接口写在相应的模块接口文件中,如下面是登录模块 login.js imp…

完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class…