使用django-crispy-forms美化表单UI

前言

欧克，继续来写这个中台项目衍生出来的系列文章
今天介绍一个可以美化界面的库
Django 开发讲究个快，天下武功，唯快不破
forms 功能自然是要用的，自带表单 UI 生成和验证，实现 demo 时非常方便
之前我在 DjangoStarter 框架里已经封装了一套 forms 行为和样式了，在 src/django_starter/contrib/forms 里
这套已经不错了，也是用 TailwindCSS 来实现样式，挺好看的
不过在开发中台项目的时候，我发现了 django-crispy-forms 这个库，提供了更多美化表单 UI 的灵活性。
DjangoStarter里的实现

先来看看 DjangoStarter 框架的实现

1. forms
2. ├─ widgets
3. │  ├─ __init__.py
4. │  ├─ multiple_file.py
5. │  └─ flowbite_date_picker.py
6. ├─ templates
7. │  └─ django_starter
8. │     └─ forms
9. │        ├─ widgets
10. │        └─ form_template.html
11. ├─ __init__.py
12. ├─ widget_classes.py
13. ├─ mixins.py
14. └─ base.py

复制代码

template

src/django_starter/contrib/forms/templates/django_starter/forms/form_template.html

1. {% for field in form %}
2.    
3.         <label
4.                for="{{ field.id_for_label }}">{{ field.label }}</label>
5.         {{ field }}
6.         
7.             {{ field.help_text }}
8.         
9.         
10.             {{ field.errors }}
11.         
12.    
13. {% endfor %}

复制代码

widgets

src/django_starter/contrib/forms/widgets/flowbite_date_picker.py

1. from django import forms
3. class FlowbiteDatePickerWidget(forms.DateInput):
4.     template_name = 'django_starter/forms/widgets/flowbite_date_picker.html'
6.     def __init__(self, attrs=None, custom_class=''):
7.         final_attrs = {'class': custom_class}
8.         if attrs:
9.             final_attrs.update(attrs)
10.         super(FlowbiteDatePickerWidget, self).__init__(attrs=final_attrs)

复制代码

src/django_starter/contrib/forms/widgets/multiple_file.py

1. from django import forms
4. class MultipleFileInput(forms.ClearableFileInput):
5.     allow_multiple_selected = True
8. class MultipleFileField(forms.FileField):
9.     def __init__(self, *args, **kwargs):
10.         kwargs.setdefault("widget", MultipleFileInput())
11.         super().__init__(*args, **kwargs)
13.     def clean(self, data, initial=None):
14.         single_file_clean = super().clean
15.         if isinstance(data, (list, tuple)):
16.             result = [single_file_clean(d, initial) for d in data]
17.         else:
18.             result = [single_file_clean(data, initial)]
19.         return result

复制代码

forms 代码

src/django_starter/contrib/forms/mixins.py

1. from django import forms
2. from .widget_classes import *
5. class BaseFormMixin:
6.     """提供表单样式的通用混入类"""
8.     widget_classes = {
9.         forms.TextInput: TEXT_INPUT_CLASS,
10.         forms.Textarea: TEXT_AREA_CLASS,
11.         forms.EmailInput: TEXT_INPUT_CLASS,
12.         forms.PasswordInput: PASSWORD_INPUT_CLASS,
13.         forms.Select: SELECT_CLASS,
14.         forms.DateInput: DATE_INPUT_CLASS,
15.         forms.NumberInput: NUMBER_INPUT_CLASS,
16.     }
18.     def apply_widget_classes(self):
19.         """根据widget类型为表单字段应用样式"""
20.         for field_name, field in self.fields.items():
21.             widget_class = self.widget_classes.get(type(field.widget))
22.             if widget_class:
23.                 field.widget.attrs.update({'class': widget_class})
25.     def __init__(self, *args, **kwargs):
26.         super().__init__(*args, **kwargs)
27.         self.apply_widget_classes()

复制代码

widget_classes.py 的代码就不贴了
就是 Tailwind CSS 的样式
crispy-forms 是咋实现的

安装后，简单配置下就能用了
使用起来类似下面这样

1. {% load crispy_forms_tags %}
4.     {{ form.name|as_crispy_field }}
8.     {{ form.dvr_brand|as_crispy_field }}
12.     {{ form.dvr_model|as_crispy_field }}
16.     {{ form.dvr_ip|as_crispy_field }}
20.     {{ form.status|as_crispy_field }}

复制代码

安装

安装依赖

1. pdm install django-crispy-forms

复制代码

然后添加到

1. INSTALLED_APPS = (
2.     ...
3.     'crispy_forms',
4. )

复制代码

Template packs

然后还得安装 Template packs
不然只是个空壳
官方支持的只有 Bootstrap 系列，有点 out 了
好在社区也提供了不少，这里我只关注 Tailwind CSS 的库，名字是  crispy-tailwind

1. pdm add crispy-tailwind

复制代码

其他 UI 库还有很多，感兴趣的同学可以在官网看到: https://django-crispy-forms.readthedocs.io/en/latest/install.html#template-packs
这个同样也得添加进去

1. INSTALLED_APPS = (
2.     ...
3.     'crispy_forms',
4.     'crispy_tailwind',
5. )

复制代码

配置

在配置文件里修改默认的 Template Packs
src/config/settings/components/crispy_forms.py

1. CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"
2. CRISPY_TEMPLATE_PACK = "tailwind"

复制代码

使用

最简单的用法是只修改模板文件

1. {% load crispy_forms_tags %}
3. <form method="post" >
4.     {{ my_formset|crispy }}
5. </form>

复制代码

目前中台项目也只用到了这个
搭配 django-select2 可以实现下拉搜索框
不过样式不好改，我折腾了一段时间也没改好，索性先不理了，反正就是一个快速实现的 DEMO
后续有需求再用 React 重写页面就行了
小结

我发现 Django 相关的技术还算是比较小众的
一般写这种文章就没什么人看
我做 Django 也好几年的时间了，框架源码看了，脚手架也搞了，用得非常顺手

虽然现在 python 的 web 框架有很多，不过所有项目最终都会成为 Django 的样子
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！