Django入门与实践-第15章：用户注销

为了在实现过程保持完整自然流畅的功能，我们还添加注销视图，编辑urls.py以添加新的路由：

myproject/urls.py

  1. from django.conf.urls import url
  2. from django.contrib import admin
  3. from django.contrib.auth import views as auth_views
  5. from accounts import views as accounts_views
  6. from boards import views
  8. urlpatterns = [
  9.     url(r'^$', views.home, name='home'),
  10.     url(r'^signup/$', accounts_views.signup, name='signup'),
  11.     url(r'^logout/$', auth_views.LogoutView.as_view(), name='logout'),
  12.     url(r'^boards/(?P<pk>\d+)/$', views.board_topics, name='board_topics'),
  13.     url(r'^boards/(?P<pk>\d+)/new/$', views.new_topic, name='new_topic'),
  14.     url(r'^admin/', admin.site.urls),
  15. ]

{% raw %}

我们从Django的contrib模块导入了views ，我们将其更名为auth_views 以避免与boards.views发生冲突。注意这个视图有点不同： LogoutView.as_view()。这是一个Django的“基于类”的视图，到目前为止，我们只将类实现为python函数。基于类的视图提供了一种更加灵活的方式来扩展和重用视图。稍后我们将讨论更多这个主题。

打开settings.py文件，然后添加LOGOUT_REDIRECT_URL变量到文件的底部：

myproject/settings.py

  1. LOGOUT_REDIRECT_URL = 'home'

在这里我们给变量指定了一个URL模型的名称，以告诉Django当用户退出登录之后跳转的地址。

在这之后，这次重定向就算完成了。只需要访问URL 127.0.0.1:8000/logout/ 然后您就将被注销。但是再等一下，在你注销之前，让我们为登录用户创建下拉菜单。

为登录用户显示菜单

现在我们需要在 base.html模板中进行一些调整。我们必须添加一个带注销链接的下拉菜单。

Bootstrap 4 下拉组件需要jQuery才能工作。

首先，我们前往 jquery.com/download/，然后下载压缩的 jQuery 3.2.1版本。

jQuery Download

在静态文件夹中，创建一个名为js的新文件夹。将jquery-3.2.1.min.js文件复制到那里。

Bootstrap4还需要一个名为Popper 的库才能工作，前往 popper.js.org 下载它的最新版本。

在popper.js-1.12.5文件夹中，转到dist/umd并将文件popper.min.js 复制到我们的js 文件夹。这里注意，敲黑板！Bootstrap 4只能与 umd/popper.min.js协同工作。所以请确保你正在复制正确的文件。

如果您不再拥有 Bootstrap 4文件，请从getbootstrap.com.再次下载它。

同样，将 bootstrap.min.js文件复制到我们的js文件夹中。最终的结果应该是：

  1. myproject/
  2.  |-- myproject/
  3.  |    |-- accounts/
  4.  |    |-- boards/
  5.  |    |-- myproject/
  6.  |    |-- static/
  7.  |    |    |-- css/
  8.  |    |    +-- js/
  9.  |    |         |-- bootstrap.min.js
  10.  |    |         |-- jquery-3.2.1.min.js
  11.  |    |         +-- popper.min.js
  12.  |    |-- templates/
  13.  |    |-- db.sqlite3
  14.  |    +-- manage.py
  15.  +-- venv/

在base.html文件底部，在{% endblock body %}后面添加脚本：

templates/base.html

  1. {% load static %}<!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>{% block title %}Django Boards{% endblock %}</title>
  6.     <link href="https://fonts.googleapis.com/css?family=Peralta" rel="stylesheet">
  7.     <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  8.     <link rel="stylesheet" href="{% static 'css/app.css' %}">
  9.     {% block stylesheet %}{% endblock %}
  10.   </head>
  11.   <body>
  12.     {% block body %}
  13.     <!-- code suppressed for brevity -->
  14.     {% endblock body %}
  15.     <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
  16.     <script src="{% static 'js/popper.min.js' %}"></script>
  17.     <script src="{% static 'js/bootstrap.min.js' %}"></script>
  18.   </body>
  19. </html>

如果你发现上面的说明很模糊，只需要直接在下面的链接下载文件

打开链接，右键另存为

现在我们可以添加Bootstrap4下拉菜单了：

templates/base.html

  1. <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  2.   <div class="container">
  3.     <a class="navbar-brand" href="{% url 'home' %}">Django Boards</a>
  4.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
  5.       <span class="navbar-toggler-icon"></span>
  6.     </button>
  7.     <div class="collapse navbar-collapse" id="mainMenu">
  8.       <ul class="navbar-nav ml-auto">
  9.         <li class="nav-item dropdown">
  10.           <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  11.             {{ user.username }}
  12.           </a>
  13.           <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
  14.             <a class="dropdown-item" href="#">My account</a>
  15.             <a class="dropdown-item" href="#">Change password</a>
  16.             <div class="dropdown-divider"></div>
  17.             <a class="dropdown-item" href="{% url 'logout' %}">Log out</a>
  18.           </div>
  19.         </li>
  20.       </ul>
  21.     </div>
  22.   </div>
  23. </nav>

Dropdown menu

我们来试试吧，点击注销：

Logout

现在已经成功显示出来了，但是无论用户登录与否，下拉菜单都会显示。不同的是在未登录时用户名显示是空的，我们只能看到一个箭头。

我们可以改进一点：

  1. <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  2.   <div class="container">
  3.     <a class="navbar-brand" href="{% url 'home' %}">Django Boards</a>
  4.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
  5.       <span class="navbar-toggler-icon"></span>
  6.     </button>
  7.     <div class="collapse navbar-collapse" id="mainMenu">
  8.       {% if user.is_authenticated %}
  9.         <ul class="navbar-nav ml-auto">
  10.           <li class="nav-item dropdown">
  11.             <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  12.               {{ user.username }}
  13.             </a>
  14.             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
  15.               <a class="dropdown-item" href="#">My account</a>
  16.               <a class="dropdown-item" href="#">Change password</a>
  17.               <div class="dropdown-divider"></div>
  18.               <a class="dropdown-item" href="{% url 'logout' %}">Log out</a>
  19.             </div>
  20.           </li>
  21.         </ul>
  22.       {% else %}
  23.         <form class="form-inline ml-auto">
  24.           <a href="#" class="btn btn-outline-secondary">Log in</a>
  25.           <a href="{% url 'signup' %}" class="btn btn-primary ml-2">Sign up</a>
  26.         </form>
  27.       {% endif %}
  28.     </div>
  29.   </div>
  30. </nav>

现在，我们告诉Django程序，要在用户登录时显示下拉菜单，如果没有，则显示登录并注册按钮：

Main Menu

{% endraw %}