Python实现无限级分类

1.什么是无限级分类？

顾名思义，就是一级接一级的无限制分级。其实简单点说就是一个人类可以繁衍出多个后代，然后一个后代又可以分另外多个后代这样无限繁衍下去（举例：家族族谱），就好象linux系统你可以新建一个文件夹，然后在这个文件夹里又可以建一些个文件夹，在文件夹底下还可以建一些文件夹一样，随后使用tree命令就可以查看文件夹目录层级。那么这种层级结构也成为树结构在日常的开发需求里也是很常见的，比如淘宝商城系统的商品分类，课程的目录章节，以及论坛里的帖子回复等等*

好了，话不多说，上代码（我们以工单系统为例）！！！

以下为后端代码：

首先，打开django项目中的models.py，新建一个类别的模型类，这里我们以最简单的parent_id的形式来建立（相当于自关联）

class WorkOrder(models.Model):name = models.CharField(max_length=50, verbose_name='分类名称')pid = models.IntegerField(default=0, verbose_name='父类ID')class Meta:db_table = 'workorder'def __str__(self):return self.name

因为我的项目是基于drf框架，所以需要一个序列化器：

from rest_framework.serializers import ModelSerializer
from .models import *class OrderSer(ModelSerializer):class Meta:model = WorkOrderfields = '__all__'

由于django序列化出来的类不具备层级结构，所以我们提前在views.py中写好一个用来递归的方法：

def xTree(datas):lists = []tree = {}parent_id = ''for i in datas:item = iprint(item)tree[item['id']] = itemroot = Nonefor i in datas:obj = iif not obj['pid']:root = tree[obj['id']]lists.append(root)else:parent_id = obj['pid']if 'childlist' not in tree[parent_id]:tree[parent_id]['childlist'] = []tree[parent_id]['childlist'].append(tree[obj['id']])return lists

此时我们再写一个视图接口，从数据库中读取数据就可以了

class MyTree(APIView):def get(self, request):# 获取订单列表orderlist = WorkOrder.objects.all()# 序列化orderlist_ser = OrderSer(orderlist, many=True)mylist = xTree(orderlist_ser.data)# print(mylist)return Response(mylist)

最后为咱们的视图添加路由

from userapp.views import *urlpatterns = [path('admin/', admin.site.urls),path('mytree/', MyTree.as_view()),
]

好了，以上就是我们后端的代码

然后我们向数据库添加测试数据

在这里插入图片描述

Postman测试后端接口：

在这里插入图片描述

perfect！！！

接下来我们再说说前端：

打开vue项目，封装一个WXJcate.vue递归组件

所谓递归组件: 就是组件可以在它们自己的模板中调用自身，不过它们只能通过 name 选项来做这件事，例如给组件设置属性 name: ‘WorkOrder.vue’，然后在模板中就可以使用 WorkOrder调用自己进行递归调用了

<template><div><ul><div :class="[data.id==0 ? 'root': '', 'workorder']">{{ data.name }}</div><ol v-if="data.childlist && data.childlist.length>0"><workorder v-for="child in data.childlist" :key="child.id" :data="child"/></ol></ul></div>
</template><script>export default {name: 'workorder', // 递归组件需要设置 name 属性，才能在模板中调用自己props:['data'],};
</script><style >.workorder {padding-left: 8px;border-left: 1px solid gray;}ul {padding-left: 20px;list-style: none;}.root { display: none; }</style>

然后就可以在其他页面中调用这个递归组件

在order_Index.vue调用递归组件并请求后端的数据：

<template><div><!--  添加分类数据  --><div>工单项目名称: <input type="text" v-model="name">父级分类：<select v-model="pid"><option value="0">主项目</option><option :value='order.id' v-for="order in order_list" :key="order.id">{{order.name}}</option></select><button @click="btn">添加</button></div><!--  展示分类数据  --> <div><workorder :data="data" /></div></div>
</template><script>import workorder from './workorder.vue';export default {data () {return {data:{},online: 0,order_list:[],name:'',pid:''}},components: {workorder},//钩子方法mounted:function(){this.get_data();this.get_order_list()},//绑定事件methods:{get_data(){this.$axios.get('mytree/').then((res) =>{console.log(res.data);var mytree = {'id':0,name:'123'};mytree['childlist'] = res.data;this.data = mytree;});},get_order_list(){this.$axios.get('order/').then(res=>{this.order_list = res.dataconsole.log(res.data)})},btn(){let fdata =new FormData()fdata.append('name',this.name)fdata.append('pid',this.pid)this.$axios.post('order/',fdata).then(res=>{alert('添加成功')this.$router.go(0)console.log(fdata)})}}}
</script><style>.on {background: #cdcbff;}.off {background: #fefdff;}
</style>