15.职位管理和职称管理功能介绍
职位管理和职称管理主要是表格的应用，考虑到这里数据量并不大，因此并未分页，效果如下：
15.1 职位管理
15.2 职称管理
两个表格其实差不多，但是有点小差异。职称管理中多了一个职称等级下拉框，其他基本都是一致的。
扫码关注微信公众号 江南一点雨，回复 2TB，获取超 2TB Java 学习教程~
14.Tree树形控件使用要点
树形控件主要使用了 ElementUI 中的控件，ElementUI 中树的加载可以通过 load 属性一个一个懒加载，在官方的案例中有这种用法，个人非常不推荐这种用法，很麻烦。我的主要思路如下：
在页面加载时，我在 mounted 方法中就去获取了所有的部门数据，然后直接加载到树上（这种方式比较省事，特别是处理后面动态添加删除时很方便，小伙伴在工作中可以根据实际情况选取合适的策略）。核心代码如下：
this.getRequest("/system/basic/dep/-1").then(resp=> {
_this.treeLoading = false;
if (resp && resp.status == 200) {
_...
13.递归查询与存储过程调用
后台程序也都是常规代码，我们重点关注两点：
递归调用
存储过程调用
13.1 递归调用
由于部门的层级不可控，因此如果我想要获取所有部门的完整 json 的话，就要采用递归调用，这里的递归调用我们可以利用 MyBatis 的 ResultMap 中的 collection 实现，核心代码如下：
<resultMap id="BaseResultMap" type="org.sang.bean.Department">
<id property="id" column="id"/>
<result column="name" property="name"/>
<result column="paren...
12.部门数据库设计与存储过程编写
部门数据库整体来说还是比较简单，如下：
都是常规字段，脚本可以在项目中下载。depPath 是为了查询方便，isParent 表示该条是否是父部门。为了简化程序中的逻辑，depPath 的设置和 isParent 的设置我都在存储过程中完成。
12.1 添加部门存储过程
添加部门存储过程如下：
DELIMITER $$
USE `vhr`$$
DROP PROCEDURE IF EXISTS `addDep`$$
CREATE DEFINER=`root`@`localhost` PROCEDURE `addDep`(in depName varchar(32),in parentId int,in enabled boolean,out result int,out...
11.用户角色关系管理
这个就是常规的增删改查。
11.1 用户展示
用户的展示使用了 ElementUI 的 Card 卡片 来实现。效果图如下：
11.2 角色展示
角色展示使用了ElementUI的 Tag 标签 来实现，角色后面有一个 more 按钮，点击之后是一个 Popover 弹出框，Popover 弹出框的里边是一个 Select 选择器，多选的，可以进行角色的分配。
扫码关注微信公众号 江南一点雨，回复 2TB，获取超 2TB Java 学习教程~
10.角色资源关系管理
这个主要是给不同角色分配不同的资源。
10.1 角色展示
角色的展示采用了 ElementUI 中的 Collapse 折叠面板，并且采用了手风琴模式，即一次只打开一个角色，如下图：
角色中资源的展示则采用了 ElementUI 中的树形控件，管理员可以直接直接点击勾选，然后点击修改按钮，进行资源的分配。
10.2 核心思路
核心代码如下：
<el-collapse v-model="activeColItem" accordion style="width: 500px;" @change="collapseChange">
<el-collapse-item v-for="(item,index) in roles" :title="item.na...
09.登录成功后动态加载组件
在权限管理模块中，这算是前端的核心了。
9.1 核心思路
用户在登录成功之后，进入 home 主页之前，向服务端发送请求，要求获取当前的菜单信息和组件信息，服务端根据当前用户所具备的角色，以及角色所对应的资源，返回一个 json 字符串，格式如下：
[
{
"id": 2,
"path": "/home",
"component": "Home",
"name": "员工资料",
"iconCls": "fa fa-user-circle-o",
"children": [
{
"id": null,
...
08.登录状态的保存
当用户登录成功之后，需要将当前用户的登录信息保存在本地，方便后面使用。具体实现如下：
8.1 登录成功保存数据
在登录操作执行成功之后，通过commit操作将数据提交到 store 中，核心代码如下：
this.postRequest('/login', {
username: this.loginForm.username,
password: this.loginForm.password
}).then(resp=> {
if (resp && resp.status == 200) {
var data = resp.data;
_this.$store.commit('login', data.msg);
...
07.将请求方法挂到Vue上
由于我对 axios 进行了封装，因此在每一个需要使用 axios 的地方，都需要导入相应的请求，略显麻烦，参考https://cn.vuejs.org/v2/guide/plugins.html，我将请求方法挂到 Vue 上，具体操作如下：
在 main.js 中导入所有的请求方法，如下：
import {getRequest} from './utils/api'
import {postRequest} from './utils/api'
import {deleteRequest} from './utils/api'
import {putRequest} from './utils/api'
把它们添加到 Vue.prototype 上，如下：
...
06.axios请求封装,请求异常统一处理
前端采用了 axios 来处理网络请求，为了避免在每次请求时都去判断各种各样的网络情况，比如连接超时、服务器内部错误、权限不足等等不一而足，我对 axios 进行了简单的封装，这里主要使用了 axios 中的拦截器功能。
封装后的网络请求工具 js 如下：
import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config=> {
return config;
}, err=> {
Message.error({message: '请求超时!'});
return Promise.resolve(err);
})
axios.i...
共计 55 篇文章，6 页。