Django從零搭建賣家中心登陸與注冊實戰

在電商系統開發中，賣家中心是一個重要的組成部分，而用戶注冊與登陸則是賣家中心的第一步。本文將詳細介紹如何使用Django框架從零開始搭建一個功能完善的賣家注冊頁面，包括前端界面設計和后端邏輯實現。

一、項目概述

我們將創建一個名為seller_center的Django項目，實現賣家登陸與注冊功能，包括：
- 用戶注冊與登陸表單
- 表單驗證
- 數據庫存儲
- 成功提示頁面

Django 框架流程

# 1. 運行 python manage.py runserver 啟動開發服務器， manage.py 設置 DJANGO_SETTINGS_MODULE 環境變量并調用 Django 的命令行執行函數。
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'seller_center.settings')# 2. Django 根據 DJANGO_SETTINGS_MODULE 加載 settings.py 文件，讀取項目的配置信息。
DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'your_database_name','USER': 'your_database_user','PASSWORD': 'your_database_password','HOST': 'your_database_host','PORT': 'your_database_port',}
}# 3. 開發服務器加載 wsgi.py 文件，創建 WSGI 應用對象(Web 服務器網關接口)。# 4. 瀏覽器發送請求到 http://localhost:8000/ ，Web 服務器將請求傳遞給 WSGI 應用對象。# 5. WSGI 應用對象根據 settings.py 中配置的 ROOT_URLCONF 找到 urls.py 文件，根據請求的 URL 路徑查找對應的視圖函數。
ROOT_URLCONF = 'seller_center.urls'# 6. 調用相應的視圖函數處理請求，并將處理結果返回給客戶端。 	
eg. 注冊流程從用戶在 register.html 頁面提交表單開始，經過 urls.py 進行路由匹配，調用 views.py 中的視圖函數處理請求，使用 forms.py 進行表單驗證，最后通過 models.py 將數據保存到數據庫。

二、環境準備

首先，確保已安裝Python和pip，然后準備一個requirements.txt，內容如下

# Django 框架
Django
# Django 表單美化庫
django-crispy-forms
# 配合 django-crispy-forms 使用的 Bootstrap 5 樣式庫
crispy-bootstrap5
# Python 連接 MySQL 數據庫的驅動
mysqlclient
# 用于加載環境變量的庫
python-dotenv

pip install -r requirements.txt

三、創建項目

創建Django項目

django-admin startproject seller_center
cd seller_center

創建應用

python manage.py startapp users

四、設計數據模型

執行數據庫遷移：

python manage.py makemigrations
python manage.py migrate

注：可能需要對庫下的表授權

在users/models.py中創建賣家模型：

from django.db import modelsclass Seller(models.Model):"""賣家模型"""id = models.BigAutoField(primary_key=True)username = models.CharField('用戶名', max_length=50, unique=True)password = models.CharField('密碼', max_length=100)real_name = models.CharField('真實姓名', max_length=50, null=True, blank=True)phone = models.CharField('電話', max_length=20, null=True, blank=True)email = models.CharField('郵箱', max_length=100, null=True, blank=True)status = models.IntegerField('狀態', default=1, help_text='狀態：0-禁用 1-啟用')create_time = models.DateTimeField('創建時間', auto_now_add=True)update_time = models.DateTimeField('更新時間', auto_now=True)class Meta:app_label = 'users'managed = False,db_table = 'seller'verbose_name = '賣家'verbose_name_plural = '賣家列表'def __str__(self):return self.username

創建自定義表

