Web应用程序系统的多用户权限控制设计及实现-权限模块【6】

前五章均是从整体上讲述了Web应用程序的多用户权限控制实现流程，从本章起则重点讲述每一个模块的实现的流程。

首先讲解基本模块-用户组管理模块，涉及到的数据表为分组表。分组表定义了每一个用户属于的一种角色类型。本系统支持一个用户多种角色的情况，系统在登陆成功后，首先就加载用户的分组信息从而查看用户的可操作模块。

1.1分组域

为了更规范和方便后期系统的二次开发和维护，对应特定的业务模块采用Area(域)的方式开发，分组模块的开发域如下图所示：

由于在Areas下还建立了一个新的目录SystemManage,故需要改变原来的路由。分组模块的路由文件名称为SystemManageAreaRegistration。改变路由代码的文件名称为如下：

using System.Web.Mvc;
namespace CodeForMvcTest.Areas.SystemManage
{
    public class SystemManageAreaRegistration : AreaRegistration
    {
        public override string AreaName
        {
            get
            {
                return "SystemManage/OperatorGroup";
            }
        }
        public override void RegisterArea(AreaRegistrationContext context)
        {
            context.MapRoute(
                "SystemManage_OperatorGroup",
                "SystemManage/OperatorGroup/{controller}/{action}/{id}",
                new { action = "index", id = UrlParameter.Optional }
            );
        }
    }
}

 1.2Model

分组模块的Model可参看第三章项目架构的系统共有类，对应model为OperatorGroup.cs。文件路径为Areas/SystemManage/Models。

 1.3视图

分组模块的视图包含在分组域中，文件路径为Areas/SystemManage/OperatorGroup/Views/OperatorGroupManage，视图名称为OperatorGroupManage.cshtml。视图的完整代码如下：

@{
    ViewBag.Title = "用户组管理";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}


<div class="easyui-layout" data-options="fit:true">

    <div data-options="region:'north',split:true" style="height: 50px;">
        @using (Ajax.BeginForm("OperatorGroupManage", "OperatorGroupManage", new AjaxOptions
        {
            HttpMethod = "POST",
            OnSuccess = "loadDataGrid(data,'dataGrid','btn_submit','未找到匹配的用户组信息！')",
            OnBegin = "startDatagridLoading('dataGrid','btn_submit')",
            OnFailure = "commErrorHandle(data,true,'dataGrid','btn_submit','查找用户组信息出错！')"
        }))
        {
            <!--属性组筛选栏-->
            <table style="margin-left: 5px; margin-top: 5px;">
                <tr>
                    <td><span style="margin-left: 10px;">用户组名称：</span></td>
                    <td>
                        <input id="groupName" name="groupName" />
                    </td>
                    <td><span style="margin-left: 10px;">状态：</span></td>
                    <td>
                        <select class="easyui-combobox" name="state" id="state" style="width: 150px;"
                            data-options="editable:false,required:true">
                            <option value="-1">全部</option>
                            <option value="0">禁用</option>
                            <option value="1">启用</option>
                        </select>
                    </td>
                    <td>
                        <input type="submit" value="查找" id="btn_submit" style="margin-left: 10px; margin-right: 10px;" />
                    </td>
                </tr>
            </table>
        }
    </div>

    <div data-options="region:'center',split:true" style="padding-bottom: 10px;">
        <table class="easyui-datagrid" id="dataGrid" title="用户组列表"
            data-options="
        rownumbers:false,
        singleSelect:true,
        autoRowHeight:false,
        toolbar:'#group_tb',
        loadMsg:'Loading... ...'">
            <thead>
                <tr>
                    <th data-options="field:'GroupId',align:'left'">用户组ID</th>
                    <th data-options="field:'GroupName',align:'left'">用户组名称</th>
                    <th data-options="field:'OrderNum',align:'left'">排序值</th>
                    <th data-options="field:'State',align:'center',formatter:statusformater">状态</th>
                    <th data-options="field:'ParentId',align:'center',formatter:operateFormater">操作</th>
                </tr>
            </thead>
            <tbody>
                @Html.Raw(ViewBag.GroupList)
            </tbody>
        </table>
        <br />
    </div>

</div>

<!--用户组工具栏-->
<div id="group_tb" style="height: auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="openAddWindow();">添加用户组</a>
</div>


