Django form組件的使用及modelform

平時本身在手寫前端form表單的時候很複雜繁瑣(咱們在好多場景下都須要對用戶的輸入作校驗,好比校驗用戶是否輸入,輸入的長度和格式等正不正確。若是用戶輸入的內容有錯誤就須要在頁面上相應的位置顯示對應的錯誤信息.。),可是Django的form表單幫你簡化了這一個流程也幫你作了這樣的事情,html

1.生成頁面可用的html標籤前端

2.對傳遞到瀏覽器的數據進行校驗python

3.保留上次輸入的數據(若是有錯誤數據沒有提交成功。)git

 

首先咱們先展現一下使用普通的的html form表單提交數據的流程。數據庫

這是book_add.html的代碼。這是咱們手寫的form表單django

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加書籍</title>
</head>
<body>
<form action="" method="post">
    {% csrf_token %}
    <p>書名<input type="text" name="book"><br></p>
    <p>價格<input type="text" name="price"><br></p>
    <p>
            出版社
    <select name="publish" id="">
        {% for publish in publish_list %}
        <option value="{{ publish.pk }}">{{ publish.name }}</option>
        {% endfor %}
    </select><br>
    </p>
    <p>
        做者
    <select name="author" id="" multiple="multiple">
        {% for author in author_list %}
        <option value="{{ author.pk }}">{{ author.name }}</option>
        {% endfor %}
    </select>
    </p>

<p>日期 <input type="date" name="date"></p>
    <input type="submit">
</form>

</body>
</html>

views.py對應的源碼:瀏覽器

def book_add(request):
    # 進行提交數據
    if request.method == "POST":
        # 獲取前端傳遞過來的name,publish, price, author, date
        name = request.POST.get('book')
        publish = request.POST.get('publish')
        price = request.POST.get('price')
        author = request.POST.getlist('author')
        date = request.POST.get('date')
        # book_obj = Book.objects.create(title=title, price=price, date=date, publish_id=publish_id)
        # book_obj.authors.add(*author_pk_list)
        # 把數據存儲進Book表裏面
        book_list = Books.objects.create(name=name, publish_id=publish, date=date, price=price)
        book_list.author.add(*author)
        return redirect('/book/books/')
    # 獲取全部的出版社obj和做者obj傳遞到前端
    publish_obj = Publish.objects.all()
    author_obj = Author.objects.all()
    return render(request, 'book_add.html', {'publish_list': publish_obj, 'author_list': author_obj})

這是手寫的代碼,這裏尚未寫前端的校驗代碼,就已經夠繁瑣的了。接下來就看看使用Django的form組件的效果吧!app

 

Django 的form組件使用post

Django的form組件使用。你最好在你的app下面專門建立一個forms.py 文件用來專門儲存form組件有關的代碼。ui

forms.py代碼以下:

# -*- coding: utf-8 -*-
# @Time    : 2019/3/28 下午 2:02
# @Author  : lh
# @Email   : 2472@qq.com
# @File    : forms.py
# @Software: PyCharm
from django import forms
from django.forms import widgets
from .models import Publish, Author


class BookForm(forms.Form):
    name = forms.CharField(
        max_length=16,
        min_length=8,
        label="書名",
        error_messages={
            'required': '不能爲空!'
        }
    )
    price = forms.DecimalField(max_digits=8, decimal_places=2, label="價格")
    date = forms.CharField(widget=widgets.TextInput(attrs={"type": "date"}), label="日期")
    # publish = forms.ChoiceField(choices=(Books.objects.all().values_list("id", 'name')))
    publish = forms.ModelChoiceField(queryset=Publish.objects.all())
    author = forms.ModelMultipleChoiceField(queryset=Author.objects.all())

寫完後就該在本身的views代碼裏面添加使用form了,使用form來生成form裏面的代碼段了。

views.py

