Logo

新人日誌

首頁關於我部落格

新人日誌

Logo

網站會不定期發佈技術筆記、職場心得相關的內容,歡迎關注本站!

網站
首頁關於我部落格
部落格
分類系列文

© 新人日誌. All rights reserved. 2020-present.

設計登入與註冊功能的基礎路由與頁面配置

最後更新:2024年12月1日Python

本文為 Django 會員系統建立教學,第 1 篇:

  1. 設計登入與註冊功能的基礎路由與頁面配置 👈 所在位置
  2. Django 使用者密碼加密方式詳解
  3. 使用 Django 內建功能實現使用者註冊與登入
  4. 使用 Django 實現安全登出功能:完整指南
  5. Django 使用者登入與資料操作的最佳實踐
  6. Django: 添加公開留言與履歷列表功能
  7. 使用 Alpine.js 和 Django 動態管理留言按鈕啟用狀態
  8. 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

完成後,現在我們的項目已經支持用戶的登入、註冊功能,並且視圖結構清晰、模板可重用,非常適合進一步擴展功能。

目前還沒有留言,成為第一個留言的人吧!

發表留言

留言將在審核後顯示。

Python

目錄

  • 設定用戶應用的路由
  • 創建 users 應用
  • 建立視圖函數
  • 整合用戶應用到主路由
  • 設計模板文件
  • 創建模板文件
  • 整合 Django 內建用戶模型
  • 使用內建的用戶模型
  • 在註冊視圖中使用表單
  • 最終目錄結構