Django+xadmin打造在线教育平台(五)

Django+xadmin打造在线教育平台(五)

 

代码

github下载

八、课程详情页功能的实现

8.1.课程列表

(1)配置urls

MxOnline/urls中

path("course/", include(‘course.urls‘, namespace="course")),

course里面新建urls.py

# course/urls.py

from django.urls import path,re_path
from .views import CourseListView

# 要写上app的名字
app_name = "course"

urlpatterns = [
    path(‘list/‘,CourseListView.as_view(),name=‘course_list‘),

]

把course-list.html拷贝到templates目录下

from django.shortcuts import render
from django.views.generic import View

class CourseListView(View):
    def get(self, request):
        return render(request, "course-list.html")

(2)course-list.html继承base.html

修改title,修改bread里面,content里面放course-list独有的

 course-list.html

然后去后台添加十门课程

(3)列表展示

views.py

# course/views.py

from django.shortcuts import render
from django.views.generic import View
from .models import Course

class CourseListView(View):
    def get(self, request):
        all_courses = Course.objects.all()

        return render(request, "course-list.html",{‘all_courses‘:all_courses})

course-list.html

 <div class="group_list">
    {% for course in all_course %}
    <div class="box">
        <a href="course-detail.html">
            <img width="280" height="350" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/>
        </a>
        <div class="des">
            <a href="course-detail.html">
                <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="course-detail.html"><span class="fl">来自{{ course.course_org.name }}</span></a>
            <span class="star fr  notlogin
                " data-favid="15">
                {{ course.fav_nums }}
            </span>
        </div>
    </div>
    {% endfor %}

8.2.分页

        try:
            page = request.GET.get(‘page‘, 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_courses,2 , request=request)
        courses = p.page(page)

<div class="pageturn">
                        <ul class="pagelist">
                            {% if all_courses.has_previous %}
                                <li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">上一页</a></li>
                            {% endif %}

                            {% for page in all_courses.pages %}
                                {% if page %}
                                    {% ifequal page all_courses.number %}
                                        <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                    {% else %}
                                        <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                    {% endifequal %}
                                {% else %}
                                    <li class="none"><a href="">...</a></li>
                                {% endif %}
                            {% endfor %}
                            {% if all_courses.has_next %}
                                <li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">下一页</a></li>
                            {% endif %}
                        </ul>
                    </div>

8.3.排序

class CourseListView(View):
    def get(self, request):
        all_courses = Course.objects.all().order_by(‘-add_time‘)
        # 热门课程推荐
        hot_courses = Course.objects.all().order_by(‘-click_nums‘)[:3]
        # 排序
        sort = request.GET.get(‘sort‘, "")
        if sort:
            if sort == "students":
                all_courses = all_courses.order_by("-students")
            elif sort == "hot":
                all_courses = all_courses.order_by("-click_nums")
        # 分页
        try:
            page = request.GET.get(‘page‘, 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_courses,2 , request=request)
        courses = p.page(page)
        return render(request, "course-list.html", {
            "all_courses":courses,
            ‘sort‘: sort,
            ‘hot_courses‘:hot_courses,

        })

<div class="head">
                    <ul class="tab_header">
                        <li class="{% ifequal sort ‘‘ %}active{% endifequal %}"><a href="?sort=" >最新 </a></li>
                        <li class="{% ifequal sort ‘hot‘ %}active{% endifequal %}"><a href="?sort=hot" >最热门 </a></li>
                        <li class="{% ifequal sort ‘students‘ %}active{% endifequal %}"><a href="?sort=students" >参与人数 </a></li>
                    </ul>
                </div>

<div class="head">热门课程推荐</div>
                <div class="group_recommend">
                    {% for hot_course in hot_courses %}
                    <dl>
                        <dt>
                            <a target="_blank" href="">
                                <img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_course.image }}"/>
                            </a>
                        </dt>
                        <dd>
                            <a target="_blank" href=""><h2> {{ hot_course.name }}</h2></a>
                            <span class="fl">难度:<i class="key">{{ hot_course.get_degree_display }}</i></span>
                        </dd>
                    </dl>
                    {% endfor %}

 course-list.html

 views.py

