[Django]用户权限学习系列之权限管理界面实现

本系列前三章:

http://www.cnblogs.com/CQ-LQJ/p/5604331.htmlPermission权限基本操作指令

http://www.cnblogs.com/CQ-LQJ/p/5609690.htmlUser权限基本操作指令

http://www.cnblogs.com/CQ-LQJ/p/5620490.html设计自有权限管理系统设计思路

正文:

权限管理界面分三部分:一个点击进入该页面的按钮、以及该页面的权限列表、添加按钮,删除按钮;

权限管理界面页面是最基础的设计,并且和用户权限分配界面有着重要的关系.

 

首先需要在template,简称模板中加入一个点击按钮,功能是进入权限管理页面,代码如下:

 <p class="text-center"><button id="qxgl" class="btn">权限管理</button></p>

该按钮的功能大致为:

利用ajax局部刷新出权限管理界面网页,且使用ajax中getJSON函数从后端view中返回所有权限信息(codename为中文的权限)以及相关添加删除按钮.

HTML页面编写javascript之前,先将必要的HTML标签写好,我们这里需要一个表格(table)和表单(form),如下:

<form>  
   {% csrf_token %}
   <div id="interface"></div>
   <table class="table" id="t1">
     <caption></caption>
     <thead></thead>
     <tbody></tbody>
     <tfoot></tfoot>
   </table>
</form>

接下来我们看按钮函数如何编写:

      $(\'#qxgl\').click(function(){//权限管理
            $("#interface").html("<h3>权限管理操作界面</h3>"+
                                 "<p class=\'text-error\'><strong>你可以选择对应权限, <button class=\'btn btn-small btn-danger\' type=\'button\' id=\'perm_del\'>点击此处</button>进行删除,也可以点击左侧权限管理按钮刷新权限页面!</strong></p>")
            $("#t1 thead").html("<tr style=\'background-color:#C0C0C0;\'><th>单选框</th><th>权限类型</th><th>权限名称</th><th>权限描述</th></tr>");
            $.getJSON("{% url \'permmanage\' %}", 
              function(ret){  
                $(\'#t1 tbody\').empty();$(\'#t1 tfoot\').empty();
                for (var i = 0; i <= ret.length - 1; i++) {
                    $(\'#t1 tbody\').append("<tr><td><input type=\'radio\' name=\'permission\' value=\'"+ret[i].codename+"\'></td>"+
                                          "<td>"+ret[i].content_type_id+"</td><td>"+ret[i].codename+"</td>"+
                                          "<td>"+ret[i].name+"</td></tr>"); 
                }
                $(\'#t1 tfoot\').append("<tr><td>"+
                                      "<button class=\'btn btn-small btn-success\' type=\'button\' id=\'perm_add\'>新增权限</button>"+
                                      "</td>"+
                                      "<td><input type=\'text\' class=\'input-mini\' placeholder=\'.input-mini\' id=\'id\'></td>"+
                                      "<td><input type=\'text\' class=\'input-medium\' placeholder=\'.input-medium\' id=\'codename\'></td>"+
                                      "<td><input type=\'text\' class=\'input-xxlarge\' placeholder=\'.input-xxlarge\' id=\'name\'></td>"+
                                      "</tr>");
            }); 
        })

上面代码中$.getJSON的功能是从后台返回所有中文权限的json参数到前台,另外到这里我们需要知道两件事情:
第一:django的permisson有三个字段,分别对应content_type_id 权限类型,codename 权限名称,name 权限描述,permission的用法跟普通的模型使用一样

第二:查询中文权限需要用到正则表达式,需要用到模型api中的iregex,查询全部中文权限代码:

Permission.objects.filter(codename__iregex=u\'[\u4e00-\u9fa5]\').values()

好了,到这里我们跳到django后端配置url和view便可实现该按钮功能:
配置url:

home_patterns = [
    url(r\'permmanage/$\', \'home.views.permmanage\', name=\'permmanage\'),
]

urlpatterns = [
    url(r\'^$\', \'login.views.login_view\', name=\'login_view\'),
    # url(r\'^blog/\', include(\'blog.urls\')),
    url(r\'^home/\', include(home_patterns)),
    url(r\'^admin/\', include(admin.site.urls)),
]

配置view:

def permmanage(request):    #正则匹配中文u\'[\u4e00-\u9fa5]\'
    d = Permission.objects.filter(codename__iregex=u\'[\u4e00-\u9fa5]\').values()
    dlist = []
    for i in d:
        dlist.append(i)
    return JsonResponse(dlist, safe=False)

下面编写对应的权限添加和删除操作,这里我便不详细说明了,具体可查看本系列文章中Permission权限基本操作指令

具体代码如下

view.py:

#权限添加
def permaddtion(request):
    content_type_id = request.POST[\'id\']
    codename = request.POST[\'codename\']
    name = request.POST[\'name\']
    if Permission.objects.filter(codename = codename).exists():
        relist = {\'re\':\'该权限已存在,添加失败!\'}
        return JsonResponse(relist)
    else:
        Permission.objects.create(content_type_id=int(content_type_id),codename=codename,name=name)
        relist = {\'re\':\'该权限添加成功!\'}
        return JsonResponse(relist)
#权限删除
def permdeletion(request):
    codename = request.POST[\'codename\']
    Permission.objects.get(codename=codename).delete()
    relist = {\'re\':"该权限删除成功!"}
    return JsonResponse(relist)

url.py:

#首页url配置
home_patterns = [
    url(r\'permaddtion/$\', \'home.views.permaddtion\', name=\'permaddtion\'),
    url(r\'permdeletion/$\', \'home.views.permdeletion\', name=\'permdeletion\'),
]

template:

      $(\'#t1\').on("click","#perm_add",function(){//添加权限
            var tj1 = $("#id").val(); var tj2 = $("#codename").val(); var tj3 = $("#name").val();
            var pattern = /^[\u4E00-\u9FA5]{1,10}$/;
            if( tj1== ""){alert("权限类型必填!");}
            else{
              if(isNaN(tj1)){alert("权限类型必须为数字!");}//数字判断
              else{
                if(tj2 == ""){alert("权限名称必填!");}
                else{
                  if(!pattern.test(tj2)){alert("权限名称必须为中文!");}//中文判断
                  else{
                    if( tj3 == ""){alert("权限内容必填!");}
                    else{//条件判断完毕,进行后台操作
                        $.post("{% url \'permaddtion\' %}",//是,则进行下一步操作    
                        {
                          csrfmiddlewaretoken:"{{ csrf_token }}",
                          id:tj1,
                          codename:tj2,
                          name:tj3,
                          },
                          function(ret) {
                          alert(ret[\'re\']);
                          });    
            }}}}}
        })
        $(\'#interface\').on("click","#perm_del",function(){//删除权限
            var re = $("input[name=\'permission\']:checked").val();//获取权限名称
            var pattern = /^[\u4E00-\u9FA5]{1,10}$/;
            if (!pattern.test(re)){alert("请选择一个权限名称,再进行删除权限操作!");}//判断是否选择单选框
            else{
              $.post("{% url \'permdeletion\' %}",//是,则进行下一步操作    
              {
                csrfmiddlewaretoken:"{{ csrf_token }}",
                codename:re,        
              },
              function(ret) {
                alert(ret[\'re\']);
              });
            }
        })