[Python知识库]Django在线教育平台项目完整实现（四）

八、全局搜索和全局错误页面配置

1.index.html页面的完善（轮播图）

设置轮播图：

在apps/operations/models.py中：

# 省略
UserProfile = get_user_model()

# 轮播图
class Banner(BaseModel):
    title = models.CharField(max_length=100, verbose_name="标题")
    image = models.ImageField(upload_to="banner/%Y/%m", max_length=200, verbose_name="轮播图")
    url = models.URLField(max_length=200, verbose_name="访问地址")
    index = models.IntegerField(default=0, verbose_name="顺序")
    
    class Meta:
        verbose_name = "轮播图"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.title


# 用户咨询
# 省略

设置字段确定是否为广告位课程：

在apps/courses/models.py中：

# 省略
# 继承BaseModel
# 课程
class Course(BaseModel):
    # 省略
    # 显示富文本,TextField不限制长度
    detail = models.TextField(verbose_name="课程详情")
    # 是否为广告位课程
    is_banner = models.BooleanField(default=False, verbose_name="是否广告位")
    image = models.ImageField(upload_to="courses/%Y/%m", verbose_name="封面图", max_length=100)
    # 省略

菜单栏-Tools-Run manage.py Task
makemigrations
migrate

在apps/operations/views.py中：

# 省略
from apps.operations.models import Banner


# Create your views here.

# 首页
class IndexView(View):
    def get(self, request, *args, **kwargs):
        banners = Banner.objects.all().order_by("index")
        # 将轮播图中已取出的课程进行过滤
        courses = Course.objects.filter(is_banner=False)[:6]
        # 轮播图课程
        banner_courses = Course.objects.filter(is_banner=True)
        course_orgs = CourseOrg.objects.all()[:15]

        return render(request, "index.html",{
            "banners": banners,
            "courses": courses,
            "banner_courses": banner_courses,
            "course_orgs": course_orgs
        })

# 课程评论
# 省略

在apps/users/views.py中：

# 动态验证码的登录
class DynamicLoginView(View):
    def get(self, request, *args, **kwargs):
        if request.user.is_authenticated:
            return HttpResponseRedirect(reverse("index"))
        next = request.GET.get("next", "")
        login_form = DynamicLoginForm()
        banners = Banner.objects.all()[:3]
        return render(request, "login.html", {
            "login_form": login_form,
            "next": next,
            "banners": banners
        })

    def post(self, request, *args, **kwargs):
        login_form = DynamicLoginPostForm(request.POST)
        dynamic_login = True
        banners = Banner.objects.all()[:3]
        if login_form.is_valid():
            # 设置没有注册账号仍然可以登录
            # 先查询用户是否存在
            mobile = login_form.cleaned_data["mobile"]
            existed_users = UserProfile.objects.filter(mobile=mobile)
            if existed_users:
                user = existed_users[0]
            else:
                # 用户不存在，新建用户
                # 用户名为必填字段，用手机号填充
                user = UserProfile(username=mobile)
                # 此时用户未输入密码，可以进行密码的生成，生成10位
                password = generate_random(10, 2)
                # 密码为加密的，不能直接赋值明文，使用set_password方法进行密码的加密
                user.set_password(password)
                # 填入必填字段手机号
                user.mobile = mobile
                user.save()
            # 进行登录
            login(request, user)
            # 如果有next跳转到next，若没有则跳转到首页
            next = request.GET.get("next", "")
            if next:
                return HttpResponseRedirect(next)
            # 跳转到首页
            return HttpResponseRedirect(reverse("index"))
        else:
            d_form = DynamicLoginForm()
            return render(request, "login.html", {"login_form": login_form,
                                                  "d_form": d_form,
                                                  "banners": banners,
                                                  "dynamic_login": dynamic_login})
# 省略
# 用户登录
# 继承Django内部的View
class LoginView(View):
    # 重载get方法，request为django自动注入的参数
    # 有可能传递多个参数，设置接受多变量的方式，可以点入View中从def dispatch中的return中查看源码
    def get(self, request, *args, **kwargs):
        # 在index.html已经判断了用户是否登录，获取此属性is_authenticated
        if request.user.is_authenticated:
            # 如果已经是登录状态，重定向到首页
            return HttpResponseRedirect(reverse("index"))

        banners = Banner.objects.all()[:3]
        next = request.GET.get("next", "")
        # 进行实例化
        login_form = DynamicLoginForm()
        return render(request, "login.html", {
            # 将变量传递进html中
            "login_form": login_form,
            "next": next,
            "banners": banners
        })

    # 用户数据的获取
    def post(self, request, *args, **kwargs):
        # 省略
        
                # 未查询到用户,要将login_form传递回去，保留用户输入的错误的用户名和密码在页面上
                return render(request, "login.html", {"msg": "用户名或密码错误", "login_form": login_form, "banners": banners})
        else:
            return render(request, "login.html", {"login_form": login_form,
                                                  "banners": banners})

