前面的文章已经讲解了一些关键技术的知识点，现在开始根据Ruoyi登录后的界面来详细分解功能

1、系统管理下面的用户管理功能

功能界面展示如下：

• 功能一：点击进入用户管理，用户管理界面展示了两部分，左侧工作区域展示部门树，右侧工作区域展示用户列表。

• 功能二：点击左侧工作区的某个部门信息，右侧根据指定部门信息，展示该部门下面的用户列表。

• 功能三：点击右侧用户列表顶部的新增按钮，可以新增用户。

• 功能四：点击右侧用户列表的某一条用户，再点击编辑功能，可以修改用户信息。

• 功能五：点击右侧用户列表的某一条用户，再点击删除，可以删除用户记录。
• 功能六：可以批量导入用户。
• 功能七：可以下载用户列表，保存成为execl文件。
• 功能八：点击右侧用户列表的某一条用户，再点更多，可以重置用户密码。
• 功能九：点击右侧用户列表的某一条用户，再点更多，可以分配用户角色。

2、前端布局展示代码解析

代码目录如下图

工作区拆分为两部分，左侧是部门树，右侧是工作列表。代码实现方式使用el-col来做区分，左侧占4格，右侧占20格，如下是左侧代码

<el-col :span="4" :xs="24">
  <div class="head-container">
    <el-input
      v-model="deptName"
      placeholder="请输入部门名称"
      clearable
      size="small"
      prefix-icon="el-icon-search"
      style="margin-bottom: 20px"
    />
  </div>
  <div class="head-container">
    <el-tree
      :data="deptOptions"
      :props="defaultProps"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
      node-key="id"
      default-expand-all
      highlight-current
      @node-click="handleNodeClick"
    />
  </div>
</el-col>

如下是右侧代码

<el-col :span="20" :xs="24">
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item label="用户名称" prop="userName">
      <el-input
        v-model="queryParams.userName"
        placeholder="请输入用户名称"
        clearable
        style="width: 240px"
        @keyup.enter.native="handleQuery"
      />
          。。。。
  </el-col>

3、部门树和用户列表通过api获取数据

页面加载后，vue读取接口api数据，并将数据展示出来。

在data里面定义部门数组变量和用户列表数组变量，数组变量用来存储从api接口获取的数据，如下图代码片段

// 部门树选项
deptOptions: undefined,

// 列信息
columns: [
  { key: 0, label: `用户编号`, visible: true },
  { key: 1, label: `用户名称`, visible: true },
  { key: 2, label: `用户昵称`, visible: true },
  { key: 3, label: `部门`, visible: true },
  { key: 4, label: `手机号码`, visible: true },
  { key: 5, label: `状态`, visible: true },
  { key: 6, label: `创建时间`, visible: true }
],

vue页面创建时候调用如下方法，该方法处理的业务逻辑：

1、调用后台api接口，获取数据。

2、在界面进行数据渲染。

created() {
  this.getList();
  this.getDeptTree();
  this.getConfigKey("sys.user.initPassword").then(response => {
    this.initPassword = response.msg;
  });
},

用户列表api接口代码如下：

// 查询用户列表
export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  })
}

部门树api接口代码如下：

// 查询部门下拉树结构
export function deptTreeSelect() {
  return request({
    url: '/system/user/deptTree',
    method: 'get'
  })
}

4、用户数据表和部门数据表

api接口从用户数据表和部门数据表进行获数据取，如下是表结构，我们可以看看数据库表有那些字段，可以展示或者修改的字段。

CREATE TABLE `sys_dept` (
  `dept_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '部门id',
  `parent_id` bigint(20) DEFAULT '0' COMMENT '父部门id',
  `ancestors` varchar(50) DEFAULT '' COMMENT '祖级列表',
  `dept_name` varchar(30) DEFAULT '' COMMENT '部门名称',
  `order_num` int(4) DEFAULT '0' COMMENT '显示顺序',
  `leader` varchar(20) DEFAULT NULL COMMENT '负责人',
  `phone` varchar(11) DEFAULT NULL COMMENT '联系电话',
  `email` varchar(50) DEFAULT NULL COMMENT '邮箱',
  `status` char(1) DEFAULT '0' COMMENT '部门状态（0正常 1停用）',
  `del_flag` char(1) DEFAULT '0' COMMENT '删除标志（0代表存在 2代表删除）',
  `create_by` varchar(64) DEFAULT '' COMMENT '创建者',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_by` varchar(64) DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`dept_id`)
) ENGINE=InnoDB AUTO_INCREMENT=110 DEFAULT CHARSET=utf8 COMMENT='部门表';

CREATE TABLE `sys_user` (
  `user_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '用户ID',
  `dept_id` bigint(20) DEFAULT NULL COMMENT '部门ID',
  `user_name` varchar(30) NOT NULL COMMENT '用户账号',
  `nick_name` varchar(30) NOT NULL COMMENT '用户昵称',
  `user_type` varchar(2) DEFAULT '00' COMMENT '用户类型（00系统用户）',
  `email` varchar(50) DEFAULT '' COMMENT '用户邮箱',
  `phonenumber` varchar(11) DEFAULT '' COMMENT '手机号码',
  `sex` char(1) DEFAULT '0' COMMENT '用户性别（0男 1女 2未知）',
  `avatar` varchar(100) DEFAULT '' COMMENT '头像地址',
  `password` varchar(100) DEFAULT '' COMMENT '密码',
  `status` char(1) DEFAULT '0' COMMENT '帐号状态（0正常 1停用）',
  `del_flag` char(1) DEFAULT '0' COMMENT '删除标志（0代表存在 2代表删除）',
  `login_ip` varchar(128) DEFAULT '' COMMENT '最后登录IP',
  `login_date` datetime DEFAULT NULL COMMENT '最后登录时间',
  `create_by` varchar(64) DEFAULT '' COMMENT '创建者',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_by` varchar(64) DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `remark` varchar(500) DEFAULT NULL COMMENT '备注',
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COMMENT='用户信息表';

5、后台api接口

如上述，后台接口地址别是：

url: '/system/user/list', //用户列表api接口

url: '/system/user/deptTree', //菜单树api接口

接口类如下图

/**
 * 获取用户列表
 */
@PreAuthorize("@ss.hasPermi('system:user:list')")
@GetMapping("/list")
public TableDataInfo list(SysUser user)
{
    startPage();
    List<SysUser> list = userService.selectUserList(user);
    return getDataTable(list);
}

/**
 * 获取部门树列表
 */
@PreAuthorize("@ss.hasPermi('system:user:list')")
@GetMapping("/deptTree")
public AjaxResult deptTree(SysDept dept)
{
    return success(deptService.selectDeptTreeList(dept));
}

其他功能在下一篇文章接续讲解，敬请期待！请多关注，谢谢

#头条家时光#

未来计划

1、ruoyi非分离版本拆解

2、ruoyi-vue-pro：讲解工作流

3、ruoyi-vue-pro：支付模块，电商模块

4、基于ruoyi-vue-pro项目开发

5、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。