<!--用户组信息编辑窗体-->
<div id="groupEditWin" title="修改用户组信息" style="width: 450px; height: 250px; padding: 20px; text-align: center;">
    <form id="groupEditForm" method="POST" action="@Url.Action("UpdateGroup", "OperatorGroupManage")">
        <table style="margin: auto;">
            <tr>
                <td style="text-align: right;"><span>名称:</span></td>
                <td>
                    <input class="easyui-validatebox" id="e_groupName" name="groupName" data-options="required:true" />
                </td>
            </tr>
            <tr style="height: 40px;">
                <td style="text-align: right;"><span>排序值:</span></td>
                <td>
                    <input class="easyui-numberbox" data-options="required:true" id="e_orderNum" name="orderNum" />
                </td>
            </tr>
            <tr style="height: 40px;">
                <td style="text-align: right;"><span>状态:</span></td>
                <td>
                    <select class="easyui-combobox" name="state" id="e_state" style="width: 150px;"
                        data-options="editable:false,required:true">
                        <option value="0">禁用</option>
                        <option value="1">启用</option>
                    </select>
                </td>
            </tr>
            <tr style="height: 50px;">
                <td colspan="2" style="text-align: right;">
                    <input type="hidden" id="e_groupId" name="groupId" />
                    <input type="submit" value="提交" id="btn_editsubmit" style="margin-left: 10px; margin-right: 10px;" />
                    <input type="button" value="取消" id="btn_editCancel" onclick="javascript: return $('#groupEditWin').window('close');"
                        style="margin-left: 10px; margin-right: 10px;" />
                </td>
            </tr>
        </table>
    </form>
</div>



<!--添加用户组窗体-->
<div id="groupAddWin" title="添加用户组" style="width: 450px; height: 250px; padding: 20px; text-align: center;">
    <form id="groupAddForm" method="POST" action="@Url.Action("AddGroup", "OperatorGroupManage")">
        <table style="margin: auto;">
            <tr>
                <td style="text-align: right;"><span>名称:</span></td>
                <td>
                    <input class="easyui-validatebox" id="a_groupName" name="groupName" data-options="required:true" />
                </td>
            </tr>
            <tr style="height: 40px;">
                <td style="text-align: right;"><span>排序值:</span></td>
                <td>
                    <input class="easyui-numberbox" data-options="required:true" id="a_orderNum" name="orderNum" />
                </td>
            </tr>
            <tr style="height: 40px;">
                <td style="text-align: right;"><span>状态:</span></td>
                <td>
                    <select class="easyui-combobox" name="state" id="a_state" style="width: 150px;"
                        data-options="editable:false,required:true">
                        <option value="0">禁用</option>
                        <option value="1">启用</option>
                    </select>
                </td>
            </tr>
            <tr style="height: 50px;">
                <td colspan="2" style="text-align: right;">
                    <input type="submit" value="提交" id="btn_addsubmit" style="margin-left: 10px; margin-right: 10px;" />
                    <input type="button" value="取消" id="btn_addCancel" onclick="javascript: return $('#groupAddWin').window('close');"
                        style="margin-left: 10px; margin-right: 10px;" />
                </td>
            </tr>
        </table>
    </form>
</div>



@section scripts
{
    <script type="text/javascript" src="/Areas/SystemManage/SystemJS/operatorGroupManage.js"></script>
}

 1.4JS文件

分组模块相关的JS文件路径为Areas/SystemManage/SystemJS，JS文件名称为operatorGroupManage.js。JS的完整代码如下：

//状态显示格式化
function statusformater(value, row, index) {
    if (row.State == "0") {
        return "禁用";
    } else {
        return "启用";
    }
};

//属性组操作显示格式化
function operateFormater(value, row, index) {
    var operationStr = "<a href='#' onclick=\"openEditWindow(" + row.GroupId + ",'"
        + row.GroupName + "'," + row.OrderNum + "," + row.State + ");\" style='margin-right:10px;'>编辑</a>";
    return operationStr;
};


//打开用户组编辑窗体
function openEditWindow(groupId, groupName, orderNum, state) {
    $("#e_groupName").val(groupName);
    $("#e_orderNum").numberbox('setValue', orderNum);
    $("#e_state").combobox("select", state);
    $("#e_groupId").val(groupId);
    $('#groupEditWin').window('open');
};