在MxOnline/urls.py中：

# 省略
from MxOnline.settings import MEDIA_ROOT
from apps.operations.views import IndexView

urlpatterns = [
    # path('admin/', admin.site.urls),
    path('xadmin/',xadmin.site.urls),
    # # 设置直接访问域名的时候直接到此页面
    # path('', TemplateView.as_view(template_name="index.html"), name="index"),
    # 首页
    path('', IndexView.as_view(), name="index"),
    # 在此处login后要加/，解决访问时http://127.0.0.1:8000/login后面多加/出现的Page not found的问题
    # path('login/', TemplateView.as_view(template_name="login.html"), name= "login")

    path('login/', LoginView.as_view(), name= "login"),
    # 注册
# 省略

在templates/index.html中：

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}首页-慕学在线网{% endblock %}
{% block content %}
    <div class="banner">
			<div class="wp">
				<div class="fl">
					<div class="imgslide">
						<ul class="imgs">
                            {% for banner in banners %}
                            <li>
                                    <a href="{{ banner.url }}">
                                        <img width="1200" height="478" src="{{ banner.image.url }}" />
                                    </a>
                                </li>
                            {% endfor %}
						</ul>
					</div>
					<div class="unslider-arrow prev"></div>
					<div class="unslider-arrow next"></div>
				</div>

				</div>


			</div>
	<section>
		<div class="wp">
			<ul class="feature">
				<li class="feature1">
					<img class="pic" src="{% static 'images/feature1.png' %}"/>
					<p class="center">专业权威</p>
				</li>
				<li class="feature2">
					<img class="pic" src="{% static 'images/feature2.png' %}"/>
					<p class="center">课程最新</p>
				</li>
				<li class="feature3">
					<img class="pic" src="{% static 'images/feature3.png' %}"/>
					<p class="center">名师授课</p>
				</li>
				<li class="feature4">
					<img class="pic" src="{% static 'images/feature4.png' %}"/>
					<p class="center">数据真实</p>
				</li>
			</ul>
		</div>
	</section>
	<section>
		<div class="module">
			<div class="wp">
				<h1>公开课程</h1>
				<div class="module1 eachmod">
					<div class="module1_1 left">
						<img width="228" height="614" src="{% static 'images/module1_1.jpg' %}"/>
						<p class="fisrt_word">名师授课<br/>专业权威</p>
						<a class="more" href="{% url 'course:list' %}">查看更多课程 ></a>
					</div>
					<div class="right group_list">
						<div class="module1_2 box">
							<div class="imgslide2">
								<ul class="imgs">
                                    {% for banner_course in banner_courses %}
                                    <li>
                                        <a href="{% url 'course:detail' banner_course.id %}">
                                            <img width="470" height="300" src="{{ banner_course.image.url }}" />
                                        </a>
                                    </li>
                                    {% endfor %}
								</ul>
							</div>
							<div class="unslider-arrow2 prev"></div>
							<div class="unslider-arrow2 next"></div>
						</div>
                            {% for course in courses %}
                            <!-- module1_3 box从3开始递增 -->
                            <div class="module1_{{ forloop.counter|add:2 }} box">
                                <a href="{% url 'course:detail' course.id %}">
                                    <img width="233" height="190" src="{{ course.image.url }}"/>
                                </a>
                                <div class="des">
                                    <a href="{% url 'course:detail' course.id %}">
                                        <h2 title="{{ course.name }}">{{ course.name }}</h2>
                                    </a>
                                    <span class="fl">难度：<i class="key">{{ course.get_degree_display }}</i></span>
                                    <span class="fr">学习人数：{{ course.students }}</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl" title="慕课网">{{ course.course_org.name }}</span>
                                    <span class="star fr">{{ course.fav_nums }}</span>
                                </div>
                            </div>
                            {% endfor %}


					</div>
				</div>
			</div>
		</div>
	</section>
	<section>
		<div class="module greybg">
			<div class="wp">
				<h1>课程机构</h1>
				<div class="module3 eachmod">
					<div class="module3_1 left">
						<img width="228" height="463" src="{% static 'images/module3_1.jpg' %}"/>
						<p class="fisrt_word">名校来袭<br/>权威认证</p>
						<a class="more" href="{% url 'org:list' %}">查看更多机构 ></a>
					</div>
					<div class="right">
						<ul>
                            {% for org in course_orgs %}
                                <!-- divisibleby代表除以5余数是否为0 -->
                                <li class="{% if forloop.counter|divisibleby:5 %}five{% endif %} ">
                                    <a href="{% url 'org:home' org.id %}">
                                        <div class="company">
                                            <img width="184" height="100" src="{{ org.image.url }}"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>{{ org.tag }}</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="{{ org.name }}">{{ org.name }}</span></p>
                                    </a>
                                </li>
                            {% endfor %}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>
{% endblock %}
{% block custom_js %}
        <script src="{% static 'js/selectUi.js' %}" type='text/javascript'></script>
    <script src="{% static 'js/deco-common.js' %}" type='text/javascript'></script>
    <script type="text/javascript" src="{% static 'js/plugins/laydate/laydate.js' %}"></script>
    <script src="{% static  'js/plugins/layer/layer.js' %}"></script>
    <script src="{% static 'js/plugins/queryCity/js/public.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/unslider.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/plugins/jquery.scrollLoading.js' %}"  type="text/javascript"></script>
    <script src="{% static 'js/deco-common.js' %}"  type="text/javascript"></script>

    <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
{% endblock %}

