百木园免费课页面前端搭建
点击查看代码
<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\">筛 选:</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\',]
来源：https://www.cnblogs.com/suncolor/p/16864347.html
本站部分图文来源于网络，如有侵权请联系删除。