[oldboy-django][2深入django]学生管理（Form）-- 添加（美化Form表单:通过form给前端标签添加属性）
1 在student_list添加一个a标签，
<p><a href="/app01/add_student" class="btn btn-primary">添加</a> </p>
2 urls分发路由
url(r'^app01/', include('app01.urls')),
url(r'^add_student$', views.add_student),
3 前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css"> </head> <body> <div style="width:500px;margin:0 auto"> <h4 style="margin-left: 25px;">添加学生</h4> <form class="form-horizontal" action="/app01/add_student" method="POST"> {% csrf_token %} <div class="form-group"> <label class="col-sm-2 control-label">姓名:</label> <div class="col-sm-10"> {{ obj.name }}{{ obj.errors.name.0 }} </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">年龄:</label> <div class="col-sm-10"> {{ obj.age }} {{ obj.errors.age.0 }} </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">邮箱:</label> <div class="col-sm-10"> {{ obj.email }} {{ obj.errors.email.0 }} </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">班级:</label> <div class="col-sm-10"> {{ obj.cls_id }} {{ obj.errors.cls_id.0 }} </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" class="btn btn-default" value="提交"/> </div> </div> </form> </div> </body> </html>
4 视图
def add_student(request): if request.method == 'GET': obj = StudentForm() return render(request, 'app01_add_student.html', {'obj': obj}) else: obj = StudentForm(request.POST) if obj.is_valid(): models.Student.objects.create(**obj.cleaned_data) return redirect('/app01/students') else: return render(request, 'app01_add_student.html', {'obj': obj})
5 数据规则类设置
class StudentForm(Form): name = fields.CharField(max_length=8, min_length=2, widget=widgets.TextInput(attrs={'class': 'form-control'}) ) age = fields.IntegerField(max_value=25, min_value=18, widget=widgets.TextInput(attrs={'class': 'form-control'}) ) email = fields.EmailField(widget=widgets.TextInput(attrs={'class': 'form-control'}) ) cls_id = fields.IntegerField( # widget=widgets.Select(choices=[(1, '上海'), (2,'北京')]) # choices 类型为[(),()] widget=widgets.Select(choices=models.Classes.objects.values_list('id', 'title'), attrs={'class': 'form-control'}) )
6 补充：如何通过form表单实现： 给前端标签添加class等属性，以及设置Input输入框的type属性
# Form生成html标签 a. 通过Form生成Input输入框，Form标签，以及submit标签还是要在前端写的， 但是Form标签内的Input标签可以在后台实现；只需要按以下步骤 - views定义StudentForm(Form)类 - views视图函数将Form实例化对象传递给前端 - 前端{{ obj.段 }}即可 b. 通过Form设置前端Input的type属性,即设置不同类型的输入框 # 设置name为text, cls_id为下拉框 class StudentForm(Form): name = fields.CharField(widget= widgets.InputText()) cls_id = fields.IntegerField(widget = widgets.Select()) c. 设置下拉框的内容choices属性 class StudentForm(Form): cls_id = fields.IntegerField( widget=widgets.Select(choices=models.Classes.objects.values_list('id', 'title')) ) 注意： choices的值必须[元组，(), ()]类型 widget=widgets.Select(choices=[(1, '上海'), (2,'北京')]) d.设置input输入框的class属性 -- attrs name = fields.CharField(max_length=8, min_length=2, widget=widgets.TextInput(attrs={'class': 'form-control'}) ) cls_id = fields.IntegerField( widget=widgets.Select( choices=models.Classes.objects.values_list('id', 'title'), attrs={'class': 'form-control'} ) ) 注意： attrs参数必须放在TextInput或者Select等内部，而且值必须为字典 e. 通过Form设置前端Input的默认显示值 只要在视图函数将实例化一个Form对象，并且设置initial值即可 student_dict = models.Student.objects.filter(id=nid).values('name', 'age', 'email', 'cls_id').first() obj = StudentForm(initial=student_dict)
