Django在线教育平台项目完整实现（四）

slaythedragon

已于 2023-05-13 10:59:29 修改

阅读量1.3k

点赞数

分类专栏： Python及Django 文章标签： django python 后端

于 2022-03-15 11:27:30 首次发布

本文链接：https://blog.csdn.net/kkill_youokk_/article/details/123498273

版权

Python及Django 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

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>

在templates/org-detail-course.html中：（8行）

		<div class="brief group_list">
            {% for course in all_courses.object_list %}
                <div class="module1_5 box">
                    <a class="comp-img-box" href="{% url 'course:detail' course.id %}">

                        <img width="214" height="195" src="{{ MEDIA_URL }}{{ course.image }}"/>
                    </a>
                    <div class="des">
                        <a href="{% url 'course:detail' course.id %}"><h2>{{ course.name }}</h2></a>

在templates/org-detail-homepage.html中：(13行)

<div class="module1_5 box">
    <a href="{% url 'course:detail' course.id %}"><img width="214" src="{{ MEDIA_URL }}{{ course.image }}"/></a>
    <div class="des">
        <a href="{% url 'course:detail' course.id %}"><h2>{{ course.name }}</h2></a>

在templates/org-detail-teachers.html中：(13行)

    <a href="{% url 'org:teacher_detail' teacher.id %}">
    <img width="100" height="100" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ teacher.image }}" src="{{ MEDIA_URL }}{{ teacher.image }}"/>
    </a>
</dt>
<dd>
    <h1>
        <a href="{% url 'org:teacher_detail' teacher.id %}">
        {{ teacher.name }}<span class="key">已认证</span>

在templates/org-list.html中：(84行)

<li class="pic10" style="padding-left:18px;">经典课程：
        {% if org.courses %}
            {% for course in org.courses %}
                <a href="{% url 'course:detail' course.id %}">{{ course.name }}</a>
            {% endfor %}
        {% else %}
            无
        {% endif %}
</li>

294行：

<dl class="des">
    <!-- 使用forloop.counter来计数是第几次循环，显示出图片上标注是第几名 -->
    <dt class="num fl">{{ forloop.counter }}</dt>
    <dd>
        <a href="{% url 'org:home' org.id %}"><h1>{{ org.name }}</h1></a>
        <p>{{ org.address }}</p>
    </dd>
</dl>

在templates/teacher-detail.html中：(64行)

<div class="module1_5 box">
    <a href="{% url 'course:detail' course.id %}">
        <img width="214" height="190" class="scrollLoading" src="{{ course.image.url }}"/>
    </a>
    <div class="des">
        <a href="{% url '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 }}</span>
    </div>
    <div class="bottom">
        <span class="fl">{{ course.course_org.name }}</span>
        <span class="star fr  notlogin" data-favid="15">{{ course.fav_nums }}</span>
    </div>
</div>

在templates/usercenter-base.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>{% block title %}个人信息- 慕学在线网{% endblock %}</title>
   <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
   <link rel="stylesheet" type="text/css" href="{% static 'css/animate.css' %}">
   <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'js/plugins/queryCity/css/cityLayout.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/lq.datetimepick.css' %}"/>
    {% block custom_css %}
    {% endblock %}


    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script>

