Django前端模板及crispy form美化等
从新手角度记录django前端模板应用和crispy form有关内容,涉及bootstrap4框架,自定义用户密码修改和重置等。详细记录了settings文件及url匹配,对Django的forms和自带的views进行了简单应用于修改。 ### Django前端模板及crispy form美化等 #### 一、引言 本文档作为对上一篇关于Django用户登录注册等内容的延续,主要聚焦于如何利用第三方库Crispy Forms来实现前端页面的美化与优化。对于初学者而言,掌握Django前端模板的应用以及如何结合Bootstrap框架来提升用户体验是非常重要的。 #### 二、Crispy Forms入门 ##### 2.1 安装 Crispy Forms是一个流行的Django库,用于生成美观的表单。我们需要通过pip命令来安装它: ```bash pip install django-crispy-forms ``` 接下来,在项目的`settings.py`文件中的`INSTALLED_APPS`列表里添加`crispy_forms`: ```python INSTALLED_APPS = [ # ... 'crispy_forms', ] ``` 同时,还需要指定所使用的前端框架模板包: ```python CRISPY_TEMPLATE_PACK = 'bootstrap4' ``` 这样设置之后,Crispy Forms就会使用Bootstrap 4的样式来渲染表单。 ##### 2.2 前端页面 在使用Crispy Forms之前,我们先需要构建基础的HTML结构。下面是一个简单的`base.html`示例,其中包含了Bootstrap 4 CSS链接: ```html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Django People</title> </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="col-8"> <h1 class="mt-2">Django People</h1> <hr class="mt-0 mb-4"> {% block content %} {% endblock %} </div> </div> </div> </body> </html> ``` 这里需要注意的是`meta`标签中的`viewport`属性,它确保网页能在不同设备上正确显示。`justify-content-center`类使内容居中显示。`mt-2`、`mt-0`和`mb-4`是Bootstrap 4提供的类,分别表示顶部和底部的外边距大小。 ##### 2.2.2 `person_form.html` 这是一个具体的表单页面示例,继承自`base.html`: ```html {% extends 'base.html' %} {% block content %} <form method="post"> {% csrf_token %} {{ form|crispy }} <button type="submit" class="btn btn-primary">Submit</button> </form> {% endblock %} ``` 这里使用了Crispy Forms提供的`{{ form|crispy }}`来渲染表单。`csrf_token`是Django内置的安全特性,用于防止跨站请求伪造攻击。 #### 三、自定义用户密码修改与重置 在实际应用中,除了常规的表单操作外,我们还可能需要实现自定义的密码修改和重置功能。 ##### 3.1 自定义密码修改 在`views.py`中可以实现自定义的密码修改逻辑: ```python from django.contrib.auth import update_session_auth_hash from django.contrib.auth.forms import PasswordChangeForm from django.contrib import messages from django.shortcuts import render, redirect def change_password(request): if request.method == 'POST': form = PasswordChangeForm(user=request.user, data=request.POST) if form.is_valid(): user = form.save() update_session_auth_hash(request, user) # Important! messages.success(request, 'Your password was successfully updated!') return redirect('password_change') else: messages.error(request, 'Please correct the error below.') else: form = PasswordChangeForm(user=request.user) return render(request, 'change_password.html', {'form': form}) ``` 这里的`update_session_auth_hash`函数非常重要,它确保用户更改密码后仍然保持登录状态。 ##### 3.2 自定义密码重置 为了实现自定义的密码重置功能,可以通过覆盖Django内置的`PasswordResetView`视图: ```python from django.contrib.auth.views import PasswordResetView from django.urls import reverse_lazy class CustomPasswordResetView(PasswordResetView): success_url = reverse_lazy('password_reset_done') email_template_name = 'registration/password_reset_email.html' subject_template_name = 'registration/password_reset_subject.txt' ``` 通过这种方式,我们可以自定义邮件模板和其他细节。 #### 四、整合项目 接下来,我们将上述内容整合到现有的项目中。 ##### 4.1 `settings.py` 在`settings.py`文件中,除了已经添加的Crispy Forms配置外,还可以进一步配置其他与安全相关的选项: ```python # 安全相关配置 SESSION_COOKIE_SECURE = True # 只通过HTTPS发送session cookie CSRF_COOKIE_SECURE = True # 只通过HTTPS发送CSRF cookie SECURE_SSL_REDIRECT = True # 重定向所有非HTTPS请求至HTTPS ``` 这些配置增强了项目的安全性。 ##### 4.2 `models.py` 根据具体需求,可以在`models.py`中定义模型。例如,定义一个简单的`Person`模型: ```python from django.db import models from django.contrib.auth.models import AbstractUser class Person(AbstractUser): bio = models.TextField(max_length=500, blank=True) location = models.CharField(max_length=30, blank=True) birth_date = models.DateField(null=True, blank=True) ``` 这里扩展了Django内置的`AbstractUser`模型,增加了个人简介、位置和生日字段。 ##### 4.3 `base.html` 在`base.html`中,可以进一步完善页面布局和样式。例如,增加导航栏或侧边栏等元素。 ##### 4.4 `forms.py` 定义表单时,可以使用Crispy Forms提供的辅助方法来自定义表单的外观: ```python from django import forms from crispy_forms.helper import FormHelper from crispy_forms.layout import Submit class PersonForm(forms.ModelForm): class Meta: model = Person fields = ['username', 'email', 'bio'] def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.helper = FormHelper() self.helper.form_method = 'post' self.helper.add_input(Submit('submit', 'Save')) ``` ##### 4.5 `views.py` 在`views.py`中,定义视图函数来处理不同的请求: ```python from django.shortcuts import render from .forms import PersonForm def person_create_view(request): form = PersonForm() if request.method == 'POST': form = PersonForm(request.POST) if form.is_valid(): form.save() return redirect('person_add') return render(request, 'person_form.html', {'form': form}) ``` ##### 4.6 其他补充 此外,还可以考虑以下几点: - **注册邮箱验证**:使用Django内置的信号机制或者第三方库(如django-allauth)来实现邮箱验证流程。 - **Session有效期**:可以通过调整`settings.py`中的`SESSION_COOKIE_AGE`来控制session的有效期。 - **自定义重置密码**:上面已经提到了如何实现自定义密码重置功能,可以根据具体需求进一步定制邮件模板和URL路径等。 #### 五、总结 本文档系统地介绍了如何在Django项目中使用Crispy Forms结合Bootstrap 4来美化前端界面,并且涵盖了自定义密码修改与重置的功能实现。通过上述步骤,不仅可以提升用户体验,还能增强应用程序的安全性。希望本文档能对Django初学者提供有益的指导。
剩余20页未读,继续阅读
- 粉丝: 200
- 资源: 48
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 35 财务汇报部门历年薪酬统计图表.xlsx
- 39 财务工资发放表.xlsx
- 37 财务工资支出上半年年中总结报告.xlsx
- 38 财务分析工资年度开支表.xlsx
- 41 财务公司部门工资开支分析表.xlsx
- 40 财务分析部门工资支出图表.xlsx
- 42 部门员工工资统计表.xlsx
- 45 年度薪酬费用统计表.xlsx
- 44 人事薪酬管理台账.xlsx
- 48 工资对比分析报表模板.xls
- 47 可视化工资表自动统计1.xlsx
- 46 企业员工工资支出预算表.xlsx
- 43 工资收入对比分析表.xlsx
- 50 薪资分析图表.xlsx
- 49 薪酬数据统计分析报表excel模板.xlsx
- 年度公司薪酬调查分析方案(完整版).docx