今天學習如何寫一個註冊用戶的界面。

上一節的導航欄中我們修改了導航欄右側的文字為register並將路徑設置為/register，內容如下：

<li><a href="/register">Register</a></li>

為了讓我們在點擊Register的時候，可以成功跳轉到register的頁面，我們需要新建一個register.html的文件，內容如下：

{% extends ‘main/header.html‘ %}

{% block content %}
<form method="POST">
  {% csrf_token %}
  {{ form }}
 
</form>

{% endblock %}

接下來我們需要修改Views.py，來定義一個register函數：

from django.shortcuts import render
from django.http import HttpResponse
from .models import Tutorial
from django.contrib.auth.forms import UserCreationForm
# Create your views here.
def homepage(request):
    return render(request=request, 
            template_name
 
=‘main/home.html‘,
            context={‘tutorials‘:Tutorial.objects.all})

def register(request):
    form = UserCreationForm
    return render(request=request,
            template_name=‘main/register.html‘,
            context={‘form‘:form})

接下來修改main文件夾下的urls.py，來指向這個函數：

from django.urls import path
 
from . import views

app_name = ‘main‘ #此處為了urls的命名空間

urlpatterns = [
    path(‘‘, views.homepage, name=‘homepage‘),
    path(‘register/‘, views.register, name=‘register‘),
]

現在可以來到主頁點擊右上角的Register，可以跳轉到如下界面：

我們可以從上圖看到，界面顯示很糟糕，我們不希望它是左對齊到頁面邊緣的，這時可以使用container，修改header.html中的如下內容：

  <div class="container">
    {% block content %}
    {% endblock %}
  </div>

再次刷新頁面，可以看到顯示好了很多。

仔細觀察可以發現，有些顯示比較混亂，比如Password顯示的位置很奇怪，我們希望它可以另起一行，這裏只需要將header.html中的{{form}}給位{{form.as_p}}即可，此外我們還需要添加一個提交按鈕，最終header.html代碼和顯示效果如下：

{% extends ‘main/header.html‘ %}

{% block content %}
<form method="POST">
  {% csrf_token %}
  {{ form.as_p }}

  <button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
</form>

If you already have an account <a href="/login" target="blank"><strong>login</strong></a> instead.
{% endblock %}

現在有了Submit按鈕，但是如何讓點擊之後發生頁面跳轉呢？我們需要在views.py中進行修改：

from django.shortcuts import render, redirect
from django.http import HttpResponse
from .models import Tutorial
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth import login, logout, authenticate
# Create your views here.
def homepage(request):
    return render(request=request, 
            template_name=‘main/home.html‘,
            context={‘tutorials‘:Tutorial.objects.all})

def register(request):
    if request.method == ‘POST‘:
        form = UserCreationForm(request.POST)
        if form.is_valid():
            user = form.save()
            username = form.cleaned_data.get(‘username‘)
            login(request, user)
            return redirect(‘main:homepage‘)
        else:
            for msg in form.error_messages:
                print(form.error_messages[msg])

            return render(request=request,
                template_name=‘main/register.html‘,
                context={‘form‘:form})

    form = UserCreationForm
    return render(request=request,
            template_name=‘main/register.html‘,
            context={‘form‘:form})

最後，我們就可以輸入用戶名和密碼，點擊Submit，就可以看到頁面成功跳轉到首頁。

參考鏈接：

[1] https://pythonprogramming.net/user-registration-django-tutorial/

Anaconda+django寫出第一個web app（六）