Django项目于之在线教育平台网站的实战开发(四)

本文详细介绍了使用Django开发在线教育平台的过程,涵盖课程详情页的展示、动态数据加载、收藏功能、课程播放、教师列表与详情等功能。包括课程详情的各个部分如章节信息、评论、相关课程推荐、授课机构数据等的实现,以及教师列表的分页、排序和排行榜。此外,还讨论了页面中收藏功能的实现和菜单栏的激活状态处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!

接着上一篇博客继续往下写 :https://blog.youkuaiyun.com/qq_41782425/article/details/89914436

 非VIP用户请点击这里进行查阅

目录

一丶公开课(详情页)

二丶公开课(开始学习)

三丶公开课(课程评论)

四丶公开课(课程播放)

五丶授课教师(列表页)

六丶授课教师(详情页)


一丶公开课(详情页)

1.显示课程详情页

  • 模板继承这个不用多说了

  • 定义类视图get方法,用于显示页面
class CourseDetailView(View):
    """课程详情页"""
    def get(self, request, course_id):
        return render(request, "course-detail.html")
  • 定义url路由
url(r'^detail/(?P<course_id>\d+)/$', CourseDetailView.as_view(), name="course_detail"),  # 课程列表页
  • 在课程列表页中修改课程详情链接地址
{%  for course in all_courses.object_list %}
<div class="box">
    <a href="{% url 'course:course_detail' course.id %}">
        <img width="280" height="350" class="scrollLoading"
             src={
  
  { MEDIA_URL }}{
  
  { course.image }}/>
    </a>
    <div class="des">
        <a href="{% url 'course:course_detail' course.id %}">
            <h2>{
  
  { course.name }}</h2>
        </a>
        <span class="fl">时长:<i class="key">{
  
  { course.learn_times }}</i></span>
        <span class="fr">学习人数:{
  
  { course.students }}&nbsp;&nbsp;</span>
    </div>
    <div class="bottom">
        <a href="{% url 'course:course_detail' course.id %}"><span class="fl">来自{
  
  { course.course_org.name }}</span></a>
        <span class="star fr  notlogin
        " data-favid="15">
        {
  
  { course.fav_nums }}
    </span>
    </div>
</div>
{% endfor %}
  • 测试在课程列表页点击课程,则显示课程详情页

2.动态显示出课程详情页数据

  • 在类视图中根据请求地址传递的课程id获取对应的课程信息数据,当用户点击进入课程详情页时,则点击数+1
class CourseDetailView(View):
    """课程详情页"""
    def get(self, request, course_id):
        course = Course.objects.get(id=int(course_id))
        # 当用户点击进入课程详情页时,则课程点击数+1
        course.click_nums += 1
        course.save()
        return render(request, "course-detail.html", {"course":course})
  • 分析课程详情页面中的(章节数和课程类别以及学习用户),在Course模型类中没有的字段

  • 紧接着需要在模型类中,获取章节数以及学习用户信息,因为该两个字段是UserCourse模型表和Lesson表的外键,即可以使用django models提供self.小写表名_set方法获取字段信息
def get_zj_nums(self):
    #获取课程章节数
    return self.lesson_set.all().count()
get_zj_nums.short_description = "章节数"

def get_learn_users(self):
# 获取课程学习用户
return self.usercourse_set.all()[:5]
  • 课程类别则需要在Course模型表中添加category字段
category = models.CharField(default=u"后端开发", max_length=20, verbose_name=u"课程类别")
  • 生成对应的数据表category字段

  • 最后在课程详情模板中打印字段数据即可
<h1 title="django 从入门到精通体验开始了">{
  
  { course.name }}</h1>
<span class="key">{
  
  { course.desc }}</span>
<div class="prize">
	<span class="fl">难度:<i class="key">{
  
  { course.get_degree_display }}</i></span>
	<span class="fr">学习人数:{
  
  { course.students }}</span>
</div>
<ul class="parameter">
	<li><span class="pram word3">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长:</span><span>{
  
  { course.learn_times }}</span></li>
    <li><span class="pram word3">章&nbsp;节&nbsp;数:</span><span>{
  
  { course.get_zj_nums }}</span></li>
    <li><span class="pram word3">课程类别:</span><span title="">{
  
  { course.category }}</span></li>
	<li class="piclist"><span class="pram word4">学习用户:</span>
            {% for course_user in course.get_learn_users %}
            <span class="pic"><img width="40" height="40" src="{
  
  { MEDIA_URL }}{
  
  { course_user.user.image }}"/></span>
            {% endfor %}
	</li>
</ul>
  • 因为用户课程表并没有数据,则需要进行添加,为了显示详情页面中的学习用户

  • 刷新课程详情页面,成功显示出详情页面动态数据

  • 查看课程表中Mysql主从复制2的click_nums点击数字段,已经进行+1了

3.动态显示出课程详情页面右侧授课机构数据

  • 授课机构数据包括教师数,所以需要在CourseOrg模型表中获取教师数数据
def get_teacher_nums(self):
    #获取课程机构的教师数量
    return self.teacher_set.all().count()
  • 在模板中进行打印字段数据即可
