当前位置：Gxlcms > 数据库问题 > [oldboy-django][2深入django]学生管理（Form）-- 添加（美化Form表单:通过form给前端标签添加属性）

[oldboy-django][2深入django]学生管理（Form）-- 添加（美化Form表单:通过form给前端标签添加属性）

时间：2021-07-01 10:21:17 帮助过：14人阅读

2 urls分发路由

  1. url(<span style="color: #008080; font-weight: bold">r‘^app01/‘, include(<span style="color: #008080; font-weight: bold">‘app01.urls‘)),</span></span>
  1. url(<span style="color: #008080; font-weight: bold">r‘^add_student$‘, views.add_student),</span>

3 前端

技术分享图片 
  1. <span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
  2. <span style="color: #0000ff"><</span><span style="color: #800000">html </span><span style="color: #ff0000">lang</span><span style="color: #0000ff">="en"</span><span style="color: #0000ff">></span>
  3. <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
  4.     <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
  5.     <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>Title<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
  6.     <span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #ff0000"> href</span><span style="color: #0000ff">="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css"</span><span style="color: #0000ff">></span>
  7.     <span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #ff0000"> href</span><span style="color: #0000ff">="/static/plugins/font-awesome-4.7.0/css/font-awesome.css"</span><span style="color: #0000ff">></span>
  8. <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
  9. <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
  10. <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="width:500px;margin:0 auto"</span><span style="color: #0000ff">></span>
  11.     <span style="color: #0000ff"><</span><span style="color: #800000">h4 </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="margin-left: 25px;"</span><span style="color: #0000ff">></span>添加学生<span style="color: #0000ff"></</span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
  12.     <span style="color: #0000ff"><</span><span style="color: #800000">form </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="form-horizontal"</span><span style="color: #ff0000"> action</span><span style="color: #0000ff">="/app01/add_student"</span><span style="color: #ff0000"> method</span><span style="color: #0000ff">="POST"</span><span style="color: #0000ff">></span><span style="color: #000000">
  13.         {% csrf_token %}
  14.         </span><span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="form-group"</span><span style="color: #0000ff">></span>
  15.             <span style="color: #0000ff"><</span><span style="color: #800000">label </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="col-sm-2 control-label"</span><span style="color: #0000ff">></span>姓名:<span style="color: #0000ff"></</span><span style="color: #800000">label</span><span style="color: #0000ff">></span>
  16.             <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="col-sm-10"</span><span style="color: #0000ff">></span><span style="color: #000000">
  17.                 {{ obj.name }}{{ obj.errors.name.0 }}
  18.             </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  19.         <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  20.         <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="form-group"</span><span style="color: #0000ff">></span>
  21.             <span style="color: #0000ff"><</span><span style="color: #800000">label </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="col-sm-2 control-label"</span><span style="color: #0000ff">></span>年龄:<span style="color: #0000ff"></</span><span style="color: #800000">label</span><span style="color: #0000ff">></span>
  22.             <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="col-sm-10"</span><span style="color: #0000ff">></span><span style="color: #000000">
  23.                 {{ obj.age }} {{ obj.errors.age.0 }}
  24.             </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  25.         <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  26.         <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="form-group"</span><span style="color: #0000ff">></span>
  27.             <span style="color: #0000ff"><</span><span style="color: #800000">label </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="col-sm-2 control-label"</span><span style="color: #0000ff">></span>邮箱:<span style="color: #0000ff"></</span><span style="color: #800000">label</span><span style="color: #0000ff">></span>
  28.             <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="col-sm-10"</span><span style="color: #0000ff">></span><span style="color: #000000">
  29.                 {{ obj.email }} {{ obj.errors.email.0 }}
  30.             </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  31.         <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  32.         <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="form-group"</span><span style="color: #0000ff">></span>
  33.             <span style="color: #0000ff"><</span><span style="color: #800000">label </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="col-sm-2 control-label"</span><span style="color: #0000ff">></span>班级:<span style="color: #0000ff"></</span><span style="color: #800000">label</span><span style="color: #0000ff">></span>
  34.             <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="col-sm-10"</span><span style="color: #0000ff">></span><span style="color: #000000">
  35.                 {{ obj.cls_id }} {{ obj.errors.cls_id.0 }}
  36.             </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  37.         <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  38.         <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="form-group"</span><span style="color: #0000ff">></span>
  39.             <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="col-sm-offset-2 col-sm-10"</span><span style="color: #0000ff">></span>
  40.                 <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="submit"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="btn btn-default"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="提交"</span><span style="color: #0000ff">/></span>
  41.             <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  42.         <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  43.     <span style="color: #0000ff"></</span><span style="color: #800000">form</span><span style="color: #0000ff">></span>
  44. <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
  45. <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
  46. <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
