Adi Ramadhan
Làm theo
21 Tháng Bảy, 2020
·
3 phút đọc
Django CRUD với Biểu mẫu và Mẫu Bootstrap
Chế độ xem dựa trên chức năng đơn giản Django CRUD với mẫu Django Forms và Bootstrap
Sử dụng Bootstrap và django-crispy-forms
, các mẫu được hiển thị có thể dễ dàng được cải thiện để trông đẹp hơn nhiều mà không cần phải điều chỉnh kiểu dáng theo cách thủ công. Ví dụ
Ví dụ: tôi mở rộng Ứng dụng Django “Xin chào thế giới” của mình [được mô tả trong bài đăng trước] bằng cách thêm một biểu mẫu đơn giản và hiển thị nó bằng Bootstrap và django-crispy-forms
. Tất cả những gì nó làm là hỏi tên người dùng và ngày tháng, sau đó hiển thị
INSTALLED_APPS = [
...
'crispy_forms',
]
0 và bộ đếm tần suất nút được nhấp. Tuy nhiên, ví dụ nhỏ minh họa cách sử dụng Bootstrap và django-crispy-forms
. Đặc biệt với nhiều biểu mẫu hoặc biểu mẫu lớn, django-crispy-forms
trở nên hữu ích để giảm bớt các bản soạn sẵn lặp đi lặp lạiCài đặt django-crispy-forms
Cài đặt phần phụ thuộc và thêm nó vào
INSTALLED_APPS = [
...
'crispy_forms',
]
4pip install django-crispy-forms
Thêm
INSTALLED_APPS = [
...
'crispy_forms',
]
5 bên trong INSTALLED_APPS = [
...
'crispy_forms',
]
6INSTALLED_APPS = [
...
'crispy_forms',
]
Kích hoạt gói mẫu Bootstrap 4, thêm dòng sau vào
INSTALLED_APPS = [
...
'crispy_forms',
]
6CRISPY_TEMPLATE_PACK = 'bootstrap4'
Cho đến nay, không có gói mẫu
INSTALLED_APPS = [
...
'crispy_forms',
]
8 chính thức, nhưng gói mẫu INSTALLED_APPS = [
...
'crispy_forms',
]
9 dường như cũng hoạt động với Bootstrap 5 mà tôi sử dụng sau nàyXây dựng Biểu mẫu CRISPY_TEMPLATE_PACK = 'bootstrap4'
0Tạo biểu mẫu Django
Ví dụ: tôi tạo một biểu mẫu mới cho phép người dùng chỉ định tên của họ và ngày tùy ý sẽ được hiển thị trong ứng dụng “Xin chào thế giới”. Để làm được điều đó, tôi tạo
CRISPY_TEMPLATE_PACK = 'bootstrap4'
1 với nội dung sauimport datetime
from django import forms
class HelloWorldForm[forms.Form]:
"""Form asking for the user's name and an arbitrary date, both used inside the displayed 'Hello World' text."""
username = forms.CharField[label='Your Name', max_length=100]
date = forms.DateField[label='An arbitrary date', initial=datetime.date.today,
widget=forms.widgets.DateInput[attrs={'type': 'date'}],
help_text='The entered name and date will be displayed temporarily but publicly in the '
'generated "Hello World" message. It will not be stored.']
Hầu hết các đối số trường là tùy chọn nhưng cung cấp thông tin bổ sung cho django-crispy-forms
để hiển thị trong biểu mẫu Bootstrap
Sau đó, tôi sử dụng biểu mẫu này bên trong
CRISPY_TEMPLATE_PACK = 'bootstrap4'
3 cho chế độ xem chỉ mục của mình [chế độ xem duy nhất của ứng dụng “Xin chào thế giới” cho đến nay]def index[request]:
# retriever counter model instance from DB or create it if it doesn't exist yet
counter, created = Counter.objects.get_or_create[name='hello-world-button']
# increment counter when a POST request arrives [from the button click]
# see previous blog post: //stefanbschneider.github.io/blog/django-db
if request.method == 'POST':
counter.value += 1
counter.save[]
# and get the values filled in form
form = HelloWorldForm[request.POST]
if form.is_valid[]:
username = form.cleaned_data['username']
date = form.cleaned_data['date']
else:
form = HelloWorldForm[]
username = 'Nobody'
date = datetime.date.today[]
context = {
'clicks': counter.value,
'form': form,
'username': username,
'date': date,
}
return render[request, 'helloworld/index.html', context]
Cuối cùng, hiển thị biểu mẫu trong mẫu
CRISPY_TEMPLATE_PACK = 'bootstrap4'
4
{{ username }} says: "Hello World!" on {{ date }}. [Button clicked {{ clicks }}x in total.]