可在后台管理系统中的课程信息中设置是否为广告位，显示的是公开课程位置的轮播。

轮播图管理器：

在apps/operations/adminx.py中：

# 省略
class UserAskAdmin(object):
    # 省略


class BannerAdmin(object):
    list_display = ['title', 'image', 'url', "index"]
    search_fields = ['title', 'image', 'url', "index"]
    list_filter = ['title', 'image', 'url', "index"]


class UserCourseAdmin(object):
    # 省略
# 省略
xadmin.site.register(UserAsk, UserAskAdmin)
xadmin.site.register(Banner, BannerAdmin)
xadmin.site.register(UserCourse, UserCourseAdmin)
# 省略

在后台管理系统中的轮播图中可对顶端的轮播图进行管理。

2.搜索功能开发

在apps/courses/views.py中：

# 省略
from django.db.models import Q

from apps.courses.models import Course, CourseTag, CourseResource, Video
# 省略
# 获取课程列表信息
class CourseListView(View):
    def get(self, request, *args, **kwargs):
        # 根据添加时间进行倒序排列，最新的放在最前面
        all_courses = Course.objects.order_by("-add_time")
        # 右边栏，热门课程的展示，进行切片只展示前3个
        hot_courses = Course.objects.order_by("-click_nums")[:3]

        # 搜索关键词
        keywords = request.GET.get("keywords", "")
        s_type = "course"
        if keywords:
            # name__icontains前面的i代表不区别大小写，使用Q来进行语句的组装，使得任何一个字段出现keywords都可以被搜索
            all_courses = all_courses.filter(Q(name__icontains=keywords) | Q(desc__icontains=keywords) | Q(desc__icontains=keywords))

        # 课程排序
        # 省略
        return render(request, "course-list.html", {
            "all_courses": courses,
            "sort": sort,
            "hot_courses": hot_courses,
            "keywords": keywords,
            "s_type": s_type
        })

在apps/organizations/views.py中：

# 讲师列表页面
class TeacherListView(View):
    def get(self, request, *args, **kwargs):
        all_teachers = Teacher.objects.all()
        teacher_nums = all_teachers.count()

        hot_teachers = Teacher.objects.all().order_by("-click_nums")[:3]
        # 搜索关键词
        keywords = request.GET.get("keywords", "")
        s_type = "teacher"
        if keywords:
            all_teachers = all_teachers.filter(Q(name__icontains=keywords))

        # 对讲师进行排序
        # 省略

        return render(request, "teachers-list.html", {
            "teachers": teachers,
            "teacher_nums": teacher_nums,
            "sort": sort,
            "hot_teachers": hot_teachers,
            "keywords": keywords,
            "s_type": s_type
        })
# 省略

