课程列表页

课程列表页

分页显示数据

from rest_framework.pagination import PageNumberPagination
​
class StandardPageNumberPagination(PageNumberPagination):
    page_size_query_param = 'page_size'
    max_page_size = 1
​
class CourseAPIView(ListAPIView):
    queryset = Course.objects.filter(status=0).order_by("-orders","-students")
    # 设置过滤的字段
    filter_fields = ('course_category',)
    serializer_class = CourseSerializer
    filter_backends = [OrderingFilter]
    ordering_fields = ('id', 'students', 'price', 'course_category')
    pagination_class = StandardPageNumberPagination

客户端请求后端发送数据

<template>
  <div class="course">
    <Header/>
    <div class="main">
      <!-- 筛选功能 -->
      <div class="top">
        ....
      <!-- 课程列表 --->
      <div class="list">
        。。。。
      </div>
      <div class="pagination">
        <!-- 必须设置page-size属性，total值的改变才会有效果 -->
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="query_params.current_page"
          background
          layout="prev, pager, next"
          :page-size="course_page_size"
          :total="course_count">
        </el-pagination>
      </div>
    </div>
    <Footer/>
  </div>
</template>
​
<script>
import Header from "./common/Header"
import Footer from "./common/Footer"
export default {
  name: "Course",
  data(){
    return {
      catetory_list:[],
      course_list:[],
      course_count: 0,
      course_page_size:1,
      query_params:{
        course_category: 0,
        ordering:"-id",
        current_page: 1,
      }
    }
  },
  watch:{
    // 每次点击不同课程时,要重新获取课程列表
    "query_params.course_category":function(){
       this.get_course_list();
       // 当切换分类的时候,重置页码
       this.query_params.current_page = 1;
    },
    "query_params.ordering":function(){
       // 当切换排序条件的时候,重置页码
       // this.query_params.current_page = 1;
       this.get_course_list();
    },
    "query_params.current_page":function(){
       this.get_course_list();
    }
  },
  components: {Header, Footer},
  created(){
    // 获取课程分类
    this.$axios.get(this.$settings.Host+"/courses/cate/").then(response=>{
      this.catetory_list = response.data
    }).catch(error=>{
      console.log(error.response)
    });
​
    // 获取课程信息
    this.get_course_list()
​
  },
  methods:{
    select_ordering(selector){
      // 默认排序
      if(this.query_params.ordering==('-'+selector) ){
        this.query_params.ordering = selector;
      }else{
        this.query_params.ordering = '-'+selector;
      }
    },
    get_course_list(){
      let query_params = {
        ordering:this.query_params.ordering,
        page:this.query_params.current_page,
      };
​
      if( this.query_params.course_category != 0 ){
        query_params.course_category = this.query_params.course_category;
      }
​
      this.$axios.get(this.$settings.Host+"/courses/list/",{
        params: query_params
      }).then(response=>{
        // 课程列表
        this.course_list = response.data.results;
        // 课程总数量
        this.course_count = response.data.count;
​
      }).catch(error=>{
        console.log(error.response)
      });
    },
    handleCurrentChange(page){
      // 页码发生改变
      this.query_params.current_page = page;
    }
  }
}
</script>
​
<style scoped>
...
.pagination{
  text-align: center;
  margin: 20px 0px 50px 0px;
}
</style>

 

 

 

课程详情页

CKEditor富文本编辑器

富文本即具备丰富样式格式的文本。在运营后台，运营人员需要录入课程的相关描述，可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带html格式的文本，我们引入富文本编辑器。

富文本编辑器：ueditor、ckeditor、kindeditor

1. 安装

pip install django-ckeditor

2. 添加应用

在INSTALLED_APPS中添加

INSTALLED_APPS = [
    ...
    'ckeditor',  # 富文本编辑器
    'ckeditor_uploader',  # 富文本编辑器上传图片模块
    ...
]

3. 添加CKEditor设置

在settings/dev.py中添加

# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',  # 工具条功能
        'height': 300,      # 编辑器高度
        # 'width': 300,     # 编辑器宽
    },
}
CKEDITOR_UPLOAD_PATH = ''  # 上传图片保存路径，留空则调用django的文件上传功能

4. 添加ckeditor路由

在总路由中添加

path(r'^ckeditor/', include('ckeditor_uploader.urls')),

5. 为模型类添加字段

ckeditor提供了两种类型的Django模型类字段

• ckeditor.fields.RichTextField 不支持上传文件的富文本字段

• ckeditor_uploader.fields.RichTextUploadingField 支持上传文件的富文本字段\

修改course/models.py里面的字段信息,记得要重新数据迁移

from ckeditor_uploader.fields import RichTextUploadingField
class Course(models.Model):
    """
    专题课程
    """
    ...
    
    brief = RichTextUploadingField(max_length=2048, verbose_name="课程概述", null=True, blank=True)
    

效果：

 

 

课程详情页显示

因为接下来的组件中使用了vue-video视频播放组件，所以我们需要先预安装。

安装依赖

npm install vue-video-player --save

在main.js中注册加载组件

require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);

 

Detail.vue组件代码：

<template>
    <div class="detail">
    <Header></Header>
    <div class="warp">
        <div class="course-info">
          <div class="warp-left" style="width: 690px;height: 388px;background-color: #000;">
          </div>
          <div class="warp-right">
              <h3 class="course-title">Python开发21天入门</h3>
              <p class="course-data">37400人在学&nbsp;&nbsp;&nbsp;&nbsp;课程总时长：154课时/30小时&nbsp;&nbsp;&nbsp;&nbsp;难度：初级</p>
              <div class="preferential">
                <p class="price-service">限时免费</p>
                <p class="timer">距离结束：仅剩 28天 14小时 10分 <span>57</span> 秒</p>
              </div>
              <p class="course-price">
                <span>活动价</span>
                <span class="real-price">¥0.00</span>
                <span class="old-price">¥9.00</span>
              </p>
              <div class="buy-course">
                <p class="buy-btn">
                  <span class="btn1">立即购买</span>
                  <span class="btn2">免费试学</span>
                </p>
                <p class="add-cart">
                  <img src="../../static/images/cart.svg" alt="">加入购物车
                </p>
              </div>
          </div>
        </div>
        <div class="course-tab">
            <ul>
                <li  class="active">详情介绍</li>
                <li>课程章节 <span>(试学)</span></li>
                <li>用户评论 (83)</li>
                <li>常见问题</li>
            </ul>
        </div>
        <div class="course-section">
          <section class="course-section-left">
            <img src="../../static/images/21天01_1547098127.6672518.jpeg" alt="">
          </section>
​
        </div>
    </div>
    <Footer></Footer>
    </div>
</template>
​
<script>
import Header from "./common/Header"
import Footer from "./common/Footer"
export default {
  name: 'CourseDetail',
  data(){
    return {
​
    }
  },
  components:{
    Header,
    Footer