免費課頁面前端搭建和後端課程分類介面、課程群查介面設計

免費課頁面前端搭建點擊查看代碼 <template> <div class="course"> <Header></Header> <div class="main">  <div class="condition"> <ul class="cate-list"> <li ...

免費課頁面前端搭建

點擊查看代碼

<template>
    <div class="course">
        <Header></Header>
        <div class="main">
            <!-- 篩選條件 -->
            <div class="condition">
                <ul class="cate-list">
                    <li class="title">課程分類:</li>
                    <li class="this">全部</li>
                    <li>Python</li>
                    <li>Linux運維</li>
                    <li>Python進階</li>
                    <li>開發工具</li>
                    <li>Go語言</li>
                    <li>機器學習</li>
                    <li>技術生涯</li>
                </ul>

                <div class="ordering">
                    <ul>
                        <li class="title">篩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;選:</li>
                        <li class="default this">預設</li>
                        <li class="hot">人氣</li>
                        <li class="price">價格</li>
                    </ul>
                    <p class="condition-result">共21個課程</p>
                </div>

            </div>
            <!-- 課程列表 -->
            <div class="course-list">
                <div class="course-item">
                    <div class="course-image">
                        <img src="@/assets/img/course-cover.jpeg" alt="">
                    </div>
                    <div class="course-info">
                        <h3>Python開發21天入門 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入學習</span></h3>
                        <p class="teather-info">Alex 金角大王 老男孩Python教學總監 <span>共154課時/更新完成</span></p>
                        <ul class="lesson-list">
                            <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span> <span class="free">免費</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span></li>
                        </ul>
                        <div class="pay-box">
                            <span class="discount-type">限時免費</span>
                            <span class="discount-price">￥0.00元</span>
                            <span class="original-price">原價：9.00元</span>
                            <span class="buy-now">立即購買</span>
                        </div>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-image">
                        <img src="@/assets/img/course-cover.jpeg" alt="">
                    </div>
                    <div class="course-info">
                        <h3>Python開發21天入門 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入學習</span></h3>
                        <p class="teather-info">Alex 金角大王 老男孩Python教學總監 <span>共154課時/更新完成</span></p>
                        <ul class="lesson-list">
                            <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span> <span class="free">免費</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span></li>
                        </ul>
                        <div class="pay-box">
                            <span class="discount-type">限時免費</span>
                            <span class="discount-price">￥0.00元</span>
                            <span class="original-price">原價：9.00元</span>
                            <span class="buy-now">立即購買</span>
                        </div>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-image">
                        <img src="@/assets/img/course-cover.jpeg" alt="">
                    </div>
                    <div class="course-info">
                        <h3>Python開發21天入門 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入學習</span></h3>
                        <p class="teather-info">Alex 金角大王 老男孩Python教學總監 <span>共154課時/更新完成</span></p>
                        <ul class="lesson-list">
                            <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span> <span class="free">免費</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span></li>
                        </ul>
                        <div class="pay-box">
                            <span class="discount-type">限時免費</span>
                            <span class="discount-price">￥0.00元</span>
                            <span class="original-price">原價：9.00元</span>
                            <span class="buy-now">立即購買</span>
                        </div>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-image">
                        <img src="@/assets/img/course-cover.jpeg" alt="">
                    </div>
                    <div class="course-info">
                        <h3>Python開發21天入門 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入學習</span></h3>
                        <p class="teather-info">Alex 金角大王 老男孩Python教學總監 <span>共154課時/更新完成</span></p>
                        <ul class="lesson-list">
                            <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span> <span class="free">免費</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼</span></li>
                            <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span></li>
                        </ul>
                        <div class="pay-box">
                            <span class="discount-type">限時免費</span>
                            <span class="discount-price">￥0.00元</span>
                            <span class="original-price">原價：9.00元</span>
                            <span class="buy-now">立即購買</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<Footer></Footer>-->
    </div>
</template>

<script>
    import Header from "@/components/Header"
    // import Footer from "@/components/Footer"

    export default {
        name: "Course",
        data() {
            return {
                category: 0,
            }
        },
        components: {
            Header,
            // Footer,
        }
    }
</script>

