1. 程式人生 > >Python打造線上教學平臺——學習週報6

Python打造線上教學平臺——學習週報6

業務邏輯開發

		                    ——————  學習週報 2018.12.23


一 、本週計劃:

  • 完成第8章——課程功能實現(8-2 ~ 8-8)
  • 完成第9章——課程講師功能實現(9-1 ~ 9-3)

二 、完成情況:

  • 1.課程詳情頁
  • 2.課程章節資訊
  • 3.課程評論功能
  • 4.相關課程推薦
  • 5.視訊播放頁面
  • 6.講師列表頁
  • 7.講師詳情頁


三、 展示:

1、課程詳情頁

  • 匯入course-detail.HTML
    檔案,並改寫
  • urls.pyviews.py編寫
#  views.py編寫

class CourseDetailView(View):
    """
    課程詳情頁
    """
    def get(self, request, course_id):
        course = Course.objects.get(id=int(course_id))

        # 增加課程點選數
        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:
            relate_coures = Course.objects.filter(tag=tag)[:1]
        else:
            relate_coures = []

        return render(request, "course-detail.html", {
            "course": course,
            "relate_coures": relate_coures,
            "has_fav_course": has_fav_course,
            "has_fav_org": has_fav_org
        })

在這裡插入圖片描述

  • 功能1:增加課程推薦
<div class="head">相關課程推薦</div>
 <div class="group_recommend">
       {% for relate_course in relate_coures %}
           <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 %}

在這裡插入圖片描述

  • 功能2: 課程詳情頁增加收藏功能
    在這裡插入圖片描述

2、課程章節資訊

  • 匯入course-video.html檔案,進行繼承更改
  • 配置urls.py檔案和views.py檔案
  • 進入後臺資料庫,增加課程章節資訊
    在這裡插入圖片描述
  • 點選開始學習,進入章節資訊頁:
    在這裡插入圖片描述
  • 功能: 課程資源下載
    進入後臺上傳課程資源,頁面點選下載,彈出下載框
    在這裡插入圖片描述

3、課程評論功能

  • 匯入前端頁面course-comment.html,繼承base.html等進行修改,views.py中寫入實現“課程評論”的方法。
  • 配置urls.py
  • video.html檔案與comment.html檔案中要進行頁面跳轉的配置。
  • 點選評論,進入評論頁面
    在這裡插入圖片描述

具體實現評論功能:

功能1:發表評論
  • 新增評論前,首先還是得判斷“使用者是否登入”。這樣才符合邏輯。
  • course/view.py編寫“新增評論方法 ”:
class AddComentsView(View):
    """
    使用者新增課程評論
    """
    def post(self, request):
        if not request.user.is_authenticated():
            # 判斷使用者登入狀態
            return HttpResponse('{"status":"fail", "msg":"使用者未登入"}', content_type='application/json')

        course_id = request.POST.get("course_id", 0)
        comments = request.POST.get("comments", "")
        if int(course_id) > 0 and comments:
            course_comments = CourseComments()
            course = Course.objects.get(id=int(course_id))
            course_comments.course = course
            course_comments.comments = comments
            course_comments.user = request.user
            course_comments.save()
            return HttpResponse('{"status":"success", "msg":"新增成功"}', content_type='application/json')
        else:
            return HttpResponse('{"status":"fail", "msg":"新增失敗"}', content_type='application/json')
 


辨析:get()方法與filter()的具體不同用法:

  • get(): 如果有資料,返回一條資料;如果沒有資料,丟擲異常。
  • filter():如果有資料,返回一個request,類似一個可以遍歷的陣列;如果沒有資料,返回一個空的request,不會丟擲異常。


  • 配置urls.py,建立一個訪問地址:
    #  新增課程評論
    url(r'^add_comment/$', AddComentsView.as_view(), name="add_comment"),
  • course-comment.html中增加實現評論的js程式碼:
{% block custom_js %}
    <script type="text/javascript">
    //新增評論
    $('#js-pl-submit').on('click', function(){
        var comments = $("#js-pl-textarea").val()
        if(comments == ""){
            alert("評論不能為空")
            return
        }
        $.ajax({
            cache: false,
            type: "POST",
            url:"{% url 'course:add_comment' %}",
            data:{'course_id':{{ course.id }}, 'comments':comments},
            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'){
                    window.location.reload();//重新整理當前頁面.
                }
            },
        });
    });

