zoukankan      html  css  js  c++  java
  • [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']);
                  });
                }
            })
  • 相关阅读:
    运筹学 CheatSheet
    东南大学 2021 年夏季赛部分题解
    信号与系统期末复习精要
    信号量的基本同步模式
    OpenMP入门:求pi
    肉眼可见的 Z 变换性质
    操作系统概念 第7章 死锁
    操作系统概念 第10章 文件系统接口
    操作系统概念 第9章 虚拟内存
    操作系统概念 第8章 内存管理
  • 原文地址:https://www.cnblogs.com/CQ-LQJ/p/5620768.html
Copyright © 2011-2022 走看看