使用 django-bootstrap3 库

使用 django-bootstrap3 库

1. 配置

• 下载

  pip install django-bootstrap3
  

• settings配置

  在install_apps中加上 'bootstrap3'
  

2. 使用（在html文件中使用），表单

1. 写视图

   • 写一个表单：

   from django import forms
   from uauth.models import UserInfo
   
   class UserInfoForm(forms.ModelForm):
       class Meta:
           model = UserInfo
           fields = ("username", "birthday", "signature", "avatar")

   • 再写一个视图函数

   from django.forms import model_to_dict
   from django.contrib import messages
   from uauth.forms import UserInfoForm
   from uauth.model import UserInfo
   
   @login_required(login_url="/uauth/;ogin/")
   def mod_userinfo(request):
       user_info = request.user.userinfo
       user_info_dict = model_to_dict(user_info)
   
       if request.method == "GET":
           form = UserInfoForm(data=user_info_dict)
           return render(request, "uauth/mod_userinfo.html", {"form": form})
       if request.method == "POST":
           # 保存图片
           pic = request.FILES["avatar"]
           user_info.avatar = pic
           user_info.save()
           # 保存数据
           form = UserInfoForm(data=request.POST, instance=user_info)
           if form.is_valid():
               form.save()
               return redirect(to="/uauth/my-info-page")
           else:
               messages.add_message(request, messages.ERROR, form.errors.as_text())
               return render(request, "uauth/mod_userinfo", {"form": form})

2. 写模版

   • 导入(文件开头位置)：

     {% load bootstrap3 %}
     

   • 使用bootstrap_messages，在文件中的适当位置写上就会显示messages的内容

     {% bootstrap_messages %}
     

   • 使用默认表单 bootstrap_form

     1. 最简单的方式：label和field显示的是上下格式

        {% bootstrap_form form %}
        

     2. 显示成水平方式：

        {% bootstrap_form form layout="horizontal" %}
        

        • 调节label的class：
          horizontal_label_class=”xxx” # 只对horizontal模式有效
          或 label_class=”xxx” # 都有效
        • 调节field的class：
          horizontal_field_class=”yyy” # 只对horizontal模式有效
          field_class=”yyy” # 都有效
        • 调节每个input+label外面的div的class，默认是form-group
          form_group_class=”xxx”
        • 上面是几种常用的属性，还有很多可以看官方文档django-bootstrap3

     3. 省去label：

        {% bootstrap_form form layout="inline" %}
        

3. 优点

   • 使用django_bootstrap3的form的优点之一就是，他可以自动的生成错误提示，非常方便

4. 我遇到的问题

   • 水平排列问题

     
     # 我要做一个修改用户信息的页面的时候用到了bootstrap_form,但是我想要他水平horizontal排列
     
     
     # 使用layout=horizontal之后发现各个input之间紧挨着，没有一定的空隙
     
     
     # 通过查官方文档知道要把form的class改成form-horizontal，但是bootstrap_form中没有参数去修改form的class的
     
     
     # 经过一番比较与排查，发现
     
     
     # 让form_group_class="form-group form-horizontal" horizontal_label_class="col-sm-3" horizontal_field_class="col-sm-7 form-group" 也能达到类似的效果
     
     
     # 经过修改后的bootstrap_form是：
     
     
     {% bootstrap_form form layout="horizontal" form_group_class="form-group form-horizontal" horizontal_label_class="col-sm-3 text-right" horizontal_field_class="form-group col-sm-7" %}

   • 保存信息问题

     最早我的form=UserInfoForm(request.POST)直接is_valid()通过后save()是有问题的，因为这里面的字段并不是全部的UserInfo字段，就会把其他字段的内容变成null，就报错，这是我们需要把对象传进来
     form = UserInfoForm(data=request.POST, instance=user_info)
     这是再save()的时候就是更新，而不是把哪些字段为空了。

   • 上传图片问题

     我上面的avatar是一个图片字段，是用户头像，上传的时候，form取的是request.POST里的数据，是无法取到file文件的，所以我又写了几步来保存图片，当然也可以在里面对图片处理(PIL)和筛选.
     
     pic = request.FILES["avatar"]
     user_info.avatar = pic
     user_info.save()