class OrgView(View):
    def get(self, request, *args, **kwargs):
        # 从数据库中获取数据
        all_orgs = CourseOrg.objects.all()
        all_citys = City.objects.all()
        # 根据点击数进行机构排序,右边栏广告位有限，做切片
        hot_orgs = all_orgs.order_by("-click_nums")[:3]

        # 搜索关键词
        keywords = request.GET.get("keywords", "")
        s_type = "org"
        if keywords:
            all_orgs = all_orgs.filter(Q(name__icontains=keywords) | Q(desc__icontains=keywords))

        # 通过机构类别对课程机构进行筛选,参数名称ct和html中对应
        # 省略
        return render(request, "org-list.html", {
            "all_orgs": orgs,
            "org_nums": org_nums,
            "all_citys": all_citys,
            "category": category,
            "city_id": city_id,
            "sort": sort,
            "hot_orgs": hot_orgs,
            "keywords": keywords,
            "s_type": s_type
        })

在templates/base.html中(61行)：

<div class="middle">
    <div class="wp">
        <a href="index.html"><img class="fl" src="{% static 'images/logo.jpg' %}"/></a>
        <div class="searchbox fr">
            <div class="selectContainer fl">
                <span class="selectOption" id="jsSelectOption" data-value="{% if s_type %}{{ s_type }}{% else %}course{% endif %}">
                    {% if s_type == 'course' %}公开课{% endif %}
                    {% if s_type == 'org' %}课程机构{% endif %}
                    {% if s_type == 'teacher' %}授课老师{% endif %}
                </span>
                <ul class="selectMenu" id="jsSelectMenu">
                    <li data-value="course">公开课</li>
                    <li data-value="org">课程机构</li>
                    <li data-value="teacher">授课老师</li>
                </ul>
            </div>
            <input id="search_keywords" class="fl" type="text" value="{{ keywords }}" placeholder="请输入搜索内容"/>
            <img class="search_btn fr" id="jsSearchBtn" src="{% static 'images/search_btn.png' %}"/>
        </div>
    </div>
</div>

3.url跳转的修改

Edit-Find-Find in Path，选择html文件，搜索href=

在templates/course-comment.html中：

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}课程章节信息-慕学在线网{% endblock %}
{% block custom_css%}
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/course-comment.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
{% endblock %}
{% block custom_bread %}
<section>
    <div class="wp">
        <ul  class="crumbs">
            <!-- 可点击的面包器 -->
            <li><a href="{% url 'index' %}">首页</a>&gt;</li>
            <li><a href="{% url 'course:list' %}">公开课</a>&gt;</li>
            <li><a href="">课程详情</a>&gt;</li>
            <li>课程评论</li>
        </ul>
    </div>
</section>
{% endblock %}