<style scoped>
    .course {
        background: #f6f6f6;
    }

    .course .main {
        width: 1100px;
        margin: 35px auto 0;
    }

    .course .condition {
        margin-bottom: 35px;
        padding: 25px 30px 25px 20px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px 0 #f0f0f0;
    }

    .course .cate-list {
        border-bottom: 1px solid #333;
        border-bottom-color: rgba(51, 51, 51, .05);
        padding-bottom: 18px;
        margin-bottom: 17px;
    }

    .course .cate-list::after {
        content: "";
        display: block;
        clear: both;
    }

    .course .cate-list li {
        float: left;
        font-size: 16px;
        padding: 6px 15px;
        line-height: 16px;
        margin-left: 14px;
        position: relative;
        transition: all .3s ease;
        cursor: pointer;
        color: #4a4a4a;
        border: 1px solid transparent; /* transparent 透明 */
    }

    .course .cate-list .title {
        color: #888;
        margin-left: 0;
        letter-spacing: .36px;
        padding: 0;
        line-height: 28px;
    }

    .course .cate-list .this {
        color: #ffc210;
        border: 1px solid #ffc210 !important;
        border-radius: 30px;
    }

    .course .ordering::after {
        content: "";
        display: block;
        clear: both;
    }

    .course .ordering ul {
        float: left;
    }

    .course .ordering ul::after {
        content: "";
        display: block;
        clear: both;
    }

    .course .ordering .condition-result {
        float: right;
        font-size: 14px;
        color: #9b9b9b;
        line-height: 28px;
    }

    .course .ordering ul li {
        float: left;
        padding: 6px 15px;
        line-height: 16px;
        margin-left: 14px;
        position: relative;
        transition: all .3s ease;
        cursor: pointer;
        color: #4a4a4a;
    }

    .course .ordering .title {
        font-size: 16px;
        color: #888;
        letter-spacing: .36px;
        margin-left: 0;
        padding: 0;
        line-height: 28px;
    }

    .course .ordering .this {
        color: #ffc210;
    }

    .course .ordering .price {
        position: relative;
    }

    .course .ordering .price::before,
    .course .ordering .price::after {
        cursor: pointer;
        content: "";
        display: block;
        width: 0px;
        height: 0px;
        border: 5px solid transparent;
        position: absolute;
        right: 0;
    }

    .course .ordering .price::before {
        border-bottom: 5px solid #aaa;
        margin-bottom: 2px;
        top: 2px;
    }

    .course .ordering .price::after {
        border-top: 5px solid #aaa;
        bottom: 2px;
    }

    .course .course-item:hover {
        box-shadow: 4px 6px 16px rgba(0, 0, 0, .5);
    }

    .course .course-item {
        width: 1100px;
        background: #fff;
        padding: 20px 30px 20px 20px;
        margin-bottom: 35px;
        border-radius: 2px;
        cursor: pointer;
        box-shadow: 2px 3px 16px rgba(0, 0, 0, .1);
        /* css3.0 過渡動畫 hover 事件操作 */
        transition: all .2s ease;
    }

    .course .course-item::after {
        content: "";
        display: block;
        clear: both;
    }

    /* 頂級元素 父級元素  當前元素{} */
    .course .course-item .course-image {
        float: left;
        width: 423px;
        height: 210px;
        margin-right: 30px;
    }

    .course .course-item .course-image img {
        width: 100%;
    }

    .course .course-item .course-info {
        float: left;
        width: 596px;
    }

    .course-item .course-info h3 {
        font-size: 26px;
        color: #333;
        font-weight: normal;
        margin-bottom: 8px;
    }

    .course-item .course-info h3 span {
        font-size: 14px;
        color: #9b9b9b;
        float: right;
        margin-top: 14px;
    }

    .course-item .course-info h3 span img {
        width: 11px;
        height: auto;
        margin-right: 7px;
    }

    .course-item .course-info .teather-info {
        font-size: 14px;
        color: #9b9b9b;
        margin-bottom: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid #333;
        border-bottom-color: rgba(51, 51, 51, .05);
    }

    .course-item .course-info .teather-info span {
        float: right;
    }

    .course-item .lesson-list::after {
        content: "";
        display: block;
        clear: both;
    }

    .course-item .lesson-list li {
        float: left;
        width: 44%;
        font-size: 14px;
        color: #666;
        padding-left: 22px;
        /* background: url("路徑") 是否平鋪 x軸位置 y軸位置 */
        background: url("/src/assets/img/play-icon-gray.svg") no-repeat left 4px;
        margin-bottom: 15px;
    }

    .course-item .lesson-list li .lesson-title {
        /* 以下3句，文本內容過多，會自動隱藏，並顯示省略符號 */
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        max-width: 200px;
    }

    .course-item .lesson-list li:hover {
        background-image: url("/src/assets/img/play-icon-yellow.svg");
        color: #ffc210;
    }

    .course-item .lesson-list li .free {
        width: 34px;
        height: 20px;
        color: #fd7b4d;
        vertical-align: super;
        margin-left: 10px;
        border: 1px solid #fd7b4d;
        border-radius: 2px;
        text-align: center;
        font-size: 13px;
        white-space: nowrap;
    }

    .course-item .lesson-list li:hover .free {
        color: #ffc210;
        border-color: #ffc210;
    }

    .course-item .pay-box::after {
        content: "";
        display: block;
        clear: both;
    }

    .course-item .pay-box .discount-type {
        padding: 6px 10px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        margin-right: 8px;
        background: #fa6240;
        border: 1px solid #fa6240;
        border-radius: 10px 0 10px 0;
        float: left;
    }

    .course-item .pay-box .discount-price {
        font-size: 24px;
        color: #fa6240;
        float: left;
    }

    .course-item .pay-box .original-price {
        text-decoration: line-through;
        font-size: 14px;
        color: #9b9b9b;
        margin-left: 10px;
        float: left;
        margin-top: 10px;
    }

    .course-item .pay-box .buy-now {
        width: 120px;
        height: 38px;
        background: transparent;
        color: #fa6240;
        font-size: 16px;
        border: 1px solid #fd7b4d;
        border-radius: 3px;
        transition: all .2s ease-in-out;
        float: right;
        text-align: center;
        line-height: 38px;
    }

    .course-item .pay-box .buy-now:hover {
        color: #fff;
        background: #ffc210;
        border: 1px solid #ffc210;
    }
