MVC角色维护管理研发总结(ASP.NET Web)
功能实现
角色维护是对各个不同的角色进行权限的管理,不同角色的登录系统时所看到页面和操作的权限是不同的。
系统管理登录时所看到的模块
测试账号登录时看到模块
角色维护
这是我做的角色维护界面,这里将整个项目分了五个板块,每个板块下又有细分的模块,在选择角色时会回填该角色对应的权限也可以对其进行修改设置。
下面我介绍一下实现的过程。
数据库设计
对角色的管理当然需要对相关的权限进行存储,这里我做的是模块的权限管理并没有细分到每一项操作,说一数据库设计可以简单一项。
需要设计三张表:角色表
、模块表
、权限表
角色表
角色表存放的就是各个角色相关的数据roleID:角色ID
role:角色名称
jsms:角色说明
模块表
模块表就存放着各个模块的数据
后面的页面也是依据模块ID设定元素的ID
mkID:模块ID
mokuai:模块名称
权限表
权限表用于建立角色与各模块之间的联系并且设定该角色的权限qxID:权限ID
roleID:角色ID'
mkID:模块ID'
sfqx:是否有权限true/false
页面设计及控制器代码
//这是角色维护的页面代码
//这里的重点是每一个checkbox都设定了一个value值
//这个value就是它对应的模块在数据库的ID
<ul class="qxul">
<li><input type="checkbox" id="xstjbg" value="26"><label for="xstjbg">销售统计报告</label></li>
<br>
</ul>
<ul class="qxul">
<li><input type="checkbox" id="xnzhcx" value="27"><label for="xnzhcx">虚拟账户查询</label></li>
<br>
</ul>
<ul class="qxul">
<li><input type="checkbox" id="zfbg" value="28"><label for="zfbg">支付报告</label></li>
<br>
</ul>
<ul class="qxul">
<li><input type="checkbox" id="ystjbg" value="29"><label for="ystjbg">运输统计报告</label></li>
<br>
</ul>
如何回填角色权限
在选择一个角色时需要对角色的权限信息进行回填
控制器代码
//查询时传入角色的ID
public ActionResult qxcx(int jsid)
{
//在权限表中查询该角色相关的权限信息
var qx = (from db in mymodels.XT_quanxian
where db.roleID == jsid
select new
{
mkid=db.mkID,//模块ID
sf=db.sfqx,//是否有权限
}).ToList();
//返回查询到的数据
return Json(qx, JsonRequestBehavior.AllowGet);
}
页面代码
function quanxian(jsid) {
//向控制器进行查询
$.getJSON("qxcx?jsid=" + jsid, function (data) {
//用each遍历返回的结果
$.each(data, function (i) {
//判断是否有该权限
//因为我的模块与页面都是按顺序设计好了
//所这里的i就可以当做模块ID与对checkbox的序号
if (data[i].sf == true) {
//==true说明有该权限,选中对应的checkbox
$("input[type='checkbox']").eq(i).prop("checked", true);
}
else {
$("input[type='checkbox']").eq(i).prop("checked", false);
}
});
})
}
完成效果,选中角色后回填相关的数据
登录时的判断
完成了角色授权的管理,下一步就是对登录用户的权限进行判断了。‘
主页模块导航栏代码
//这里每个li标签都设定了一个ID
//这个ID也是对应模块在数据库中的ID
<ul class="submenu">
<li class="" id="28">
<a href="javascript:;" id="zhifutonji">
<i class="menu-icon fa fa-caret-right"></i>支付统计
</a>
<b class="arrow"></b>
</li>
<li class="active" id="26">
<a href="javascript:;" id="xiaoshoubaogao">
<i class="menu-icon fa fa-caret-right"></i>销售报告统计
</a>
<b class="arrow"></b>
</li>
<li class="" id="T29">
<a href="javascript:;" id="yunshushuju">
<i class="menu-icon fa fa-caret-right"></i>运输数据查询
</a>
<b class="arrow"></b>
</li>
<li class="" id="27">
<a href="javascript:;" id="xunizhanhu">
<i class="menu-icon fa fa-caret-right"></i>虚拟账户查询
</a>
<b class="arrow"></b>
</li>
</ul>
控制器代码
//查询时传入角色ID
public ActionResult qxcx(int ydid)
{
//在权限表中查询该角色的相关权限
//这里多加了个db.sfqx == false的判断
//就是只查询该角色没有权限的模块
var qx = (from db in myModels.XT_quanxian
where db.roleID == ydid && db.sfqx == false
select new
{
qxid = db.mkID//模块ID
}).ToList();
//返回数据到页面
return Json(qx, JsonRequestBehavior.AllowGet);
}
页面代码
//向控制器进行查询
$.getJSON("qxcx?ydid=" + jsid, function (data) {
//判断返回的数据是否为0条
if (data.length != 0) {
//遍历数据
$.each(data, function (i) {
//因为返回的都是该角色没有权限的模块
//这里直接通过ID将对应的模块隐藏
$("#" + data[i].qxid).hide();
});
}
});