接上一篇<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变量传递给前端页面