首页Django

Django实现树形结构多级菜单

2020年9月9日 18:081393

Django在做web开发时,使用django-mptt实现树状多级分类

# 环境版本
1.Python 3.8
2.Django 3.0.2
3.django-mptt 0.11.0
3.Pycharm 2019.3

第一步:安装django-mptt

pip install django-mptt  # 如果超时可以使用pip豆瓣源

第二步:创建area应用

# 以下教程的命令都使用pycharm创建
python manage.py startapp area

第三步:在models.py里添加以下代码

from django.db import models
from mptt.models import MPTTModel


class Area(MPTTModel):
    name = models.CharField('名称',max_length=64,unique=True)
    parent = models.ForeignKey('self',verbose_name='上级分类', null=True, blank=True, related_name='children')

    class Meta:
        verbose_name_plural = verbose_name = '分类'

    def __str__(self):
        return self.name

上面代码让Area继承MPTTModel

需要说明的是,MPTTModel隐藏了四个变量:level、lft、rght、tree_id,大多数时候用不到

另外,如果parent变量不是默认的"parent",需要在Model中MPTT元类中声明,完整代码如下:

from django.db import models
from mptt.models import MPTTModel


class Area(MPTTModel):
    name = models.CharField('名称',max_length=64,unique=True)
    category = models.ForeignKey('self',verbose_name='上级分类', null=True, blank=True, related_name='children')

    class Meta:
        verbose_name_plural = verbose_name = '分类'
    
    class MPTTMeta:
        parent_attr = 'category'

    def __str__(self):
        return self.name

第四部:在admin.py里添加以下代码

from django.contrib import admin
from area.models import Area


@admin.register(Area)
class AreaAdmin(admin.ModelAdmin):
    list_display = ('id', 'name', 'parent', 'level')

第五步:在settings.py文件中INSTALLED_APPS添加mptt和area

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mptt',  # 新增
    'area',  # 新增
]

第六步:执行数据库

1.python manage.py makemigrations  # 创建数据库迁移文件
2.python manage.py migrate  # 执行数据库迁移
3.python manage.py createsuperuser  # 创建后台超级用户

第七步:在views.py里添加以下代码

from django.shortcuts import render
from area.models import Area


def tree(request):
    nodes = Area.objects.all()
    return render(request,'index.html', {'nodes': nodes})

第八步:在urls.py里添加以下代码

from django.contrib import admin
from django.urls import path
from area import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.tree,name='tree'),
]

第九步:在templates文件夹下新增模板文件"index.html",加入以下代码

{% load mptt_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树状多级分类</title>
</head>
<body>
{% recursetree nodes %}
    {% if node.is_leaf_node %}
        <div>{{ node.name }}</div>
    {% else %}
        <div>{{ node.name }}</div>
        <ul>
            {{ children }}
        </ul>
    {% endif %}
{% endrecursetree %}
</body>
</html>

之后登陆后台添加多级分类,访问:http://127.0.0.1:8000就能看到效果了,前端样式请自行添加