8.4.课程详情

course-detail.html复制进来

(1)url配置

re_path(‘course/(?P<course_id>\d+)/‘, CourseDetailView.as_view(), name="course_detail"),

class CourseDetailView(View):
    ‘‘‘课程详情‘‘‘
    def get(self, request, course_id):
        return  render(request, "course-detail.html", {

        })

在course-list.html中添加链接到详情

(2)views

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,

        })

(3)Course model增加

  • 一个category字段
  • 一个获取章节数的方法
  • 一个获取这么课程的学习用户方法

 Course

(4)course-detail.html中课程详情信息显示

<div class="picbox">
                        <div class="tb-booth tb-pic">
                            <img width="440" height="445" src="{{ MEDIA_URL }}{{ course.image }}" class="jqzoom" />
                        </div>

                    </div>
                    <div class="des">
                        <h1 title="{{ course.name }}">{{ 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 user_course in course.get_learn_users %}
                                    <span class="pic"><img width="40" height="40" src="{{ MEDIA_URL }}{{ user_course.user.image }}"/></span>
                                {% endfor %}
                            </li>
                        </ul>
                        <div class="btns">

 显示课程详情

8.5.授课机构

(1)CourseOrg model添加一个获取教师数的方法

    def get_teacher_nums(self):
        #获取机构的教师数
        return self.teacher_set.all().count()

 CourseOrg

(2)授课机构显示

<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 }}</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>

8.6.相关课程推荐

(1)给“Course” model添加一个“课程标签”字段

tag = models.CharField(‘课程标签‘,default=‘‘,max_length=10)

 Course

(2)views

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:
            # 需要从1开始不然会推荐自己
            relate_courses = Course.objects.filter(tag=tag)[:3]
        else:
            relate_courses = []
        return  render(request, "course-detail.html", {
            ‘course‘:course,
            ‘relate_courses‘:relate_courses,
        })

(3)前端

<div class="right layout">

                <div class="head">相关课程推荐</div>
                <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>
            </div>

8.7.课程收藏和机构收藏

{% block custom_js %}{% endblock %},放到最下面的位置,因为是js代码,要最后加载

后端判断当前收藏转态

class CourseDetailView(View):
    ‘‘‘课程详情‘‘‘
    def get(self, request, course_id):
        course = Course.objects.get(id=int(course_id))
        # 课程的点击数加1
        course.click_nums += 1
        course.save()
        # 课程标签
        # 通过当前标签,查找数据库中的课程
        has_fav_course = False
        has_fav_org = False

        # 必须是用户已登录我们才需要判断。
        if request.user.is_authenticated:
            if UserFavorite.objects.filter(user=request.user, fav_id=course.id, fav_type=1):
                has_fav_course = True
            if UserFavorite.objects.filter(user=request.user, fav_id=course.course_org.id, fav_type=2):
                has_fav_org = True
        tag = course.tag
        if tag:
            # 需要从1开始不然会推荐自己
            relate_courses = Course.objects.filter(tag=tag)[:2]
        else:
            relate_courses = []
        return  render(request, "course-detail.html", {
            ‘course‘:course,
            ‘relate_courses‘:relate_courses,
            "has_fav_course": has_fav_course,
            "has_fav_org": has_fav_org,
        })

course-detail.html中添加Ajax

{% block custom_js %}
    <script type="text/javascript">
