一 vue前端代碼

實現的內容,通過對課程的分類,在每個不同的課程分類下顯示相應的內容

<template>
    <div class="course">
        <h1>我是課程</h1>
        <el-tabs type="border-card">
            <el-tab-pane v-for="ca in course_category">
                <span slot="label" @click="init(ca.id)">
 
 {{ca.name}}</span>
                <el-row>
                    <el-col :span="8" v-for="course in courses">
                        <el-card :body-style="{ padding: ‘0px‘ }">
                            <img :src=‘course.course_img.course_img‘ class="image">
                            <
 
div style="padding: 14px;">
                                <span>{{course.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{ currentDate }}</time>
                                    <
 
el-button type="text" class="button">
                                        <router-link :to="{‘name‘:‘courseDetail‘,‘params‘:{‘id‘:course.id}}">詳情
                                        </router-link>
                                    </el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                courses: [],
                currentDate: new Date(),
                course_category: [{‘name‘: ‘全部‘, ‘id‘: 0},{‘name‘: ‘django‘, ‘id‘: 1}, {‘name‘: ‘linux‘, ‘id‘: 2}, {‘name‘: ‘go‘, ‘id‘: 3}]
            }
        },
        methods: {
            init: function (category=0) {
                let _this = this;
                this.$http.request({
                    url: this.$url + ‘course/‘+‘?sub_category=‘+category,
                    method: ‘get‘
                }).then(function (response) {
                    console.log(response.data);
                    _this.courses = response.data.data

                })
            }
        },
        mounted: function () {
            this.init()
        }

    }


</script>

<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>

序列化

class CourseCategorySerializer(serializers.ModelSerializer):
    class Meta:
        model = models.CourseDetail
        fields = ‘__all__‘

    course_name = serializers.CharField(source=‘course.name‘)
    recommend_courses = serializers.SerializerMethodField()

    def get_recommend_courses(self, obj):
        return [{‘id‘: course.pk, ‘name‘: course.name} for course in obj.recommend_courses.all()]

後臺代碼

from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from app01 import models
from app01.utils.commonUtils import MyResponse
from app01.mySer import CourseSerializer, CourseDetailSerializer
from rest_framework.viewsets import ViewSetMixin

from django.core.exceptions import ObjectDoesNotExist
from django.conf import settings

from rest_framework.pagination import LimitOffsetPagination


# Create your views here.

class Course(ViewSetMixin, APIView):
    def get_course(self, request, *args, **kwargs):

        response = MyResponse()
        param = request.GET.get(‘sub_category‘, None)
        print(param)
        # course_list = models.Course.objects.all()
        # 加分頁器
        # page = LimitOffsetPagination()
        # page.default_limit=2
        # page.max_limit=3
        # page_list = page.paginate_queryset(course_list,request,self)
        course_list = models.Course.objects.all()
        param = int(param)
        if param:

            if param == 0:
                course_list = models.Course.objects.all()
            else:
                course_list = models.Course.objects.filter(category_id=param).all()

        course_ser = CourseSerializer(instance=course_list, many=True)
        response.msg = ‘查詢成功‘
        response.data = course_ser.data
        print(response.get_dic)

        return Response(response.get_dic)

django-vue之信息過濾(過濾課程)