免费课页面前端搭建和后端课程分类接口、课程群查接口设计

免费课页面前端搭建

点击查看代码
<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',]

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:免费课页面前端搭建和后端课程分类接口、课程群查接口设计 - Python技术站

(0)
上一篇 2023年4月2日
下一篇 2023年4月2日

相关文章

  • while循环语法

    while循环 循环的基本语法和使用 count = 0 # 定义一个初始条件 while 条件: 代码1 代码2 … count += 1 # 额,每循环一次+1,用来结束循环 退出循环的两种方式 方式一:将while后面的条件改成false,退出循环!该方式就是基本语法的使用方式!注意:改成false提交后面的代码还会执行,直到第二次判断开始结束循环…

    Python开发 2023年4月2日
    00
  • 重构后台的django项目目录、配置开发环境、添加环境变量

    重构项目目录 celery_task: logs:项目运行时/开发时日志目录包 luffapi:项目同名文件夹 apps:项目所有应用的集合文件夹 libs:第三方类库的保存目录[第三方组件、模块] – 包 media:用户提交的文件目录文件夹 settings:配置目录,包含开发时的配置文件和上线时的配置文件 utils:多个模块[子应用]的公共函数类库[…

    2023年4月2日
    00
  • python中的内置函数

    内置函数 # 1.abs函数 print(abs(-1)) # 绝对值方法 # 2.all函数 print(all([1,’aaa’,”])) # false print(all([])) # true #all方法里面是一个可迭代对象,all会自动将这个对象for循环一下,如果所有的值为true,则返回true;如果可迭代对象为空,则返回true # 3…

    Python开发 2023年4月2日
    00
  • 支付宝支付

    支付宝支付流程 在python中封装alipay 安装 >: pip install python-alipay-sdk –upgrade # 如果抛ssl相关错误,代表缺失该包 >: pip install pyopenssl 结构 libs ├── AliPay # aliapy二次封装包 │ ├── __init__.py # 包文件 │…

    2023年4月2日
    00
  • 源码分析之序列化器的many关键字

    在序列多个数据时,我们需要指定一个关键字many=True 这是为什么呢? 其实是,当序列化器产生对象时,传入参数many和不传入会生成两个不同的对象!! 这是怎么实现的呢?? 1.类的对象生成–先调用类的__new__方法生成一个空对象2.对象 = 类名(name=‘lz’)–会触发类的__init__方法,产生一个有属性的对象3.类的__new__方…

    2023年4月2日
    00
  • 登录注册接口搭建

    登录接口分析 登录分为多方式登录和验证码登录方式 多方式登录 1)前台提供账号密码,账号可能是 用户名、手机号、邮箱等 接口: 后台只需要提供一个多方式登录接口即可 – 多方式登录接口 多方式登录接口 前端输入完账号和密码,点击登录,向后端发送请求进行校验用户登录数据 urls.py from django.urls import path,re_path,…

    Python开发 2023年4月2日
    00
  • 小程序子页面向父页面传值、腾讯云对象存储上传图片

    1. 页面传值 1.1 父页面向子页面传值 父页面: /pages/xx/xxx?id=1 子页面 // option就可以接收到父页面传来的值 onLoad:function(option){ } 1.2 子父页面 子页面 var pages = getCurrentPages() var prevPage = pages[pages.length-2] …

    Python开发 2023年4月2日
    00
  • input与print语法

    1.input输入语法 input是用来接收用户输入的一种语法,实现计算机与用户之间的交互,改方法有一个返回值,返回的是用户输入的字符串! 语法:res = input(‘请输入您的账号:’) 在python3中,用户输入的数据类型将会被全部转成字符串类型。在python2中,用户输入什么数据类型,程序就会转成什么类型,指的注意的是,用户假如输入的数据类型错…

    Python开发 2023年4月2日
    00
合作推广
合作推广
分享本页
返回顶部