没有合适的资源?快使用搜索试试~ 我知道了~
Django前端模板及crispy form美化等
需积分: 50 48 下载量 77 浏览量
2018-10-25
16:32:38
上传
评论 2
收藏 554KB PDF 举报
温馨提示
试读
21页
从新手角度记录django前端模板应用和crispy form有关内容,涉及bootstrap4框架,自定义用户密码修改和重置等。详细记录了settings文件及url匹配,对Django的forms和自带的views进行了简单应用于修改。
资源推荐
资源详情
资源评论
Django 前端模板
及 crispy form 美化等
by 捉不住的鼬鼠
2018-10-22
目 录
1 开始 .....................................................................................................................................................................3
2 第一个例子 .......................................................................................................................................................4
2.1 安装 ........................................................................................................................................................4
2.2 前端页面 ...............................................................................................................................................4
2.2.1 base.html ...................................................................................................................................4
2.2.2 person_form.html ...................................................................................................................5
2.3 models.py ..............................................................................................................................................5
2.4 views.py ..................................................................................................................................................5
2.5 url.py ........................................................................................................................................................6
2.6 效果 ........................................................................................................................................................6
2.7 添加 bootstrap 样式 ..........................................................................................................................6
2.8 帮助类及更新 ......................................................................................................................................7
3 第二个例子 .......................................................................................................................................................7
4 改造我的项目 ...................................................................................................................................................8
4.1 settings.py ..............................................................................................................................................8
4.2 models.py ........................................................................................................................................... 11
4.3 base.html ............................................................................................................................................. 11
4.4 forms.py ............................................................................................................................................... 14
4.6 url.py ..................................................................................................................................................... 15
4.5 views.py ............................................................................................................................................... 15
4.6 其他补充 ............................................................................................................................................ 16
4.6.1 注册邮箱审查 ...................................................................................................................... 16
4.6.2 修改密码 ................................................................................................................................ 19
4.6.3 session 有效期 ...................................................................................................................... 19
4.6.4 自定义重置密码 .................................................................................................................. 20
5 总结 .................................................................................................................................................................. 21
1 开始
这是紧接前面一篇 Django 用户登录注册等操作的文档,主要计划是学习 crispy form 等
第三方库的使用,为前端进行美化。一开始接触的一些 CSS 和 bootstrap 用得不熟练,所以
还是借助这些库和 django 模板来生成前端页面。像 django admin 和 xadmin 这样的后台管
理,功能非常完善,页面要做很多改变所以还不如自己设计。django bootstrap 库感觉文档
不多,crispy form 以前页有些接触,还能自己配置不同前端框架,所以这里应该会主要用
crispy form 结合模板对 django 前端进行设计美化。
不加修饰的前端页面太粗糙了,差不多就是这样的:
这里有一个网站,专门针对 django 工具包进行分析,如 Auth 模块及前端框架等:
https://djangopackages.org/grids/g/twitter-bootstrap/
比如 django 中 bootstrap 使用情况:
也可以看出 crispy forms 的使用很多,django-bootstrap 则紧跟其后。
2 第一个例子
2.1 安装
参考:
https://simpleisbetterthancomplex.com/tutorial/2018/08/13/how-to-use-bootstrap-4-
forms-with-django.html
使用 pip 安装 crispy form:
pip install django-crispy-forms
然后 INSTALLED_APPS 中添加 crispy_forms,然后再添加一个单独的变量:
CRISPY_TEMPLATE_PACK = 'bootstrap4'
2.2 前端页面
2.2.1 base.html
这里采用 CDN 方式加载 bootstrap4,没添加 js 因为用不到。base.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>
initial-scale=1 指定初始比例显示,shrink-to-fit=no 阻止页面适配视口过程中缩放。
接着 justify-content 指定横向对齐方式,mt 和 mb 类以前也不知道,这是 bootstrap 中
新添加的,就是 margin top 和 bottom,值为 0.5rem。
2.2.2 person_form.html
如下:
{% extends 'base.html' %}
{% block content %}
<form method="post">
{% csrf_token %}
{{ form }}
<button type="submit" class="btn btn-success">Save person</button>
</form>
{% endblock %}
2.3 models.py
from django.db import models
class Person(models.Model):
name = models.CharField(max_length=130)
email = models.EmailField(blank=True)
job_title = models.CharField(max_length=30, blank=True)
bio = models.TextField(blank=True)
2.4 views.py
from django.views.generic import CreateView
from .models import Person
class PersonCreateView(CreateView):
model = Person
template_name = 'person_form.html'
fields = ('name', 'email', 'job_title', 'bio')
剩余20页未读,继续阅读
资源评论
捉不住的鼬鼠
- 粉丝: 194
- 资源: 48
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- mycode.asm
- 基于Python和粒子群算法解决01背包问题并进行可视化.zip
- Qt/qt creator实现TCP通信,多线程实现服务器的并发(server/client)
- Qt/qt creator实现TCP通信,多线程实现服务器的并发(server/client)
- IMG_20240510_083752.jpg
- 中兴R5300G4 BIOS&BMC 最新版本 24年5月
- 基于C++实现的哈夫曼二叉树.zip
- 基于SSM框架和推荐算法的机票预订系统源码(高分项目).zip
- retouch_2024050716253909.jpg
- 基于mediapipe + opencv的手势识别python源码+详细代码注释(高分项目).zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功