<div class="right">
	<div class="head">
		<h1>授课机构</h1>
		<p>世界名校,课程权威</p>
	</div>
	<div class="pic">
        <a href="/company/14/">
            <img width="150" height="80" src="{
  
  { MEDIA_URL }}{
  
  { course.course_org.image }}"/>
        </a>
    </div>
	<a href="/company/14/">
        <h2 class="center" title="{
  
  { course.course_org.name }}">{
  
  { course.course_org.name }}</h2>
    </a>
	<div class="btn  notlogin
	     "data-favid="14" id="jsRightBtn">
         已收藏
    </div>
	<div class="clear">
		<ul>
            <li>
                <span>课 &nbsp;程&nbsp; 数:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   {
  
  { course.course_org.course_nums }}</span>
            </li>
            <li>
                <span>教 &nbsp;师&nbsp; 数:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  {
  
  { course.course_org.get_teacher_nums }}</span>
            </li>
			<li>所在地区:&nbsp;&nbsp;{
  
  { course.course_org.address }}</li>
			<li>认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;:
                &nbsp;&nbsp;
				    <img title="金牌机构", src="{% static 'images/gold.png' %}"/>
			</li>
		</ul>
	</div>
</div>
  • 刷新页面成功动态加载出授课机构数据

4.相关课程推荐功能

说明:完成该功能需要在Course课程模型类中添加tag标签字段,通过tag标签字段查找相等的课程,并且只获取一个结果,返回给模板

  • 在course模型类中添加标签字段
tag = models.CharField(default="", verbose_name=u"课程标签", max_length=10)
  • 生成对应数据表字段

  • 在类视图中查看tag标签相同的课程数据
class CourseDetailView(View):
    """课程详情页"""
    def get(self, request, course_id):
        course = Course.objects.get(id=int(course_id))
        # 当用户点击进入课程详情页时,则课程点击数+1
        course.click_nums += 1
        course.save()
        tag = course.tag
        if tag:
            relate_courses = Course.objects.filter(tag=tag)[:1]
        else:
            relate_courses = []
        return render(request, "course-detail.html", {"course":course, "relate_courses":relate_courses})
  • 在模板文件中找到相关课程推荐标签,进行数据打印
<div class="group_recommend">
        {% for relate_course in relate_courses%}
        <dl>
            <dt>
                <a target="_blank" href="">
                    <img width="240" height="220" class="scrollLoading" src="{
  
  { MEDIA_URL }}{
  
  { relate_course.image }}"/>
                </a>
            </dt>
            <dd>
                <a target="_blank" href=""><h2> {
  
  { relate_course.name }}</h2></a>
                <span class="fl">学习时长:<i class="key">{
  
  { relate_course.learn_times }}</i></span>
            </dd>
        </dl>
        {% endfor %}
</div>
  • 为了视图中获取的tag字段的值不为空,则需要登录xadmin后台进行添加课程中的标签字段的数据,博主这里将课程mysql主从复制以及mysql主从复制2添加相同标签mysql

  • 刷新页面,正确显示出相关课程信息

5.课程详情页面收藏功能

  • 说明:在页面中有两个收藏功能,分别是课程收藏以及机构收藏,两个收藏功能逻辑与机构详情页面的收藏功能一致,公用AddFavView视图函数,完成同样逻辑,代码的重复性

  • 即不需要再编写收藏功能接口函数了,只需要在course-detail详情页模板中继承父模板base中预留custom_js数据块,完成ajxa post异步请求,完成此功能,在js代码中需要分别定义课程收藏以及机构收藏,因为它们两个功能在调用add_fav函数时,传递的fav_id以及fav_type是不一样的
{% block custom_js %}
    <script type="text/javascript">
    //收藏分享
    function add_fav(current_elem, fav_id, fav_type){
        $.ajax({
            cache: false,
            type: "POST",
            url:"/org/add_fav/",
            data:{'fav_id':fav_id, 'fav_type':fav_type},
            async: true,
            beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{
  
  { csrf_token }}");
            },
            success: function(data) {
                if(data.status == 'fail'){
                    if(data.msg == '用户未登录'){
                        window.location.href="login.html";
                    }else{
                        alert(data.msg)
                    }

                }else if(data.status == 'success'){
                    current_elem.text(data.msg)
                }
            },
        });
    }

    $('#jsLeftBtn').on('click', function(){
        add_fav($(this), {
  
  { course.id }}, 1);  {#课程#}
    });

    $('#jsRightBtn').on('click', function(){
        add_fav($(this), {
  
  { course.course_org.id }}, 2);  {#课程机构#}
    });
</script>
{% endblock %}
  • 在视图中跟之前机构收藏一样,需要判断UserFavorite用户收藏表中是否存在数据,设置开关,向模板中传递开关,根据开关的值,来判断页面收藏功能块内容是显示收藏还是已收藏
# 设置默认为未收藏状态
has_fav_course = False
has_fav_org = False
# 当用户为登录状态才能根据条件查询该用户收藏数据
if request.user.is_authenticated():
    # 当用户已收藏课程时,即has_fav_course = True ,需注意这里的fav_type = 1 这个条件是固定的因此为课程收藏
    if UserFavorite.objects.filter(user=request.user, fav_id=int(course.id), fav_type=1):
        has_fav_course = True
    # 当用户已收藏机构时,即has_fav_org = Tru
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cdtaogang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值