接上一篇<Django中使用Bootstrap>
ModelForm 可以将数据库中的信息展示在一个表中，因此我们在查询数据库信息时可以使用ModelForm在前端展示查询到的信息。
在上篇中，要实现点击'id'时，可以显示该id的用户信息，并能修改相关信息。
一、展示数据库信息
1、在信息展示页面的'id'上添加<a>标签，使之在页面上点击'id'时跳转至客户详细信息页面，展示客户各项信息。
customer.py，点击'id'时url跳转至'/stu_crm/customer/id/'
<td><a href="/stu_crm/customer/{{ customer.id }}/">{{ customer.id }}</a></td>
2、添加新的url规则
stu_crm/urls.py
urlpatterns = [ url(r'^customer/(d+)/$',views.customer_info), ]
3、在app(stu_crm)下创建forms.py
forms.py
from django.forms import Form,ModelForm import models class CustomerModelForm(ModelForm): class Meta: model = models.Customer exclude=() #显示所有字段 def __init__(self,*args,**kwargs): super(CustomerModelForm,self).__init__(*args,**kwargs) #先继承父类中的__init__()方法,然后定义自己的 for field_name in self.base_fields: #遍历整个字段列表 field = self.base_fields[field_name] field.widget.attrs.update({'class':'form-control'}) #给每个字段定义样式
4、添加customer_info处理函数
views.py
from stu_crm import forms def customer_info(request,customer_id): customer_obj = models.Customer.objects.get(id=customer_id) form = forms.CustomerModelForm(instance=customer_obj) #将查询到的客户信息塞到form中 return render(request,'stu_crm/customer_info.html',{'customer_info':form}) #将form(表单)以customer_info变量传递给前端页面
以上修改添加完毕后，点击页面的'id'就可以显示每条记录的详细信息了:
二、在页面中修改客户信息
要想修改并向后端服务器提交修改后的数据，需要使用form表单。
1、前端页面customer_info.html，参照bootstrap中的样式，稍加修改:
{% extends 'base.html' %}
{% load customer_tags %}
{% block page-header %}
客户详细信息
{% endblock %}
{% block page-content %}
<form class="form-horizontal" action="" method="post"> {% csrf_token %} ＃添加一个form表单，用于向后端提交数据
{# 循环每个字段 #}
{% for field in customer_info %}
<div class="form-group">
{# 字段名称 #}
{# 如果字段为必填,标签前面加*提示 #}
{% if field.field.required %}
<label class="col-sm-2 control-label">*{{ field.label }}</label>
{# 如果字段非必填 #}
{% else %}
{# 字体变细 #}
<label class="col-sm-2 control-label " style="font-weight:normal">{{ field.label }}</label>
{% endif %}
<div class="col-sm-10">
{# 字段内容 #}
{{ field }}
{# 如果存在错误 #}
{% if field.errors %}
{% for error in field.errors %}
<ul>
<li style="color: red">{{ error }}</li>
</ul>
{% endfor %}
{% endif %}
</div>
</div>
{% endfor %}
{# 添加提交按钮 #}
<input class="btn btn-success pull-right" type="submit" value="Submit">
</form>
{% endblock %}
2、后端处理函数views.py
from django.shortcuts import HttpResponse,redirect
...
def customer_info(request,customer_id):
customer_obj = models.Customer.objects.get(id=customer_id) #查询相应id的数据
if request.method=='POST':
form = forms.CustomerModelForm(request.POST,instance=customer_obj) #将customr_obj中相对应的内容修改为前端提交(request.POST)的,然后塞到form中用于前端展示
if form.is_valid():
form.save()
base_url='/'.join(request.path.split('/')[:-2]) #拼接url，修改完成后跳转显示各条信息列表
return redirect(base_url) #url跳转
else:
form = forms.CustomerModelForm(instance=customer_obj)
return render(request,'stu_crm/customer_info.html',{'customer_info':form}) #将form(表单)以customer_info变量传递给前端页面