使用 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()