当前位置：首页 > news >正文

django+boostrap实现注册

news 2026/2/8 17:12:07

一、django介绍

Django 是一个高级的 Python 网络框架，可以快速开发安全和可维护的网站。由经验丰富的开发者构建，Django 负责处理网站开发中麻烦的部分，因此你可以专注于编写应用程序，而无需重新开发。它是免费和开源的，有活跃繁荣的社区，丰富的文档，以及很多免费和付费的解决方案。

Django 可以使你的应用具有以下优点：

完备性

Django 遵循“功能完备”的理念，提供开发人员可能想要“开箱即用”的几乎所有功能。因为你需要的一切都是一个”产品“的一部分，它们都可以无缝结合在一起，遵循一致性设计原则，并且具有广泛和最新的文档.

通用性

Django 可以（并已经）用于构建几乎任何类型的网站—从内容管理系统和维基，到社交网络和新闻网站。它可以与任何客户端框架一起工作，并且可以提供几乎任何格式（包括 HTML，Rss 源，JSON，XML 等）的内容。你正在阅读的网站就是基于 Django。

在内部，尽管它为几乎所有可能需要的功能（例如几个流行的数据库，模版引擎等）提供了选择，但是如果需要，它也可以扩展到使用其他组件。

安全性

Django 帮助开发人员通过提供一个被设计为“做正确的事情”来自动保护网站的框架来避免许多常见的安全错误。例如，Django 提供了一种安全的方式来管理用户账户和密码，避免了常见的错误，比如将 session 放在 cookie 中这种易受攻击的做法（取而代之的是 cookies 只包含一个密钥，实际数据存储在数据库中）或直接存储密码而不是密码哈希。

密码哈希是通过密码散列函数发送密码而创建的固定长度值。Django 能通过运行哈希函数并将输出的哈希值与存储的哈希值进行比较来检查输入的密码是否正确。然而由于功能的“单向”性质，即使存储的哈希值被泄漏，攻击者也难以破解原始密码。

默认情况下，Django 可以防范许多漏洞，包括 SQL 注入，跨站点脚本，跨站点请求伪造和点击劫持 (请参阅网站安全相关信息，如有兴趣).

可扩展

Django 使用基于组件的“无共享”架构 (架构的每一部分独立于其他架构，因此可以根据需要进行替换或更改). 在不用部分之间有明确的分隔意味着它可以通过在任何级别添加硬件来扩展服务：缓存服务器，数据库服务器或应用程序服务器。一些最繁忙的网站已经成功地缩放了 Django，以满足他们的需求（例如 Instagram 和 Disqus，仅举两个例子，可自行添加）。

可维护性

Django 代码编写是遵照设计原则和模式，鼓励创建可维护和可重复使用的代码。特别是它使用了不要重复自己（DRY）原则，所以没有不必要的重复，减少了代码的数量。Django 还将相关功能分组到可重用的“应用程序”中，并且在较低级别将相关代码分组或模块（模型视图控制器 (MVC) 模式).

灵活性

Django 是用 Python 编写的，它在许多平台上运行。这意味着你不受任务特定的服务器平台的限制，并且可以在许多种类的 Linux，Windows 和 Mac OsX 上运行应用程序。此外，Django 得到许多网络托管提供商的好评，他们经常提供特定的基础设施和托管 Django 网站的文档。

二、Bootstrap 简介

为什么使用 Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

三、具体实现

path

path('register',views.register,name='register'),

view

@require_http_methods(['GET', 'POST'])
def register(request):if request.method == 'GET':return render(request, 'register.html')else:form = RegisterForm(request.POST)if form.is_valid():email = form.cleaned_data.get('email')username = form.cleaned_data.get('username')password = form.cleaned_data.get('password')User.objects.create_user(username=username, email=email, password=password)return redirect(reverse('cwauth:login'))else:print(form.errors)return render(request, 'register.html', {'form': form})def send_email_captcha(request):email = request.GET.get('email')if not email:return JsonResponse({'code':400,'message':'必须传递邮箱'})captcha="".join(random.sample(string.digits,4))#[1,2,4,5]#print(captcha)#存储到数据库CaptchaModel.objects.update_or_create(email=email,defaults={'captcha':captcha})send_mail("博客验证码",message=f"您的验证码是：{captcha}",recipient_list=[email],from_email=None)return JsonResponse({"code":200,"message":"邮箱发送验证码发送成功！"})

register.html

{% extends 'base.html' %}
{% block title %}--注册
{% endblock %}
{% block head %}<script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script><script src="{% static 'js/register.js' %}"></script>
{% endblock %}{% block main %}<div style="max-width: 330px;" class="m-auto"><h1>注册 </h1><form action="" method="POST">{% csrf_token %}<div class="mb-3"><label>用户名</label><input type="text" name="username" class="form-control" placeholder="用户名"></div><div class="mb-3"><label>邮箱</label><input type="email" name="email" class="form-control" placeholder="邮箱"></div><div class="mb-3"><label>验证码</label><div class="input-group mb-3"><input type="text" class="form-control" name="captcha" placeholder="验证码"aria-label="Recipient's username" ><button class="btn btn-outline-secondary" type="button" id="yanzhengma">获取验证码</button></div></div><div class="mb-3"><label>密码</label><input type="password" name="password" class="form-control" placeholder="密码"></div><div class="mb-3"><button class="btn btn-primary w-100">立即注册</button></div></form></div>
{% endblock %}

register.js

$(function () {function bindCaptchaBtnClick() {$("#yanzhengma").click(function (event) {let $this = $(this);let email = $("input[name='email']").val();if (!email) {alert("请先输入邮箱!");return;}$this.off('click');//发送ajax$.ajax('/auth/captcha?email='+email,{method:"GET",success:function (result) {if(result['code']===200){alert('验证码发送成功！');}else {alert(result['message'])}},fail:function (error){console.log(error);}})//倒计时let countdown = 6;let timer = setInterval(function () {if (countdown <= 0) {$this.text('获取验证码');clearInterval(timer);bindCaptchaBtnClick();} else {countdown--;$this.text(countdown + 's')}}, 1000);})}bindCaptchaBtnClick();
});

发送验证码配置

#邮件相关配置
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'# 发送邮件配置
EMAIL_HOST = 'smtp.qq.com'# 服务器名称
EMAIL_PORT = 25# 服务端口
EMAIL_HOST_USER = '14589@139.com' # 填写自己邮箱
EMAIL_HOST_PASSWORD = 'dpbvxyovdsnmbaae'# 在邮箱中设置的客户端授权密码
EMAIL_FROM = '董*'# 收件人看到的发件人
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER
EMAIL_USE_TLS = True   #是否使用TLS安全传输协议
#EMAIL_USE_SSL = True    #是否使用SSL加密，qq企业邮箱要求使用