SSM整合之企业级后台管理系统(14) - 用户管理模块设计与实现

最新推荐文章于 2022-06-28 21:44:36 发布

猪爸爸爱学习

最新推荐文章于 2022-06-28 21:44:36 发布

阅读量869

点赞数 2

分类专栏： SSM整合实战文章标签： Spring SpringMVC MyBatis Bootstrap 后台管理系统

本文为博主原创文章，未经许可，禁止转载。

本文链接：https://blog.csdn.net/u012586848/article/details/103513614

版权

本文档详细介绍了如何在企业级后台管理系统中设计和实现用户管理模块，包括用户信息展示、按条件搜索、用户增删改查等功能。前端采用Bootstrap-table展示数据并实现前端分页，后端涉及Controller、Service和Dao层的实现。在删除用户时，通过MySQL外键级联删除关联的权限记录。

摘要由CSDN通过智能技术生成

时隔多日，我们终于更新专栏啦！上一篇教程中我们完成了仪表盘页面的制作，这篇教程我们来实现用户管理界面。

一、需求

首先，我们来明确一下用户管理页面的需求，也就是说这个页面里应该有哪些功能。

列出当前系统里的所有用户
展示当前系统用户的基本信息
按条件查找用户：用户名、姓名、电话、账号状态
新增用户
修改用户
删除用户
重置用户密码

二、前端

前端页面不复杂，使用了Bootstrap-table来展示数据，并且用户数据相对不多，我们选用了前端分页。

闲话不多说，我们一起来学习下前端代码（manage_user.jsp）

<%--
  Created by IntelliJ IDEA.
  User: yocco
  Date: 2020/01/06
  Time: 15:03
  To change this template use File | Settings | File and Code Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head>
    <title>用户管理页面</title>
    <link rel="stylesheet" href="<%=basePath%>/css/bootstrap-table/bootstrap-table.min.css">
    <script type="text/javascript" src="<%=basePath%>/js/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/bootstrap-table/bootstrap-table-zh-CN.js"></script>
    <link rel="stylesheet" href="<%=basePath%>/css/bootstrap-3.3.7-dist/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="<%=basePath%>/css/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/css/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/jquery.base64.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/export/FileSaver.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/export/xlsx.core.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/export/tableExport.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/export/export.js"></script>
    <link rel="stylesheet" href="<%=basePath%>/css/main.css">
</head>
<body style="width: 200px; height: 600px">
<div class="panel-content" style="">
    <div class="locate">
        <section class="content-header" style="">
            <div class="title" style=""><i class="${m_icon}" style="color:#1890ff;"></i> 用户管理
                <div class="actions pull-right">
                    <a class="btn btn-primary btn-sm" href="javascript:void(0);" title="新增用户" id="addUserBtn"><i class="fa fa-plus"></i>
                        新增</a>
                    <a class="export-excel btn btn-default btn-sm" data-table="#userTab" data-ignorecolumn="8" data-filename="OMS_导出_用户详情" href="javascript:void(0);" title="导出用户"><i class="glyphicon glyphicon-export"></i>
                        导出</a>
                </div>
            </div>
        </section>
        <section class="content container-fluid">
            <div class="row">
                <div class="form-inline col-md-3">
                    <label class="control-label">用户名：</label>
                    <input type="text" class="form-control" name="loginName" id="loginName" oninput="value=value.replace(/[^a-zA-Z0-9]+$/,'');if(value.length>20)value=value.slice(0,20)">
                </div>
                <div class="form-inline col-md-3">
                    <label class="control-label">姓名：</label>
                    <input type="text" class="form-control" name="cname" id="cname" oninput="value=value.replace(/[^a-z\u4e00-\u9fa5]+$/,'');if(value.length>60)value=value.slice(0,60)">
                </div>
                <div class="form-inline col-md-3">
                    <label class="control-label">电话：</label>
                    <input type="text" class="form-control" name="mobile" id="mobile" oninput="value=value.replace(/[^0-9]+$/,'');if(value.length>11)value=value.slice(0,11)">
                </div>
                <div class="form-inline col-md-3">
                    <label class="control-label">账号状态：</label>
                    <select class="form-control" id="userStatus">
                        <option value="" class="selected">所有状态</option>
                    </select>
                </div>
            </div>
            <div class="row" style="margin-top:20px;">
                <div class="col-md-6"><a class="btn btn-primary" id="search_btn" style="float: right;">查询</a></div>
                <div class="col-md-6"><a class="btn btn-default" onclick="resetForm(this)" style="float: left;">重置</a>
                </div>
            </div>
            <table id="userTab" class="table table-hover"></table>
        </section>
    </div>
</div>
<script>
    $(function () {
        setUserStatusOptions();
    });

    //根据后台返回参数设置用户状态下拉选项
    function setUserStatusOptions() {
        let userStatusList = JSON.parse('${user_status_list}');
        for (let i = 0; i < userStatusList.length; i++) {
            let status = userStatusList[i];
            $('#userStatus').append('<option value="' + status.codeValue + '">' + status.keyName + '</option>');
            $('#update_user_status').append('<option value="' + status.codeValue + '">' + status.keyName + '</option>');
        }
    }

    function resetForm(e) {
        $('#loginName').val('');
        $('#cname').val('');
        $('#mobile').val('');
        $('#userStatus').val('');
    }

    $('#userTab').bootstrapTable({
        method: 'get',
        u