</head>
<body>
<section class="headerwrap headerwrap2">
    <header>
      <div  class="header2 header">
         <div class="top">
            <div class="wp">
               <div class="fl"><p>服务电话：<b>33333333</b></p></div>
               <!--登录后跳转-->
                        <!--如果用户已经登录-->
                        {% if user.is_authenticated %}

                            <div class="personal">
                                <dl class="user fr">
                                    <dd>{% if user.nick_name %}{{ user.nickname }}{% else %}{{ user.username }}{% endif %}<img class="down fr" src="{% static 'images/top_down.png' %}"/></dd>
                                    <dt><img width="20" height="20" src="{{ user.image.url }}"/></dt>
                                </dl>
                                <div class="userdetail">
                                    <dl>
                                        <dt><img width="80" height="80" src="{{ user.image.url }}"/></dt>
                                        <dd>
                                            <h2>{{ user.nick_name }}</h2>
                                            <p>{{ user.username }}</p>
                                        </dd>
                                    </dl>
                                    <div class="btn">
                                        <a class="personcenter fl" href="{% url 'users:info' %}">进入个人中心</a>
                                        <a class="fr" href="{% url 'logout' %}">退出</a>
                                    </div>
                                </div>
                            </div>
                            {% else %}
                            <!--如果用户未登录-->
                            <a style="color:white" class="fr registerbtn" href="{% url 'register' %}">注册</a>
                            <a style="color:white" class="fr loginbtn" href="{% url 'login' %}">登录</a>
                        {% endif %}
                        <a href="{% url 'users:messages' %}">
                            <div class="msg-num"><span id="MsgNum">{{ unread_nums }}</span></div>
                        </a>

            </div>
         </div>

    <div class="middle">
        <div class="wp">
            <a href="{% url 'index' %}"><img class="fl" src="{% static 'images/logo2.png' %}"/></a>
            <h1>我的慕学网</h1>
        </div>
    </div>
         </div>
    </header>
</section>



<!--crumbs start-->
{% block custom_bread %}

{% endblock %}
<section>
   <div class="wp list personal_list">
   <div class="left">
        <ul>
            <li class="{% if current_page == 'info' %}active2{% endif %}"><a href="{% url 'users:info' %}">个人资料</a></li>
            <li class="{% if current_page == 'mycourse' %}active2{% endif %}"><a href="{% url 'users:mycourse' %}">我的课程</a></li>
            <li class="{% if current_page == 'myfavorg' or current_page == 'myfav_teacher' or current_page == 'myfav_course' %}active2{% endif %}"><a href="{% url 'users:myfavorg' %}">我的收藏</a></li>
            <li class="{% if current_page == 'message' %}active2{% endif %}">
                <a href="{% url 'users:messages' %}" style="position: relative;">
                    我的消息
                </a>
            </li>
        </ul>
   </div>

    {% block right_form %}
    <div class="right">
      <div class="personal_des ">
         <div class="head" style="border:1px solid #eaeaea;">
            <h1>个人信息</h1>
         </div>
         <div class="inforcon">
            <div class="left" style="width:242px;">
                    <iframe id='frameFile' name='frameFile' style='display: none;'></iframe>
                    <form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off" method="post" action="/users/image/upload/" target='frameFile'>
                        <label class="changearea" for="avatarUp">
                            <span id="avatardiv" class="pic">
                                <img width="100" height="100" class="js-img-show" id="avatarShow" src="../media/image/2016/12/default_big_14.png"/>
                            </span>
                            <span class="fl upload-inp-box" style="margin-left:70px;">
                                <span class="button btn-green btn-w100" id="jsAvatarBtn">修改头像</span>
                                <input type="file" name="image" id="avatarUp" class="js-img-up"/>
                            </span>
                        </label>
                    </form>
                    <div style="border-top:1px solid #eaeaea;margin-top:30px;">
                        <a class="button btn-green btn-w100" id="jsUserResetPwd" style="margin:80px auto;width:100px;">修改密码</a>
                    </div>
            </div>
            <form class="perinform" id="jsEditUserForm" autocomplete="off">
               <ul class="right">
                  <li>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：
                           <input type="text" name="nick_name" id="nick_name" value="django" maxlength="10">
                            <i class="error-tips"></i>
                        </li>
                  <li>生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日：
                           <input type="text" id="birth_day" name="birday" value="2009年9月2日" readonly="readonly"/>
                            <i class="error-tips"></i>
                  </li>
                  <li>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
                     <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio"  name="gender" value="male" >男</label>
                     <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="gender" value="female" checked="checked">女</label>
                  </li>
                  <li class="p_infor_city">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
                            <input type="text" name="address" id="address" placeholder="请输入你的地址" value="我来自火星" maxlength="10">
                      <i class="error-tips"></i>
                        </li>
                        <li>手&nbsp;&nbsp;机&nbsp;&nbsp;号：
                            <input class="borderno" type="text" name="mobile" readonly="readonly" value="">
                            <span class="changeemai_btn green changephone-color">[修改]</span>
                        </li>
                  <li class="button heibtn">
                     <input type="button" id="jsEditUserBtn" value="保存">
                  </li>
               </ul>
            </form>
         </div>
      </div>
   </div>
    {% endblock %}


   </div>