def book_add(request):
    # 進行數據提交
    if request.method == "POST":
        # 把瀏覽器提交的數據交給form組件進行校驗
        forms = BookForm(request.POST)
        # 若是經過校驗
        if forms.is_valid():
            print(forms.cleaned_data)
            name = forms.cleaned_data.get('name')
            publish = forms.cleaned_data.get('publish')
            price = forms.cleaned_data.get('price')
            author = forms.cleaned_data.get('author')
            print(author)
            date = forms.cleaned_data.get('date')
            # book_obj = Book.objects.create(title=title, price=price, date=date, publish_id=publish_id)
            # book_obj.authors.add(*author_pk_list)
            # 把經過校驗的數據存儲進表
            book_list = Books.objects.create(name=name, publish=publish, date=date, price=price)
            book_list.author.add(*author)
            return redirect('/book/books/')
    # 生成form實例而後傳遞給前端
    forms = BookForm()
    return render(request, 'book_add.html', {"forms": forms})

這裏面只是一個簡單的邏輯。

接下來在看看html那邊的代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加書籍</title>
</head>
<body>
<form action="" method="post" novalidate>
    {% csrf_token %}
    <div>
     {{ forms.name.label }}
     {{ forms.name }}{{ forms.name.errors.0 }}
    </div>
        <div>
     {{ forms.price.label }}
     {{ forms.price }}
    </div>
     <div>
     {{ forms.date.label }}
     {{ forms.date }}
    </div>
    <div>
     {{ forms.publish.label }}
     {{ forms.publish }}
    </div>
    <div>
     {{ forms.author.label }}
     {{ forms.author }}
    </div>
    <input type="submit">
</form>

</body>
</html>

從這裏能夠看出html端的代碼也是比較簡潔的。經過模板生成咱們須要的一些輸入框之類的。還能夠進行數據的校驗呢。可是有些form組件也是作起來也沒那麼方便。由於form也沒有將數據和自身結合在一塊兒。這時候就產生了一個更加高級的東西了。那就是modelform了。

 

modelform的使用:

modelform就是model和form結合在一塊兒了。使用model來生成form。進行生成html代碼。

這是forms裏面的代碼。

from django.forms import ModelForm
from django.forms import widgets as wid
from .models import Publish, Author, Books


class BookForm(ModelForm):
    class Meta:
        # 結合哪一張表
        model = Books
        # 生成多少個對應的代碼,"__all__"是全部,若是是指定就要使用列表儲存起來。
        fields = "__all__"
        labels = {
            'name': '書籍名稱',
            'price': '價格',
            'date': '時間',
            'publish': '出版社',
            'author': '做者',
        }
        widgets = {
            'date': wid.TextInput(attrs={'type': 'date', })
        }

上面的代碼具備和form同樣的做用。並且比form簡潔、

如今咱們再來看看 views裏面的代碼:

def book_add(request):
    # 若是是進行數據提交
    if request.method == "POST":
        # 對modelform的使用。傳遞瀏覽器過來的數據進去。
        forms = BookForm(request.POST)
        # 若是數據經過校驗
        if forms.is_valid():
            # 直接保存在數據庫裏面。由於modelform是model和form的結合通常。能夠直接操做表
            forms.save()
            return redirect('/book/books/')
    forms = BookForm()
    return render(request, 'book_add.html', {"forms": forms})

html的代碼如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加書籍</title>
</head>
<body>
{#{% include "add_edit.html" %}#}
<form action="" method="post" novalidate>
    {% csrf_token %}
    <div>
     {{ forms.name.label }}
     {{ forms.name }}{{ forms.name.errors.0 }}
    </div>
        <div>
     {{ forms.price.label }}
     {{ forms.price }}
    </div>
     <div>
     {{ forms.date.label }}
     {{ forms.date }}
    </div>
    <div>
     {{ forms.publish.label }}
     {{ forms.publish }}
    </div>
    <div>
     {{ forms.author.label }}
     {{ forms.author }}
    </div>
    <input type="submit">
</form>
</body>
</html>

這個就是modelform的簡單使用了.。

相關文章
相關標籤/搜索