在上一章节中,我们发现我们的增加数据页面不是很美观,那么我们可以增加一个django-crispy-forms的app,让他来帮助我们美化form页面。具体内容可以访问http://django-crispy-forms.readthedocs.org/en/latest/,获得相关信息及下载插件。
1. 下载django-crispy-forms插件,并安装。
2. 在settings.py中加入相关app,并使其使用bootstrap3的前端。
settings.py:
#...
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
#crispy app
'crispy_forms',
'echo',
]
#...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
#App settings
CRISPY_TEMPLATE_PACK = 'bootstrap3'<strong>
</strong>
3. 修改add.html文件,应用crispy-forms插件
add.html:
<!--引用crispy-forms标签-->
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method='POST' action=''>{% csrf_token %}
<!--将crispy-forms应用到form中-->
{{ form | crispy }}
<input type='submit' value='提交' />
</form>
</body>
</html>
4. 再次访问http://127.0.0.1:8000/add/node/页面,发现form明显优雅了。
5. 完善整个增加数据页面
1) 为了增加可读性,将add.html更名为res_add.html
2) 继承index.html,将res_add.html中的内容填充到index的container block
res_add.html:
{% extends "index.html" %}
<!--引用crispy-forms标签-->
{% load crispy_forms_tags %}
{% block page_title %}
基础资料
{% endblock %}
{% block container %}
<div class="row">
<div class="col-sm-3 pull-left">
<form method='POST' action=''>{% csrf_token %}
<!--将crispy-forms应用到form中-->
{{ form | crispy}}
<input class='btn btn-primary' type='submit' value='提交' />
<a href="{% url 'lists' table=table %} "><input class='btn btn-default' type='button' value='取消' /></a>
</form>
</div>
</div>
{% endblock %}
3) 修改views.py中的add函数,将sub_title传递至页面,同时将跳转页面修改成res_add.html:
views.py:
def add(request, table):
#根据提交的请求不同,获取来自不同Form的表单数据
if table == 'node':
form = NodeForm(request.POST or None)
sub_title = '添加节点'
if table == 'line':
form = LineForm(request.POST or None)
sub_title = '添加线路'
if table == 'device':
form = DeviceForm(request.POST or None)
sub_title = '添加设备'
#判断form是否有效
if form.is_valid():
#创建实例,需要做些数据处理,暂不做保存
instance = form.save(commit=False)
#将登录用户作为登记人
if table == 'node':
instance.node_signer = request.user
if table == 'line':
instance.line_signer = request.user
if table == 'device':
instance.device_signer = request.user
#保存该实例
instance.save()
#跳转至列表页面,配合table参数,进行URL的反向解析
return redirect('lists', table=table)
#创建context来集中处理需要传递到页面的数据
context = {
'form': form,
'table': table,
'sub_title': sub_title,
}
#如果没有有效提交,则仍留在原来页面
return render(request, 'res_add.html', context)
4)再次访问相关页面http://127.0.0.1:8000/add/node/