</section>


<!--sidebar start-->
<section>
    <ul class="sidebar">
        <li class="qq">
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2023525077&site=qq&menu=yes"></a>
        </li>
        <li class="totop"></li>
    </ul>
</section>
<!--sidebar end-->
<!--header start-->

<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="bidtips dialogbox promptbox" id="jsComfirmDialig">
        <h1>确认提交</h1>
        <div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"/></div>
        <div class="cont">
            <h2>您确认提交吗？</h2>
            <dd class="autoTxtCount">
                <div class="button">
                    <input type="button" class="fl half-btn" value="确定" id="jsComfirmBtn"/>
                    <span class="fr half-btn jsCloseDialog">取消</span>
                </div>
            </dd>
        </div>
    </div>
    <div class="resetpwdbox dialogbox" id="jsResetDialog">
        <h1>修改密码</h1>
        <div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"/></div>
        <div class="cont">
            <form id="jsResetPwdForm" autocomplete="off">
                <div class="box">
                    <span class="word2" >新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
                    <input type="password" id="pwd" name="password1" placeholder="6-20位非中文字符"/>
                </div>
                <div class="box">
                    <span class="word2" >确定密码</span>
                    <input type="password" id="repwd" name="password2" placeholder="6-20位非中文字符"/>
                </div>
                <div class="error btns" id="jsResetPwdTips"></div>
                <div class="button">
                    <input id="jsResetPwdBtn" type="button" value="提交" />
                </div>
                {% csrf_token %}
            </form>
        </div>
    </div>

    <!--手机修改-->
    <div class="dialogbox changephone changephone1" id="jsChangePhoneDialog" style="display: none; margin-top: 81px;">
        <h1>修改手机号码</h1>
        <div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"></div>
        <p>请输入新的手机号码</p>
        <form id="jsChangePhoneForm" autocomplete="off">
            <div class="box">
                <input class="fl change_mobile" type="text" id="jsChangePhone" name="mobile" autocomplete="off" placeholder="输入重新绑定的手机号码">
            </div>
            <div class="box">
                {{ captcha_form.captcha }}
            </div>
            <div class="box">
                <input class="fl" type="text" id="jsChangePhoneCode" name="code" placeholder="输入手机验证码">
                <input class="getcode getting" type="button" id="jsChangePhoneCodeBtn" value="获取验证码">
            </div>
            <div class="error btns" id="jsChangePhoneTips" style="display: none;"></div>
            <div class="button">
                <input type="button" value="完成" id="jsChangePhoneBtn">
            </div>
        {% csrf_token %}
        </form>
    </div>
    <div class="resetpassbox dialogbox" id="jsSetNewPwd">
        <h1>重新设置密码</h1>
        <div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"/></div>
        <p class="green">请输入新密码</p>
        <form id="jsSetNewPwdForm">
            <div class="box">
                <span class="word2">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>
                <input type="password" name="password" id="jsResetPwd" placeholder="请输入新密码"/>
            </div>
            <div class="box">
                <span class="word2">确&nbsp;认&nbsp;密&nbsp;码</span>
                <input type="password" name="password2" id="jsResetPwd2" placeholder="请再次输入新密码"/>
            </div>
            <div class="box">
                <span class="word2">验&nbsp;&nbsp;证&nbsp;&nbsp;码</span>
                <input type="text" name="code" id="jsResetCode" placeholder="请输入手机验证码"/>
            </div>
            <div class="error btns" id="jsSetNewPwdTips"></div>
            <div class="button">
                <input type="hidden" name="mobile" id="jsInpResetMobil" />
                <input id="jsSetNewPwdBtn" type="button" value="提交" />
            </div>
        </form>
    </div>
    <div class="forgetbox dialogbox">
        <h1>忘记密码</h1>
        <div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"/></div>
        <div class="cont">
            <form id="jsFindPwdForm" autocomplete="off">
                <div class="box">
                    <span class="word2" >账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</span>
                    <input type="text" id="account" name="account" placeholder="手机/邮箱"/>
                </div>
                <div class="box">
                    <span class="word3">验证码</span>
                    <input autocomplete="off" class="form-control-captcha find-password-captcha" id="find-password-captcha_1" name="captcha_f_1" placeholder="请输入验证码" type="text" /> <input class="form-control-captcha find-password-captcha" id="find-password-captcha_0" name="captcha_f_0" placeholder="请输入验证码" type="hidden" value="5f3c00e47fb1be12d2fd15b9a860711597721b3f" /> &nbsp;<img src="/captcha/image/5f3c00e47fb1be12d2fd15b9a860711597721b3f/" alt="captcha" class="captcha" />
                </div>
                <div class="error btns" id="jsForgetTips"></div><!--忘记密码错误-->
                <div class="button">
                    <input type="hidden" name="sms_type" value="1">
                    <input id="jsFindPwdBtn" type="button" value="提交" />
                </div>
            </form>
        </div>
    </div>
