Django 开发 MxOnline 项目笔记　－－　第11章

一、全局功能细节

1. 退出功能

• 在 apps/users/views.py 中定义退出类视图 LogoutView，用户点击退出登录按钮，重定向到首页

# apps/users/views.py 

from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login, logout


class LogoutView(View):
    """
    用户登出类视图
    """
    def get(self, request):
        logout(request)
        return redirect("index")

• 配置 url

# mxonline/urls.py

from users.views import LoginView, LogoutView


urlpatterns = [
    ...
    path("logout/", LogoutView.as_view(), name="logout"),
]

• 前端 base 页面退出按钮加上 url 链接

# templates/base.html | templates/org_base.html | templates/userconter_base.html

<div class="btn">
    <a class="personcenter fl" href="{% url "users:user_info" %}">进入个人中心</a>
    <a class="fr" href="{% url "logout" %}">退出</a>
</div>

01.png 02.png

二、首页开发

• 定义首页类视图 IndexView

# apps/users/views.py

class IndexView(View):
    """
    首页类视图
    """
    def get(self, request):
        # 取出轮播图
        all_banners = Banner.objects.all().order_by("index")

        # 取出课程
        courses = Course.objects.filter(is_banner=False)[:6]
        banner_courses = Course.objects.filter(is_banner=True)[:3]

        # 取出课程机构
        course_orgs = CourseOrg.objects.all()[:15]

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

1. 轮播图

   
   03.png

2. 公开课程

   
   04.png

• 公开课程显示分两部分, 轮播图部分有3个公开课，其他部分加起来6个公开课
• 在 Course 的 model 新增加一个字段 is_banner 用来判断是否是轮播图部分课程

is_banner = models.BooleanField(default=False, verbose_name="是否轮播")

• 前端代码

# templates/index.html

<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: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:course_detail" banner_course.id %}">
                                <img width="470" height="300" src="{{ MEDIA_URL }}{{ banner_course.image }}" />
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="unslider-arrow2 prev"></div>
            <div class="unslider-arrow2 next"></div>
        </div>
            {% for course in courses %}
                <div class="module1_{{ forloop.counter|add:2 }} box">
                    <a href="{% url "course:course_detail" course.id %}">
                        <img width="233" height="190" src="{{ MEDIA_URL }}{{ course.image }}"/>
                    </a>
                    <div class="des">
                        <a href="{% url "course: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 }}">{{ course.course_org.name }}</span>
                        <span class="star fr">{{ course.favorite_nums }}</span>
                    </div>
                </div>
            {% endfor %}
    </div>
</div>

3. 课程机构

   
   05.png

• 前端代码

# templates/index.html

<div class="right">
    <ul>
        {% for course_org in course_orgs %}
            {# divisibleby 过滤器用来判断是否能被 5 整除 #}
            <li {% if forloop.counter|divisibleby:5 %}class="five"{% endif %}>
                <a href="{% url "org:org_home" course_org.id %}">
                    <div class="company">
                        <img width="184" height="100" src="{{ MEDIA_URL }}{{ course_org.image }}"/>
                        <div class="score">
                            <div class="circle">
                                <h2>{{ course_org.tag }}</h2>
                            </div>
                        </div>
                    </div>
                    <p><span class="key" title="{{ course_org.name }}">{{ course_org.name }}</span></p>
                </a>
            </li>
        {% endfor %}
    </ul>
</div>

三、404/500页面配置

• django 2.0 开始，404等页面完全不需要手动去配置，只需要在 tempaltes/ 目录下创建 404.html/500.html 即可，djagno 自动将模板传入对应视图函数中，defaults.page_not_found(request, exception, template_name='404.html')
• 官方文档有说明https://docs.djangoproject.com/en/2.0/ref/views/#error-views
  06.png
• 但是要想显示 404/500 页面，还是要做些配置上的修改

# mxonline/settings.py

DEBUG = False

ALLOWED_HOSTS = ["*"]

• 注释掉 STATICFILES_DIRS，增加 STATIC_ROOT

# mxonline/settings.py

STATIC_URL = '/static/'

# 指明 static 文件存放的路径
# 当 DEBUG = True 的时候, django 自动在这个配置下找 static 文件
# STATICFILES_DIRS = [
#     os.path.join(BASE_DIR, "static")
# ]

# 当 DEBUG = False 的时候, django 不会自动在 STATICFILES_DIRS
# 配置中找 static 文件, 所以需要手动配置 STATIC_ROOT
STATIC_ROOT = os.path.join(BASE_DIR, "static")

• 配置一个处理静态文件的根级 url

# mxonline/urls.py

from mxonline.settings import STATIC_ROOT

urlpatterns = [
    ...
    re_path(r"^static/(?P<path>.*)$", serve, {"document_root": STATIC_ROOT}),
]

07.png

• 随意输入错误网址，显示404

  
  08.png

• 要想显示500错误页面，可以在任意视图函数中加上一句错误的代码即可，比如在首页类视图 IndexView 中加上一句 print(1/0)，访问首页即可看到500

  
  09.png

10.png