课程列表接口，课程详情接口

先在models中建几张表结构：

from django.db import models
from django.contrib.contenttypes.models import ContentType
from django.contrib.contenttypes.fields import GenericForeignKey, GenericRelation

# Create your models here.
# class CourseType(models.Model):
#     type_name = models.CharField(verbose_name='课程类别',max_length=32)
# class Course(models.Model):
#     title = models.CharField(verbose_name='课程名称',max_length=32)
#     course_info = models.CharField(verbose_name='课程描述',max_length=128)
#     student_num = models.IntegerField()
#     choice = ((1,'初级'),(2,'中级'),(3,'高级'))
#     student_level = models.IntegerField(verbose_name='级别',choices=choice)
#     course_price = models.IntegerField()
# class CourseDetail(models.Model):
#     course = models.OneToOneField(to='Course')
#     contents = models.CharField(verbose_name='所学内容',max_length=128)
#     time = models.CharField(verbose_name='时长',max_length=32)
#     choice = ((1, '初级'), (2, '中级'), (3, '高级'))
#     student_level = models.IntegerField(verbose_name='级别', choices=choice)
#     student_num = models.IntegerField()
#     score = models.IntegerField()
#     recommended_courses = models.CharField(verbose_name='推荐课程',max_length=32)
# class Price(models.Model):
#     old_price = models.IntegerField(verbose_name='原价')
#     now_price = models.IntegerField(verbose_name='现价')
#     content_type = models.ForeignKey(to=ContentType)
#     object_id = models.PositiveIntegerField()
#     content_object = GenericForeignKey("content_type", "object_id")
# class CourseChapter(models.Model):
#     course_detail = models.ForeignKey(to='CourseDetail')
#
# class ClassHours(models.Model):
#     course_chapter = models.OneToOneField(to='CourseChapter')
#
# class questions(models.Model):
#     content_type = models.ForeignKey(to=ContentType)
#     object_id = models.PositiveIntegerField()
#     content_object = GenericForeignKey("content_type", "object_id")
# class teacher(models.Model):
#     name = models.CharField(verbose_name='姓名',max_length=32)
#     choice = ((1,'男'),(2,'女'))
#     sex = models.IntegerField(verbose_name='性别',choices=choice)
class Course(models.Model):
    """专题课程"""

    name = models.CharField(max_length=128, unique=True)
    course_img = models.CharField(max_length=255)
    brief = models.TextField(verbose_name="课程概述", max_length=2048)

    level_choices = ((0, '初级'), (1, '中级'), (2, '高级'))
    level = models.SmallIntegerField(choices=level_choices, default=1)
    pub_date = models.DateField(verbose_name="发布日期", blank=True, null=True)
    period = models.PositiveIntegerField(verbose_name="建议学习周期(days)", default=7)
    order = models.IntegerField("课程顺序", help_text="从上一个课程数字往后排")

    status_choices = ((0, '上线'), (1, '下线'), (2, '预上线'))
    status = models.SmallIntegerField(choices=status_choices, default=0)
    # 用于GenericForeignKey反向查询，不会生成表字段，切勿删除
    price_policy = GenericRelation("PricePolicy")

    def __str__(self):
        return self.name

    class Meta:
        verbose_name_plural = "专题课"


class CourseDetail(models.Model):
    """课程详情页内容"""
    course = models.OneToOneField("Course", on_delete=models.CASCADE)
    hours = models.IntegerField("课时")
    # 课程的标语 口号
    course_slogan = models.CharField(max_length=125, blank=True, null=True)
    # video_brief_link = models.CharField(verbose_name='课程介绍', max_length=255, blank=True, null=True)
    # why_study = models.TextField(verbose_name="为什么学习这门课程")
    # what_to_study_brief = models.TextField(verbose_name="我将学到哪些内容")
    # career_improvement = models.TextField(verbose_name="此项目如何有助于我的职业生涯")
    # prerequisite = models.TextField(verbose_name="课程先修要求", max_length=1024)
    # 推荐课程
    recommend_courses = models.ManyToManyField("Course", related_name="recommend_by", blank=True)
    teachers = models.ManyToManyField("Teacher", verbose_name="课程讲师")

    def __str__(self):
        return "%s" % self.course

    class Meta:
        verbose_name_plural = "课程详细"