</div>
<div class="bg" id="dialogBg"></div>


<script src="{% static 'js/selectUi.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/validateDialog.js' %}"  type="text/javascript"></script>
<script src="{% static 'js/deco-common.js' %}"  type="text/javascript"></script>

<script src='{% static "js/plugins/jquery.upload.js" %}' type='text/javascript'></script>
<script src="{% static 'js/validate.js' %}" type="text/javascript"></script>
<script src="{% static 'js/deco-user.js' %}"></script>

<script type="text/javascript">
    $(document).ready(function() {
    });
    $(document).ready(function() {
        $('.jsDeleteFav_teacher').on('click', function () {
            var _this = $(this),
                favid = _this.attr('data-favid');
            $.ajax({
                cache: false,
                type: "POST",
                url: "/org/add_fav/",
                data: {
                    fav_type: 3,
                    fav_id: favid,
                    csrfmiddlewaretoken: '799Y6iPeEDNSGvrTu3noBrO4MBLv6enY'
                },
                async: true,
                success: function (data) {
                    Dml.fun.winReload();
                }
            });
        });
    });

    {#$(document).ready(function() {#}
    {#    $('.jsDeleteFav_org').on('click', function () {#}
    {#        var _this = $(this),#}
    {#            favid = _this.attr('data-favid');#}
    {#        $.ajax({#}
    {#            cache: false,#}
    {#            type: "POST",#}
    {#            url: "{% url 'op:fav' %}",#}
    {#            data: {#}
    {#                fav_type: 2,#}
    {#                fav_id: favid,#}
    {#                csrfmiddlewaretoken: '{{ csrf_token }}'#}
    {#            },#}
    {#            async: true,#}
    {#            success: function (data) {#}
    {#                Dml.fun.winReload();#}
    {#            }#}
    {#        });#}
    {#    });#}
    {# });#}
</script>


<script>
        var shareUrl = '',
            shareText = '',
            shareDesc = '',
            shareComment = '';
        $(function () {
            $(".bdsharebuttonbox a").mouseover(function () {
                var type = $(this).attr('data-cmd'),
                    $parent = $(this).parent('.bdsharebuttonbox'),
                    fxurl = $parent.attr('data-url'),
                    fxtext = $parent.attr('data-text'),
                    fxdesc = $parent.attr('data-desc'),
                    fxcomment = $parent.attr('data-comment');
                switch (type){
                    case 'tsina':
                    case 'tqq':
                    case 'renren':
                            shareUrl = fxurl;
                            shareText = fxdesc;
                            shareDesc = '';
                            shareComment = '';
                        break;
                    default :
                            shareUrl = fxurl;
                            shareText = fxtext;
                            shareDesc = fxdesc;
                            shareComment = fxcomment;
                        break;
                }
            });
        });
        function SetShareUrl(cmd, config) {
            if (shareUrl) {
                config.bdUrl = "" + shareUrl;
            }
            if(shareText){
                config.bdText = shareText;
            }
            if(shareDesc){
                config.bdDesc = shareDesc;
            }
            if(shareComment){
                config.bdComment = shareComment;
            }

            return config;
        }
        window._bd_share_config = {
            "common": {
                "onBeforeClick":SetShareUrl,
                "bdPic":"",
                "bdMini":"2",
                "searchPic":"1",
                "bdMiniList":false
            },
            "share": {
                "bdSize":"16"
            }
        };
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com../api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
{% block custom_js %}
{% endblock %}
</body>
</html>

在templates/usercenter-mycourse.html中：(33行)

<a href="{% url 'course:detail' user_course.course.id %}"><h2>{{ user_course.course.name }}</h2></a>

课程详情页中学习用户的展示的完善：

在templates/course-detail.html中：(39行)

<li class="piclist"><span class="pram word4">学习用户：</span>
                         {% for user_course in course.usercourse_set.all|slice:3 %}
                             <span class="pic"><img width="40" height="40" src="{{ user_course.user.image.url }}"/></span>
                         {% endfor %}
</li>

4.Django验证-自定义用户查询

之前在apps/users/views.py中：

# 用户登录
# 继承Django内部的View
class LoginView(View):
    # 省略
    # 用户数据的获取
    def post(self, request, *args, **kwargs):
        # 省略
            user = authenticate(username=user_name, password=password)

在post表单验证完成后，调用了authenticate方法，传递用户名和密码后验证账户名是否合法。

在apps/users/views.py中：

# 省略
from pure_pagination import Paginator, PageNotAnInteger
from django.contrib.auth.backends import ModelBackend
from django.db.models import Q

from apps.users.forms import LoginForm, DynamicLoginForm, DynamicLoginPostForm, UploadImageForm
# 省略
# 自定义用户验证
class CustomAuth(ModelBackend):
    # 重载方法，会将之前在LoginView中的username和password传递进来
    def authenticate(self, request, username=None, password=None, **kwargs):
        try:
            # 进行查询
            user = UserProfile.objects.get(Q(username=username)|Q(mobile=username))
            # 如果查询到用户，验证密码是否正确
            if user.check_password(password):
                return user
        # 未查询到
        except Exception as e:
            return None

此类需要配置到settings中：

在MxOnline/settings.py中：

# 省略
ALLOWED_HOSTS = []


# Application definition

AUTHENTICATION_BACKENDS = [
    "apps.users.views.CustomAuth"
]

INSTALLED_APPS = [
# 省略

5.Django错误显示页面配置

将403.html、404.html、500.html页面拷贝到templates文件夹下

配置静态文件：

在templates/403.html中：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>403</title>
   <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
   <link rel="stylesheet" type="text/css" href="/static/css/animate.css"">
   <link rel="stylesheet" type="text/css" href="/static/css/style.css">
   <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body class="bg403 errorpage">
<section>
   <div class="wp">
      <div class="cont">
         <div class="fl error_cut"><img src="/static/images/pic403.png"/></div>
         <div class="fr error_cut">
            <img src="/static/images/word403.png"/>
            <h1>没有访问权限！</h1>
            <br/><br/><br/><br/><br/><br/>
            <p>请求被拒！</p>
            <p>您可以尝试<span class="red">【重新加载此页面】</span></p>
         </div>
      </div>
   </div>
</section>
</body>
</html>

在templates/404.html中：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>404</title>
   <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
   <link rel="stylesheet" type="text/css" href="/static/css/animate.css">
   <link rel="stylesheet" type="text/css" href="/static/css/style.css">
   <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body class="bg404 errorpage">
<section>
   <div class="wp">
      <div class="cont">
         <img src="/static/images/pic404.png"/>
         <br/><br/><br/><br/>
         <p>wow~这个页面被外星人抢走了~</p>
         <br/>
         <span>Wow~ this page was the alien took ~</span>
      </div>
   </div>
</section>
</body>
</html>

在templates/500.html中：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>500</title>
   <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
   <link rel="stylesheet" type="text/css" href="/static/css/animate.css">
   <link rel="stylesheet" type="text/css" href="/static/css/style.css">
   <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body class="bg503 errorpage">
<section>
   <div class="wp">
      <div class="cont">
         <div class="fl error_cut"><img src="/static/images/pic503.png"/></div>
         <div class="fr error_cut">
            <img src="/static/images/word503.png"/>
            <br/><br/><br/><br/><br/><br/>
            <p>服务器错误，请稍后重新刷新。</p>
         </div>
      </div>
   </div>
</section>
</body>
</html>

以下改动只是演示错误页面的显示，之后本节以下改动的代码全部注释掉。

在MxOnline/settings.py中：

# 省略
# SECURITY WARNING: don't run with debug turned on in production!
# 设置为False，便不会进行静态文件的代理
DEBUG = False

# 配置哪些IP可以访问，*代表所有IP均可访问
ALLOWED_HOSTS = ['*']

STATIC_URL = '/static/'
# # 指明在哪里搜索静态文件,与变量STATIC_ROOT不能同时存在
# STATICFILES_DIRS = [
#     # 若有多个搜索目录可以添加到这个list中
#     # 使用相对路径
#     os.path.join(BASE_DIR, 'static')
# ]

# 省略
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# 配置静态文件的访问
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# 省略

在MxOnline/urls.py中：

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

urlpatterns = [
    # 省略
    # 配置上传文件访问的url,此正则表达式的意思为：将media后面的所有字符串截取出来放到path变量中
    url(r'media/(?P<path>.*)$', serve, {"document_root": MEDIA_ROOT}),
    # 静态文件配置
    url(r'static/(?P<path>.*)$', serve, {"document_root": STATIC_ROOT}),
    # 机构相关页面
    # 省略

在页面输入一个不存在的URL，如http://127.0.0.1:8000/ddd

会出现404页面。

若URL不存在，Django会在templates文件夹下找404.html。

制造500的错误页面：

在apps/operations/views.py中：

# 首页
class IndexView(View):
    def get(self, request, *args, **kwargs):
        # 制造500的页面错误
        1/0
        banners = Banner.objects.all().order_by("index")
        # 省略

运行项目，可看到500的错误页面。

制造403的错误页面：

在apps/operations/views.py中：

# 首页
class IndexView(View):
    def get(self, request, *args, **kwargs):
        # # 制造500的页面错误
        # 1/0
        # 制造403错误页面
        from django.core.exceptions import PermissionDenied
        raise PermissionDenied
        banners = Banner.objects.all().order_by("index")
        # 省略

运行项目，可看到403的错误页面。

将上述除了页面中的代码都进行还原。

slaythedragon

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Django在线教育平台项目完整实现（四）

Django在线教育平台项目完整实现（四）八、全局搜索和全局错误页面配置1.index.html页面的完善（轮播图）2.搜索功能开发3.url跳转的修改4.Django验证-自定义用户查询5.Django错误显示页面配置八、全局搜索和全局错误页面配置1.index.html页面的完善（轮播图）设置轮播图：在apps/operations/models.py中：# 省略UserProfile = get_user_model()# 轮播图class Banner(BaseModel):
复制链接

扫一扫