CREATE TABLE `seller` (`id` bigint NOT NULL AUTO_INCREMENT,`username` varchar(50) NOT NULL,`password` varchar(100) NOT NULL,`real_name` varchar(50) DEFAULT NULL,`phone` varchar(20) DEFAULT NULL,`email` varchar(100) DEFAULT NULL,`status` tinyint DEFAULT '1' COMMENT '狀態：0-禁用 1-啟用',`create_time` datetime DEFAULT CURRENT_TIMESTAMP,`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,PRIMARY KEY (`id`),UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

五、創建表單

在users/forms.py中創建注冊表單：

from django import forms
import hashlib
from django.contrib.auth.hashers import make_password, check_password
from django.contrib.auth.password_validation import validate_password
from django.core.exceptions import ValidationError
from .models import Seller# 封裝表單字段屬性
def get_form_field_attrs(placeholder, autocomplete):return {'class': 'form-control','placeholder': placeholder,'autocomplete': autocomplete}# 創建一個基類來封裝重復的字段和驗證邏輯
class BaseSellerLoginForm(forms.Form):username = forms.CharField(widget=forms.TextInput(attrs=get_form_field_attrs('用戶名', 'username')))password = forms.CharField(widget=forms.PasswordInput(attrs=get_form_field_attrs('密碼', 'current-password')))def clean(self):cleaned_data = super().clean()username = cleaned_data.get('username')password = cleaned_data.get('password')if username and password:try:seller = Seller.objects.get(username=username)if seller.status == 0:raise forms.ValidationError('該賬號已被禁用，請聯系管理員')if not check_password(password, seller.password):raise forms.ValidationError('用戶名或密碼不正確')cleaned_data['seller'] = sellerexcept Seller.DoesNotExist:raise forms.ValidationError('用戶名或密碼不正確')return cleaned_data# 繼承自 BaseSellerLoginForm
class SellerLoginForm(BaseSellerLoginForm):"""賣家登錄表單"""def get_validated_seller(self):"""獲取驗證后的賣家對象，如果驗證失敗返回 None"""if self.is_valid(): # is_valid() 方法會觸發表單類的 clean() 方法return self.cleaned_data.get('seller')return Noneclass SellerRegistrationForm(forms.ModelForm):"""賣家注冊表單"""password1 = forms.CharField(label='密碼',widget=forms.PasswordInput(attrs=get_form_field_attrs('請設置密碼', 'new-password')),help_text='密碼長度不少于8位，包含字母和數字')password2 = forms.CharField(label='確認密碼',widget=forms.PasswordInput(attrs=get_form_field_attrs('請再次輸入密碼', 'new-password')))class Meta:model = Sellerfields = ['username', 'real_name', 'phone', 'email']widgets = {field: forms.TextInput(attrs=get_form_field_attrs(f'請輸入{label}', autocomplete))for field, label, autocomplete in [('username', '用戶名', 'username'),('real_name', '真實姓名', None),('phone', '手機號碼', 'tel'),('email', '郵箱地址', 'email')]}labels = {'username': '用戶名','real_name': '真實姓名','phone': '手機號碼','email': '郵箱地址'}def clean_username(self):username = self.cleaned_data.get('username')if Seller.objects.filter(username=username).exists():raise forms.ValidationError('用戶名已存在，請更換')return usernamedef clean_password2(self):password1 = self.cleaned_data.get('password1')password2 = self.cleaned_data.get('password2')if password1 and password2 and password1 != password2:raise forms.ValidationError('兩次輸入的密碼不一致')try:validate_password(password1)except ValidationError as e:self.add_error('password1', e)return password2def save(self, commit=True):seller = super().save(commit=False)# 對密碼進行哈希處理seller.password = make_password(self.cleaned_data['password1'])if commit:seller.save()return seller  # 返回 seller 實例

六、創建視圖

在users/views.py中實現注冊視圖：

from django.shortcuts import render, redirect
from django.http import HttpResponse  # HttpResponse 仍然從 django.http 導入
from .forms import SellerRegistrationForm, SellerLoginForm
from .models import Seller
import hashlib
from django.contrib.auth.hashers import check_password
import loggingdef register_seller(request):"""賣家注冊視圖:param request: 請求對象:return: 渲染后的注冊頁面或重定向到登錄頁面"""if request.method == 'POST':form = SellerRegistrationForm(request.POST)if form.is_valid():# 創建新的賣家賬號seller = form.save(commit=True)return redirect('login_seller')else:# 處理表單驗證失敗的情況print(form.errors)  # 打印表單錯誤信息else:form = SellerRegistrationForm()return render(request, 'users/register.html', {'form': form})# 配置日志記錄
logger = logging.getLogger(__name__)def login_seller(request):"""賣家登錄視圖:param request: 請求對象:return: 渲染后的登錄頁面或重定向到訂單列表頁面"""if request.method == 'POST':# 簡化表單驗證和獲取賣家對象的邏輯if (seller := SellerLoginForm(request.POST).get_validated_seller()):# 登錄成功，設置 cookieresponse = redirect('base_page')response.set_cookie('seller_id', seller.id, max_age=3600 * 24 * 7)return responseelse:# 表單驗證失敗form = SellerLoginForm(request.POST)logger.error(f"表單驗證失敗: {form.errors}")# 將錯誤信息傳遞到模板return render(request, 'users/login.html', {'form': form})else:form = SellerLoginForm()return render(request, 'users/login.html', {'form': form})def base_page_view(request):return render(request, 'base.html')

七、配置URL

修改seller_center/urls.py：

from django.urls import path, include
from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirectdef home_view(request):return HttpResponseRedirect('/users/login/')urlpatterns = [# 映射空路徑到主頁視圖函數，命名為homepath('', home_view, name='home'),# 修改登錄路由，指向 users 應用的 urls.py 文件path('users/', include('users.urls')),
]

創建users/urls.py：

from django.urls import path
from .views import register_seller, login_seller, base_page_viewurlpatterns = [path('register/', register_seller, name='register_seller'),path('login/', login_seller, name='login_seller'),path('base/', base_page_view, name='base_page'),
]

八、創建模板

創建基礎模板
首先在項目根目錄創建templates文件夾，并在settings.py中配置：

import os # 導入 os 模塊，用于與操作系統進行交互，例如文件路徑操作
...TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [os.path.join(BASE_DIR, 'templates')],  # 添加這一行'APP_DIRS': True,# ...其他配置...},
]

創建templates/base.html：

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"><title>{% block title %}賣家中心{% endblock %}</title><style>body {background-color: #f8f9fa;}.container {max-width: 2500px;margin: 80px auto;padding: 30px;background-color: #fff;border-radius: 10px;box-shadow: 0 0 15px rgba(0,0,0,0.1);}.title {text-align: center;margin-bottom: 30px;color: #333;}.form-group {margin-bottom: 20px;}.btn-action {width: 100%;padding: 10px;border: none;}.link {text-align: center;margin-top: 20px;}</style>
</head>
<body><div class="container">歡迎來到賣家中心！{% block content %}<!-- 頁面內容將在這里填充 -->{% endblock %}</div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

創建注冊頁面
創建templates/users/register.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>賣家注冊</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap Icons --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"><style>body {background-color: #f8f9fa;height: 100vh;display: flex;align-items: center;justify-content: center;}/* 統一容器樣式，與登錄頁面保持一致 */.register-container {max-width: 420px; /* 修改為與登錄頁面一致的寬度 */width: 100%;padding: 30px;background-color: #fff;border-radius: 10px;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}.register-header {text-align: center;margin-bottom: 30px;}.register-header h1 {font-size: 28px;font-weight: 600;color: #344767;}.register-header .icon {font-size: 48px;/* 修改顏色與登錄頁面風格協調 */color: #5e72e4; margin-bottom: 15px;}.form-control {padding: 12px 15px;border-radius: 8px;}.form-control:focus {/* 修改聚焦顏色與登錄頁面一致 */border-color: #5e72e4; box-shadow: 0 0 0 0.25rem rgba(94, 114, 228, 0.25);}/* 修改按鈕樣式與登錄頁面一致 */.btn-primary { background-color: #5e72e4;border-color: #5e72e4;padding: 12px 15px;font-weight: 600;border-radius: 8px;width: 100%;}.btn-primary:hover {background-color: #4a5cd1;border-color: #4a5cd1;}.login-link {text-align: center;margin-top: 20px;color: #6c757d;}.login-link a {/* 修改鏈接顏色與登錄頁面一致 */color: #5e72e4; text-decoration: none;font-weight: 600;}.login-link a:hover {text-decoration: underline;}.errorlist {color: #dc3545;list-style-type: none;padding-left: 0;margin-bottom: 10px;font-size: 14px;}</style>
</head>
<body><div class="container"><div class="row justify-content-center"><div class="col-md-6 col-lg-5"><div class="register-container"><div class="register-header"><div class="icon"><i class="bi bi-person-plus"></i></div><h1>注冊賣家賬號</h1><p class="text-muted">創建賬號以開始使用賣家中心</p></div><form method="post" class="needs-validation" novalidate>{% csrf_token %}<div class="row">{% for field in form %}<div class="{% if field.name == 'password1' or field.name == 'password2' %}col-12{% else %}col-md-6{% endif %} mb-3"><label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>{{ field.errors }}{{ field }}{% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}</div>{% endfor %}</div><div class="mb-3"><button type="submit" class="btn btn-primary"><i class="bi bi-check-circle me-2"></i>注冊</button></div></form><div class="login-link"><p>已有賬號？<a href="{% url 'login_seller' %}">點擊登錄</a></p></div></div></div></div></div><!-- Bootstrap 5 JS Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script><script>// 為表單字段添加Bootstrap的form-control類document.addEventListener('DOMContentLoaded', function() {var inputs = document.querySelectorAll('input, select, textarea');inputs.forEach(function(input) {input.classList.add('form-control');});});</script>
</body>
</html>

創建登陸頁面
創建templates/users/login.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>賣家登錄</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap Icons --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"><style>body {background-color: #f8f9fa;height: 100vh;display: flex;align-items: center;justify-content: center;}.login-container {max-width: 420px;width: 100%;padding: 30px;background-color: #fff;border-radius: 10px;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}.login-header {text-align: center;margin-bottom: 30px;}.login-header h1 {font-size: 28px;font-weight: 600;color: #344767;}.login-header .icon {font-size: 48px;color: #5e72e4;margin-bottom: 15px;}.form-control {padding: 12px 15px;border-radius: 8px;}.form-control:focus {border-color: #5e72e4;box-shadow: 0 0 0 0.25rem rgba(94, 114, 228, 0.25);}.btn-primary {background-color: #5e72e4;border-color: #5e72e4;padding: 12px 15px;font-weight: 600;border-radius: 8px;width: 100%;}.btn-primary:hover {background-color: #4a5cd1;border-color: #4a5cd1;}.register-link {text-align: center;margin-top: 20px;color: #6c757d;}.register-link a {color: #5e72e4;text-decoration: none;font-weight: 600;}.register-link a:hover {text-decoration: underline;}.errorlist {color: #dc3545;list-style-type: none;padding-left: 0;margin-bottom: 10px;font-size: 14px;}</style>
</head>
<body><div class="container"><div class="row justify-content-center"><div class="col-md-6 col-lg-5"><div class="login-container"><div class="login-header"><div class="icon"><i class="bi bi-shop"></i></div><h1>賣家中心</h1><p class="text-muted">請登錄您的賬號以繼續</p></div><form method="post" class="needs-validation" novalidate>{% csrf_token %}{% for field in form %}<div class="mb-3"><label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>{{ field.errors }} <!-- 顯示字段級別的錯誤信息 -->{{ field }}{% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}</div>{% endfor %}<!-- 顯示非字段級別的錯誤信息 -->{% if form.non_field_errors %}<div class="errorlist">{{ form.non_field_errors }}</div>{% endif %}<div class="mb-3"><button type="submit" class="btn btn-primary"><i class="bi bi-box-arrow-in-right me-2"></i>登錄</button></div></form><div class="register-link"><p>還沒有賬號？<a href="{% url 'register_seller' %}">點擊注冊</a></p></div></div></div></div></div><!-- Bootstrap 5 JS Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script><script>// 為表單字段添加Bootstrap的form-control類document.addEventListener('DOMContentLoaded', function() {var inputs = document.querySelectorAll('input, select, textarea');inputs.forEach(function(input) {input.classList.add('form-control');});});</script>
</body>
</html>