1. 项目概述与目标这个Django实战项目旨在构建一个简易的学生选课管理系统登录模块。作为系列教程的第四部分我们将专注于实现一个完整的登录页面功能。不同于简单的表单展示这里需要处理用户身份区分学生/教师、表单验证、会话管理等核心功能。登录系统是任何管理系统的门户直接关系到后续功能的安全性和用户体验。在Django框架下我们需要协调多个组件模板(Template)负责前端展示视图(View)处理业务逻辑表单(Form)进行数据验证URL路由实现页面导航提示本教程假设读者已完成前期的Django环境搭建和基础模型(Model)定义。如果尚未完成建议先创建好Student和Teacher模型类包含至少uid和password字段。2. 项目结构与技术选型2.1 基础目录结构规范的目录结构是项目可维护性的基础。建议采用如下布局SSCMS/ ├── user/ # 用户模块 │ ├── templates/ # 模板文件 │ │ └── user/ # 命名空间防止冲突 │ ├── forms.py # 表单定义 │ ├── urls.py # 子路由 │ └── views.py # 视图逻辑 ├── SSCMS/ │ ├── settings.py # 主配置 │ └── urls.py # 主路由 └── manage.py # 管理脚本2.2 关键技术组件Django表单系统使用django.forms创建强类型表单自动生成HTML并处理验证模板继承通过{% extends %}实现页面布局复用避免代码重复类视图(可选)虽然本示例使用函数视图但了解django.views.generic中的LoginView等类视图有助于后续扩展安全机制自动处理CSRF防护密码字段使用PasswordInput控件3. 分步实现登录功能3.1 基础模板搭建首先创建所有登录页面的基础模板background.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title学生选课管理系统/title style .main-container { width: 100vw; height: 100vh; background: linear-gradient(135deg, #6e8efb, #a777e3); } .login-container { width: 400px; margin: 0 auto; padding: 30px; background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } /style /head body div classmain-container div classlogin-container {% block content %}{% endblock %} /div /div /body /html3.2 身份选择页面创建login_home.html继承基础模板{% extends user/background.html %} {% block content %} h2请选择登录身份/h2 div classidentity-choices a href{% url user:login student %} classbtn student-btn 学生登录 /a a href{% url user:login teacher %} classbtn teacher-btn 教师登录 /a /div {% endblock %}对应的视图函数# user/views.py from django.shortcuts import render def home(request): return render(request, user/login_home.html)3.3 登录表单设计在forms.py中定义两种登录表单from django import forms from django.core.validators import MinLengthValidator class BaseLoginForm(forms.Form): uid forms.CharField( labelID, max_length10, widgetforms.TextInput(attrs{class: form-control}) ) password forms.CharField( label密码, max_length30, widgetforms.PasswordInput(attrs{class: form-control}), validators[MinLengthValidator(6)] ) class StudentLoginForm(BaseLoginForm): uid.label 学号 class TeacherLoginForm(BaseLoginForm): uid.label 教职工号3.4 登录视图实现核心登录逻辑视图# user/views.py from django.contrib.auth import authenticate, login from django.shortcuts import render, redirect from .forms import StudentLoginForm, TeacherLoginForm def user_login(request, kind): form_class StudentLoginForm if kind student else TeacherLoginForm if request.method POST: form form_class(request.POST) if form.is_valid(): # 实际项目这里应该验证数据库 user authenticate( request, usernameform.cleaned_data[uid], passwordform.cleaned_data[password] ) if user is not None: login(request, user) return redirect(dashboard) form.add_error(None, 账号或密码错误) else: form form_class() return render(request, user/login_detail.html, { form: form, kind: kind })3.5 登录页面模板login_detail.html模板{% extends user/background.html %} {% block content %} h2{{ kind|title }}登录/h2 form methodpost {% csrf_token %} {{ form.non_field_errors }} {% for field in form %} div classform-group {{ field.label_tag }} {{ field }} {{ field.errors }} /div {% endfor %} button typesubmit classsubmit-btn登录/button a href{% url user:home %} classback-link返回/a /form {% endblock %}4. 路由配置与URL设计4.1 主URL配置SSCMS/urls.pyfrom django.contrib import admin from django.urls import path, include urlpatterns [ path(admin/, admin.site.urls), path(user/, include(user.urls, namespaceuser)), ]4.2 用户模块URLuser/urls.pyfrom django.urls import path from . import views app_name user urlpatterns [ path(, views.home, namehome), path(login/str:kind/, views.user_login, namelogin), ]5. 样式优化与前端交互5.1 基础CSS增强在background.html的head中添加style .form-group { margin-bottom: 15px; } .form-control { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .submit-btn { background: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; } .errorlist { color: red; font-size: 0.9em; } /style5.2 响应式设计改进添加媒体查询适应移动设备media (max-width: 600px) { .login-container { width: 90%; padding: 20px; } }6. 安全增强措施6.1 CSRF防护Django默认启用CSRF防护确保表单中包含form methodpost {% csrf_token %} !-- 表单内容 -- /form6.2 密码安全实践在生产环境中永远不要明文存储密码使用Django内置的密码哈希器from django.contrib.auth.hashers import make_password hashed_pwd make_password(raw_password)6.3 登录尝试限制实现简单的登录尝试限制# user/views.py from django.core.cache import cache def user_login(request, kind): # 获取客户端IP ip request.META.get(REMOTE_ADDR) attempt_key flogin_attempts_{ip} attempts cache.get(attempt_key, 0) if attempts 5: return HttpResponse(尝试次数过多请稍后再试, status429) # ...原有登录逻辑... if user is None: attempts 1 cache.set(attempt_key, attempts, timeout300) # 5分钟限制7. 测试与调试7.1 单元测试示例创建tests.pyfrom django.test import TestCase, Client from django.urls import reverse class LoginTests(TestCase): def setUp(self): self.client Client() def test_student_login_page(self): response self.client.get(reverse(user:login, args[student])) self.assertEqual(response.status_code, 200) self.assertContains(response, 学生登录) def test_teacher_login_page(self): response self.client.get(reverse(user:login, args[teacher])) self.assertEqual(response.status_code, 200) self.assertContains(response, 教师登录)7.2 常见问题排查模板找不到错误确保settings.py中TEMPLATES的DIRS包含模板目录检查模板文件是否在正确的templates/user/目录下URL反向解析失败确认app_name在子urls.py中正确定义检查name参数在path()中的拼写表单验证不生效确保表单的is_valid()被调用检查模板中是否正确显示{{ form.errors }}8. 项目扩展方向8.1 添加注册功能扩展forms.pyclass StudentRegisterForm(forms.ModelForm): password forms.CharField(widgetforms.PasswordInput) confirm_password forms.CharField(widgetforms.PasswordInput) class Meta: model Student fields [uid, name, email] def clean(self): if self.cleaned_data[password] ! self.cleaned_data[confirm_password]: raise forms.ValidationError(两次密码输入不一致)8.2 记住登录状态修改登录视图def user_login(request, kind): # ...原有逻辑... if user is not None: login(request, user) if request.POST.get(remember_me): request.session.set_expiry(30 * 24 * 60 * 60) # 30天 return redirect(dashboard)8.3 第三方登录集成使用django-allauth添加社交账号登录安装包pip install django-allauth添加配置# settings.py INSTALLED_APPS [ allauth, allauth.account, allauth.socialaccount, allauth.socialaccount.providers.weibo, ]9. 性能优化建议模板片段缓存{% load cache %} {% cache 300 login_form %} !-- 表单内容 -- {% endcache %}静态文件压缩 使用django-compressor合并压缩CSS/JS# settings.py INSTALLED_APPS [compressor] STATICFILES_FINDERS [ compressor.finders.CompressorFinder, ]数据库查询优化 在登录验证时使用select_relateduser User.objects.select_related(student).get(usernameusername)10. 部署注意事项生产环境配置设置DEBUG False配置正确的ALLOWED_HOSTS使用HTTPS加密登录请求静态文件收集python manage.py collectstatic使用GunicornNGINX 典型Gunicorn启动命令gunicorn --workers 3 SSCMS.wsgi:application11. 项目完整代码结构最终项目结构应类似SSCMS/ ├── user/ │ ├── migrations/ │ ├── templates/ │ │ └── user/ │ │ ├── background.html │ │ ├── login_home.html │ │ └── login_detail.html │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── forms.py │ ├── models.py │ ├── tests.py │ ├── urls.py │ └── views.py ├── SSCMS/ │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── manage.py └── requirements.txt在开发过程中我特别建议使用Django Debug Toolbar来监控查询性能和请求/响应周期。这个工具能直观地展示页面加载过程中的各种细节对于优化登录系统的性能非常有帮助。安装后只需在settings.py中添加到INSTALLED_APPS并配置中间件即可。