</script>
{% endblock %}

4、相關課程推薦

  • views.py中的方法進行新增;
  • html檔案進行修改;
<ul class="other-list">
    {% for relate_course in relate_courses %}
        <li class="curr">
            <a href="{% url 'course:course_detail' relate_course.id %}" target="_blank">
                <img src="{{ MEDIA_URL }}{{ relate_course.image }}" alt="{{ relate_course.name }}">
                <span class="name autowrap">{{ relate_course.name }}</span>
            </a>
        </li>
    {% endfor %}
  • 展示課程推薦:
    在這裡插入圖片描述

5、視訊播放頁面

  • 匯入video-play.html檔案,繼承base.html,進行修改;
  • views.py中編寫VideoPlayView(View)方法;
  • urls.py中進行配置;
  • course-video.html檔案中新增訪問跳轉id
  • 點選章節,跳轉入播放頁面
    在這裡插入圖片描述
    對於上傳視訊問題: 可在"七牛雲"進行,上傳視訊資源後,它會自動生成一個訪問地址。

6、講師列表頁與詳情頁

  • 匯入teacher-list.htmlteacher-detail.html檔案,進行配置修改;
  • 配置urls.py
  • views.py中編寫講師列表頁方法TeacherListView()
class TeacherListView(View):
    """
    課程講師列表頁
    """
    def get(self, request):
        all_teachers = Teacher.objects.all()

        # 課程講師搜尋
        search_keywords = request.GET.get('keywords', "")
        if search_keywords:
            all_teachers = all_teachers.filter(Q(name__icontains=search_keywords)|
                                               Q(work_company__icontains=search_keywords)|
                                               Q(work_position__icontains=search_keywords))

        sort = request.GET.get('sort', "")
        if sort:
            if sort == "hot":
                all_teachers = all_teachers.order_by("-click_nums")

        sorted_teacher = Teacher.objects.all().order_by("-click_nums")[:3]

        # 對講師進行分頁
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1

        p = Paginator(all_teachers, 3, request=request)

        teachers = p.page(page)
        return render(request, "teachers-list.html", {
            "all_teachers": teachers,
            "sorted_teacher": sorted_teacher,
            "sort": sort,
        })
  • 講師詳情頁方法TeacherDetailView();
class TeacherDetailView(View):
    def get(self, request, teacher_id):
        teacher = Teacher.objects.get(id=int(teacher_id))
        teacher.click_nums += 1
        teacher.save()
        all_courses = Course.objects.filter(teacher=teacher)

        has_teacher_faved = False
        if request.user.is_authenticated():
            if UserFavorite.objects.filter(user=request.user, fav_type=3, fav_id=teacher.id):
                has_teacher_faved = True

        has_org_faved = False
        if request.user.is_authenticated():
            if UserFavorite.objects.filter(user=request.user, fav_type=2, fav_id=teacher.org.id):
                has_org_faved = True

        #講師排行
        sorted_teacher = Teacher.objects.all().order_by("-click_nums")[:3]
        return render(request, "teacher-detail.html", {
            "teacher":teacher,
            "all_courses":all_courses,
            "sorted_teacher":sorted_teacher,
            "has_teacher_faved": has_teacher_faved,
            "has_org_faved":has_org_faved
        })
  • 列表頁展示:
    在這裡插入圖片描述
  • 排行榜展示:
    在這裡插入圖片描述
  • 講師詳情頁展示:
    在這裡插入圖片描述


下週任務:

  • 第10章——個人中心和全域性搜尋功能實現
    • 配置全域性導航
    • 全域性搜尋功能開發
    • 個人資訊展示
    • 修改密碼和修改頭像
    • 修改郵箱和使用者資訊
    • 我的課程
    • 我的收藏功能
    • 我的訊息