View Code

4 视图

技术分享图片 
  1. <span style="color: #0000ff">def</span><span style="color: #000000"> add_student(request):
  2.     </span><span style="color: #0000ff">if</span> request.method == <span style="color: #800000">‘</span><span style="color: #800000">GET</span><span style="color: #800000">‘</span><span style="color: #000000">:
  3.         obj </span>=<span style="color: #000000"> StudentForm()
  4.         </span><span style="color: #0000ff">return</span> render(request, <span style="color: #800000">‘</span><span style="color: #800000">app01_add_student.html</span><span style="color: #800000">‘</span>, {<span style="color: #800000">‘</span><span style="color: #800000">obj</span><span style="color: #800000">‘</span><span style="color: #000000">: obj})
  5.     </span><span style="color: #0000ff">else</span><span style="color: #000000">:
  6.         obj </span>=<span style="color: #000000"> StudentForm(request.POST)
  7.         </span><span style="color: #0000ff">if</span><span style="color: #000000"> obj.is_valid():
  8.             models.Student.objects.create(</span>**<span style="color: #000000">obj.cleaned_data)
  9.             </span><span style="color: #0000ff">return</span> redirect(<span style="color: #800000">‘</span><span style="color: #800000">/app01/students</span><span style="color: #800000">‘</span><span style="color: #000000">)
  10.         </span><span style="color: #0000ff">else</span><span style="color: #000000">:
  11.             </span><span style="color: #0000ff">return</span> render(request,  <span style="color: #800000">‘</span><span style="color: #800000">app01_add_student.html</span><span style="color: #800000">‘</span>, {<span style="color: #800000">‘</span><span style="color: #800000">obj</span><span style="color: #800000">‘</span>: obj})
View Code

5 数据规则类设置

技术分享图片 
  1. <span style="color: #0000ff">class</span><span style="color: #000000"> StudentForm(Form):
  2.     name </span>= fields.CharField(max_length=8, min_length=2<span style="color: #000000">,
  3.                             widget</span>=widgets.TextInput(attrs={<span style="color: #800000">‘</span><span style="color: #800000">class</span><span style="color: #800000">‘</span>: <span style="color: #800000">‘</span><span style="color: #800000">form-control</span><span style="color: #800000">‘</span><span style="color: #000000">})
  4.                             )
  5.     age </span>= fields.IntegerField(max_value=25, min_value=18<span style="color: #000000">,
  6.                               widget</span>=widgets.TextInput(attrs={<span style="color: #800000">‘</span><span style="color: #800000">class</span><span style="color: #800000">‘</span>: <span style="color: #800000">‘</span><span style="color: #800000">form-control</span><span style="color: #800000">‘</span><span style="color: #000000">})
  7.                               )
  8.     email </span>= fields.EmailField(widget=widgets.TextInput(attrs={<span style="color: #800000">‘</span><span style="color: #800000">class</span><span style="color: #800000">‘</span>: <span style="color: #800000">‘</span><span style="color: #800000">form-control</span><span style="color: #800000">‘</span><span style="color: #000000">})
  9.                               )
  10.     cls_id </span>=<span style="color: #000000"> fields.IntegerField(
  11.         </span><span style="color: #008000">#</span><span style="color: #008000"> widget=widgets.Select(choices=[(1, ‘上海‘), (2,‘北京‘)])</span>
  12.         <span style="color: #008000">#</span><span style="color: #008000"> choices 类型为[(),()]</span>
  13.         widget=widgets.Select(choices=models.Classes.objects.values_list(<span style="color: #800000">‘</span><span style="color: #800000">id</span><span style="color: #800000">‘</span>, <span style="color: #800000">‘</span><span style="color: #800000">title</span><span style="color: #800000">‘</span><span style="color: #000000">),
  14.                               attrs</span>={<span style="color: #800000">‘</span><span style="color: #800000">class</span><span style="color: #800000">‘</span>: <span style="color: #800000">‘</span><span style="color: #800000">form-control</span><span style="color: #800000">‘</span><span style="color: #000000">})
  15.     )</span>
View Code

6 补充：如何通过form表单实现： 给前端标签添加class等属性，以及设置Input输入框的type属性

