Luffy商城项目第十二天

标签：第十二天 ordering price filter course 课程 nbsp Luffy 商城

1 课程详情页接口

 

2 课程列表前端

 

3 课程详细前端

 

3.1 视频播放器 课程详情页前端 vue

3.2 视频托管

4 搜索导航栏

 

5 搜索后台接口

 

6 搜索前端页面

 

内容详细

1 课程详情页接口

1 课程详情接口

2 课程章节接口---》章节下有课时

 -查询所有章节接口，带按课程id号过滤的功能

    -http://127.0.0.1:8000/api/v1/course/chapter/?course=2

视图类

 

class CourseChapterView(GenericViewSet, CommonListModelMixin):

    queryset = CourseChapter.objects.all().filter(is_delete=False, is_show=True).order_by('orders')

    serializer_class = CourseChapterSerializer

    filter_backends = [DjangoFilterBackend]

    filterset_fields = ['course']

序列化类

 

class CourseSectionSerializer(serializers.ModelSerializer):

    class Meta:

        model = CourseSection

        fields = '__all__'

 

 

class CourseChapterSerializer(serializers.ModelSerializer):

    # 三种：序列化类中写，表模型中写，子序列化

    # 一个章节下，有很多课时，课时是多条，子序列化的时候，一定不要忘了many=True

    coursesections = CourseSectionSerializer(many=True)

 

    class Meta:

        model = CourseChapter

        fields = ['id', 'chapter', 'name', 'summary', 'coursesections']

路由

 

router.register('chapter', views.CourseChapterView, 'chapter')

2 课程列表前端

<template>

  <div class="course">

    <Header></Header>

    <div class="main">

      <!-- 筛选条件 -->

      <div class="condition">

        <ul class="cate-list">

          <li class="title">课程分类:</li>

          <li :class="filter.course_category==0?'this':''" @click="filter.course_category=0">全部</li>

          <li :class="filter.course_category==category.id?'this':''" v-for="category in category_list"

              @click="filter.course_category=category.id" :key="category.name">{{ category.name }}

          </li>

        </ul>

 

        <div class="ordering">

          <ul>

            <li class="title">筛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选:</li>

            <li class="default" :class="(filter.ordering=='id' || filter.ordering=='-id')?'this':''"

                @click="filter.ordering='orders'">默认

            </li>

            <li class="hot" :class="(filter.ordering=='students' || filter.ordering=='-students')?'this':''"

                @click="filter.ordering=(filter.ordering=='-students'?'students':'-students')">人气

            </li>

            <li class="price"

                :class="filter.ordering=='price'?'price_up this':(filter.ordering=='-price'?'price_down this':'')"

                @click="filter.ordering=(filter.ordering=='-price'?'price':'-price')">价格

            </li>

          </ul>

          <p class="condition-result">共{{ course_total }}个课程</p>

        </div>

 

      </div>

      <!-- 课程列表 -->

      <div class="course-list">

        <div class="course-item" v-for="course in course_list" :key="course.name">

          <div class="course-image">

            <img :src="course.course_img" alt="">

          </div>

          <div class="course-info">

            <h3>

              <router-link :to="'/free/detail/'+course.id">{{ course.name }}</router-link>

              <span><img src="@/assets/img/avatar1.svg" alt="">{{ course.students }}人已加入学习</span></h3>

            <p class="teather-info">

              {{ course.teacher.name }} {{ course.teacher.title }} {{ course.teacher.signature }}

              <span

                  v-if="course.sections>course.pub_sections">共{{ course.sections }}课时/已更新{{ course.pub_sections }}课时</span>

              <span v-else>共{{ course.sections }}课时/更新完成</span>

            </p>

            <ul class="section-list">

              <li v-for="(section, key) in course.section_list" :key="section.name"><span

                  class="section-title">0{{ key + 1 }} | {{ section.name }}</span>

                <span class="free" v-if="section.free_trail">免费</span></li>

            </ul>

            <div class="pay-box">

              <div v-if="course.discount_type">

                <span class="discount-type">{{ course.discount_type }}</span>

                <span class="discount-price">￥{{ course.real_price }}元</span>

                <span class="original-price">原价：{{ course.price }}元</span>

              </div>

              <span v-else class="discount-price">￥{{ course.price }}元</span>

              <span class="buy-now">立即购买</span>

            </div>

          </div>

        </div>

      </div>

      <div class="course_pagination block">

        <el-pagination

            @size-change="handleSizeChange"

            @current-change="handleCurrentChange"

            :current-page.sync="filter.page"

            :page-sizes="[2, 3, 5, 10]"

            :page-size="filter.page_size"

            layout="sizes, prev, pager, next"

            :total="course_total">

        </el-pagination>

      </div>

    </div>

    <Footer></Footer>

  </div>

</template>

 

<script>

import Header from "@/components/Header"

import Footer from "@/components/Footer"

 

export default {

  name: "Course",

  data() {

    return {

      category_list: [], // 课程分类列表

      course_list: [], // 课程列表

      course_total: 0, // 当前课程的总数量

      filter: {

        course_category: 0, // 当前用户选择的课程分类，刚进入页面默认为全部，值为0

        ordering: "orders", // 数据的排序方式，默认值是orders，表示对于id进行降序排列

   

标签：第十二天,ordering,price,filter,course,课程,nbsp,Luffy,商城
From： https://www.cnblogs.com/scx-xiaochun/p/16909491.html