</style>

課程分類介面實現

serializes.py

from rest_framework import serializers
from . import models

class CourseCategorySerialize(serializers.ModelSerializer):
    class Meta:
        model = models.CourseCategory
        fields = ['id','name']

views.py

from django.shortcuts import render
from rest_framework.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
from . import models
from . import serializes


# Create your views here.
class CourseCategory(GenericViewSet,ListModelMixin):
    queryset = models.CourseCategory.objects.filter(is_delete=False,is_show=True).order_by('orders')
    serializer_class = serializes.CourseCategorySerialize

urls.py

from django.urls import path,re_path,include
from course import views
from rest_framework.routers import SimpleRouter

router = SimpleRouter()
router.register('categories',views.CourseCategory,'category')

urlpatterns = [
    path('',include(router.urls)),
]

課程群查介面搭建

serializes.py

from rest_framework import serializers
from . import models

class CourseCategorySerialize(serializers.ModelSerializer):
    class Meta:
        model = models.CourseCategory
        fields = ['id','name']


class TeacherSerialize(serializers.ModelSerializer):
    class Meta:
        model = models.Teacher
        fields = ('name', 'role_name', 'title', 'signature', 'image', 'brief')


class CourseModelSerialize(serializers.ModelSerializer):
    # 由於課程也需要teacher表相關的信息，所以可以採用子序列化的方式，獲取teacher相關的信息
    teacher = TeacherSerialize()
    class Meta:
        model = models.Course
        fields = ['id',
                  'name',
                  'price',
                  'course_img',
                  'brief',
                  'attachment_path',
                  'pub_sections',
                  'students',
                  'period',
                  'sections',
                  'teacher',
                  'course_type_name', # 以下欄位是models里的方法名
                  'level_name',
                  'status_name',
                  'section_list'
                  ]

views.py

from rest_framework.filters import OrderingFilter,SearchFilter
from django_filters.rest_framework import DjangoFilterBackend

class CourseView(GenericViewSet,ListModelMixin):
    queryset = models.Course.objects.filter(is_delete=False,is_show=True).order_by('orders')
    serializer_class = serializes.CourseModelSerialize
    filter_backends = [OrderingFilter,DjangoFilterBackend]
    ordering_fields = ['id','price','students']
    filterset_fields = ['course_category',]