课程列表接口，课程详情接口
先在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方法：
