一、操作界面

1、用户列表

2、添加用户

3、分配角色

二、前端用户列表代码

如下图，是前端代码路径

usr.html是用户管理的页面，其中用户列表显示使用bootstrap的table进行封装，实现的业务逻辑如下：

1、页面加载的时候调用$(function(){});函数。

2、执行queryUserList()函数。

3、$.table.init(options);初始化表格配置参数。

4、表格加载options里面的url，获取api数据，之后初始化数据表格。

5、显示效果。

table的html元素 
<div class="col-sm-12 select-table table-striped">
    <table id="bootstrap-table"></table>
</div>

$(function() {
		    var panehHidden = false;
		    if ($(this).width() < 769) {
		        panehHidden = true;
		    }
		    $('body').layout({ initClosed: panehHidden, west__size: 185 });
	     	// 回到顶部绑定
	    	if ($.fn.toTop !== undefined) {
	    		var opt = {
	    			win:$('.ui-layout-center'),
	    			doc:$('.ui-layout-center')
	    		};
	    		$('#scroll-up').toTop(opt);
	    	}
		    queryUserList();
		    queryDeptTree();
		});

初始化函数
function queryUserList() {
    var options = {
        url: prefix + "/list",
        createUrl: prefix + "/add",
        updateUrl: prefix + "/edit/{id}",
        removeUrl: prefix + "/remove",
        exportUrl: prefix + "/export",
        importUrl: prefix + "/importData",
        importTemplateUrl: prefix + "/importTemplate",
        sortName: "createTime",
        sortOrder: "desc",
        modalName: "用户",
        columns: [{
            checkbox: true
        },
        {
            field: 'userId',
            title: '用户ID'
        },
        {
            field: 'loginName',
            title: '登录名称',
            sortable: true
        },
        {
            field: 'userName',
            title: '用户名称'
        },
        {
            field: 'dept.deptName',
            title: '部门'
        },
        {
            field: 'email',
            title: '邮箱',
            visible: false
        },
        {
            field: 'phonenumber',
            title: '手机'
        },
        {
           visible: editFlag == 'hidden' ? false : true,
           title: '用户状态',
           align: 'center',
           formatter: function (value, row, index) {
              return statusTools(row);
           }
        },
        {
            field: 'createTime',
            title: '创建时间',
            sortable: true
        },
        {
            title: '操作',
            align: 'center',
            formatter: function(value, row, index) {
                if (row.userId != 1) {
                   var actions = [];
                   actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                   actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a> ');
                   var more = [];
                   more.push("<a class='btn btn-default btn-xs " + resetPwdFlag + "' href='javascript:void(0)' onclick='resetPwd(" + row.userId + ")'><i class='fa fa-key'></i>重置密码</a> ");
                   more.push("<a class='btn btn-default btn-xs " + editFlag + "' href='javascript:void(0)' onclick='authRole(" + row.userId + ")'><i class='fa fa-check-square-o'></i>分配角色</a>");
                   actions.push('<a tabindex="0" class="btn btn-info btn-xs" role="button" data-container="body" data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" data-content="' + more.join('') + '"><i class="fa fa-chevron-circle-right"></i>更多操作</a>');
                   return actions.join('');
               } else {
                    return "";
                }
            }
        }]
    };
    $.table.init(options);
}

如上述代码，第3行：数据获取的url地址url: prefix + "/list",

如上述代码，第13行开始，columns：表格显示的行，每行对应接口返回的json数据格式字段。

如下图是代码对界面的对应关系

表格对应后端的接口服务代码

@ResponseBody
表示返回json的数据格式给前端

返回的json数据格式如下截图

未来计划

1、ruoyi非分离版本拆解

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

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

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

5、JEECG低代码开发平台

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