{% block content %}
    <div id="main">
    <div class="course-infos">
        <div class="w pr">
            <div style="height: 15px" class="path">
            </div>
            <div class="hd">
                <h2 class="l">{{ course.name }}</h2>
            </div>
            <div class="statics clearfix">
                <div class="static-item ">
                    <span class="meta-value"><strong>{{ course.get_degree_display }}</strong></span>
                    <span class="meta">难度</span>
                    <em></em>
                </div>
                <div class="static-item static-time">
                    <span class="meta-value">{{ course.learn_times }}分钟</span>
                    <span class="meta">时长</span>
                    <em></em>
                </div>
                <div class="static-item">
                    <span class="meta-value"><strong>{{ course.students }}</strong></span>
                    <span class="meta">学习人数</span>
                    <em></em>
                </div>
            </div>
        </div>
    </div>
    <div class="course-info-main clearfix w has-progress">

        <div class="info-bar clearfix">
            <div class="content-wrap clearfix">
                <div class="content">
                    <div class="mod-tab-menu">
                        <ul class="course-menu clearfix">
                            <li><a class="ui-tabs-active " id="learnOn"  href="{% url 'course:lesson' course.id %}"><span>章节</span></a></li>
                                <li><a id="commentOn" class="active" href="{% url 'course:comments' course.id %}"><span>评论</span></a></li>
                        </ul>
                    </div>

                    <!--发布评论-->
                    <div id="js-pub-container" class="issques clearfix js-form">
                        <div class="wgt-ipt-wrap pub-editor-wrap " id="js-pl-input-fake">
                            <textarea id="js-pl-textarea" class="" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥！" ></textarea>
                        </div>
                        <input type="button" id="js-pl-submit" class="pub-btn" data-cid="452" value="发表评论">
                        <p class="global-errortip js-global-error"></p>
                    </div>
                    <div id="course_note">
                        <ul class="mod-post" id="comment-list">
                            {% for comment in comments %}
                            <li class="post-row">
                                <div class="media">
                                    <span target="_blank"><img src='{{ comment.user.image.url }}' width='40' height='40' /></span>
                                </div>
                                <div class="bd">
                                    <div class="tit">
                                            <span target="_blank">{% if comment.user.nick_name %}{{ comment.user.nick_name }}{% else %}{{ comment.user.username }}{% endif %}</span>
                                    </div>
                                    <p class="cnt">{{ comment.comments }}</p>
                                    <div class="footer clearfix">
                                        <span title="创建时间" class="l timeago">时间：{{ comment.add_time }}</span>
                                    </div>
                                </div>
                            </li>
                            {% endfor %}




                        </ul>
                    </div>

                </div>
                            <div class="aside r">
                <div class="bd">

                    <div class="box mb40">
                        <h4>资料下载</h4>
                        <ul class="downlist">
                            {% for resource in course_resources %}
                            <li>
                                <span ><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
                                <a href="{{ resource.file.url }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="box mb40">
                        <h4>讲师提示</h4>
                        <div class="teacher-info">
                            <a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">
                                <img src='{{ course.teacher.image.url }}' width='80' height='80' />
                            </a>
        <span class="tit">
          <a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">{{ course.teacher.name }}</a>
        </span>
                            <span class="job">{{ course.teacher.work_position }}</span>
                        </div>
                        <div class="course-info-tip">
                            <dl class="first">
                                <dt>课程须知</dt>
                                <dd class="autowrap">{{ course.youneed_know }}</dd>
                            </dl>
                            <dl>
                                <dt>老师告诉你能学到什么？</dt>
                                <dd class="autowrap">{{ course.teacher_tell }}</dd>
                            </dl>
                        </div>
                    </div>


                    <div class="cp-other-learned  js-comp-tabs">
                        <div class="cp-header clearfix">
                            <h2 class="cp-tit l">该课的同学还学过</h2>
                        </div>
                        <div class="cp-body">
                            <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
                                <!-- img 200 x 112 -->
                                <ul class="other-list">
                                    {% for course in related_courses %}
                                    <li class="curr">
                                        <a href="{% url 'course:detail' course.id %}" target="_blank">
                                            <img src="{{ course.image.url }}" alt="{{ course.name }}">
                                            <span class="name autowrap">{{ course.name }}</span>
                                        </a>
                                    </li>
                                    {% endfor %}


                                </ul>
                            </div>
                        </div>
                    </div>

                </div>    </div>

            </div>
            <div class="clear"></div>

        </div>

    </div>
</div>

{% endblock %}

{% block custom_js %}
<script type="text/javascript">
    //添加评论
    $(document).ready(function() {
        $('#js-pl-submit').on('click', function () {
            var comments = $("#js-pl-textarea").val()
            if (comments == "") {
                alert("评论不能为空")
                return
            }
            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'op:comment' %}",
                data: {'course': {{ 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.html";
                        } else {
                            alert(data.msg)
                        }

                    } else if (data.status == 'success') {
                        window.location.reload();//刷新当前页面.
                    }
                },
            });
        });
    });

</script>

{% endblock %}

在templates/course-play.html中:

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}课程章节信息-慕学在线网{% endblock %}
{% block custom_css%}
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/aui.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/video-js.min.css' %}" />
    <style>
        .video-js .vjs-big-play-button{
            top: 50%;
            left: 50%;
        }
    </style>
{% endblock %}
{% block custom_js %}
        <script src="{% static 'js/video.min.js' %}" type="text/javascript"></script>
{% endblock %}
{% block custom_bread %}
<section>
    <div class="wp">
        <ul  class="crumbs">
            <!-- 可点击的面包器 -->
            <li><a href="{% url 'index' %}">首页</a>&gt;</li>
            <li><a href="{% url 'course:list' %}">公开课</a>&gt;</li>
            <li><a href="{% url 'course:detail' course.id %}">{{ course.name }}</a>&gt;</li>
            <li><a href="">课程详情</a>&gt;</li>
            <li>章节信息</li>
        </ul>
    </div>
