广告位

django无限分类

您现在的位置是:主页 > 编程 >

2021年9月25日 11:28编程 > 222人已围观

简介 很多网站的首页上都会展示很多的分类,诸如:京东,淘宝,C站等等,都是利用Django模型中的自关联做的,今天做一期无限级分类的Blog! 定义了一个基本的模型用于继承(创建时间和更新时间)...

很多网站的首页上都会展示很多的分类,诸如:京东,淘宝,C站等等,都是利用Django模型中的自关联做的,今天做一期无限级分类的Blog!


?模型创建

定义了一个基本的模型用于继承(创建时间和更新时间)

from django.db import models

# Create your models here.


class BaseModel(models.Model):

    create_time = models.DateTimeField(auto_now_add=True)

    update_time = models.DateTimeField(auto_now=True)


    class Meta:

        abstract = True


class Cart(BaseModel):

    name = models.CharField(max_length=50)

    parent = models.ForeignKey('self', on_delete=models.CASCADE, null=True, blank=True, related_name='son')

    level = models.IntegerField(null=True, blank=True)

    top_parent = models.IntegerField(null=True, blank=True)


    class Meta:

        db_table = 'cart'


?功能实现

根据前端所需要的数据来构造数据


from rest_framework.response import Response

from rest_framework.views import APIView

from .models import Cart

from .serializer import CartSerializer


def getCart(carts):

    """

    解析分类

    """

    dict = {}

    list = []

    for i in carts:

        dict[i['id']] = i

    for j in carts:

        parent_id = j['parent']

        if parent_id:

            if 'son' not in dict[parent_id]:

                dict[parent_id]['son'] = []

            dict[parent_id]['son'].append(j)

        else:

            list.append(j)

    return list



class CartView(APIView):

    """

    获取分类

    """


    def get(self, request):

        # 查询分类

        cart_obj = Cart.objects.all()

        cart_ser = CartSerializer(cart_obj, many=True)

        cart_list = getCart(cart_ser.data)

        return Response({'code': 200, 'cartList': cart_list})


?路由配置

"""

Including another URLconf

    1. Import the include() function: from django.urls import include, path

    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))

"""

from django.urls import path

from . import views


urlpatterns = [

    path('home/', views.CartView.as_view())  # 首页分类接口

]


?前端功能

用vue-cli脚手架


<template>

  <div>

    <h3>无限级分类展示</h3>

    <div v-for="i in cart_list">

      <p v-for="j in i.son">

        <span>{{ i.name }}</span> &emsp;

        <span>{{ j.name }}</span>&emsp;

        <span v-for="k in j.son">{{ k.name }}</span>&emsp;

      </p>

    </div>

  </div>

</template>


<script>


  export default {

    data() {

      return {

        cart_list: []

      }

    },

    methods: {

      getCart() {

        this.axios.get('cart/home/',).then(res => {

          this.cart_list = res.data.cartList

        })

      }

    },

    mounted() {

      this.getCart()

    }

  }

</script>


?效果展示

主要是实现后端功能,页面效果可忽略!




?总结

  利用django模型提供的自关联构造首页数据,一级分类下面嵌套二级分类,二级分类下面嵌套三级等等,利用**related_name**实现向下查找即可!!!



Tags: django  无限分类 

广告位
    广告位
    广告位

站点信息

  • 文章统计112篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们