[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']);
              });
            }
        })