</section>
{% endblock %}
{% block content %}
    <div id="main">
    <div style="width:1200px;height:675px; margin-left: 340px">
        <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1200"
              poster="http://video-js.zencoder.com/oceans-clip.png"
              data-setup="{}">
            <source src="{{ video.url }}" type='video/mp4'>
        </video>
    </div>
    <div class="course-info-main clearfix w has-progress">

        <div class="info-bar clearfix">
        <div class="content-wrap clearfix">
            <div class="content">
                <div class="mod-tab-menu">
                    <ul class="course-menu clearfix">
                        <li><a class="ui-tabs-active active" id="learnOn"  href="{% url 'course:lesson' course.id %}"><span>章节</span></a></li>
                        <li><a id="commentOn" class="" href="{% url 'course:comments' course.id %}"><span>评论</span></a></li>
                    </ul>
                </div>
            {% if course.notice %}
                <div id="notice" class="clearfix">
                    <div class="l"> <strong>课程公告:</strong> <a  href="javascript:void(0)">{{ course.notice }}</a> </div>
                </div>
            {% endif %}
                <div class="mod-chapters">
                    {% for lesson in course.lesson_set.all %}
                    <div class="chapter chapter-active" >
                        <h3>
                            <strong><i class="state-expand"></i>{{ lesson.name }}</strong>
                        </h3>
                        <ul class="video">
                            {% for video in lesson.video_set.all %}
                            <li>
                                <a target="_blank" href='{% url "course:video" course.id video.id %}' class="J-media-item studyvideo">{{ video.name }} ({{ video.learn_times }})
                                    <i class="study-state"></i>
                                </a>
                            </li>
                            {% endfor %}

                        </ul>
                    </div>
                    {% endfor %}


                </div>

            </div>
            <div class="aside r">
                <div class="bd">

                    <div class="box mb40">
                        <h4>资料下载</h4>
                        <ul class="downlist">
                            {% for resource in course_resources %}
                            <li>
                                <span ><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
                                <a href="{{ resource.file.url }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="box mb40">
                        <h4>讲师提示</h4>
                        <div class="teacher-info">
                            <a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">
                                <img src='{{ course.teacher.image.url }}' width='80' height='80' />
                            </a>
        <span class="tit">
          <a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">{{ course.teacher.name }}</a>
        </span>
                            <span class="job">{{ course.teacher.work_position }}</span>
                        </div>
                        <div class="course-info-tip">
                            <dl class="first">
                                <dt>课程须知</dt>
                                <dd class="autowrap">{{ course.youneed_know }}</dd>
                            </dl>
                            <dl>
                                <dt>老师告诉你能学到什么？</dt>
                                <dd class="autowrap">{{ course.teacher_tell }}</dd>
                            </dl>
                        </div>
                    </div>


                    <div class="cp-other-learned  js-comp-tabs">
                        <div class="cp-header clearfix">
                            <h2 class="cp-tit l">该课的同学还学过</h2>
                        </div>
                        <div class="cp-body">
                            <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
                                <!-- img 200 x 112 -->
                                <ul class="other-list">
                                    {% for course in related_courses %}
                                    <li class="curr">
                                        <a href="{% url 'course:detail' course.id %}" target="_blank">
                                            <img src="{{ course.image.url }}" alt="{{ course.name }}">
                                            <span class="name autowrap">{{ course.name }}</span>
                                        </a>
                                    </li>
                                    {% endfor %}


                                </ul>
                            </div>
                        </div>
                    </div>

                </div>    </div>
        </div>
        <div class="clear"></div>

    </div>

</div>
</div>
{% endblock %}

在templates/course-video.html中：

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}课程章节信息-慕学在线网{% endblock %}
{% block custom_css%}
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/aui.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}" />
{% endblock %}
{% block custom_bread %}
<section>
    <div class="wp">
        <ul  class="crumbs">
            <!-- 可点击的面包器 -->
            <li><a href="{% url 'index' %}">首页</a>&gt;</li>
            <li><a href="{% url 'course:list' %}">公开课</a>&gt;</li>
            <li><a href="">课程详情</a>&gt;</li>
            <li>章节信息</li>
        </ul>
    </div>
