管理員登入與登出

執行以下指令建立資料庫，並建立管理員帳號：




python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser

開啟網站服務

python manage.py runserver 0.0.0.0:80

建立路徑規則

開啟專案的路徑規則檔 library/library/urls.py，修改第 17 行，並新增第 18 - 20, 24, 27 - 37 行：























from django.contrib import admin
from django.urls import path, include
from django.views.generic import RedirectView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('user/', include('django.contrib.auth.urls')),
]

# 加入靜態檔案的處理規則
urlpatterns += static(
    settings.STATIC_URL, 
    document_root=settings.STATIC_ROOT
)

# 加入使用者上傳檔案的處理規則
urlpatterns += static(
    settings.MEDIA_URL, 
    document_root=settings.MEDIA_ROOT
)

這樣就可以透過內建的 django.contrib.auth 應用程式來處理使用者登入/登出的請求：

功能 路徑
使用者登入 user/login
使用者登出 user/logout

建立網站基底頁面範本

新增基底範本檔 library/templates/base.html，內容如下：




























{% load static %}<!doctype html>
<html lang="zh-hant">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    <title>圖書借閱系統</title>
  </head>
  <body>
    <div class="container">
      {% include "navbar.html" %}
      <div class="main-content">
        {% block content %}{% endblock %}
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    {% block footer_script %}{% endblock %}
  </body>
</html>

另外再新增導覽列範本 library/templates/navbar.html，將其內容編輯如下：





























<!-- Navbar begin //-->
<nav class="navbar navbar-expand-md navbar-dark bg-info mb-2">
  <!-- 網站標誌 -->
  <div class="navbar-brand">圖書借閱系統</div>
  <!-- 在小螢幕的設備上顯示可展開/收合導覽選單的按鈕 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 導覽列選單內容(可收合) -->
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      {% if user.is_authenticated %}
      <li class="nav-item">
        <a href="{% url 'logout' %}" class="nav-link">
          <i class="fas fa-sign-out-alt"></i> 登出 {{ user.username }}
        </a>
      </li>
      {% else %}
      <li class="nav-item">
        <a href="{% url 'login' %}" class="nav-link">
          <i class="fas fa-sign-in-alt"></i>登入
        </a>
      </li>
      {% endif %}
    </ul>
  </div>
</nav>
<!-- Navbar end //-->

建立登入/登出頁面範本

先新增存放登入登出頁面範本的資料夾 library/templates/registration，再新增登入頁面範本檔案 library/templates/registration/login.html，內容如下：
























{% extends "base.html" %}

{% block content %}
{% if form.errors %}
<div class="alert alert-danger">
  {{ form.errors }}
</div>
{% endif %}
<form action="" method="POST">
  {% csrf_token %}
  <div id="login-form" class="form-inline">
    <input type="text" name="username" id="username" placeholder="請輸入您的帳號" />
    <input type="password" name="password" id="pwd" placeholder="請輸入您的密碼" />
    <input type="submit" class="btn btn-primary" value="登入">
  </div>
</form>
<script>
var inputs = document.querySelectorAll('#login-form input');
inputs.forEach(function(item) {
  item.classList.add('form-control');
});
</script>
{% endblock %}

新增登出頁面範本檔案 library/templates/registration/logged_out.html：








{% extends "base.html" %}

{% block content %}
<p class="alert alert-info">您已登出!!</p>  

<a href="{% url 'login' %}" class="btn btn-primary">請按此處重新登入</a>
{% endblock %}