設計登入與註冊功能的基礎路由與頁面配置
更新日期： 2024 年 12 月 1 日
本文為 Django 會員系統建立教學，第 1 篇：
- 設計登入與註冊功能的基礎路由與頁面配置 👈 所在位置
- Django 使用者密碼加密方式詳解
- 使用 Django 內建功能實現使用者註冊與登入
- 使用 Django 實現安全登出功能：完整指南
- Django 使用者登入與資料操作的最佳實踐
- Django: 添加公開留言與履歷列表功能
- 使用 Alpine.js 和 Django 動態管理留言按鈕啟用狀態
- Django 收藏功能的實現：使用 ManyToMany 關係與自定義中介模型
建議閱讀本文前，先閱讀完 Django 與前端框架教學 系列文
在這篇文章中，我們將指導新手如何在 Django 中設計基本的登入與註冊功能，包括配置路由、建立模板、以及整合 Django 內建的用戶模型。
設定用戶應用的路由
創建 users 應用
在項目中創建一個名為 users 的應用，並建立以下基礎路由。
檔案位置：users/urls.py
from django.urls import path
from . import views
app_name = "users"
urlpatterns = [
path("login/", views.login, name="login"),
path("logout/", views.logout, name="logout"),
path("register/", views.register, name="register"),
]
建立視圖函數
在 users/views.py 中添加以下代碼，實現基礎的登入、註冊與登出頁面。
檔案位置：users/views.py
from django.shortcuts import render
def login(request):
return render(request, "users/login.html")
def register(request):
if request.POST:
# 處理註冊邏輯，之後重定向至首頁
pass
return render(request, "users/register.html")
def logout(request):
# 處理登出邏輯
pass
整合用戶應用到主路由
將 users 應用的路由整合到項目中。
檔案位置：mysite/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("pages.urls")),
path("resumes/", include("resumes.urls")),
path("comments/", include("comments.urls")),
path("users/", include("users.urls")),
]
設計模板文件
創建模板文件
為登入與註冊功能設計專屬的模板，並將其放入 users/templates/users 資料夾。
在設計時，我們進一步優化了使用者註冊和登入的頁面樣式，使用了 Tailwind CSS 和 DaisyUI 的元件庫。
這樣不僅提升了頁面的一致性，還讓表單更加美觀與響應式。
登入頁面模板
檔案位置：users/templates/users/login.html
{% extends "shared/layout.html" %}
{% block "content" %}
<h1 class="text-3xl">登入</h1>
<form method="POST" class="flex flex-col gap-2">
{% csrf_token %}
<div class="form-control">
<label>Username</label>
<input type="text" class="w-full max-w-xs input input-bordered" name="username" />
</div>
<div class="form-control">
<label>Password</label>
<input type="password" class="w-full max-w-xs input input-bordered" name="password" />
</div>
<div>
<button class="btn btn-primary">登入</button>
</div>
</form>
{% endblock %}註冊頁面模板
檔案位置：users/templates/users/register.html
{% extends "shared/layout.html" %}
{% block "content" %}
<h1 class="text-3xl">註冊</h1>
<form method="POST" class="flex flex-col gap-2">
{% csrf_token %}
<div class="form-control">
<label>Email</label>
<input type="email" class="w-full max-w-xs input input-bordered" name="email" />
</div>
<div class="form-control">
<label>Password</label>
<input type="password" class="w-full max-w-xs input input-bordered" name="password" />
</div>
<div class="form-control">
<label>Password 確認</label>
<input type="password" class="w-full max-w-xs input input-bordered" name="password_confirm" />
</div>
<div>
<button class="btn btn-primary">註冊</button>
</div>
</form>
{% endblock %}
主佈局頁面
在主佈局 layout.html 中，我們引入了 DaisyUI 的主題設置，並使用了 data-theme="lofi" 提供簡約風格，以下是範例代碼：
{% load static %}
<!DOCTYPE html>
<html data-theme="lofi" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Developer</title>
<script src="{% static "scripts/app.js" %}" type="module"></script>
<link rel="stylesheet" href="{% static "styles/app.css" %}" />
</head>
<body>
{% include "shared/flash.html" %}
{% include "shared/navbar.html" %}
<main class="container py-4 mx-auto">
{% block "content" %}{% endblock %}
</main>
</body>
</html>
整合 Django 內建用戶模型
Django 提供了內建的用戶模型，用於管理用戶的認證和資料。
使用內建的用戶模型
客製化用戶模型
如需額外的用戶資料，可以繼承內建用戶模型。
檔案位置：users/models.py
from django.db import models
from django.contrib.auth.models import AbstractUser
class CustomUser(AbstractUser):
phone_number = models.CharField(max_length=15, blank=True, null=True)
記得在項目的 settings.py 中添加以下設置：
AUTH_USER_MODEL = "users.CustomUser"在註冊視圖中使用表單
更新 register 視圖，使用剛剛設計的表單來處理註冊邏輯。
檔案位置：users/views.py
def register(request):
if request.POST:
# 註冊
# redirect 首頁
pass
return render(request, )最終目錄結構
mysite/
├── users/
│ ├── templates/
│ │ ├── users/
│ │ │ ├── login.html
│ │ │ └── register.html
│ ├── urls.py
│ ├── views.py
│ ├── forms.py
│ └── models.py
├── templates/
│ ├── shared/
│ │ └── layout.html
├── mysite/
│ └── urls.py
完成後，現在我們的項目已經支持用戶的登入、註冊功能，並且視圖結構清晰、模板可重用，非常適合進一步擴展功能。