</section>
{% endblock %}
{% block content %}
        <div id="main">
    <div class="course-infos">
        <div class="w pr">
            <div style="height: 15px" class="path">
            </div>
            <div class="hd">
                <h2 class="l">{{ course.name }}</h2>
            </div>
            <div class="statics clearfix">
                <div class="static-item ">
                    <span class="meta-value"><strong>{{ course.get_degree_display }}</strong></span>
                    <span class="meta">难度</span>
                    <em></em>
                </div>
                <div class="static-item static-time">
                    <span class="meta-value">{{ course.learn_times }}分钟</span>
                    <span class="meta">时长</span>
                    <em></em>
                </div>
                <div class="static-item">
                    <span class="meta-value"><strong>{{ course.students }}</strong></span>
                    <span class="meta">学习人数</span>
                    <em></em>
                </div>
            </div>
        </div>
    </div>
    <div class="course-info-main clearfix w has-progress">

        <div class="info-bar clearfix">
        <div class="content-wrap clearfix">
            <div class="content">
                <div class="mod-tab-menu">
                    <ul class="course-menu clearfix">
                        <li><a class="ui-tabs-active active" id="learnOn"  href="{% url 'course:lesson' course.id %}"><span>章节</span></a></li>
                        <li><a id="commentOn" class="" href="{% url 'course:comments' course.id %}"><span>评论</span></a></li>
                    </ul>
                </div>
            {% if course.notice %}
                <div id="notice" class="clearfix">
                    <div class="l"> <strong>课程公告:</strong> <a  href="javascript:void(0)">{{ course.notice }}</a> </div>
                </div>
            {% endif %}
                <div class="mod-chapters">
                    {% for lesson in course.lesson_set.all %}
                    <div class="chapter chapter-active" >
                        <h3>
                            <strong><i class="state-expand"></i>{{ lesson.name }}</strong>
                        </h3>
                        <ul class="video">
                            {% for video in lesson.video_set.all %}
                            <li>
                                <a target="_blank" href='{% url "course:video" course.id video.id %}' class="J-media-item studyvideo">{{ video.name }} ({{ video.learn_times }})
                                    <i class="study-state"></i>
                                </a>
                            </li>
                            {% endfor %}

                        </ul>
                    </div>
                    {% endfor %}


                </div>

            </div>
            <div class="aside r">
                <div class="bd">

                    <div class="box mb40">
                        <h4>资料下载</h4>
                        <ul class="downlist">
                            {% for resource in course_resources %}
                            <li>
                                <span ><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
                                <a href="{{ resource.file.url }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="box mb40">
                        <h4>讲师提示</h4>
                        <div class="teacher-info">
                            <a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">
                                <img src='{{ course.teacher.image.url }}' width='80' height='80' />
                            </a>
        <span class="tit">
          <a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">{{ course.teacher.name }}</a>
        </span>
                            <span class="job">{{ course.teacher.work_position }}</span>
                        </div>
                        <div class="course-info-tip">
                            <dl class="first">
                                <dt>课程须知</dt>
                                <dd class="autowrap">{{ course.youneed_know }}</dd>
                            </dl>
                            <dl>
                                <dt>老师告诉你能学到什么？</dt>
                                <dd class="autowrap">{{ course.teacher_tell }}</dd>
                            </dl>
                        </div>
                    </div>


                    <div class="cp-other-learned  js-comp-tabs">
                        <div class="cp-header clearfix">
                            <h2 class="cp-tit l">该课的同学还学过</h2>
                        </div>
                        <div class="cp-body">
                            <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
                                <!-- img 200 x 112 -->
                                <ul class="other-list">
                                    {% for course in related_courses %}
                                    <li class="curr">
                                        <a href="{% url 'course:detail' course.id %}" target="_blank">
                                            <img src="{{ course.image.url }}" alt="{{ course.name }}">
                                            <span class="name autowrap">{{ course.name }}</span>
                                        </a>
                                    </li>
                                    {% endfor %}


                                </ul>
                            </div>
                        </div>
                    </div>

                </div>    </div>
        </div>
        <div class="clear"></div>

    </div>

</div>
</div>
{% endblock %}

在templates/login.html中：

<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
   <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
   <title>慕学在线网登录</title>
   <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
   <link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
</head>
<body>
<div class="dialog" id="jsDialog">
<!--提示弹出框-->
<div class="successbox dialogbox" id="jsSuccessTips">
    <h1>成功提交</h1>
    <div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"/></div>
    <div class="cont">
        <h2>您的需求提交成功！</h2>
        <p></p>
    </div>
</div>
<div  class="noactivebox dialogbox" id="jsUnactiveForm" >
    <h1>邮件验证提示</h1>
    <div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"/></div>
    <div class="center">
        <img src="{% static 'images/send.png' %}"/>
        <p>我们已经向您的邮箱<span class="green" id="jsEmailToActive">12@13.com</span>发送了邮件，<br/>为保证您的账号安全，请及时验证邮箱</p>
        <p class="a"><a class="btn" id="jsGoToEmail" target="_blank" href="http://mail.qq.com">去邮箱验证</a></p>
        <p class="zy_success upmove"></p>
        <p style="display: none;" class="sendE2">没收到，您可以查看您的垃圾邮件和被过滤邮件，也可以再次发送验证邮件（<span class="c5c">60s</span>）</p>
        <p class="sendE">没收到，您可以查看您的垃圾邮件和被过滤邮件，<br/>也可以<span class="c5c green" id="jsSenEmailAgin" style="cursor: pointer;">再次发送验证邮件</span></p>
    </div>
