Gyakorlat – Django-crispy-forms implementálása

Befejeződött

A létrehozott űrlap megtekintése után észreveheti, hogy a formázás nem ugyanaz, mint a lap többi része. Bootstrap-t használunk, és az űrlap jelenleg nem. Szerencsére van egy könyvtár, amely biztosíthatja, hogy az űrlapjaink a Bootstrap-t is használják.

A django-crispy-forms könyvtár

A django-crispy-forms könyvtár tovább javítja a Django által létrehozott űrlapokat. Meg fogjuk vizsgálni, hogyan használhatjuk a kódtárat annak biztosítására, hogy az űrlapjaink a Bootstrap-t használják.

A kódtár telepítése

A Python-kódtárakhoz hasonlóan a django-crispy-formst is a pip használatával telepítjük.

  1. Nyissa meg a requirements.txt fájlt a Visual Studio Code-ben.

  2. A fájl alján adjon hozzá egy új sort , amely a következőt olvassa:

    django-crispy-forms
    
  3. Nyisson meg egy új terminálablakot az Új terminál terminál> kiválasztásával.

  4. Telepítse az összes csomagot a következő parancs futtatásával:

    pip install -r requirements.txt
    

Az alkalmazás regisztrálása a Django-ban és a sablon konfigurálása

A Django által használt bármit alkalmazásként vagy köztes szoftverként kell regisztrálni. Mivel a django-crispy-forms egy alkalmazás, fel fogjuk sorolni a INSTALLED_APPS listában.

  1. A Visual Studio Code-n belül nyissa meg a project/settings.py fájlt.

  2. Az olvasási # TODO: Register crispy_formssor alatt adja hozzá a következő kódot a django-crispy-forms regisztrálásához.

    # TODO: Register crispy_forms
    'crispy_forms',
    
  3. Az olvasási # TODO: Set template_packsor alatt adja hozzá a következő kódot a django-crispy-forms konfigurálásához a Bootstrap 4 használatához.

    # TODO: Set template_pack
    CRISPY_TEMPLATE_PACK = 'bootstrap4'
    

A sablon frissítése django-crispy-forms használatára

A django-crispy-forms csodálatos munkájának nagy része egy szűrő használatával történik. A szűrő lehetővé teszi, hogy egy változót egy sablonban vegyen fel, és átadja egy másik kezelőnek vagy folyamatnak. Esetünkben a szűrő átalakítja az crispy űrlapot a megadott sablonra, a Bootstrap 4-re.

  1. A Visual Studio Code-ot megnyitva nyissa meg a dog_shelters/templates/dog_form.html fájlt.

  2. Az olvasási {# TODO: Load crispy_forms_tags #}sor alatt adja hozzá a következő kódot a szűrő vagy címke betöltéséhez.

    {# TODO: Load crispy_forms_tags #}
    {% load crispy_forms_tags %}
    
  3. A szűrő használatához crispy cserélje le az alábbi kódra beolvasott {{ form.as_p }} sort.

    {{ form | crispy }}
    

A webhely tesztelése

Minden telepített és frissített, teszteljük oldalunkat.

  1. Az összes fájl mentéséhez válassza az Összes mentése lehetőséget>.

  2. Nyissa meg a http://localhost:8000/dog/register URL-címet a böngészőben.

    Látni fogja, hogy a lap most a Bootstrap-t használja az űrlaphoz.

    Screenshot of the form that uses Bootstrap.

Most frissítette az alkalmazást, hogy az űrlap Bootstrap-t használjon.