//打开添加用户组窗体
function openAddWindow() {
    $("#a_groupName").val("");
    $("#a_orderNum").numberbox('setValue', "");
    $("#a_state").combobox("select", "0");
    $('#groupAddWin').window('open');
};


$(function () {
    $('#groupEditWin').window({
        modal: true,
        collapsible: false,
        minimizable: false,
        maximizable: false,
        draggable: true,
        resizable: false,
        closable: false,
        closed: true
    });


    $('#groupAddWin').window({
        modal: true,
        collapsible: false,
        minimizable: false,
        maximizable: false,
        draggable: true,
        resizable: false,
        closable: false,
        closed: true
    });


    //修改用户信息
    $("#groupEditForm").submit(function (event) {
        //中断当前的提交事件
        event.preventDefault();
        //提交的URL,默认为属性组修改或添加路径
        var url = "/SystemManage/OperatorGroup/OperatorGroupManage/UpdateGroup";
        //名称
        var groupName = $("#e_groupName").val();
        if (groupName == "") {
            alert("用户组名称不能为空！");
            return false;
        }
        //排序值
        var orderNum = $("#e_orderNum").numberbox('getValue');
        if (orderNum == "") {
            alert("请输入排序值！");
            return false;
        }

        $('#groupEditWin').window('close');
        startDatagridLoading('dataGrid', 'btn_submit');

        //表单序列化
        var formData = $("#groupEditForm").serialize();
        //完整路径
        url = url + "?" + formData;

        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'text',
            success: function (data) {
                if (data.indexOf("/Login/Login") >= 0) {
                    window.parent.location.href = '/Login/Login';
                }
                groupName = $("#groupName").val();
                var state = $("#state").combobox("getValue");
                url = "/SystemManage/OperatorGroup/OperatorGroupManage/OperatorGroupManage?groupName=" + groupName
                    + "&state=" + state;

                alert(data);

                reloadDatagrid(url, "dataGrid", "btn_submit", "无用户组数据返回！", "查询用户组数据出错！");
            },
            error: function (data) {
                commErrorHandle(data, true, 'dataGrid', 'btn_submit', "操作出错！");
            }
        });
    });


    //添加用户信息
    $("#groupAddForm").submit(function (event) {
        //中断当前的提交事件
        event.preventDefault();
        //提交的URL,默认为属性组修改或添加路径
        var url = "/SystemManage/OperatorGroup/OperatorGroupManage/AddGroup";
        //账号
        var groupName = $("#a_groupName").val();
        if (groupName == "") {
            alert("用户组名不能为空！");
            return false;
        }
        //排序值
        var orderNum = $("#a_orderNum").numberbox('getValue');
        if (orderNum == "") {
            alert("请输入排序值！");
            return false;
        }

        $('#groupAddWin').window('close');
        startDatagridLoading('dataGrid', 'btn_submit');

        var groupId;
        //表单序列化
        var formData = $("#groupAddForm").serialize();
        //完整路径
        url = url + "?" + formData;

        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'text',
            success: function (data) {
                if (data.indexOf("/Login/Login") >= 0) {
                    window.parent.location.href = '/Login/Login';
                }
                groupName = $("#groupName").val();
                var state = $("#state").combobox("getValue");
                url = "/SystemManage/OperatorGroup/OperatorGroupManage/OperatorGroupManage?groupName=" + groupName
                    + "&state=" + state;

                alert(data);

                reloadDatagrid(url, "dataGrid", "btn_submit", "无用户组数据返回！", "查询用户组数据出错！");
            },
            error: function (data) {
                commErrorHandle(data, true, 'dataGrid', 'btn_submit', "操作出错！");
            }
        });
    });

});

1.5控制器

分组模块的控制器包含在分组域中，文件路径为Areas/SystemManage/OperatorGroup/Controller，控制器名称为OperatorGroupManageController.cs。控制器的完整代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Session;
using OdbcDbAccess;
using System.Data;
using Models;
using Controllers;
using LogInfo;

namespace CodeForMvcTest.Areas.SystemManage.Controllers
{
    public class OperatorGroupManageController : BaseController
    {
        /// <summary>
        /// ****************************
        /// 功能：分组处理类
        /// 作者：王令
        /// 时间：2015-7-12
        /// 邮箱：1129137758@qq.com
        /// ****************************