</div>
</div>
<div class="bg" id="dialogBg"></div>
<header>
    <div class="c-box fff-box">
        <div class="wp header-box">
            <p class="fl hd-tips">慕学在线网，在线学习平台！</p>
            <ul class="fr hd-bar">
                <li>服务电话：<span>33333333</span></li>
                <li class="active"><a href="{% url 'login' %}">[登录]</a></li>
                <li><a href="{% url 'register' %}">[注册]</a></li>
            </ul>
        </div>
    </div>
</header>
<section>
    <div class="c-box bg-box">
        <div class="login-box clearfix">
            <div class="hd-login clearfix">
                <a class="index-logo" href="{% url 'login' %}"></a>
                <h1>用户登录</h1>
                <a class="index-font" href="{% url 'login' %}">回到首页</a>
            </div>
            <div class="fl slide">
                <div class="imgslide">
                    <ul class="imgs">
                        {% for banner in banners %}
                            <li><a href="{{ banner.url }}"><img width="483" height="472" src="{{ banner.image.url }}" /></a></li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="unslider-arrow prev"></div>
                <div class="unslider-arrow next"></div>
            </div>
            <div class="fl form-box">
                <div class="tab">
                    <h2 class="{% if dynamic_login %}{% else %}active{% endif %}">账号登录</h2>
                    <h2 class="{% if dynamic_login %}active{% else %}{% endif %}">动态登录</h2>
                </div>
                <form class="tab-form {% if dynamic_login %}hide{% else %}{% endif %}" action="{% url 'login' %}?next={{ next }}" method="post" autocomplete="off" id="form1">
                    <!-- login_form的错误信息error包含username错误，将密码这栏标红显示-->
                    <div class="form-group marb20 {% if login_form.errors.username %}errorput{% endif %}">
                        <input name="username" id="account_l" value="{{ login_form.username.value }}" type="text" placeholder="手机号/邮箱" />
                    </div>
                    <!-- login_form的错误信息error包含password错误，将密码这栏标红显示-->
                    <div class="form-group marb8 {% if login_form.errors.password %}errorput{% endif %}">
                        <input name="password" id="password_l" value="{{ login_form.password.value }}" type="password" placeholder="请输入您的密码" />
                    </div>
                    <div class="error btns login-form-tips" id="jsLoginTips">{% if login_form.errors %}{% for key, error in login_form.errors.items %}{{ error }}{% endfor %}{% else %}{{ msg }}{% endif %}</div>
{#                     <div class="auto-box marb38">#}
{#                <a class="fr" href="forgetpwd.html">忘记密码？</a>#}
{#                     </div>#}
                     <input class="btn btn-green" id="jsLoginBtn" type="submit" value="立即登录 > " />
                    {% csrf_token %}
                </form>
                <form class="tab-form {% if dynamic_login %}{% else %}hide{% endif %}" method="POST" action="{% url 'd_login' %}" id="mobile_register_form" autocomplete="off" method="post" id="form2">

                    <div class="form-group marb20">
                        <input id="jsRegMobile" name="mobile" value="{{ login_form.mobile.value|default_if_none:'' }}" type="text" placeholder="请输入您的手机号码">
                    </div>
                    <div class="form-group marb20 blur" id="jsRefreshCode">
                        {{ login_form.captcha }}
                        {{ d_form.captcha}}
                    </div>
                    <div class="clearfix">
                        <div class="form-group marb8 verify-code">
                            <input id="jsPhoneRegCaptcha" name="code" value="{{ login_form.code.value|default_if_none:'' }}" type="text" placeholder="输入手机验证码">
                        </div>
                        <input type="button" class="verify-code-btn sendcode" id="jsSendCode" value="发送验证码">
                    </div>
                    <div class="error btns" id="jsMobileTips" style="">{% if login_form.errors %}{% for key, error in login_form.errors.items %}{{ error }}{% endfor %}{% else %}{{ msg }}{% endif %}</div>
                    <div class="auto-box marb8">
                    </div>
                    <input class="btn btn-green" id="jsMobileRegBtn" type="button" value="立即登录">
                </form>
                <p class="form-p">没有慕学在线网帐号？<a href="{% url 'register' %}">[立即注册]</a></p>
            </div>
        </div>
    </div>
</section>
<script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/unslider.js' %}" type="text/javascript"></script>
<script src="{% static 'js/validateDialog.js' %}"  type="text/javascript"></script>
<script src="{% static 'js/login.js' %}"  type="text/javascript"></script>
</body>
</html>