DAY105 - 路飞学城(二）- 路飞学城之emement-ui、课程列表分页，课程详情

一、emement-ui

1.下载

npm install element-ui

2.使用

# main.js中配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

二、专题课程表

# models.py
from django.db import models
from django.contrib.contenttypes.models import ContentType
from django.contrib.contenttypes.fields import GenericForeignKey

from django.contrib.contenttypes.fields import GenericRelation


# Create your models here.


class Course(models.Model):
    """专题课程"""
    # unique=True 唯一性约束
    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, '高级'))
    # 默认值为1 ,中级
    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)
    # help_text 在admin中显示的帮助信息
    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)
    # 推荐课程
    # related_name 基于对象的反向查询,用于替换表名小写_set
    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):
    """价格与有课程效期表"""
    content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE)  # 关联course or degree_course
    object_id = models.PositiveIntegerField()
    content_object = GenericForeignKey('content_type', 'object_id')

    # 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)
    price = models.FloatField()

    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 = "讲师"

三、vue绑定图片

<el-carousel-item v-for="img in imgs">
      <img :src="img">
</el-carousel-item>

四、 vue页面挂载时执行方法

mounted:function () {
    //init()为methods中定义的方法
    this.init()
}
// 或
created: function () {
    this.init()
}

五、课程列表

<!--分页-->
<div class="block">
    <span class="demonstration">内容</span>
    <el-pagination
              layout="prev, pager, next"
              :total=count
              :page-size="1" 
              :current-page=currentpage
              @current-change="current">
        <!--
            :page-size:每页多少数据
            :total:每页多少数据
            :current-page：当前页
            @current-change：当前页改变时会触发
        -->
    </el-pagination>
</div>

<script>
methods: {
    current: function (currentpage) {
        this.currentPage=currentpage;
        let _this = this;
        this.$http.request({
            url: _this.$url + '/course/?p='+this.currentPage,
            methods: 'get'
        }).then(function (response) {
            _this.count = response.data.count;
            _this.courses = response.data.results.data;
        })
    }
}
</script>

六、 课程详情页面

<!--路由携带参数跳转-->
<!--name:是路由中配置的name-->
<router-link :to="{'name':'courseDetail','params':{'id':course.id}}">详情</router-link>

// router.js
{
    path: '/coursedetail/:id',
    name: 'coursedetail',
    component: CourseDetail
},


// 取值
this.$route.params.id