Day23 - 註冊頁面實作 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 23

Python

Django - 製作網頁一點通系列第 23 篇

Day23 - 註冊頁面實作

16th鐵人賽

telescope

2024-10-07 09:32:39

85 瀏覽

分享至

我們接下來會建立以下幾個頁面

首頁
~~登入頁面~~
註冊頁面
任務頁面

接下來是註冊頁面!

註冊頁面與登入頁面大同小異，另外，註冊頁面Django已有內建可以拿來使用的表單，這讓我們更加容易實作了!

首先，在 urls.py 文件中，需要添加一個路由來處理註冊請求。以下是如何設定這個路由的示範

from TASKapp.views import *

urlpatterns = [
path('register/', register, name='register'),
]

接下來，在 views.py 中，需要創建一個註冊視圖。這個視圖將處理表單的提交，並進行用戶的創建。以下是註冊視圖的實作

from django.contrib.auth.forms import UserCreationForm

def register(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()  # 保存新註冊的用戶
            username = form.cleaned_data.get('username')
            messages.success(request, f'Account created for {username}!')
            return redirect('login')  # 註冊成功後重定向到登入頁面
    else:
        form = UserCreationForm()
    return render(request, 'register.html', {'form': form})

然後，創建一個名為 register.html 的模板。這個模板將包含用戶註冊的表單。以下是模板的內容

{% load static %}
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>REGISTER</title>
        <link rel="stylesheet" href="{% static 'css/register.css' %}">
    </head>
    <body>
        <div class="user-container">
            <h2>Register</h2>
            <form method="post">
                {% csrf_token %}
                {{ form.as_p }}
                <button type="submit" class="btn">Register</button>
            </form>
            <a href="/login/">已有帳戶，直接登入</a>
        </div>     
    </body>
</html>

最後，需要設計一些 CSS 樣式來美化註冊頁面。以下是 register.css 的內容

.user-container {
    max-width: 400px;          /* 最大寬度 */
    height: 95%;
    margin: 0 auto;            /* 居中 */
    padding: 20px;             /* 內邊距 */
    border: 1px solid #ccc;    /* 邊框*/
    border-radius: 8px;        /* 邊框圓角 */
    background-color: #f9f9f9; /* 背景顏色 */
}

form p {
    display: flex;              /* 使用 Flexbox */
    flex-direction: column;     /* 垂直排列 */
    margin-bottom: 20px;        /* 間距 */
}


label {
    margin-bottom: 5px;        /*標籤與輸入框的間距 */
}

/* 輸入框 */
input[type="text"],
input[type="password"] {
    padding: 10px;             
    border: 1px solid #ccc;    
    border-radius: 4px;        /* 邊框圓角 */
}


.helptext {
    font-size: 12px;           
    color: #666;               
    margin-top: 5px;           
    list-style-type: none;     
    padding-left: 0;   
}


.btn {
    padding: 10px;             
    border: none;              
    border-radius: 4px;        
    background-color: #4CAF50; 
    color: white;             
    cursor: pointer;           
    margin-top: 10px;          
}


.btn:hover {
    background-color: #45a049;
}

body {
    min-height: 100vh; 
    height: auto;
    text-align: center;
    font-family: Arial, sans-serif;
    margin: 0; 
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/logo.png');
    background-repeat: repeat;
    background-size: 5%;
    opacity: 0.5;
    z-index: -1;
}

body {
    background: linear-gradient(to right, rgba(240, 244, 195, 1), rgba(165, 214, 167, 1)); /* 背景漸變 */
}

完成後，頁面如下圖