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

前言

欧克，继续来写这个中台项目衍生出来的系列文章

今天介绍一个可以美化界面的库

Django 开发讲究个快，天下武功，唯快不破

forms 功能自然是要用的，自带表单 UI 生成和验证，实现 demo 时非常方便

之前我在 DjangoStarter 框架里已经封装了一套 forms 行为和样式了，在 src/django_starter/contrib/forms 里

这套已经不错了，也是用 TailwindCSS 来实现样式，挺好看的

不过在开发中台项目的时候，我发现了 django-crispy-forms 这个库，提供了更多美化表单 UI 的灵活性。

DjangoStarter里的实现

先来看看 DjangoStarter 框架的实现

 forms
 ├─ widgets
 │  ├─ __init__.py
 │  ├─ multiple_file.py
 │  └─ flowbite_date_picker.py
 ├─ templates
 │  └─ django_starter
 │     └─ forms
 │        ├─ widgets
 │        └─ form_template.html
 ├─ __init__.py
 ├─ widget_classes.py
 ├─ mixins.py
 └─ base.py

template

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

{% for field in form %}
    <div>
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
               for="{{ field.id_for_label }}">{{ field.label }}</label>
        {{ field }}
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-200">
            {{ field.help_text }}
        </div>
        <div class="mt-2 text-sm text-red-600 dark:text-red-500">
            {{ field.errors }}
        </div>
    </div>
{% endfor %}

widgets

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

from django import forms

class FlowbiteDatePickerWidget(forms.DateInput):
    template_name = 'django_starter/forms/widgets/flowbite_date_picker.html'

    def __init__(self, attrs=None, custom_class=''):
        final_attrs = {'class': custom_class}
        if attrs:
            final_attrs.update(attrs)
        super(FlowbiteDatePickerWidget, self).__init__(attrs=final_attrs)

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

from django import forms

class MultipleFileInput(forms.ClearableFileInput):
    allow_multiple_selected = True

class MultipleFileField(forms.FileField):
    def __init__(self, *args, **kwargs):
        kwargs.setdefault("widget", MultipleFileInput())
        super().__init__(*args, **kwargs)

    def clean(self, data, initial=None):
        single_file_clean = super().clean
        if isinstance(data, (list, tuple)):
            result = [single_file_clean(d, initial) for d in data]
        else:
            result = [single_file_clean(data, initial)]
        return result

forms 代码

src/django_starter/contrib/forms/mixins.py

from django import forms
from .widget_classes import *

class BaseFormMixin:
    """提供表单样式的通用混入类"""

    widget_classes = {
        forms.TextInput: TEXT_INPUT_CLASS,
        forms.Textarea: TEXT_AREA_CLASS,
        forms.EmailInput: TEXT_INPUT_CLASS,
        forms.PasswordInput: PASSWORD_INPUT_CLASS,
        forms.Select: SELECT_CLASS,
        forms.DateInput: DATE_INPUT_CLASS,
        forms.NumberInput: NUMBER_INPUT_CLASS,
    }

    def apply_widget_classes(self):
        """根据widget类型为表单字段应用样式"""
        for field_name, field in self.fields.items():
            widget_class = self.widget_classes.get(type(field.widget))
            if widget_class:
                field.widget.attrs.update({'class': widget_class})

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.apply_widget_classes()

widget_classes.py 的代码就不贴了

就是 Tailwind CSS 的样式

crispy-forms 是咋实现的

安装后，简单配置下就能用了

使用起来类似下面这样

{% load crispy_forms_tags %}

<div class="sm:col-span-6">
    {{ form.name|as_crispy_field }}
</div>

<div class="sm:col-span-3">
    {{ form.dvr_brand|as_crispy_field }}
</div>

<div class="sm:col-span-3">
    {{ form.dvr_model|as_crispy_field }}
</div>

<div class="sm:col-span-3">
    {{ form.dvr_ip|as_crispy_field }}
</div>

<div class="sm:col-span-3">
    {{ form.status|as_crispy_field }}
</div>

安装

安装依赖

pdm install django-crispy-forms

然后添加到

INSTALLED_APPS = (
    ...
    'crispy_forms',
)

Template packs

然后还得安装 Template packs

不然只是个空壳

官方支持的只有 Bootstrap 系列，有点 out 了

好在社区也提供了不少，这里我只关注 Tailwind CSS 的库，名字是 crispy-tailwind

pdm add crispy-tailwind

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

这个同样也得添加进去

INSTALLED_APPS = (
    ...
    'crispy_forms',
    'crispy_tailwind',
)

配置

在配置文件里修改默认的 Template Packs

src/config/settings/components/crispy_forms.py

CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"
CRISPY_TEMPLATE_PACK = "tailwind"

使用

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

{% load crispy_forms_tags %}

<form method="post" class="my-class">
    {{ my_formset|crispy }}
</form>

目前中台项目也只用到了这个

搭配 django-select2 可以实现下拉搜索框

不过样式不好改，我折腾了一段时间也没改好，索性先不理了，反正就是一个快速实现的 DEMO

后续有需求再用 React 重写页面就行了

小结

我发现 Django 相关的技术还算是比较小众的

一般写这种文章就没什么人看

我做 Django 也好几年的时间了，框架源码看了，脚手架也搞了，用得非常顺手

虽然现在 python 的 web 框架有很多，不过所有项目最终都会成为 Django 的样子

就这样吧，python 项目这一块，我还是会继续坚持 Django ，毕竟是真的方便好用

当然也不排斥尝试新的玩意，比如最近有个 Litestar 号称要干掉 FastAPI 的，感觉挺有意思的，有时间可以试试看