//收藏分享
function add_fav(current_elem, fav_id, fav_type){
    $.ajax({
        cache: false,
        type: "POST",
        url:"{% 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/";
                }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 %}

原文地址:https://www.cnblogs.com/syq666/p/8715569.html

时间: 2024-10-08 14:46:26

Django+xadmin打造在线教育平台(五)的相关文章

Django+xadmin打造在线教育平台(三)

Django+xadmin打造在线教育平台(三)   代码 github下载 五.用户注册 主要实现功能 用户输入邮箱.密码和验证码,点注册按钮 如果输入的不正确,提示错误信息 如果正确,发送激活邮件,用户通过邮件激活后才能登陆 即使注册功能,没有激活的用户也不能登陆 5.1.初步视图 users/views.py class RegisterView(View): '''用户注册''' def get(self,request): return render(request,'register

Django+xadmin打造在线教育平台(一)

Django+xadmin打造在线教育平台(一)   代码 github下载 一.前言 代码下载: 开发环境: python:  3.6.4 Django: 2.0.2 后台管理:xadmin 1.1.项目介绍 系统概括: 系统具有完整的用户登录注册以及找回密码功能,拥有完整个人中心. 个人中心: 修改头像,修改密码,修改邮箱,可以看到我的课程以及我的收藏.可以删除收藏,我的消息. 导航栏: 公开课,授课讲师,授课机构,全局搜索. 点击公开课–> 课程列表,排序-搜索.热门课程推荐,课程的分页.

Django+xadmin打造在线教育平台(九)

Django+xadmin打造在线教育平台(九)   代码 github下载 十二.首页和全局404,500配置 12.1.首页功能 Course添加一个字段 is_banner = models.BooleanField('是否轮播',default=False) CourseOrg添加一个字段 tag = models.CharField('机构标签',max_length=10,default='全国知名') (1)view class IndexView(View): '''首页'''

Django+xadmin打造在线教育平台(二)

一.xadmin后台管理 1.xadmin的安装(源码安装) (1)直接git clone https://github.com/sshwsfc/xadmin.git(前提是装有git) (2)新建Python Package "extra_apps",把源码xadmin文件夹放到extra_apps文件夹下面,此时目录结构如下: (3)把extra_apps右键mark为Source Root (4)在settings中加入如下代码 sys.path.insert(0,os.path

Django+Xadmin打造在线教育系统(五)

课程相关功能实现 课程列表 创建课程相关的urls.py path("course/", include('course.urls', namespace="course")), course里面新建urls.py from django.urls import path from course.views import CourseListView app_name = "courses" urlpatterns = [ # 课程列表url p

CK2148-Python升级3.6 强力Django+杀手级Xadmin打造在线教育平台

随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853进行交流得到帮助,获取学习资料. 下载地址:http://pan.baidu.com/s/1jI05TPW 搞个"大"项目 开发一套功能完备的系统 25小时企业级实战:从0到项目成型 以互联网公司标准开发流程,从零开发出一套可以达到上线标准

Python升级3.6 强力Django+杀手级Xadmin打造在线教育平台

第 1 章 课程介绍 1-1 项目演示和课程介绍: 第 2 章 Windows下搭建开发环境 2-1 Pycharm.Navicat和Python解释器的安装: 2-2 Virtualenv安装和配置: 2-3 Pycharm和Navicat的简单使用: 第 3 章 通过留言板功能回顾Django基础知识 3-1 Django目录介绍 3-2 配置表单页面 3-3 Django orm介绍与model设计 3-4 Django model的增删改查 3-5 Django url template

Django+Xadmin打造在线教育系统(三)

完成登录 注册 找回密码 激活 验证码集成 将HTML文件拷贝到templates目录下,css,js,img,media,images文件夹拷贝到static文件夹下 修改index.html和login.html文件中的静态文件路径,全部替换为如下格式 <link rel="stylesheet" type="text/css" href="{% static "css/reset.css" %}"> <

Django+Xadmin打造在线教育系统(二)

基于xadmin的后台管理 需要对源码进行修改,将xadmin的源码下载下来 https://github.com/sshwsfc/xadmin/tree/django2 在项目根目录新建Python Package "extra_apps",把源码xadmin文件夹放到extra_apps文件夹下面,此时目录结构如下: 将extra_apps加入系统路径 # settings.py sys.path.insert(0,os.path.join(BASE_DIR, 'extra_app