        public ActionResult OperatorGroupManage()
        {
            IList<OperatorGroup> groupList = GetOperatorGroup("", -1);
            string[] propertyArray = { "GroupId", "GroupName", "OrderNum", "State" };

            ViewBag.GroupList = DataTransfor.ListToTableHtml(groupList, propertyArray);

            return View();
        }


        /// <summary>
        /// 返回用户组查询结果列表
        /// </summary>
        /// <param name="groupName">用户组名称</param>
        /// <param name="state">状态</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult OperatorGroupManage(string groupName, int state)
        {
            IList<OperatorGroup> groupList = GetOperatorGroup(groupName, state);
            return Json(groupList);
        }

        /// <summary>
        /// 修改用户组信息
        /// </summary>
        /// <param name="groupId">用户组ID</param>
        /// <param name="groupName">用户组名称</param>
        /// <param name="orderNum">排序值</param>
        /// <param name="state">状态</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UpdateGroup(int groupId, string groupName, int orderNum, int state)
        {
            string sql = "update operatorgroup set groupname='" + groupName + "',ordernumber='" + orderNum + "',state='" + state + "' where groupid=" + groupId + "";
            try
            {
                SqlHelper.ExecuteNonQuery(SqlSeverConnectionName, sql);
                Log.SaveOperatorLog(sql, 1, "成功修改用户组信息");
                
                return Content("成功修改用户组信息!");
            }
            catch (Exception ex)
            {
                Log.SaveErrorLog(ex.ToString(), "修改用户组信息出错");
                return Content("修改用户组信息出错！");
            }
        }


        /// <summary>
        /// 添加用户组
        /// </summary>
        /// <param name="groupName">用户组名称</param>
        /// <param name="orderNum">排序值</param>
        /// <param name="state">状态</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult AddGroup(string groupName, int orderNum, int state)
        {
            string sql = "select count(*) as data  from operatorgroup where groupname='" + groupName + "'";
            try
            {
                int count = SqlHelper.ExecuteScalar<int>(SqlSeverConnectionName, sql);
                if (count > 0)
                {
                    Log.SaveOperatorLog(sql, 0, "因用户组名称已经存在，未能成功添加用户组");
                    return Content("已经存在相同名称的用户组!");
                }
                sql = "insert into operatorgroup (groupname,ordernumber,state,updatetime,createtime) "
                    + "values ('" + groupName + "','" + orderNum + "','" + state + "','"
                      + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "','" +
                      DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "')";

                SqlHelper.ExecuteNonQuery(SqlSeverConnectionName, sql);

               Log.SaveOperatorLog(sql, 1, "成功添加用户组");
                return Content("添加成功!");
            }
            catch (Exception ex)
            {
                Log.SaveErrorLog(ex.ToString(), "添加用户组出错");
                return Content("添加用户组出错！");
            }
        }
        /// <summary>
        /// 查询分组
        /// </summary>
        /// <param name="groupName">分组名称</param>
        /// <param name="state">状态</param>
        /// <returns></returns>
        private IList<OperatorGroup> GetOperatorGroup(string groupName, int state)
        {
            IList<OperatorGroup> groupList = new List<OperatorGroup>();
            try
            {
                string sql = "select * from operatorgroup where 1=1";
                if (!string.IsNullOrEmpty(groupName))
                {
                    sql += " and groupname='" + groupName + "'";
                }
                if (state != -1)
                {
                    sql += " and state=" + state;
                }
                sql += " order by ordernumber";
                DataSet dataSet = SqlHelper.ExecuteQuery(SqlSeverConnectionName, sql);
                int[] columnArray = { 0, 1, 3, 4 };
                string[] propertyArray = { "GroupId", "GroupName", "OrderNum", "State" };
                groupList = DataTransfor.DataSetTransfor<OperatorGroup>(dataSet, columnArray,
                    propertyArray);
            }
            catch (Exception ex)
            {
               Log.SaveErrorLog(ex.ToString(), "查询用户组出错");
            }
            return groupList;
        }


    }
}

1.6界面运行截图

用户组管理主界面如下图所示：

添加用户组界面如下图所示：

编辑用户组界面如下图所示: