饮冰三年-人工智能-Python-33权限管理（通过配置快速生成列表）

 基于角色分配(RBAC)Role Based Access Control

 代码维护于https://github.com/1692134188/AaronRBAC 上。

一、创建一个Django项目，并通过admin后台管理页面初始化数据

 　　1：设置admin.py 和models类，并在admin中注册实体类 

from django.db import models

# Create your models here.

#用户表
class User(models.Model):
    userName=models.CharField(max_length=32)
    password=models.CharField(max_length=64)
    class Meta:
        verbose_name_plural='用户表'
    def __str__(self):
        return self.userName
#角色表
class Role(models.Model):
    caption=models.CharField(max_length=100)
    class Meta:
        verbose_name_plural='角色表'
    def __str__(self):
        return self.caption
#用户 角色 关系(多对多)
class User2Role(models.Model):
    u=models.ForeignKey(User,on_delete=models.CASCADE)
    r=models.ForeignKey(Role,on_delete=models.CASCADE)
    class Meta:
        verbose_name_plural="角色配置表"
    def __str__(self):
        return "%s_%s" %(self.u.userName,self.r.caption)
# 菜单表
class Menu(models.Model):
    caption = models.CharField(max_length=200)
    parent=models.ForeignKey('self',related_name='p',null=True,on_delete=True,blank=True)
    class Meta:
        verbose_name_plural='菜单表'#权限表 实质就url
    def __str__(self):
        return "%s" %(self.caption)
class Permission(models.Model):
    caption=models.CharField(max_length=200)
    url=models.CharField(max_length=200)
    m=models.ForeignKey(Menu,on_delete=models.CASCADE,null=True,blank=True)
    class Meta:
        verbose_name_plural = "权限表"
    def __str__(self):
        return "%s_%s"%(self.caption,self.url)

#动作表 用户补充权限表中的增删改查(只有4条数据 post、delete、put、get)
class Action(models.Model):
    caption = models.CharField(max_length=200)
    code = models.CharField(max_length=200)
    class Meta:
        verbose_name_plural = "动作表"
    def __str__(self):
        return self.caption

#权限 动作 关系表
class Permission2Action(models.Model):
    p=models.ForeignKey(Permission,on_delete=models.CASCADE)
    a=models.ForeignKey(Action,on_delete=models.CASCADE)
    class Meta:
        verbose_name_plural = "权限动作关系表"
    def __str__(self):
        return "%s_%s" %(self.p.caption,self.a.caption)

#角色 权限 关系表  （为角色分配权限）
class Role2Permission2Action(models.Model):
    r=models.ForeignKey(Role,on_delete=models.CASCADE)
    p2a=models.ForeignKey(Permission2Action,on_delete=models.CASCADE)
    class Meta:
        verbose_name_plural = "角色分配权限表"
    def __str__(self):
        return "%s_%s_%s" %(self.r.caption,self.p2a.p.caption,self.p2a.a.caption)

#目的是引入Django的后台admin管理工具
from django.contrib import admin
from . import models

#注册所需要管理的模型
admin.site.register(models.User)
admin.site.register(models.Role)
admin.site.register(models.User2Role)
admin.site.register(models.Permission)
admin.site.register(models.Action)
admin.site.register(models.Permission2Action)
admin.site.register(models.Role2Permission2Action)
admin.site.register(models.Menu)

　　执行python manage.py make makemigrations 和 python manage.py migrate 生成相应的数据表结构

       执行python manage.py createsuperuser创建管理员账户(否则无法登录到Django后台管理系统)

 二、登录功能

　　 1：创建一个index页面。页面导航条上有注册、登录等按钮功能

　　  　　a：为了使页面布局稍微美观、需要在static文件中引入些css和js（文件详情请见代码提交记录）。同时需要修改setting中的配置文件

　　　　  b：同时需要修改相应的路由配置　　　　

AaronRBAC==>urls.py
urlpatterns = [
    path('admin/', admin.site.urls),
    path('RBAC/',include('RBAC.urls')),
    path(r'^', include('RBAC.urls')),

]




RBAC==>urls.py

from django.conf.urls import url
from .View import User
urlpatterns=[
    url(r'^index.html$', User.index),
    # url(r'^login.html$', User.login),
    # url(r'^menu.html$', User.menu),
    url(r'^',  User.index),
]

　　　　 c：index.html页面可以“继承”headTar.html页面　　　　

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="#">逍遥小天狼</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                 {% if request.session.user_info %}
                    <li>
                        <a href="/index.html">{{ request.session.user_info.nickname }}</a>
                    </li>
                    <li><a style="padding-left: 0;padding-right: 0;">·</a></li>
                    <li><a href="/index.html">管理</a></li>
                    <li><a style="padding-left: 0;padding-right: 0;">|</a></li>
                    <li><a href="/logout.html">退出</a></li>
                {% else %}
                    <li><a href="login.html">登录</a></li>
                    <li><a href="/register.html">注册</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
















<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css"/>
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/row_avatar.css">
</head>
<body>
       {% include 'Home/headTar.html' %}
</body>
</html>

　　效果图

　    代码主要变动内容

　　2：通过Form验证实现登录功能

　　　　a：创建Form文件夹及相应的文件

#!/usr/bin/env python
# -*- coding:utf-8 -*-

class BaseForm(object):
    def __init__(self,request,*args,**kwargs):
        self.request=request
        super(BaseForm,self).__init__(*args,**kwargs)






from django import forms
from django.forms import fields
from django.core.validators import RegexValidator
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
from RBAC.models import User
from .base import BaseForm

class LoginForm(BaseForm,forms.Form):
    userName = fields.CharField(
        error_messages={
            'required': '用户名不能为空',
        }

    )
    password = fields.CharField(
        error_messages={
            'required': '密码不能为空',
        })

    def clean(self):
        userName =self.cleaned_data.get("userName")
        password =self.cleaned_data.get("password")
        # 可以使用Q查询 Q(username=userName) & Q(pwd=pwd)
        userInfo = User.objects.filter(userName=userName,password=password)
        if userInfo:
            pass
        else:
            self.add_error("userName", "用户名不存在或密码错误")
            raise ValidationError(message='用户名不存在或密码错误', code='invalid')
        return self.cleaned_data

　　　　b：创建登录html页面　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/account.css"/>
    <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="register">
    <div style="font-size: 25px; font-weight: bold;text-align: center;">
        用户登录
    </div>
    <form action="login.html" method="post" novalidate>
        {% csrf_token %}
        <p>用户名：{{ obj.userName }}{{ obj.errors.userName.0 }}</p>
        <p> 密 码 ：{{ obj.password }}{{ obj.errors.password.0 }}</p>
        <input type="submit" value="登录"/>
    </form>

</div>
<script type="text/javascript">
    $(function () {
        $("#id_pwd").attr("type", "password")
    })
</script>
</body>
</html>

　　　　c：创建登录逻辑判断

from django.shortcuts import render,redirect,HttpResponse
from RBAC.Form.UserForm import LoginForm
def index(request):
    return render(request,'Home/index.html')

def login(request):
    if request.method=='GET':
        obj=LoginForm(request)
        return render(request,'Home/login.html',{'obj':obj})
    else:
        # Post请求，提交而来
        obj = LoginForm(request,request.POST)
        # 判断用户名密码是否正确
        if  obj.is_valid():
            return HttpResponse("登录成功")
        else:
            return render(request, 'Home/login.html', {'obj': obj})

效果图：

主要代码

 三、菜单的列表展示

　　1：展示所有菜单（通过递归的方式将菜单之间的层级关系展示出来）

　　重点关注menu_content2(parid):递归方法。后期我们会换另外一种方式来完成。

　　ps：粗知拙见：递归主要的特点就是：自己调自己+循环可终止

from django.shortcuts import render, redirect, HttpResponse
from RBAC.Form.UserForm import LoginForm
from RBAC.models import Menu


def index(request):
    return render(request, 'Home/index.html')


def login(request):
    if request.method == 'GET':
        obj = LoginForm(request)
        return render(request, 'Home/login.html', {'obj': obj})
    else:
        # Post请求，提交而来
        obj = LoginForm(request, request.POST)
        # 判断用户名密码是否正确
        if obj.is_valid():
            menu_string = PermissionHelper(obj.cleaned_data['userName'])
            # return redirect('menu.html')
            return render(request, 'Home/menu.html', {'menu_string': menu_string})
        else:
            return render(request, 'Home/login.html', {'obj': obj})


def menu(request):
    return render(request, 'Home/menu.html')
def PermissionHelper(userName):
    # 01 根据用户名称，获取菜单
    menu_list = Menu.objects.all()
    # menu_string = menu_tree(menu_list)
    menu_string = menu_content2(0)
    return menu_string

def menu_content2(parid):
    #递归方法 主要两大特点：1自己调自己 2：循环有终止
    response = ""
    tpl = """
             <div>
                  <div class="title" >%s</div>
                  <div class="content">%s</div>
              </div>
              """
    if parid==0:
        menu_list = Menu.objects.all()
    else:
        menu_list = Menu.objects.filter(parent_id=parid)
    # 2保证了循环可终止
    if menu_list :
        for item in menu_list:
            if item.parent_id == parid :
                title = item.caption
                # 1 自己调自己
                content = menu_content2(item.id)
                response += tpl % (title, content)
            elif not item.parent_id :
                title = item.caption
                # 1 自己调自己
                content = menu_content2(item.id)
                response += tpl % (item.caption, content)
    return response

　　效果图   主要代码

 　　2：获取用户的权限，并将权限挂靠到菜单上，注意菜单的数据格式(***重点)

　　步骤1中我们是直接通过获取的menu_list通过递归完成菜单等级的操作。

　　但是为了方便对获取出来的数据进行修改，例如添加状态（过滤掉当前用户没有权限的菜单），添加字段用于区分当前菜单是否属于闭合状态。我们需要把QuertSet转换成以下形式。　　

a:先将权限转换成：
    # 此时 权限表中的数据是这样的
    # 4[{'id': 4, 'url': '/RBAC/GNHDUserInfo.html', 'caption': '（国内-华东）用户权限', 'parent_id': 4, 'children': [],'action': ['get'], 'status': True, 'open': False},
    #   {'id': 5, 'url': '/RBAC/GNHBUserInfo.html', 'caption': '（国内-华北）用户权限', 'parent_id': 4, 'children': [],'action': ['get'], 'status': True, 'open': False}]
    # 2[{'id': 6, 'url': '/RBAC/menu.html', 'caption': '菜单权限', 'parent_id': 2, 'children': [], 'action': ['put', 'get'],'status': True, 'open': False}]
    # 6[{'id': 2, 'url': '/RBAC/OrderInfo.html', 'caption': '订单权限', 'parent_id': 6, 'children': [], 'action': ['get'],'status': True, 'open': False}]
   

b:菜单列表中数据
    # 此时的菜单列表
    # 1 {'id': 1, 'caption': '一、报表管理', 'parent_id': None, 'children': [], 'status': False, 'open': False}
    # 2 {'id': 2, 'caption': '二、系统管理', 'parent_id': None, 'children': [{'id': 6, 'url': '/RBAC/menu.html', 'caption': '菜单权限', 'parent_id': 2, 'children': [], 'action': ['put', 'get'], 'status': True, 'open': False}], 'status': False, 'open': False}
    # 3 {'id': 3, 'caption': '菜单三', 'parent_id': None, 'children': [], 'status': False, 'open': False}
    # 4 {'id': 4, 'caption': '一、1、1、国内客户', 'parent_id': 5, 'children': [{'id': 4, 'url': '/RBAC/GNHDUserInfo.html', 'caption': '（国内-华东）用户权限', 'parent_id': 4, 'children': [], 'action': ['get'], 'status': True, 'open': False}, {'id': 5, 'url': '/RBAC/GNHBUserInfo.html', 'caption': '（国内-华北）用户权限', 'parent_id': 4, 'children': [], 'action': ['get'], 'status': True, 'open': False}], 'status': False, 'open': False}
    # 5 {'id': 5, 'caption': '一、1、客户报表', 'parent_id': 1, 'children': [], 'status': False, 'open': False}
    # 6 {'id': 6, 'caption': '一、2、订单报表', 'parent_id': 1, 'children': [{'id': 2, 'url': '/RBAC/OrderInfo.html', 'caption': '订单权限', 'parent_id': 6, 'children': [], 'action': ['get'], 'status': True, 'open': False}], 'status': False, 'open': False}

c：权限挂靠到菜单后，注意菜单的等级关系
    # {'id': 1, 'caption': '一、报表管理', 'parent_id': None,
    #  'children': [{'id': 5, 'caption': '一、1、客户报表', 'parent_id': 1,
    #                'children': [{'id': 4, 'caption': '一、1、1、国内客户', 'parent_id': 5,
    #                              'children': [{'id': 4, 'url': '/RBAC/GNHDUserInfo.html', 'caption': '（国内-华东）用户权限',
    #                                            'parent_id': 4, 'children': [], 'action': ['get'], 'status': True,
    #                                            'open': False},
    #                                           {'id': 5, 'url': '/RBAC/GNHBUserInfo.html', 'caption': '（国内-华北）用户权限',
    #                                            'parent_id': 4, 'children': [], 'action': ['get'], 'status': True,
    #                                            'open': False}],
    #                              'status': False, 'open': False}],
    #                'status': False, 'open': False},
    #               {'id': 6, 'caption': '一、2、订单报表', 'parent_id': 1,
    #                'children': [
    #                    {'id': 2, 'url': '/RBAC/OrderInfo.html', 'caption': '订单权限', 'parent_id': 6, 'children': [],
    #                     'action': ['get'], 'status': True, 'open': False}], 'status': False, 'open': False}],
    #  'status': False, 'open': False}
    # {'id': 2, 'caption': '二、系统管理', 'parent_id': None,
    #  'children': [{'id': 6, 'url': '/RBAC/menu.html', 'caption': '菜单权限', 'parent_id': 2, 'children': [],
    #                'action': ['put', 'get'], 'status': True, 'open': False}], 'status': False, 'open': False}
    # {'id': 3, 'caption': '菜单三', 'parent_id': None, 'children': [], 'status': False, 'open': False}
   

　　{'id': 2, 'caption': '二、系统管理', 'parent_id': None,'children': [{'id': 6, 'url': '/RBAC/menu.html', 'caption': '菜单权限', 'parent_id': 2, 'children': [],'action': ['put', 'get'], 'status': True, 'open': False}], 'status': False, 'open': False}

　　拿到这种形式的数据后，我们再通过递归生成相应的string树。

　　注意：menu_data_list和menu_tree方法

from django.shortcuts import render, redirect, HttpResponse
from RBAC.Form.UserForm import LoginForm
from RBAC.models import Menu, Permission2Action, Role
def index(request):
    return render(request, 'Home/index.html')
def login(request):
    if request.method == 'GET':
        obj = LoginForm(request)
        return render(request, 'Home/login.html', {'obj': obj})
    else:
        # Post请求，提交而来
        obj = LoginForm(request, request.POST)
        # 判断用户名密码是否正确
        if obj.is_valid():
            menu_string = permissionHelper(obj.cleaned_data['userName'])
            # return redirect('menu.html')
            return render(request, 'Home/menu.html', {'menu_string': menu_string})
        else:
            return render(request, 'Home/login.html', {'obj': obj})
def menu(request):
    return render(request, 'Home/menu.html')
def permissionHelper(userName):
    # 01 根据用户名称，获取菜单
    menu_list = Menu.objects.values("id", "caption", "parent_id")
    # 02 根据用户名称，获取角色，方便后期根据角色获取权限
    role_list = Role.objects.filter(user2role__u__userName=userName)
    # 03 根据角色名称，获取权限
    menu_leaf_list = Permission2Action.objects.filter(role2permission2action__r__in=role_list) 
        .exclude(p__m__isnull=True).values("p__id", "p__url", "p__caption", "p__m_id", "a__code").distinct()
    # 结果示例
    # {'p__id': 4, 'p__url': '/RBAC/GNHDUserInfo.html', 'p__caption': '（国内-华东）用户权限', 'p__m_id': 6, 'a__code': 'get'},
    # {'p__id': 5, 'p__url': '/RBAC/GNHBUserInfo.html', 'p__caption': '（国内-华北）用户权限', 'p__m_id': 6, 'a__code': 'get'},
    # {'p__id': 6, 'p__url': '/RBAC/menu.html', 'p__caption': '菜单权限', 'p__m_id': 2, 'a__code': 'put'},
    # {'p__id': 6, 'p__url': '/RBAC/menu.html', 'p__caption': '菜单权限', 'p__m_id': 2, 'a__code': 'get'},
    # {'p__id': 2, 'p__url': '/RBAC/OrderInfo.html', 'p__caption': '订单权限', 'p__m_id': 4, 'a__code': 'get'}

    formatMenu = menu_data_list(menu_list, menu_leaf_list)
    menu_string = menu_tree(formatMenu)
    # menu_string = menu_content2(0)
    return menu_string
def menu_data_list(menu_list, menu_leaf_list):
    menu_left_dict = {}
    for menuLeft in menu_leaf_list:
        # 把列表中的元素的值重新初始化成新元素。也就是我们菜单最终想要的格式
        menuLeft = {"id": menuLeft['p__id'],
                    "url": menuLeft['p__url'],
                    "caption": menuLeft['p__caption'],
                    "parent_id": menuLeft['p__m_id'],
                    "children": [],
                    "action": [menuLeft['a__code'], ],
                    'status': True,  # 是否显示
                    'open': False,  # 菜单是否打开
                    }
        # 以父级id为K，内容为 V 分类
        K = menuLeft["parent_id"]
        V = menuLeft
        if K in menu_left_dict:
            # 已经存在 同一级别 的权限了
            for item in menu_left_dict[K]:
                # 将权限相同，动作不同的，将动作添加到Action中
                if V["id"] == item["id"]:
                    # 需要注意，添加的时候只能添加字符串
                    item["action"].append(V["action"][0])
                    break
            else:
                # for else，用的好，功能很强
                menu_left_dict[K].append(V)
        else:
            menu_left_dict[K] = []
            menu_left_dict[K].append(V)
    # 此时 权限表中的数据是这样的
    # 4[{'id': 4, 'url': '/RBAC/GNHDUserInfo.html', 'caption': '（国内-华东）用户权限', 'parent_id': 4, 'children': [],'action': ['get'], 'status': True, 'open': False},
    #   {'id': 5, 'url': '/RBAC/GNHBUserInfo.html', 'caption': '（国内-华北）用户权限', 'parent_id': 4, 'children': [],'action': ['get'], 'status': True, 'open': False}]
    # 2[{'id': 6, 'url': '/RBAC/menu.html', 'caption': '菜单权限', 'parent_id': 2, 'children': [], 'action': ['put', 'get'],'status': True, 'open': False}]
    # 6[{'id': 2, 'url': '/RBAC/OrderInfo.html', 'caption': '订单权限', 'parent_id': 6, 'children': [], 'action': ['get'],'status': True, 'open': False}]
    menu_dict = {}
    # 初始化菜单
    for nemu in menu_list:
        menu_dict[nemu['id']] = nemu
        menu_dict[nemu['id']]["children"] = []
        menu_dict[nemu["id"]]["status"] = False  # 默认为不显示节点
        menu_dict[nemu["id"]]["open"] = False  # 默认为不打开节点
    # 将列表放置到菜单中
    for k, v in menu_left_dict.items():
        menu_dict[k]["children"] = v
    # 此时的菜单列表
    # 1 {'id': 1, 'caption': '一、报表管理', 'parent_id': None, 'children': [], 'status': False, 'open': False}
    # 2 {'id': 2, 'caption': '二、系统管理', 'parent_id': None, 'children': [{'id': 6, 'url': '/RBAC/menu.html', 'caption': '菜单权限', 'parent_id': 2, 'children': [], 'action': ['put', 'get'], 'status': True, 'open': False}], 'status': False, 'open': False}
    # 3 {'id': 3, 'caption': '菜单三', 'parent_id': None, 'children': [], 'status': False, 'open': False}
    # 4 {'id': 4, 'caption': '一、1、1、国内客户', 'parent_id': 5, 'children': [{'id': 4, 'url': '/RBAC/GNHDUserInfo.html', 'caption': '（国内-华东）用户权限', 'parent_id': 4, 'children': [], 'action': ['get'], 'status': True, 'open': False}, {'id': 5, 'url': '/RBAC/GNHBUserInfo.html', 'caption': '（国内-华北）用户权限', 'parent_id': 4, 'children': [], 'action': ['get'], 'status': True, 'open': False}], 'status': False, 'open': False}
    # 5 {'id': 5, 'caption': '一、1、客户报表', 'parent_id': 1, 'children': [], 'status': False, 'open': False}
    # 6 {'id': 6, 'caption': '一、2、订单报表', 'parent_id': 1, 'children': [{'id': 2, 'url': '/RBAC/OrderInfo.html', 'caption': '订单权限', 'parent_id': 6, 'children': [], 'action': ['get'], 'status': True, 'open': False}], 'status': False, 'open': False}
    # 设置表单等级，并且获取顶级菜单

    top_menu = []
    for menu in menu_dict.values():
        K = menu["parent_id"]
        if K:
            menu_dict[K]['children'].append(menu)
        else:
            top_menu.append(menu)
    # {'id': 1, 'caption': '一、报表管理', 'parent_id': None,
    #  'children': [{'id': 5, 'caption': '一、1、客户报表', 'parent_id': 1,
    #                'children': [{'id': 4, 'caption': '一、1、1、国内客户', 'parent_id': 5,
    #                              'children': [{'id': 4, 'url': '/RBAC/GNHDUserInfo.html', 'caption': '（国内-华东）用户权限',
    #                                            'parent_id': 4, 'children': [], 'action': ['get'], 'status': True,
    #                                            'open': False},
    #                                           {'id': 5, 'url': '/RBAC/GNHBUserInfo.html', 'caption': '（国内-华北）用户权限',
    #                                            'parent_id': 4, 'children': [], 'action': ['get'], 'status': True,
    #                                            'open': False}],
    #                              'status': False, 'open': False}],
    #                'status': False, 'open': False},
    #               {'id': 6, 'caption': '一、2、订单报表', 'parent_id': 1,
    #                'children': [
    #                    {'id': 2, 'url': '/RBAC/OrderInfo.html', 'caption': '订单权限', 'parent_id': 6, 'children': [],
    #                     'action': ['get'], 'status': True, 'open': False}], 'status': False, 'open': False}],
    #  'status': False, 'open': False}
    # {'id': 2, 'caption': '二、系统管理', 'parent_id': None,
    #  'children': [{'id': 6, 'url': '/RBAC/menu.html', 'caption': '菜单权限', 'parent_id': 2, 'children': [],
    #                'action': ['put', 'get'], 'status': True, 'open': False}], 'status': False, 'open': False}
    # {'id': 3, 'caption': '菜单三', 'parent_id': None, 'children': [], 'status': False, 'open': False}
    return top_menu
def menu_tree(formatMenu):
    # 递归方法 主要两大特点：1自己调自己 2：循环有终止
    response = ""
    tpl = """
             <div>
                  <div class="title" >%s</div>
                  <div class="content">%s</div>
              </div>
              """

    # 2保证了循环可终止
    for item in formatMenu:
        title = item["caption"]
        content=menu_tree(item["children"])
        # 1 自己调自己
        if 'url' in item:
            response += "<a href='%s'>%s</a>" % (item['url'], item['caption'])
        else:
            response += tpl % (title, content)
    return response

def menu_content2(parid):
    # 递归方法 主要两大特点：1自己调自己 2：循环有终止
    response = ""
    tpl = """
             <div>
                  <div class="title" >%s</div>
                  <div class="content">%s</div>
              </div>
              """
    if parid == 0:
        menu_list = Menu.objects.all()
    else:
        menu_list = Menu.objects.filter(parent_id=parid)
    # 2保证了循环可终止
    if menu_list:
        for item in menu_list:
            if item.parent_id == parid:
                title = item.caption
                # 1 自己调自己
                content = menu_content2(item.id)
                response += tpl % (title, content)
            elif not item.parent_id:
                title = item.caption
                # 1 自己调自己
                content = menu_content2(item.id)
                response += tpl % (item.caption, content)
    return response

效果图主要代码

四、封装成工具类+Session的使用

1：设置菜单的显示、隐藏与展开、闭合，

　　a：没有权限的菜单，如“菜单三”不显示

　　　　将列表挂靠在菜单上的时候，把有权限的那一条菜单的状态值都设置成True

　　　　生成模板时候，排除掉状态为False的数据

　　b：鼠标点击菜单时：展开子菜单，关闭其他菜单

　　　　加上onclick方法，前台js控制

2：封装成工具类+Session的使用+装饰器 (重点)

from django.shortcuts import render, redirect, HttpResponse
from django.shortcuts import render
from RBAC.Form import UserForm
from RBAC.models import User,Role,Permission2Action,Menu
from django.urls import reverse
import re
class PermissionHelper(object):
    def __init__(self,request,userName):
        self.request = request
        self.userName=userName
        self.current_url = request.path_info  # 获取当前路径
        # 清空并初始化当前用户信息
        self.permission2action_dict = None
        self.menu_leaf_list = None
        self.menu_list = None
        self.session_data()

    def session_data(self):
        # 从session中获取数据
        permission_dict = self.request.session.get('permission_info')
        if permission_dict:
            self.menu_leaf_list = permission_dict['menu_leaf_list']
            self.menu_list = permission_dict['menu_list']
        else:
            # 01 根据用户名称，获取菜单
            menu_list = Menu.objects.values("id", "caption", "parent_id")
            # 02 根据用户名称，获取角色，方便后期根据角色获取权限
            role_list = Role.objects.filter(user2role__u__userName=self.userName)
            # 03 根据角色名称，获取权限
            menu_leaf_list = Permission2Action.objects.filter(role2permission2action__r__in=role_list) 
                .exclude(p__m__isnull=True).values("p__id", "p__url", "p__caption", "p__m_id", "a__code").distinct()
            # 放入到session中
            self.request.session['permission_info'] = {
                'menu_leaf_list': list(menu_leaf_list),
                'menu_list': list(menu_list),
            }
            self.menu_leaf_list = menu_leaf_list
            self.menu_list = menu_list

    def menu_data_list(self):
        open_leaf_parent_id=None
        menu_left_dict = {}
        for menuLeft in self.menu_leaf_list:
            # 把列表中的元素的值重新初始化成新元素。也就是我们菜单最终想要的格式
            menuLeft = {"id": menuLeft['p__id'],
                        "url": menuLeft['p__url'],
                        "caption": menuLeft['p__caption'],
                        "parent_id": menuLeft['p__m_id'],
                        "children": [],
                        "action": [menuLeft['a__code'], ],
                        'status': True,  # 是否显示
                        'open': False,  # 菜单是否打开
                        }
            # 以父级id为K，内容为 V 分类
            K = menuLeft["parent_id"]
            V = menuLeft
            if K in menu_left_dict:
                # 已经存在 同一级别 的权限了
                for item in menu_left_dict[K]:
                    # 将权限相同，动作不同的，将动作添加到Action中
                    if V["id"] == item["id"]:
                        # 需要注意，添加的时候只能添加字符串
                        item["action"].append(V["action"][0])
                        break
                else:
                    # for else，用的好，功能很强
                    menu_left_dict[K].append(V)
            else:
                menu_left_dict[K] = []
                menu_left_dict[K].append(V)
            # 这里只是记录到需要展开的父编码id，下面再使用
            if re.match(menuLeft["url"], self.current_url):
                menuLeft["open"] = True
                open_leaf_parent_id = menuLeft["parent_id"]

        menu_dict = {}
        # 初始化菜单
        for nemu in self.menu_list:
            menu_dict[nemu['id']] = nemu
            menu_dict[nemu['id']]["children"] = []
            menu_dict[nemu["id"]]["status"] = False  # 默认为不显示节点
            menu_dict[nemu["id"]]["open"] = False  # 默认为不打开节点
        # 将列表放置到菜单中
        for k,v in menu_left_dict.items():
            menu_dict[k]["children"] = v
            parent_id = k
            while parent_id:
                # 将列表挂靠在菜单上的时候，把有权限的那一条菜单的状态值都设置成True
                menu_dict[parent_id]["status"] = True
                parent_id = menu_dict[parent_id]["parent_id"]
            if k==open_leaf_parent_id:
                for item in v:
                   if item["url"]==self.current_url:
                        self.action_list =item["action"]
        # 将本条线上的菜单打开
        while open_leaf_parent_id:
            menu_dict[open_leaf_parent_id]['open'] = True
            open_leaf_parent_id = menu_dict[open_leaf_parent_id]['parent_id']
        top_menu = []
        for menu in menu_dict.values():
            K = menu["parent_id"]
            if K:
                menu_dict[K]['children'].append(menu)
            else:
                top_menu.append(menu)
        return top_menu

    def menu_tree(self,fromWay,childList):
        # 定义formWay，如果formWay=True，表示从外部直接获取；如果formWay=False，表示从自己调用自己
        # 递归方法 主要两大特点：1自己调自己 2：循环有终止
        response = ""
        tpl = """
                 <div class="item %s">
                      <div class="title"  onclick="showChild(this)">%s</div>
                      <div class="content"  >%s</div>
                  </div>
                """
        # 2保证了循环可终止
        if fromWay:
            childList=self.menu_data_list()
        for item in childList:
            if not item["status"]:
                continue
            title = item["caption"]
            content = self.menu_tree(False,item["children"])
            # 1 自己调自己
            if 'url' in item:
                response += "<a class='%s' href='%s'>%s</a>" % ("active" if item['open'] else "", item['url'], item['caption'])
            else:
                response += tpl % ("active" if item['open'] else "", title, content)
        return response

# 定义一个装饰器。（闭包）
def permission(func):
    def inner(request,*args,**kwargs):
        user_info = request.session.get('user_info')
        if not user_info:
            return redirect('login.html')
        obj = PermissionHelper(request,user_info["userName"])
        kwargs['menu_string'] = obj.menu_tree(True,None)
        kwargs['action_list'] = obj.action_list
        return func(request,*args,**kwargs)
    return inner

3：页面其他功能的完善

　　a：根据当前请求路径展开该权限分支，

　　　　获取请求路径地址，进行正则表达时候匹配。匹配成功后，跟设置status值一样的思路，将open值设置成True

　　　　生成模板的时候，根据open值进行判断，设置相应的class值

　　b：进一步判断是否有新增、编辑、删除等按钮权限

　　　　通过action_list进行判断

效果图 

主要代码：

 五、后台管理页面

　　以前的后台管理是使用的django框架下的admin管理功能，现在自己封装一套组件。

　　通过>python manage.py startapp web 命令创建web。主要是：通过配置的table_config，将获取到的数据，通过前台js处理，进行展示和数据交互

　　1：列表展示　　

　　其中，【状态】值为枚举类型。【操作】为超链接，

from django.shortcuts import render,HttpResponse
from django.views import View
from RBAC.models import User,models

import json
class UserView(View):
    def get(self,request,*args,**kwargs):
        # 数据库中获取数据
        return render(request,'Manage/user.html')
class UserJsonView(View):
    def get(self, request, *args,**kwargs):
        table_config = [
            {
                'q': 'id',
                'title': 'ID',
                'display': False,
                'text': '',
            },
            {
                'q': 'userName',
                'title': '用户名称',
                'display': True,
                'text': {'content': "{n}", 'kwargs': {'n': "@userName"}},
            },
            {
                'q': 'user_status_id',
                'title': '状态',
                'display': True,
                'text': {'content': "{n}", 'kwargs': {'n': "@@user_status_choices"}},
            },
            {
                'q': None,
                'title': '操作',
                'display': True,
                'text': {'content': "<a href='/userdetail-{m}.html'>{n}</a>", 'kwargs': {'n': '查看详细', 'm': '@id'}},
            }
        ]
        q_list=[]
        for tbcg in table_config:
            if not tbcg['q']:
                continue
            q_list.append(tbcg["q"])

        data_list=User.objects.all().values(*q_list)
        data_list=list(data_list)
        result = {
            'table_config': table_config,
            'data_list': data_list,
            'global_dict': {
                'user_status_choices':User.user_status_choices
            }
        }
        return HttpResponse(json.dumps(result))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="../../static/plugins/bootstrap/css/bootstrap.css"/>
</head>
<body>
<div style=" 800px;margin: 0 auto;">
    <h1>用户列表</h1>
    <table class="table table-bordered">
        <thead id="table_th"></thead>
        <tbody id="table_tb"></tbody>
    </table>
</div>

<script type="text/javascript">
    $(function () {
        init();
    })

    function init() {
        {#通过ajax请求数据#}
        $.ajax({
            url: '/web/user-json.html',
            type: 'GET',
            dataType: "JSON",
            success: function (result) {
                initGlobalData(result.global_dict);
                initHeader(result.table_config);
                initBody(result.table_config, result.data_list);
            }
        })
    }

    function initGlobalData(global_dict) {
        $.each(global_dict, function (k, v) {
            window[k] = v;
        })
    }

    function initHeader(table_config) {
        var tr = document.createElement('tr');
        $.each(table_config, function (k, item) {
            if (item.display) {
                var th = document.createElement('th')
                th.innerHTML = item.title
                $(tr).append(th)
            }
        })
        $('#table_th').append(tr);
    }

    function initBody(table_config, data_list) {
        {#遍历循环行#}
        $.each(data_list, function (k, row) {
            var tr = document.createElement('tr');
            $.each(table_config, function (k, config) {
                if (config.display) {
                    {#遍历循环列#}
                    var td = document.createElement('td')
                    {#生成文本信息#}
                    td.innerHTML = makeTdText(row, config);
                    $(tr).append(td)
                }
            })
            $('#table_tb').append(tr);
        })
    }

    ///把'text': {'content': "<a href='/userdetail-{m}.html'>{n}</a>", 'kwargs': {'n': '查看详细', 'm': '@id'}},
    ///转换成 "<a href='/userdetail-1.html'>查看详细</a>"
    function makeTdText(row, config) {
        //第一步，把{'n': '查看详细', 'm': '@id'}  转换成  {n: "查看详细", m: 1}
        var kwargs = {};  //  {n: "查看详细", m: 1}
        $.each(config.text.kwargs, function (key, value) {
            if (value.substring(0, 2) == '@@') {
                var globalName = value.substring(2, value.length); // 全局变量的名称
                var currentId = row[config.q]; // 获取的数据库中存储的数字类型值
                var t = getTextFromGlobalById(globalName, currentId);
                kwargs[key] = t;
            } else if (value[0] == '@') {
                kwargs[key] = row[value.substring(1, value.length)];
            } else {
                kwargs[key] = value;
            }
        });
        //第二步，把 {n: "查看详细", m: 1} 转换成
        var temp = config.text.content.format(kwargs);
        return temp;
    }

    String.prototype.format = function (kwargs) {
        // this ="laiying: {age} - {gender}";
        // kwargs =  {'age':18,'gender': '女'}
        var ret = this.replace(/{(w+)}/g, function (km, m) {
            return kwargs[m];
        });
        return ret;
    };

    function getTextFromGlobalById(globalName, currentId) {
        // globalName = "user_type_choices"
        // currentId = 1
        var ret = null;
        $.each(window[globalName], function (k, item) {
            if (item[0] == currentId) {
                ret = item[1];
                return
            }
        });
        return ret;
    }
</script>
</body>
</html>

　　2：进入编辑模式、退出编辑模式

　　config中添加attars，通过其值设置字段属性

  'attrs': {'name': 'user_status_id', 'origin': "@user_status_id", 'edit-enable': 'true','edit-type': 'select', "global-name": 'user_status_choices'}

  table_config = [
            {
                'q': None,
                'title': "选项",
                'display': True,
                'text': {'content': "<input type='checkbox' />", "kwargs": {}},
                'attrs': {}
            },
            {
                'q': 'id',
                'title': 'ID',
                'display': False,
                'text': '',
            },
            {
                'q': 'userName',
                'title': '用户名称',
                'display': True,
                'text': {'content': "{n}", 'kwargs': {'n': "@userName"}},
                'attrs': {'name': 'userName', 'origin': "@userName", 'edit-enable': 'true',
                          'edit-type': 'input'}
            },
            {
                'q': 'user_status_id',
                'title': '状态',
                'display': True,
                'text': {'content': "{n}", 'kwargs': {'n': "@@user_status_choices"}},
                'attrs': {'name': 'user_status_id', 'origin': "@user_status_id", 'edit-enable': 'true',
                          'edit-type': 'select', "global-name": 'user_status_choices'}
            },
            {
                'q': None,
                'title': '操作',
                'display': True,
                'text': {'content': "<a href='/userdetail-{m}.html'>{n}</a>", 'kwargs': {'n': '查看详细', 'm': '@id'}},
            }
        ]








<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="../../static/plugins/bootstrap/css/bootstrap.css"/>
</head>
<body>
<div style=" 800px;margin: 0 auto;">
    <h1>用户列表</h1>
    <div class="btn-group" role="group" aria-label="...">
        <button id="idCheckAll" type="button" class="btn btn-default">全选</button>
        <button id="idReverseAll" type="button" class="btn btn-default">反选</button>
        <button id="idCancelAll" type="button" class="btn btn-default">取消</button>
        <button id="idEditMode" type="button" class="btn btn-default">进入编辑模式</button>
        <button type="button" class="btn btn-default">批量删除</button>
        <button id="idSave" type="button" class="btn btn-default">保存</button>
        <a id="idAdd" href="/web/asset-add.html" class="btn btn-default">添加</a>
    </div>
</div>
<table class="table table-bordered">
    <thead id="table_th"></thead>
    <tbody id="table_tb"></tbody>
</table>
</div>

<script type="text/javascript">
    $(function () {
        init();
        bindEditMode();
    })

    function init() {
        {#通过ajax请求数据#}
        $.ajax({
            url: '/web/user-json.html',
            type: 'GET',
            dataType: "JSON",
            success: function (result) {
                initGlobalData(result.global_dict);
                initHeader(result.table_config);
                initBody(result.table_config, result.data_list);
            }
        })
    }

    function initGlobalData(global_dict) {
        $.each(global_dict, function (k, v) {
            window[k] = v;
        })
    }

    function initHeader(table_config) {
        var tr = document.createElement('tr');
        $.each(table_config, function (k, item) {
            if (item.display) {
                var th = document.createElement('th')
                th.innerHTML = item.title
                $(tr).append(th)
            }
        })
        $('#table_th').append(tr);
    }

    function initBody(table_config, data_list) {
        {#遍历循环行#}
        $.each(data_list, function (k, row) {
            var tr = document.createElement('tr');
            $.each(table_config, function (k, config) {
                if (config.display) {
                    {#遍历循环列#}
                    var td = document.createElement('td')
                    {#生成文本信息#}
                    td.innerHTML = makeTdText(row, config);
                    /* 属性colConfig.attrs = {'edit-enable': 'true','edit-type': 'select'}  */
                    $.each(config.attrs, function (kk, vv) {
                        if (vv[0] == '@') {
                            td.setAttribute(kk, row[vv.substring(1, vv.length)]);
                        } else {
                            td.setAttribute(kk, vv);
                        }
                    });
                    $(tr).append(td)
                }
            })
            $('#table_tb').append(tr);
        })
    }

    ///把'text': {'content': "<a href='/userdetail-{m}.html'>{n}</a>", 'kwargs': {'n': '查看详细', 'm': '@id'}},
    ///转换成 "<a href='/userdetail-1.html'>查看详细</a>"
    function makeTdText(row, config) {
        //第一步，把{'n': '查看详细', 'm': '@id'}  转换成  {n: "查看详细", m: 1}
        var kwargs = {};  //  {n: "查看详细", m: 1}
        $.each(config.text.kwargs, function (key, value) {
            if (value.substring(0, 2) == '@@') {
                var globalName = value.substring(2, value.length); // 全局变量的名称
                var currentId = row[config.q]; // 获取的数据库中存储的数字类型值
                var t = getTextFromGlobalById(globalName, currentId);
                kwargs[key] = t;
            } else if (value[0] == '@') {
                kwargs[key] = row[value.substring(1, value.length)];
            } else {
                kwargs[key] = value;
            }
        });
        //第二步，把 {n: "查看详细", m: 1} 转换成
        var temp = config.text.content.format(kwargs);
        return temp;
    }

    String.prototype.format = function (kwargs) {
        // this ="laiying: {age} - {gender}";
        // kwargs =  {'age':18,'gender': '女'}
        var ret = this.replace(/{(w+)}/g, function (km, m) {
            return kwargs[m];
        });
        return ret;
    };

    function getTextFromGlobalById(globalName, currentId) {
        // globalName = "user_type_choices"
        // currentId = 1
        var ret = null;
        $.each(window[globalName], function (k, item) {
            if (item[0] == currentId) {
                ret = item[1];
                return
            }
        });
        return ret;
    }

    {#按钮功能开始#}

    function bindEditMode() {
        $('#idEditMode').click(function () {
            var editing = $(this).hasClass('btn-warning');
            if (editing) {
                // 退出编辑模式
                $(this).removeClass('btn-warning');
                $(this).text('进入编辑模式');

                $('#table_tb').find(':checked').each(function () {
                    var $currentTr = $(this).parent().parent();
                    trOutEditMode($currentTr);
                })

            } else {
                // 进入编辑模式
                $(this).addClass('btn-warning');
                $(this).text('退出编辑模式');
                $('#table_tb').find(':checked').each(function () {
                    var $currentTr = $(this).parent().parent();
                    trIntoEditMode($currentTr);
                })
            }
        })
    }

    function trIntoEditMode($tr) {
        $tr.addClass('success');
        $tr.attr('has-edit', 'true');
        $tr.children().each(function () {
            // $(this) => td
            var editEnable = $(this).attr('edit-enable');
            var editType = $(this).attr('edit-type');
            if (editEnable == 'true') {
                if (editType == 'select') {
                    var globalName = $(this).attr('global-name'); //  "users_status_choices"
                    var origin = $(this).attr('origin'); // 1
                    var new_val= $(this).attr('new-val'); // 1
                    if (typeof(new_val)!="undefined"){
                        origin=new_val;
                    }
                    // 生成select标签
                    var sel = document.createElement('select');
                    sel.className = "form-control";
                    $.each(window[globalName], function (k1, v1) {
                        var op = document.createElement('option');
                        op.setAttribute('value', v1[0]);
                        op.innerHTML = v1[1];
                        $(sel).append(op);
                    });
                    $(sel).val(origin);

                    $(this).html(sel);
                } else if (editType == 'input') {
                    // input文本框
                    // *******可以进入编辑模式*******
                    var innerText = $(this).text();
                    var tag = document.createElement('input');
                    tag.className = "form-control";
                    tag.value = innerText;
                    $(this).html(tag);
                }
            }
        })
    }

    function trOutEditMode($tr) {
        $tr.removeClass('success');
        $tr.children().each(function () {
            // $(this) => td
            var editEnable = $(this).attr('edit-enable');
            var editType = $(this).attr('edit-type');
            if (editEnable == 'true') {
                if (editType == 'select') {
                    // 获取正在编辑的select对象
                    var $select = $(this).children().first();
                    // 获取选中的option的value
                    var newId = $select.val();
                    // 获取选中的option的文本内容
                    var newText = $select[0].selectedOptions[0].innerHTML;
                    // 在td中设置文本内容
                    $(this).html(newText);
                    $(this).attr('new-val', newId);

                } else if (editType == 'input') {
                    // *******可以退出编辑模式*******
                    var $input = $(this).children().first();
                    var inputValue = $input.val();
                    $(this).html(inputValue);
                    $(this).attr('new-val', inputValue);
                }

            }
        })
    }

    {#按钮功能结束#}
</script>
</body>
</html>

 　　3：全选、取消、反选 

　　bindCheckAll();bindCancelAll();bindReverseAll();只是需要注意下这三个方法，不再过多介绍

 　　4：更新　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="../../static/plugins/bootstrap/css/bootstrap.css"/>
</head>
<body>
{% csrf_token %}
<div style=" 800px;margin: 0 auto;">
    <h1>用户列表</h1>
    <div class="btn-group" role="group" aria-label="...">
        <button id="idCheckAll" type="button" class="btn btn-default">全选</button>
        <button id="idReverseAll" type="button" class="btn btn-default">反选</button>
        <button id="idCancelAll" type="button" class="btn btn-default">取消</button>
        <button id="idEditMode" type="button" class="btn btn-default">进入编辑模式</button>
        <button type="button" class="btn btn-default">批量删除</button>
        <button id="idSave" type="button" class="btn btn-default">保存</button>
        <a id="idAdd" href="/web/asset-add.html" class="btn btn-default">添加</a>
    </div>
</div>
<table class="table table-bordered">
    <thead id="table_th"></thead>
    <tbody id="table_tb"></tbody>
</table>
</div>

<script type="text/javascript">
    $(function () {
        init();
        bindEditMode();
        bindCheckbox();
        bindCheckAll();
        bindCancelAll();
        bindReverseAll();
        bindSave();
    })

    function init() {
        {#通过ajax请求数据#}
        $.ajax({
            url: '/web/user-json.html',
            type: 'GET',
            dataType: "JSON",
            success: function (result) {
                initGlobalData(result.global_dict);
                initHeader(result.table_config);
                initBody(result.table_config, result.data_list);
            }
        })
    }

    function initGlobalData(global_dict) {
        $.each(global_dict, function (k, v) {
            window[k] = v;
        })
    }

    function initHeader(table_config) {
        var tr = document.createElement('tr');
        $.each(table_config, function (k, item) {
            if (item.display) {
                var th = document.createElement('th')
                th.innerHTML = item.title
                $(tr).append(th)
            }
        })
        $('#table_th').empty();
        $('#table_th').append(tr);
    }

    function initBody(table_config, data_list) {
        $('#table_tb').empty();
        {#遍历循环行#}
        $.each(data_list, function (k, row) {
            var tr = document.createElement('tr');
            tr.setAttribute('row-id', row['id']);
            $.each(table_config, function (k, config) {
                if (config.display) {
                    {#遍历循环列#}
                    var td = document.createElement('td')
                    {#生成文本信息#}
                    td.innerHTML = makeTdText(row, config);
                    /* 属性colConfig.attrs = {'edit-enable': 'true','edit-type': 'select'}  */
                    $.each(config.attrs, function (kk, vv) {
                        if (vv[0] == '@') {
                            td.setAttribute(kk, row[vv.substring(1, vv.length)]);
                        } else {
                            td.setAttribute(kk, vv);
                        }
                    });
                    $(tr).append(td)
                }
            })
            $('#table_tb').append(tr);
        })
    }

    ///把'text': {'content': "<a href='/userdetail-{m}.html'>{n}</a>", 'kwargs': {'n': '查看详细', 'm': '@id'}},
    ///转换成 "<a href='/userdetail-1.html'>查看详细</a>"
    function makeTdText(row, config) {
        //第一步，把{'n': '查看详细', 'm': '@id'}  转换成  {n: "查看详细", m: 1}
        var kwargs = {};  //  {n: "查看详细", m: 1}
        $.each(config.text.kwargs, function (key, value) {
            if (value.substring(0, 2) == '@@') {
                var globalName = value.substring(2, value.length); // 全局变量的名称
                var currentId = row[config.q]; // 获取的数据库中存储的数字类型值
                var t = getTextFromGlobalById(globalName, currentId);
                kwargs[key] = t;
            } else if (value[0] == '@') {
                kwargs[key] = row[value.substring(1, value.length)];
            } else {
                kwargs[key] = value;
            }
        });
        //第二步，把 {n: "查看详细", m: 1} 转换成
        var temp = config.text.content.format(kwargs);
        return temp;
    }

    String.prototype.format = function (kwargs) {
        // this ="laiying: {age} - {gender}";
        // kwargs =  {'age':18,'gender': '女'}
        var ret = this.replace(/{(w+)}/g, function (km, m) {
            return kwargs[m];
        });
        return ret;
    };

    function getTextFromGlobalById(globalName, currentId) {
        // globalName = "user_type_choices"
        // currentId = 1
        var ret = null;
        $.each(window[globalName], function (k, item) {
            if (item[0] == currentId) {
                ret = item[1];
                return
            }
        });
        return ret;
    }

    {#按钮功能开始#}

    function bindEditMode() {
        $('#idEditMode').click(function () {
            var editing = $(this).hasClass('btn-warning');
            if (editing) {
                // 退出编辑模式
                $(this).removeClass('btn-warning');
                $(this).text('进入编辑模式');

                $('#table_tb').find(':checked').each(function () {
                    var $currentTr = $(this).parent().parent();
                    trOutEditMode($currentTr);
                })

            } else {
                // 进入编辑模式
                $(this).addClass('btn-warning');
                $(this).text('退出编辑模式');
                $('#table_tb').find(':checked').each(function () {
                    var $currentTr = $(this).parent().parent();
                    trIntoEditMode($currentTr);
                })
            }
        })
    }

    function trIntoEditMode($tr) {
        $tr.addClass('success');
        $tr.attr('has-edit', 'true');
        $tr.children().each(function () {
            // $(this) => td
            var editEnable = $(this).attr('edit-enable');
            var editType = $(this).attr('edit-type');
            if (editEnable == 'true') {
                if (editType == 'select') {
                    var globalName = $(this).attr('global-name'); //  "users_status_choices"
                    var origin = $(this).attr('origin'); // 1
                    var new_val = $(this).attr('new-val'); // 1
                    if (typeof (new_val) != "undefined") {
                        origin = new_val;
                    }
                    // 生成select标签
                    var sel = document.createElement('select');
                    sel.className = "form-control";
                    $.each(window[globalName], function (k1, v1) {
                        var op = document.createElement('option');
                        op.setAttribute('value', v1[0]);
                        op.innerHTML = v1[1];
                        $(sel).append(op);
                    });
                    $(sel).val(origin);

                    $(this).html(sel);
                } else if (editType == 'input') {
                    // input文本框
                    // *******可以进入编辑模式*******
                    var innerText = $(this).text();
                    var tag = document.createElement('input');
                    tag.className = "form-control";
                    tag.value = innerText;
                    $(this).html(tag);
                }
            }
        })
    }

    function trOutEditMode($tr) {
        $tr.removeClass('success');
        $tr.children().each(function () {
            // $(this) => td
            var editEnable = $(this).attr('edit-enable');
            var editType = $(this).attr('edit-type');
            if (editEnable == 'true') {
                if (editType == 'select') {
                    // 获取正在编辑的select对象
                    var $select = $(this).children().first();
                    // 获取选中的option的value
                    var newId = $select.val();
                    // 获取选中的option的文本内容
                    var newText = $select[0].selectedOptions[0].innerHTML;
                    // 在td中设置文本内容
                    $(this).html(newText);
                    $(this).attr('new-val', newId);

                } else if (editType == 'input') {
                    // *******可以退出编辑模式*******
                    var $input = $(this).children().first();
                    var inputValue = $input.val();
                    $(this).html(inputValue);
                    $(this).attr('new-val', inputValue);
                }

            }
        })
    }

    function bindCheckbox() {
        // $('#table_tb').find(':checkbox').click()
        $('#table_tb').on('click', ':checkbox', function () {
            if ($('#idEditMode').hasClass('btn-warning')) {
                var ck = $(this).prop('checked');
                var $currentTr = $(this).parent().parent();
                if (ck) {
                    // 进入编辑模式
                    trIntoEditMode($currentTr);
                } else {
                    // 退出编辑模式
                    trOutEditMode($currentTr)
                }
            }
        })
    }

    function bindReverseAll() {
        $('#idReverseAll').click(function () {
            $('#table_tb').find(':checkbox').each(function () {
                // $(this) => checkbox
                if ($('#idEditMode').hasClass('btn-warning')) {
                    if ($(this).prop('checked')) {
                        $(this).prop('checked', false);
                        trOutEditMode($(this).parent().parent());
                    } else {
                        $(this).prop('checked', true);
                        trIntoEditMode($(this).parent().parent());
                    }
                } else {
                    if ($(this).prop('checked')) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    }
                }
            })
        })
    }

    function bindCancelAll() {
        $('#idCancelAll').click(function () {
            $('#table_tb').find(':checked').each(function () {
                // $(this) => checkbox
                if ($('#idEditMode').hasClass('btn-warning')) {
                    $(this).prop('checked', false);
                    // 退出编辑模式
                    trOutEditMode($(this).parent().parent());
                } else {
                    $(this).prop('checked', false);
                }
            });
        })
    }

    function bindCheckAll() {
        $('#idCheckAll').click(function () {
            $('#table_tb').find(':checkbox').each(function () {
                // $(this)  = checkbox
                if ($('#idEditMode').hasClass('btn-warning')) {
                    if ($(this).prop('checked')) {
                        // 当前行已经进入编辑模式了
                    } else {
                        // 进入编辑模式
                        var $currentTr = $(this).parent().parent();
                        trIntoEditMode($currentTr);
                        $(this).prop('checked', true);
                    }
                } else {
                    $(this).prop('checked', true);
                }
            })
        })
    }

    function bindSave() {
        $('#idSave').click(function () {
            var postList = [];
            //找到已经编辑过的tr，tr has-edit='true'
            $('#table_tb').find('tr[has-edit="true"]').each(function () {
                // $(this) => tr
                var temp = {};
                var id = $(this).attr('row-id');
                temp['id'] = id;
                $(this).children('[edit-enable="true"]').each(function () {
                    // $(this) = > td
                    var name = $(this).attr('name');
                    var origin = $(this).attr('origin');
                    var newVal = $(this).attr('new-val');
                    if (origin != newVal) {
                        temp[name] = newVal;
                    }
                });
                postList.push(temp);
            })
             
            $.ajax({
                url: '/web/user-json.html',
                type: 'PUT',
                data: {'post_list': JSON.stringify(postList)},
                dataType: 'JSON',
                success: function (arg) {
                    if (arg.status) {
                        init(1);
                    } else {
                        alert(arg.error);
                    }
                }
            })
        })
    }

    {#按钮功能结束#}
</script>
</body>
</html>

from django.shortcuts import render, HttpResponse
from django.views import View
from RBAC.models import User, models
from django.http.request import QueryDict
import json


class UserView(View):
    def get(self, request, *args, **kwargs):
        # 数据库中获取数据
        return render(request, 'Manage/user.html')


class UserJsonView(View):
    def get(self, request, *args, **kwargs):
        table_config = [
            {
                'q': None,
                'title': "选项",
                'display': True,
                'text': {'content': "<input type='checkbox' />", "kwargs": {}},
                'attrs': {}
            },
            {
                'q': 'id',
                'title': 'ID',
                'display': False,
                'text': '',
            },
            {
                'q': 'userName',
                'title': '用户名称',
                'display': True,
                'text': {'content': "{n}", 'kwargs': {'n': "@userName"}},
                'attrs': {'name': 'userName', 'origin': "@userName", 'edit-enable': 'true',
                          'edit-type': 'input'}
            },
            {
                'q': 'user_status_id',
                'title': '状态',
                'display': True,
                'text': {'content': "{n}", 'kwargs': {'n': "@@user_status_choices"}},
                'attrs': {'name': 'user_status_id', 'origin': "@user_status_id", 'edit-enable': 'true',
                          'edit-type': 'select', "global-name": 'user_status_choices'}
            },
            {
                'q': None,
                'title': '操作',
                'display': True,
                'text': {'content': "<a href='/userdetail-{m}.html'>{n}</a>", 'kwargs': {'n': '查看详细', 'm': '@id'}},
            }
        ]
        q_list = []
        for tbcg in table_config:
            if not tbcg['q']:
                continue
            q_list.append(tbcg["q"])

        data_list = User.objects.all().values(*q_list)
        data_list = list(data_list)
        result = {
            'table_config': table_config,
            'data_list': data_list,
            'global_dict': {
                'user_status_choices': User.user_status_choices
            }
        }
        return HttpResponse(json.dumps(result))

    def put(self, request, *args, **kwargs):
        import chardet
        content = request.body
        put_dict = QueryDict(request.body, encoding='utf-8')
        post_list = json.loads(put_dict.get('post_list'))
        # [{'id': '1', 'userName': '赵生1'}]
        for row_dict in post_list:
            id = row_dict.pop('id')
            User.objects.filter(id=id).update(**row_dict)
        ret = {
            'status': True
        }
        return HttpResponse(json.dumps(ret))

 　　5：分页：结合以前开发的分页工具，进行分页处理

 　　6：查询功能暂且不做，代码封装，

(function () {
    var requestUrl = null;

    /*通过正则获取url中的参数*/
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
    }

    function init(pager) {
        $.ajax({
            url: requestUrl,
            type: 'GET',
            data: {'pager': pager},
            dataType: "JSON",
            success: function (result) {
                initGlobalData(result.global_dict);
                initHeader(result.table_config);
                initBody(result.table_config, result.data_list);
                initPager(result.pager);
            }
        })
    }

    function initGlobalData(global_dict) {
        $.each(global_dict, function (k, v) {
            window[k] = v;
        })
    }

    function initHeader(table_config) {
        var tr = document.createElement('tr');
        $.each(table_config, function (k, item) {
            if (item.display) {
                var th = document.createElement('th')
                th.innerHTML = item.title
                $(tr).append(th)
            }
        })
        $('#table_th').empty();
        $('#table_th').append(tr);
    }

    function initBody(table_config, data_list) {
        $('#table_tb').empty();

        $.each(data_list, function (k, row) {
            var tr = document.createElement('tr');
            tr.setAttribute('row-id', row['id']);
            $.each(table_config, function (k, config) {
                if (config.display) {

                    var td = document.createElement('td')

                    td.innerHTML = makeTdText(row, config);
                    /* 属性colConfig.attrs = {'edit-enable': 'true','edit-type': 'select'}  */
                    $.each(config.attrs, function (kk, vv) {
                        if (vv[0] == '@') {
                            td.setAttribute(kk, row[vv.substring(1, vv.length)]);
                        } else {
                            td.setAttribute(kk, vv);
                        }
                    });
                    $(tr).append(td)
                }
            })
            $('#table_tb').append(tr);
        })
    }

    function initPager(pager) {
        $('#idPagination').html(pager);
    }

    ///把'text': {'content': "<a href='/userdetail-{m}.html'>{n}</a>", 'kwargs': {'n': '查看详细', 'm': '@id'}},
    ///转换成 "<a href='/userdetail-1.html'>查看详细</a>"
    function makeTdText(row, config) {
        //第一步，把{'n': '查看详细', 'm': '@id'}  转换成  {n: "查看详细", m: 1}
        var kwargs = {};  //  {n: "查看详细", m: 1}
        $.each(config.text.kwargs, function (key, value) {
            if (value.substring(0, 2) == '@@') {
                var globalName = value.substring(2, value.length); // 全局变量的名称
                var currentId = row[config.q]; // 获取的数据库中存储的数字类型值
                var t = getTextFromGlobalById(globalName, currentId);
                kwargs[key] = t;
            } else if (value[0] == '@') {
                kwargs[key] = row[value.substring(1, value.length)];
            } else {
                kwargs[key] = value;
            }
        });
        //第二步，把 {n: "查看详细", m: 1} 转换成
        var temp = config.text.content.format(kwargs);
        return temp;
    }

    String.prototype.format = function (kwargs) {
        // this ="laiying: {age} - {gender}";
        // kwargs =  {'age':18,'gender': '女'}
        var ret = this.replace(/{(w+)}/g, function (km, m) {
            return kwargs[m];
        });
        return ret;
    };

    function getTextFromGlobalById(globalName, currentId) {
        // globalName = "user_type_choices"
        // currentId = 1
        var ret = null;
        $.each(window[globalName], function (k, item) {
            if (item[0] == currentId) {
                ret = item[1];
                return
            }
        });
        return ret;
    }

    function bindEditMode() {
        $('#idEditMode').click(function () {
            var editing = $(this).hasClass('btn-warning');
            if (editing) {
                // 退出编辑模式
                $(this).removeClass('btn-warning');
                $(this).text('进入编辑模式');

                $('#table_tb').find(':checked').each(function () {
                    var $currentTr = $(this).parent().parent();
                    trOutEditMode($currentTr);
                })

            } else {
                // 进入编辑模式
                $(this).addClass('btn-warning');
                $(this).text('退出编辑模式');
                $('#table_tb').find(':checked').each(function () {
                    var $currentTr = $(this).parent().parent();
                    trIntoEditMode($currentTr);
                })
            }
        })
    }

    function trIntoEditMode($tr) {
        $tr.addClass('success');
        $tr.attr('has-edit', 'true');
        $tr.children().each(function () {
            // $(this) => td
            var editEnable = $(this).attr('edit-enable');
            var editType = $(this).attr('edit-type');
            if (editEnable == 'true') {
                if (editType == 'select') {
                    var globalName = $(this).attr('global-name'); //  "users_status_choices"
                    var origin = $(this).attr('origin'); // 1
                    var new_val = $(this).attr('new-val'); // 1
                    if (typeof (new_val) != "undefined") {
                        origin = new_val;
                    }
                    // 生成select标签
                    var sel = document.createElement('select');
                    sel.className = "form-control";
                    $.each(window[globalName], function (k1, v1) {
                        var op = document.createElement('option');
                        op.setAttribute('value', v1[0]);
                        op.innerHTML = v1[1];
                        $(sel).append(op);
                    });
                    $(sel).val(origin);

                    $(this).html(sel);
                } else if (editType == 'input') {
                    // input文本框
                    // *******可以进入编辑模式*******
                    var innerText = $(this).text();
                    var tag = document.createElement('input');
                    tag.className = "form-control";
                    tag.value = innerText;
                    $(this).html(tag);
                }
            }
        })
    }

    function trOutEditMode($tr) {
        $tr.removeClass('success');
        $tr.children().each(function () {
            // $(this) => td
            var editEnable = $(this).attr('edit-enable');
            var editType = $(this).attr('edit-type');
            if (editEnable == 'true') {
                if (editType == 'select') {
                    // 获取正在编辑的select对象
                    var $select = $(this).children().first();
                    // 获取选中的option的value
                    var newId = $select.val();
                    // 获取选中的option的文本内容
                    var newText = $select[0].selectedOptions[0].innerHTML;
                    // 在td中设置文本内容
                    $(this).html(newText);
                    $(this).attr('new-val', newId);

                } else if (editType == 'input') {
                    // *******可以退出编辑模式*******
                    var $input = $(this).children().first();
                    var inputValue = $input.val();
                    $(this).html(inputValue);
                    $(this).attr('new-val', inputValue);
                }

            }
        })
    }

    function bindCheckbox() {
        // $('#table_tb').find(':checkbox').click()
        $('#table_tb').on('click', ':checkbox', function () {
            if ($('#idEditMode').hasClass('btn-warning')) {
                var ck = $(this).prop('checked');
                var $currentTr = $(this).parent().parent();
                if (ck) {
                    // 进入编辑模式
                    trIntoEditMode($currentTr);
                } else {
                    // 退出编辑模式
                    trOutEditMode($currentTr)
                }
            }
        })
    }

    function bindReverseAll() {
        $('#idReverseAll').click(function () {
            $('#table_tb').find(':checkbox').each(function () {
                // $(this) => checkbox
                if ($('#idEditMode').hasClass('btn-warning')) {
                    if ($(this).prop('checked')) {
                        $(this).prop('checked', false);
                        trOutEditMode($(this).parent().parent());
                    } else {
                        $(this).prop('checked', true);
                        trIntoEditMode($(this).parent().parent());
                    }
                } else {
                    if ($(this).prop('checked')) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    }
                }
            })
        })
    }

    function bindCancelAll() {
        $('#idCancelAll').click(function () {
            $('#table_tb').find(':checked').each(function () {
                // $(this) => checkbox
                if ($('#idEditMode').hasClass('btn-warning')) {
                    $(this).prop('checked', false);
                    // 退出编辑模式
                    trOutEditMode($(this).parent().parent());
                } else {
                    $(this).prop('checked', false);
                }
            });
        })
    }

    function bindCheckAll() {
        $('#idCheckAll').click(function () {
            $('#table_tb').find(':checkbox').each(function () {
                // $(this)  = checkbox
                if ($('#idEditMode').hasClass('btn-warning')) {
                    if ($(this).prop('checked')) {
                        // 当前行已经进入编辑模式了
                    } else {
                        // 进入编辑模式
                        var $currentTr = $(this).parent().parent();
                        trIntoEditMode($currentTr);
                        $(this).prop('checked', true);
                    }
                } else {
                    $(this).prop('checked', true);
                }
            })
        })
    }

    function bindSave() {
        $('#idSave').click(function () {
            var postList = [];
            //找到已经编辑过的tr，tr has-edit='true'
            $('#table_tb').find('tr[has-edit="true"]').each(function () {
                // $(this) => tr
                var temp = {};
                var id = $(this).attr('row-id');
                temp['id'] = id;
                $(this).children('[edit-enable="true"]').each(function () {
                    // $(this) = > td
                    var name = $(this).attr('name');
                    var origin = $(this).attr('origin');
                    var newVal = $(this).attr('new-val');
                    if (origin != newVal) {
                        temp[name] = newVal;
                    }
                });
                postList.push(temp);
            })

            $.ajax({
                url: requestUrl,
                type: 'PUT',
                data: {'post_list': JSON.stringify(postList)},
                dataType: 'JSON',
                success: function (arg) {
                    if (arg.status) {
                        init(3);
                    } else {
                        alert(arg.error);
                    }
                }
            })
        })
    }

    function bindChangePager() {
        $('#idPagination').on('click', 'a', function () {
            var num = $(this).text();
            init(num);
        })
    }

    jQuery.extend({
        'NB': function (url) {
            requestUrl = url;
            init(getUrlParam("p"));
            bindEditMode();
            bindCheckbox();
            bindCheckAll();
            bindCancelAll();
            bindReverseAll();
            bindSave();
            bindChangePager();
        },
        'changePager': function (num) {
            init(num);
        }
    })
})()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/AaronRBAC.js"></script>
    <link rel="stylesheet" href="../../static/plugins/bootstrap/css/bootstrap.css"/>
</head>
<body>
<div style=" 800px;margin: 0 auto;">
    <h1>用户列表</h1>
    <div class="btn-group" role="group" aria-label="...">
        <button id="idCheckAll" type="button" class="btn btn-default">全选</button>
        <button id="idReverseAll" type="button" class="btn btn-default">反选</button>
        <button id="idCancelAll" type="button" class="btn btn-default">取消</button>
        <button id="idEditMode" type="button" class="btn btn-default">进入编辑模式</button>
        <button type="button" class="btn btn-default">批量删除</button>
        <button id="idSave" type="button" class="btn btn-default">保存</button>
        <a id="idAdd" href="/web/asset-add.html" class="btn btn-default">添加</a>
    </div>
</div>
<table class="table table-bordered">
    <thead id="table_th"></thead>
    <tbody id="table_tb"></tbody>
</table>
<ul id="idPagination" class="pagination">
</ul>
</div>
<script>
    $(function () {
        $.NB("/web/user-json.html");
    });
</script>
</body>
</html>

from django.shortcuts import render, HttpResponse
from django.views import View
from RBAC.models import User, models
from django.http.request import QueryDict
from web.View.Tools import AaronPager
import json


class UserView(View):
    def get(self, request, *args, **kwargs):
        # 数据库中获取数据
        return render(request, 'Manage/user.html')


class UserJsonView(View):
    def get(self, request, *args, **kwargs):
        table_config = [
            {
                'q': None,
                'title': "选项",
                'display': True,
                'text': {'content': "<input type='checkbox' />", "kwargs": {}},
                'attrs': {}
            },
            {
                'q': 'id',
                'title': 'ID',
                'display': False,
                'text': '',
            },
            {
                'q': 'userName',
                'title': '用户名称',
                'display': True,
                'text': {'content': "{n}", 'kwargs': {'n': "@userName"}},
                'attrs': {'name': 'userName', 'origin': "@userName", 'edit-enable': 'true',
                          'edit-type': 'input'}
            },
            {
                'q': 'user_status_id',
                'title': '状态',
                'display': True,
                'text': {'content': "{n}", 'kwargs': {'n': "@@user_status_choices"}},
                'attrs': {'name': 'user_status_id', 'origin': "@user_status_id", 'edit-enable': 'true',
                          'edit-type': 'select', "global-name": 'user_status_choices'}
            },
            {
                'q': None,
                'title': '操作',
                'display': True,
                'text': {'content': "<a href='/userdetail-{m}.html'>{n}</a>", 'kwargs': {'n': '查看详细', 'm': '@id'}},
            }
        ]
        q_list = []
        for tbcg in table_config:
            if not tbcg['q']:
                continue
            q_list.append(tbcg["q"])
        base_url = '/web/user.html'
        cur_page = request.GET.get('pager',None)
        data_list = User.objects.all().values(*q_list)
        data_count = data_list.count()
        data_list = list(data_list)
        aaron_page=AaronPager.AaronPager(data_count,cur_page,5,7,base_url)
        # print("当前页码："+cur_page+" "+aaron_page.start()+" "+aaron_page.end())

        data_list = data_list[aaron_page.start():aaron_page.end()]
        result = {
            'table_config': table_config,
            'data_list': data_list,
            'global_dict': {
                'user_status_choices': User.user_status_choices,
                'cur_page':cur_page
            },
            # 分页组件生成页码信息
            'pager': aaron_page.page_str()
        }
        return HttpResponse(json.dumps(result))

    def put(self, request, *args, **kwargs):
        import chardet
        content = request.body
        put_dict = QueryDict(request.body, encoding='utf-8')
        post_list = json.loads(put_dict.get('post_list'))
        # [{'id': '1', 'userName': '赵生1'}]
        for row_dict in post_list:
            id = row_dict.pop('id')
            User.objects.filter(id=id).update(**row_dict)
        ret = {
            'status': True
        }
        return HttpResponse(json.dumps(ret))