最简Django用户注册页面实现方案求助

Hey there! Let's tackle your two main issues one by one—first the super simple user registration, then fixing that Bootstrap styling to match the example you're aiming for.

We'll keep this as straightforward as possible, using Django's built-in tools to avoid unnecessary complexity.

Step 1: Add a Registration Form to forms.py #

Django has a ready-made UserCreationForm that handles username and password validation out of the box. We'll extend it to include an email field (since you mentioned it in your Meta class earlier):

from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth.forms import UserCreationForm

User = get_user_model()

class UserLoginForm(forms.Form):
    # 保留你原有的登录表单代码
    username = forms.CharField()
    password = forms.CharField(widget=forms.PasswordInput)

    def clean(self,*args,**kwargs):
        username = self.cleaned_data.get("username")
        password = self.cleaned_data.get("password")
        user = authenticate(username=username,password=password)
        if not user:
            raise forms.ValidationError("This user does not exist")
        if not user.check_password(password):
            raise forms.ValidationError("Incorrect Password")
        if not user.is_active:
            raise forms.ValidationError("This user is no longer active.")
        return super(UserLoginForm, self).clean(*args,**kwargs)

# 新增注册表单
class UserRegisterForm(UserCreationForm):
    email = forms.EmailField(required=True)

    class Meta:
        model = User
        fields = ('username', 'email', 'password1', 'password2')

Step 2: Add a Registration View to views.py #

This view will handle displaying the form and creating a new user when the form is submitted:

from django.contrib.auth import (
    authenticate, get_user_model, login, logout,
)
from django.shortcuts import render, redirect
from .forms import UserLoginForm, UserRegisterForm # 导入新增的注册表单

def login_view(request):
    # 保留你原有的登录视图代码
    title = "Login"
    form = UserLoginForm(request.POST or None)
    if form.is_valid():
        username = form.cleaned_data.get("username")
        password = form.cleaned_data.get('password')
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return redirect('home') # 这里改成你的主页URL名称
    return render(request, "accounts/form.html", {"form":form, "title": title})

# 新增注册视图
def register_view(request):
    title = "Register"
    form = UserRegisterForm(request.POST or None)
    if form.is_valid():
        user = form.save(commit=False)
        password = form.cleaned_data.get('password1')
        user.set_password(password)
        user.save()
        # 注册后自动登录用户
        new_user = authenticate(username=user.username, password=password)
        login(request, new_user)
        return redirect('home') # 跳转到主页
    return render(request, "accounts/form.html", {"form":form, "title": title})

Step 3: Update Your URLs #

Add the registration URL to your accounts/urls.py (create this file if you don't have it):

from django.urls import path
from . import views

urlpatterns = [
    path('login/', views.login_view, name='login'),
    path('register/', views.register_view, name='register'),
    # 别忘了添加登出URL哦
    path('logout/', views.logout_view, name='logout'),
]

(Optional: Add a logout view in views.py if you haven't already—just a simple function that calls logout(request) and redirects to login.)

Step 4: Reuse Your Existing Template #

Your form.html works perfectly for both login and registration—no changes needed here! The view will pass the correct title and form to the template automatically.

The main issues here are using Bootstrap 3 instead of 4 (the example uses v4) and a layout that doesn't match the centered card design. Let's fix that:

Step 1: Update Bootstrap to Version 4.x #

Replace the Bootstrap links in your base.html with these (Bootstrap 4 requires Popper.js for dropdowns/modals):

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Accounts</title>
    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
    <!-- 复制Bootstrap示例中的自定义样式到你的静态文件 -->
    <link rel="stylesheet" type="text/css" href="{% static 'accounts/signin.css' %}" />
</head>

Step 2: Adjust the Base Layout #

Remove the jumbotron (it's pushing your form out of the centered layout) and use a structure that matches the Bootstrap example:

<body class="text-center">
    <div class="container">
        {% block main_content %}
        {% endblock %}
    </div>
</body>

Step 3: Optimize the Form Template #

Update form.html to use Bootstrap 4's form classes for proper styling:

{% extends 'accounts/base.html' %}
{% load widget_tweaks %} <!-- 需先安装django-widget-tweaks -->

{% block main_content %}
<div class="form-signin">
    <h1 class="h3 mb-3 font-weight-normal">{{ title }}</h1>
    <form method='POST' action='' class="form-signin">{% csrf_token %}
        <!-- 为表单字段添加Bootstrap样式 -->
        {% for field in form %}
            <div class="form-group">
                {{ field.label_tag }}
                {{ field|add_class:"form-control" }}
                {% if field.errors %}
                    <small class="text-danger">{{ field.errors|striptags }}</small>
                {% endif %}
            </div>
        {% endfor %}
        <button class="btn btn-lg btn-primary btn-block" type="submit">{{ title }}</button>
    </form>
</div>
{% endblock %}

(注意：要使用add_class过滤器，需要先安装django-widget-tweaks：执行pip install django-widget-tweaks，然后在settings.py的INSTALLED_APPS中添加'widget_tweaks'。)

如果你不想用第三方库，也可以在表单定义中手动添加样式类：

username = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'}))

Step 4: Add the Example's Custom CSS #

将Bootstrap登录示例中的自定义CSS复制到你的static/accounts/signin.css文件中：

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="username"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

这样你的登录/注册页面就能和Bootstrap示例的样式完全匹配了！

内容的提问来源于stack exchange，提问作者X-TremeFighter12