class PricePolicy(models.Model):
    """价格与有课程效期表"""
    price = models.FloatField()


    # course = models.ForeignKey("Course")
    valid_period_choices = ((1, '1天'), (3, '3天'),
                            (7, '1周'), (14, '2周'),
                            (30, '1个月'),
                            (60, '2个月'),
                            (90, '3个月'),
                            (180, '6个月'), (210, '12个月'),
                            (540, '18个月'), (720, '24个月'),
                            )
    valid_period = models.SmallIntegerField(choices=valid_period_choices)

    content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE)  # 关联course or degree_course
    object_id = models.PositiveIntegerField()
    content_object = GenericForeignKey('content_type', 'object_id')


    class Meta:
        unique_together = ("content_type", 'object_id', "valid_period")
        verbose_name_plural = "价格策略"


    def __str__(self):
        return "%s(%s)%s" % (self.content_object, self.get_valid_period_display(), self.price)


class Teacher(models.Model):
    """讲师、导师表"""
    name = models.CharField(max_length=32)
    image = models.CharField(max_length=128)
    brief = models.TextField(max_length=1024)

    def __str__(self):
        return self.name

    class Meta:
        verbose_name_plural = "讲师"

数据库迁移后录入数据，

课程列表接口

在view中写视图函数

然后写序列化

在写url：

前端发送axios请求：

 在发送请求时会遇到跨域问题，这时候在后端写一个中间件：

from django.utils.deprecation import MiddlewareMixin
class MyCore(MiddlewareMixin):
    def process_response(self, request, response):
        # 简单请求
        response['Access-Control-Allow-Origin'] = "*"
        if request.method == "OPTIONS":
            # 复杂请求
            response['Access-Control-Allow-Headers'] = "Content-Type"
            response['Access-Control-Allow-Methods'] = "POST, DELETE, PUT"
        return response

剩下的就是在前端搭页面取数据了。

 课程详情页面

当我们点击页面上某一个具体的课程的时候，就会跳转到课程的具体页面信息。

我们可以在页面上使用router-link方法或者click点击事件实现组件的跳转。

先来说router-link方法，在router中写路由，

然后组件中写router-link，

然后就是写coursedetail组件。

再说click方法，

然后再课程详情的组件中发送axios请求

然后再后端写我们的coursedetail的视图函数了

序列化组件，

class CourseDetailSerializer(serializers.ModelSerializer):
    course_name = serializers.CharField(source='course.name')
    teachers = serializers.SerializerMethodField()
    recommend_courses = serializers.SerializerMethodField()
    price_policy = serializers.SerializerMethodField()
    level = serializers.SerializerMethodField()
    def get_level(self,obj):
        return obj.course.get_level_display()
    def get_price_policy(self,obj):
        temp = []
        for price_obj in obj.course.price_policy.all():
            temp.append({
                'price_pk':price_obj.pk,
                'price':price_obj.price,
                'valid_period':price_obj.valid_period,
                'valid_period_text':price_obj.get_valid_period_display()
            })
        return temp
    def get_recommend_courses(self,obj):
        temp=[]
        for course in obj.recommend_courses.all():
            temp.append({
                'pk':course.pk,
                'name':course.name,
                'course_detail_pk':course.coursedetail.pk
            })
        return temp

    def get_teachers(self,obj):
        temp=[]
        for teacher in obj.teachers.all():
            temp.append({
                'pk':teacher.pk,
                'name':teacher.name
            })
        return temp

    class Meta:
        model = CourseDetail
        fields = '__all__'

如果我们想在页面上拿到自己想要的结果，就需要在序列化的时候重新定义字段，就像上面一样。

在详情页面中有一个字段是推荐课程，当我们点击某一个推荐课程时，就跳到具体的课程信息。这个功能怎么实现？

同样是有两种方法，利用watch监听路由变化或者click事件

watch方法：