哈大大

摘要：用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口。 import axios from '../axios' /* * 用户管理模块 */ // 保存 export const save = (params) => { return axios({ url: 阅读全文

摘要：权限控制方案 既然是后台权限管理系统，当然少不了权限控制啦，至于权限控制，前端方面当然就是对页面资源的访问和操作控制啦。 前端资源权限主要又分为两个部分，即导航菜单的查看权限和页面增删改操作按钮的操作权限。 我们的设计把页面导航菜单和页面操作按钮统一存储在菜单数据库表中，菜单表中包含以下权限关注点。 阅读全文

摘要：菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作。 提供一个菜单查询接口，查询整颗菜单树形结构。 http/modules/menu.js 添加 findMenuTree 接口。 import axios from '../axios' /* * 菜单管理模块 */ // 保存 阅读全文

摘要：嵌套外部网页 在有些时候，我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面，接口文档页面等。 这个时候就要求我们的导航菜单能够解析嵌套网页的URL，并根据URL路由到相应的嵌套组件。接下来我们就讲解具体实现方案。 实现原理 1. 给菜单URL添加嵌套网页前缀，如果是服务端网 阅读全文

摘要：使用第三方图标库 用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。 Font Awesome Font Awesome 提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括 阅读全文

摘要：动态加载菜单 之前我们的导航树都是写死在页面里的，而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模拟数据，然后动态生成我们的导航菜单。 接口模块化 我们向来讲究模块化，之前接口都集中在，interface.js，我们现在把它改名为 api. 阅读全文

摘要：接口请求格式定义 前台显示需要后台数据，我们这里先把前后端交互接口定义好，没有后台的时候，也方便用mock模拟。 接口定义遵循几个规范： 1. 接口按功能模块划分。 系统登录：登录相关接口 用户管理：用户管理相关接口 机构管理：机构管理相关接口 角色管理 ： 角色管理相关接口 菜单管理 ： 菜单管理 阅读全文

摘要：自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 yarn add element-theme --dev 2.安装chalk主题 安装白垩主题，可以从 npm 安装或者从 阅读全文

摘要：组件封装 为了避免组件代码的臃肿，这里对主要的功能部件进行封装，保证代码的模块化和简洁度。 组件结构 组件封装重构后，试图组件结构如下图所示 代码一览 Home组件被简化，包含导航、头部和主内容三个组件。 Home.vue <template> <div class="container"> <!- 阅读全文

摘要：使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的，但是因为组件封装的原因，隐藏按钮在头部组件，而导航菜单在导航菜单组件，这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改，导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷 阅读全文

摘要：系统备份还原 在很多时候，我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。 后台接口准备 系统备份还原是对数据库的备份还原，所以必须有后台接口的支持，我们准备好了接口，相关内容可以查阅后台篇。 backup:系统备份创建接口，会在服务端_backup目录下 阅读全文

摘要：完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面，放置一个登录界面表单，包含账号密码输入框和登录重置按钮。 <template> <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" 阅读全文

摘要：国际化支持 1.安装依赖 执行以下命令，安装 i18n 依赖。 yarn add vue-i18n $ yarn add vue-i18n yarn add v1.9.4 warning package-lock.json found. Your project contains lock file 阅读全文

摘要：技术基础 开发之前，请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex，vue.js 应用状态管理库 Element，饿了么提供的UI框架 开发环境 Node JS（npm） Visual Studio Code（前端IDE） 阅读全文

摘要：封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。 封装要点 统一 url 配 阅读全文

摘要：导入项目 打开 Visual Studio Code，File --> add Folder to Workspace，导入我们的项目。 安装 Element 安装依赖 Element 是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了 vue、react、angular 等多个版本，我们这里 阅读全文