目录

一、实现思路总结

1-1 实现样式

1-2 前端发送分页数据和课程请求

1-3 后台路由接收，执行视图函数

1-4 序列化组件校验规则

1-5 通用状态类

1-6 返回前端的数据查询

 1-7 前端获取数据并渲染页面

二、前端代码

一、实现思路总结

1-1 实现样式

1-2 前端发送分页数据和课程请求

1-3 后台路由接收，执行视图函数

class Course(ViewSetMixin, APIView):

    def get_list(self, request, *args, **kwargs):
        '''
        页面加载发送请求，后台首先执行的视图函数
            - response返回执行状态
            从get中获取sub_category内，即前端返回的数据。
            若返回的数据不为空，则进入数据库进行校验，过滤出对象。
            过滤出的对象使用DRF的序列化组件，并将其放在response内返回前台
        '''
        # 实例化MyResponse，即生成结束字典
        response = MyResponse()

        course_list = models.Course.objects.all()
        # 实现过滤查询，sub_category为前端传输数据名
        param = request.GET.get('sub_category', None)

        # 前端接受数据为字符串'0'则不为空
        param = int(param)
        if param:
            course_list = course_list.filter(category_id=param)
        course_ser = MySerializers.CourseSerializer(instance=course_list, many=True)

        # 获取课程类别，加入response对象内，返回前端
        category_list = models.CourseCategory.objects.all()
        category_ser = MySerializers.CourseCategorySerializer(instance=category_list, many=True)

        response.msg = '查询成功'
        response.data = course_ser.data
        response.category = category_ser.data

        return Response(response.get_dic)

 

1-4 序列化组件校验规则

from rest_framework import serializers
from LearnOnline import models


class CourseSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Course
        fields = '__all__'


class CourseCategorySerializer(serializers.ModelSerializer):
    class Meta:
        model = models.CourseCategory
        fields = '__all__'

1-5 通用状态类

class MyResponse():
    '''
    通用的返回类，实例化后可以将内部的属性变成字典形式传输；
    即，{status='100',msg=None}
    使用get_dic方法可以获取字典
    '''
    def __init__(self):
        self.status = 100
        self.msg = None

    @property
    def get_dic(self):
        return self.__dict__

1-6 返回前端的数据查询

 1-7 前端获取数据并渲染页面

二、前端代码

 

<template>
    <div class="course">
        <h3>免费课程展示页</h3>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="courcategory in course_category">
                <!--<span slot="label" @click="init(courcategory.id)"> {{courcategory.name}}</span>-->
                <span slot="label" @click="init(courcategory.nid)"> {{courcategory.name}}</span>
                <el-row>
                    <el-col :span="8" v-for="course in courses">
                        <el-card :body-style="{ padding: '0px' }">
                            <img :src="course.course_img" class="image">
                            <div style="padding: 14px;">
                                <span>{{course.name}}</span>
                                <div class="bottom clearfix">
                                    <el-button type="text" class="button">
                                        <!--跳转路由courseDetail，携带参数params，注意params key名不可变-->
                                        <router-link :to="{'name':'courseDetail','params':{'id':course.id}}">详情
                                        </router-link>
                                        <!--<router-link to="/courseDetail">课程详情</router-link>-->
                                    </el-button>
                                </div>

                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>

        </el-tabs>


    </div>

</template>

<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>

<script>
    export default {
        data: function () {
            return {
                courses: [],
                currentDate: new Date(),
                //默认前台分类数据，可以通过后台传输
                // course_category: [{'id': '0', 'name': '全部'},{'id': '1', 'name': 'python'}, {'id': '2', 'name': 'java'}, {
                //     'id': '3',
                //     'name': 'C语言'
                // }],
                course_category: [],
            };
        },
        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;
                    _this.course_category = response.data.category;

                }).catch(function (response) {
                    console.log(response)
                })

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

        }
    }
</script>