一、前端代码

　　1，父组件free_course.vue

　　父组件的css

　　2，子组件filter.vue

　　子组件的css

　　二、后端代码

　　settings.py配置

REST_FRAMEWORK = {    #过滤组件    'DEFAULT_FILTER_BACKENDS': ('django_filters.rest_framework.DjangoFilterBackend',                                # 解决过滤组件和排序组件之间的覆盖问题                                'rest_framework.filters.OrderingFilter'),}

　　views.py 

class StandardPageNumberPagination(PageNumberPagination):     page_size_query_param = 'page_size'     max_page_size = 1

class CourseView(ListAPIView):    queryset = Course.objects.filter(status=0,is_delete=False).order_by('orders')    serializer_class = CourseModelSeralizer    #设置过滤字段    filter_fields = ('course_category',)    #必须把这个删掉，它和后面的排序字段冲突    # filter_backends = [OrderingFilter]    ordering_fields = ('id', 'students', 'price')    pagination_class = StandardPageNumberPagination

　　serializer.py

from rest_framework import serializersfrom .models import *class CourseClassifyModelSerializer(serializers.ModelSerializer):    class Meta:        model=CourseClassify        fields=('id','name',)class TeacherModelSerializer(serializers.ModelSerializer):    class Meta:        model=Teacher        fields=['name','role','image','brief']class CourseLessonModelSerializer(serializers.ModelSerializer):    class Meta:        model=CourseLesson        fields = [ 'name', 'section_link','duration','free_trail','orders']class CourseChapterModelSerializer(serializers.ModelSerializer):    coursesections=CourseLessonModelSerializer(many=True)    class Meta:        model=CourseChapter        fields=['chapter','name','coursesections']class PriceServicesModelSerializer(serializers.ModelSerializer):    """价格服务策略序列化器"""    class Meta:        model = PriceService        fields = ("condition","sale",'remaintime')class PriceServiceTypeModelSerializer(serializers.ModelSerializer):    """价格服务类型序列化器"""    priceservices = PriceServicesModelSerializer(many=True)    # priceservices 价格策略    class Meta:        model = PriceServiceType        fields = ("id","name","priceservices")class CourseModelSeralizer(serializers.ModelSerializer):    teacher=TeacherModelSerializer()    coursechapters=CourseChapterModelSerializer(many=True)    price_service_type=PriceServiceTypeModelSerializer()    class Meta:        model=Course        fields=['id','name','course_img','students','brief_url','levels','lessons','pub_lessons','price','teacher','coursechapters','price_service_type','current_price']