在上一章節中，我們發現我們的增加數據頁面不是很美觀，那麼我們可以增加一個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/
