mxonline实战11，课程详情页2，课程章节页

 

对应github地址：第11天 

 

一. 课程详情页2

 

1. 课程详情页第2块中的课程介绍中，修改course-detail.html中代码，搜索课程详情，找到如下代码

将原先<div>标签中的内容删除，用{{ course.detail }}替换掉，对应网页内容如下

 

2. 网页course-detail.html代码中搜索授课机构，使用变量标签替代原代码

1）机构图片，机构名，课程数，所在地区分别如下

 

2）教师数有点麻烦，实现方法如下

在organization/models.py->class CourseOrg中定义函数，之所以可以这样写是因为在Teacher中有一个外键关联到CourseOrg

然后在course-detail.html中就可以直接使用此函数

 

 

3. 相关课程推荐

courses/models.py->Course中新定义一个字段，有同样标签的课程就会进入相关课程推荐

 

courses/views.py ->CourseDetailView中新定义字段，并且添加tag到return render中

 

在course-detail.html中找到相关课程推荐代码，就是一个<dl>标签内容

 

然后在后台添加关联课程标签，比如五毒掌和降龙十八掌都添加标签为掌法，那么就可以关联起来

 

 

4. 收藏功能

1）添加如下代码到course-detail.html

{% 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 custom_js %}

 

 

 

2）courses/views.py->CourseDetailView添加代码，并且把has_fav_course, has_fav_org放在return render中传递到前端

 

3）course-detail.html中修改收藏部分代码如下

 

4）把base.html中的{% block custom_js %} {% endblock %}放到最后面，并且把原先的"我要咨询”js代码块移动动org-list.html的{% block custom_js %}中

 

 

 

 

二. 课程章节页

 

1. 首先继承模板页

这个页面里有一些定制的css样式，content模板标签里写<div id="main">的代码块

需要注意的是面包屑课程详情的写法

其中参数course.id，course为view中的return render传递来的课程变量，它有一个id属性

 

 

2. URL和view

courses/views.py中写

courses/urls.py中加入

 

 

3. 在course-detail.html中点击开始学习，跳转到course-vedio.html页面，搜索"开始学习" 修改为如下

 

 

4. 后台为课程添加章节和章节下的视频，以易筋经为例子

courses/models.py->Video添加字段url，为视频添加URL链接

添加一个视频时长

 

 

5. 填充页面章节，视频信息

courses/models.py->Course里写

courses/models.py -> Lesson里写

 

course-vidio.html中搜索"课程公告"，找到章节，视频代码信息

 

 

6. 填充课程资源信息

后台添加易筋经的课程资源，然后再courses/views.py->CourseInfoView中添加如下字段，并且放在return render中传到前端页面

 

course-video.html中找到资料下载，修改如下

 

 

7. 填充讲师提示信息

 

7.1  讲师信息

我们之前在课程model中没有关于老师的信息，所有在courses/modles.py/Course添加字段，其中Teacher是定义在organizaiton/models.py中

然后在后台给课程添加讲师信息

 

course-video.html中搜索讲师提示，改写讲师头像，姓名，职位如下

 

7.2 提示内容

为了动态的显示提示内容，需要在courses/models->Course新增两个字段

后台添加相应内容