3 django系列之Form表單在前端web界面渲染與入庫保存

author: 溫柔易淡（Leo）,歡迎技術交流與拍磚

preface

咱們在前端寫表單的時候，其實可使用django自帶的forms功能來實現,特別是在處理 修改已經存在數據 的場景特別好用，下面說說他。

後臺代碼

咱們先從後臺提及，這個流程是這樣的：當用戶查看某一個條目的詳細新的時候，咱們首先獲取這個條目的詳細信息在數據庫裏，而後塞入到表單裏面渲染，這樣傳到前端就是這個條目的詳細信息了，用戶能夠修改而後保存。
對此咱們須要作的工做就是application下面建立一個form的py文件，我建立的文件名是formself,文件結構以下：

文件結構

[root@linux-node2 devops]# tree BatchM
BatchM     # 項目名
├── Batch   # application名字
│   ├── formself.py   # form文件，自定義

formself裏面的代碼以下：

from django.forms import Form,ModelForm   # 導入這兩個模塊
# ModelForm把 models裏到數據變成一個表單，能夠用的html頁面上
from  Batch import models


class ApplyUpdateForm(ModelForm):
    class Meta:
        model = models.WorkOrderOfUpdate    # 和哪一個數據庫綁定在一塊
        exclude = ('email_issend','tags',)   # 排除哪一個字段


    def __init__(self, *args, **kwargs):
        #  繼承父類，後重寫本身的類
        super(ApplyUpdateForm, self).__init__(*args, **kwargs)  

        for field_name in self.base_fields:   # 遍歷每個字段
            field = self.base_fields[field_name]
            field.widget.attrs.update({'class': 'form-control'})  # 給每個輸入框添加上一個樣式

咱們在看看views裏面的代碼

from Batch import models
from Batch import formself    #導入剛纔咱們自定義的form文件

def apply_detail(request,order_id):
    '''
    顯示一個工單詳情
    :param request:
    :param order_id:   工單ID
    :return:
    '''
    order_detail = models.WorkOrderOfUpdate.objects.get(OrderId=order_id)   # 取出這個條目的全部信息
    form = formself.ApplyUpdateForm(instance=order_detail)   # 把這個條目的信息塞入到表單裏，instance就是從哪一個對象裏面獲取數據
    return render(request,'update_order_detail.html',{'selfforms':form})   # 把作好的表單返回到前端html文件裏面經過form這個對象。

咱們再看看html文件代碼

'''省去不相關的代碼
{% block page_content %}    # 使用jinja修改母板的內容
    <a href="/BatchM/apply_update.html/search/"><button class="btn btn-default" >返回上一頁</button></a><br><br>
    {{ selfforms }}   # 寫上這個，就可以自動在前端展現弄好的表單了。
{% endblock %}

好了，展現功能搞定了，還能夠在這基礎之上作一個保存功能，即在用戶修改完表單的內容後，提交它，後端把這些表單的數據入庫。咱們就須要在後端添加幾行代碼，主要針對post請求處理，前端只添加須要<form> </form> <input type='submit' value=‘提交’>2個類型標籤，申明提交地址，提交方法爲post，就好了。

經過form保存數據

後端view代碼以下：

from Batch import models
from Batch import formself    #導入剛纔咱們自定義的form文件

def apply_detail(request,order_id):
    '''
    顯示一個工單詳情
    :param request:
    :param order_id:   工單ID
    :return:
    '''
    if request.method == "GET":
        order_detail = models.WorkOrderOfUpdate.objects.get(OrderId=order_id)   # 取出這個條目的全部信息
        form = formself.ApplyUpdateForm(instance=order_detail)   # 把這個條目的信息塞入到表單裏，instance就是從哪一個對象裏面獲取數據
        render(request,'update_order_detail.html',{'selfforms':form})   #把作好的表單返回到前端html文件裏面經過form這個對象。
        
    elif request.method == "POST":    # 處理提交上來的數據
        form_obj = getattr(formself,ApplyUpdateForm)  # ApplyUpdateForm是在formself定義好的類
        fm_result = form_obj(request.POST)   #　把提交的數據塞入剛纔的對象裏面
        if fm_result.is_valid():　　　　# 若是數據與數據庫表之間可以匹配，也就是提交的表單內容正確
            fm_result.save()          # 那麼就入庫。
            return  return HttpResponseRedirect('/')
        else:
            return HttpResponse('信息不全')

前端代碼就不在贅述了。

至此，form的簡單介紹到此結束，更多功能能夠參考官網地址：https://docs.djangoproject.com/en/1.10/topics/forms/