技术分享图片 
  1. <span style="color: #008000">#</span><span style="color: #008000"> Form生成html标签</span>
  2. <span style="color: #000000">    a. 通过Form生成Input输入框，Form标签，以及submit标签还是要在前端写的，
  3.         但是Form标签内的Input标签可以在后台实现；只需要按以下步骤
  4.         </span>-<span style="color: #000000"> views定义StudentForm(Form)类
  5.         </span>-<span style="color: #000000"> views视图函数将Form实例化对象传递给前端
  6.         </span>-<span style="color: #000000"> 前端{{ obj.段 }}即可
  7.         
  8.     b. 通过Form设置前端Input的type属性,即设置不同类型的输入框
  9.         </span><span style="color: #008000">#</span><span style="color: #008000"> 设置name为text, cls_id为下拉框</span>
  10.         <span style="color: #0000ff">class</span><span style="color: #000000"> StudentForm(Form):
  11.             name </span>= fields.CharField(widget=<span style="color: #000000"> widgets.InputText())
  12.             cls_id </span>= fields.IntegerField(widget =<span style="color: #000000"> widgets.Select())
  13.     
  14.     c. 设置下拉框的内容choices属性
  15.         </span><span style="color: #0000ff">class</span><span style="color: #000000"> StudentForm(Form):
  16.             cls_id </span>=<span style="color: #000000"> fields.IntegerField(
  17.                 widget</span>=widgets.Select(choices=models.Classes.objects.values_list(<span style="color: #800000">‘</span><span style="color: #800000">id</span><span style="color: #800000">‘</span>, <span style="color: #800000">‘</span><span style="color: #800000">title</span><span style="color: #800000">‘</span><span style="color: #000000">))
  18.             )
  19.         注意： choices的值必须[元组，(), ()]类型
  20.         widget</span>=widgets.Select(choices=[(1, <span style="color: #800000">‘</span><span style="color: #800000">上海</span><span style="color: #800000">‘</span>), (2,<span style="color: #800000">‘</span><span style="color: #800000">北京</span><span style="color: #800000">‘</span><span style="color: #000000">)])
  21.                
  22.     d.设置input输入框的class属性 </span>--<span style="color: #000000"> attrs
  23.         name </span>= fields.CharField(max_length=8, min_length=2<span style="color: #000000">,
  24.                         widget</span>=widgets.TextInput(attrs={<span style="color: #800000">‘</span><span style="color: #800000">class</span><span style="color: #800000">‘</span>: <span style="color: #800000">‘</span><span style="color: #800000">form-control</span><span style="color: #800000">‘</span><span style="color: #000000">})
  25.                         )
  26.         cls_id </span>=<span style="color: #000000"> fields.IntegerField(
  27.                 widget</span>=<span style="color: #000000">widgets.Select(
  28.                                         choices</span>=models.Classes.objects.values_list(<span style="color: #800000">‘</span><span style="color: #800000">id</span><span style="color: #800000">‘</span>, <span style="color: #800000">‘</span><span style="color: #800000">title</span><span style="color: #800000">‘</span><span style="color: #000000">),
  29.                                         attrs</span>={<span style="color: #800000">‘</span><span style="color: #800000">class</span><span style="color: #800000">‘</span>: <span style="color: #800000">‘</span><span style="color: #800000">form-control</span><span style="color: #800000">‘</span><span style="color: #000000">}
  30.                                     )
  31.             )
  32.          
  33.         注意： attrs参数必须放在TextInput或者Select等内部，而且值必须为字典
  34.         
  35.     e. 通过Form设置前端Input的默认显示值
  36.         只要在视图函数将实例化一个Form对象，并且设置initial值即可
  37.             student_dict </span>= models.Student.objects.filter(id=nid).values(<span style="color: #800000">‘</span><span style="color: #800000">name</span><span style="color: #800000">‘</span>, <span style="color: #800000">‘</span><span style="color: #800000">age</span><span style="color: #800000">‘</span>, <span style="color: #800000">‘</span><span style="color: #800000">email</span><span style="color: #800000">‘</span>, <span style="color: #800000">‘</span><span style="color: #800000">cls_id</span><span style="color: #800000">‘</span><span style="color: #000000">).first()
  38.             obj </span>= StudentForm(initial=student_dict)
View Code

 

　　

[oldboy-django][2深入django]学生管理（Form）-- 添加（美化Form表单:通过form给前端标签添加属性）

标签：play   boot   csrf   rect   filter   添加   mode   head   email   

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！