Warning: Undefined array key "pl" in /home/host1693024/python-3.com/htdocs/www/875348534534.php on line 2036
Jak działa architektura MVT Django: głębokie zanurzenie się w modelach, widokach i szablonach

Jak działa architektura MVT Django: głębokie zanurzenie się w modelach, widokach i szablonach

Django to ramy Pythona na wysokim poziomie. Jest popularny ze swojej prostoty i wydajności w budowaniu solidnych aplikacji internetowych.

Sercem architektury Django jest wzorzec Model-View-Template (MVT). Dobre zrozumienie interakcji modeli, widoków i szablonów jest kluczowe, jeśli chcesz wykorzystać pełną moc Django.

Niezależnie od tego, czy jesteś nowym użytkownikiem Django, czy początkującym, ten artykuł będzie służyć jako kompleksowy przewodnik pokazujący, jak te komponenty działają i współdziałają ze sobą, tworząc dynamiczne aplikacje internetowe.

Aby było jeszcze bardziej zrozumiałe, zbudujemy prostą aplikację, która pomoże Ci lepiej zrozumieć wzajemne połączenie tych komponentów.

Jeśli już jesteś podekscytowany, wpadnijmy na to!

Oto, co omówimy:

  • Warunki wstępne

  • Jaka jest architektura MVT?

  • Komponent modelu

  • Komponent Widok

  • Komponent szablonu

  • Schemat pokazujący przepływ pracy MVT

  • Rzeczywista analogia MVT

  • Łączenie tego wszystkiego w projekt

  • Wniosek

Wymagania wstępne

Aby podążać dalej, potrzebujesz:

  • Podstawowe zrozumienie działania aplikacji internetowych, w tym architektury klient-serwer.

  • Podstawowa znajomość Pythona.

Jaka jest architektura MVT?

Wzorzec MVT jest podejściem Django do organizowania bazy kodowej i przepływu pracy aplikacji internetowej. Komponenty tworzące tę architekturę są modelem, widokiem i szablonem. Każdy komponent wykonuje określone funkcje, a następnie przekazuje proces do innych komponentów, aby zrobić swoje.

Rzućmy okiem na komponenty z określonymi funkcjami, które wykonują:

  • Model: nazywana również warstwą danych. Zarządza danymi i wchodzi w interakcję z bazą danych.

  • Widok: nazywana również warstwą logiczną. Działa jako pośrednik, obsługuje logikę i zarządza przepływem danych.

  • Szablon: znany również jako warstwa prezentacji, renderuje treść HTML w interfejsie użytkownika.

Teraz, gdy masz już pojęcie o komponentach i ich rolach w aplikacji Django, przyjrzymy się szczegółowo każdemu komponentowi i ich interakcji w architekturze.

Komponent modelu

Modele zarządzają strukturą i interakcją danych w aplikacji Django, co czyni je podstawą aplikacji Django ze względu na kluczowe odgrywanie danych.

Modele Django wykorzystują potężną funkcję o nazwie Mapowanie obiektowe (ORM), która łączy lukę między relacyjną bazą danych a kodem Pythona. Przekształca obiekty Pythona (klasy) w tabele bazy danych, ich atrybuty w kolumny i instancje w wiersze w tych tabelach.

Ogromną zaletą ORM jest to, że umożliwia interakcję z bazą danych przy użyciu obiektów Pythona zamiast pisania zapytań SQL. Pomyśl o tym jak o tłumaczu, który konwertuje jeden język na inny, aby publiczność mogła go zrozumieć. W tym przypadku ORM tłumaczy kod Pythona na polecenia SQL, które może wykonać baza danych i odwrotnie.

Modele Django hermetyzują całą logikę związaną z bazą danych i definiują strukturę bazy danych, działając jako plan danych, które chcesz przechowywać.

Ogólny format modelu Django

W Django każdy model podąża szczególnym sposobem deklaracji. Oto podstawowa struktura deklaracji modelowej:

class <model_name>(models.Model):
    <field_name> = models.<field_type>(<optional_field_characteristics>)

Rozbijmy to:

  • class: słowo kluczowe używane do definiowania modelu w Django.

  • nazwa_modelu: nazwa modelu.

  • models.Model: klasa bazowa, z której dziedziczy klasa modelu.

  • nazwa_pola: nazwa kolumny bazy danych.

  • field_type: odnosi się do typu danych przechowywanych w polu, np. charField, BooleanField i tak dalej.

  • opcjonalne_charakterystyki_pola: używane do dalszego definiowania zachowania pola, np. max_length, default i tak dalej.

Przykład modelu

Po tym, jak do tej pory wiemy o modelach, skonstruujemy jedną z listy zadań. Zazwyczaj zawiera tytuł zadania, opis i wskaźnik, czy zadania zostały wykonane, czy nie.

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    completed = models.BooleanField(default=False)

W tym modelu:

  • Zadanie to nazwa modelu.

  • Model zadań ma trzy pola:

    • title: CharField przechowujący tekst o maksymalnej długości 100 znaków.

    • description: TextField dla dłuższego tekstu.

    • completed: BooleanField, które przechowuje wartość True lub False, z wartością domyślną False.

Komponent widoku

Widoki Django odpowiadają za przetwarzanie żądań użytkowników i zwracanie odpowiedzi. Działają jako pomost pomiędzy Modelem a Szablonem, zbierając dane z obiektów Modelu, wykonując na nich operacje logiczne (takie jak zapytania w oparciu o określone kryteria), a następnie przekazując dane do szablonu w celu wyświetlenia.

Widoki można zapisać jako funkcje lub klasowe, w zależności od złożoności i wymagań aplikacji.

Ogólny format widoku django

Oto podstawowa struktura widoku:

def <view_name>(request):
    # View Logic goes in here....
    return render(request, <template>, <context>)

Zniszmy to:

  • Widok_name : Nazwa funkcji widoku.

  • Żądanie : Żądanie HTTP wysłane przez klienta na serwer Django może zostać uruchomione z przesyłania formularza lub kliknięciu przycisku.

  • return render: używany do generowania odpowiedzi HTML. To trwa:

    • request: obiekt żądania, który zawiera informacje o przychodzącym żądaniu.

    • template: plik szablonu do renderowania.

    • Kontekst : Zawiera zmienne, które należy udostępnić w szablonie, zwykle występuje w postaci słownika.

Wyświetl przykład

Kontynuując naszą listę zadań, nasz pogląd będzie wyglądał następująco:

def task_list(request):
    # Logic goes in here...
    return render(request, <template>, {'tasks': tasks})

Komponent szablonu

Szablony Django są odpowiedzialne za renderowanie ostatecznego wyjścia HTML w przeglądarce. Określają, w jaki sposób należy przedstawić dane, stosując kombinację języka szablonów HTML i Django.

Język szablonów Django obejmuje użycie tagów szablonów {% % i zmiennych szablonów {{ }}, które umożliwiają wejdź w tryb Django w swoim szablonie HTML. W tym trybie możesz uzyskać dostęp do zmiennych zdefiniowanych w widokach i używać struktur kontrolnych w swoim szablonie.

Szablony można również zaprojektować za pomocą CSS lub dowolnej z twoich ulubionych frameworków CSS, aby interfejs użytkownika był bardziej prezentowany.

Przykład szablonu

Nasz szablon jest normalnym plikiem HTML z językiem szablonów Django. Oto jak wyglądałby nasz szablon listy zadań:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>
</body>
</html>

W tym szablonie:

  • dla pętli itera się za pośrednictwem każdego zadania na liście zadań (pamiętaj, że został przekazany jako kontekst w naszych poglądach).

  • Dla każdego zadania wyświetla tytuł zadania i jego status ukończone (jako „Ukończone” lub „Nieukończone”).

  • Jeśli lista zadania jest pusta, w bloku {% pusty % zostanie wyświetlony komunikat zastępczy o treści „Brak dostępnych zadań”.

Schemat pokazujący przepływ pracy MVT

Ten diagram przedstawia sposób przepływu danych w architekturze MVT Django:

Rzeczywista analogia MVT

Wyobraź sobie, że idziesz do restauracji i składasz zamówienie na swój ulubiony posiłek. Za kulisami restauracji znajduje się książka kucharska, w której opisano, jak należy przygotować każde danie. Szef kuchni korzysta z przepisów, aby przygotować posiłek dokładnie tak, jak go zamówiłeś. Gdy wszystko będzie gotowe, serwer dostarczy Ci posiłek w atrakcyjny sposób.

Tak jak szef kuchni postępuje zgodnie z przepisem, aby przygotować danie, widok wykorzystuje model do gromadzenia i przetwarzania danych. Wreszcie, podobnie jak serwer dostarczający danie, szablon gwarantuje, że ostateczny wynik zostanie zaprezentowany użytkownikowi w przejrzysty i wciągający sposób.

Łączenie tego wszystkiego w projekt

Ta sekcja przejdzie cię, od początku do końca, jak skonfigurować listę zadań, którego użyliśmy jako przykład w artykule. Na koniec powinieneś mieć funkcjonalną aplikację z architekturą MVT w pełnym przepływie.

Zainstaluj Python

Najpierw upewnij się, że masz zainstalowany język Python. Możesz odwiedzić oficjalną stronę Pythona, aby pobrać najnowszą wersję Pythona.

Skonfiguruj projekt i aplikację Django

Następnie zainstaluj Django. Możesz go zainstalować za pomocą PIP:

pip install django

Utwórz folder i otwórz go w swoim ulubionym edytorze kodu.

Utwórz nowy projekt i aplikację Django, uruchamiając następujące polecenia w terminalu, jeden po drugim:

django-admin startproject myproject 
cd myproject
django-admin startapp myapp

Zdefiniuj model

W twoim myApp/modele.py :

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    completed = models.BooleanField(default=False)

Utwórz formularz

Potrzebujemy formularza Django opartego na modelu Task, więc utworzymy go za pomocą Django ModelForm.

W swojej myapp utwórz plik, nazwij go forms.py i wstaw ten kod:

from django import forms
from .models import Task

class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = ['title', 'description', 'completed']

W tym kodzie:

  • zadanie jest importowane z .Models .

  • class TaskForm(forms.ModelForm): Tworzy nową klasę o nazwie TaskForm, która jest podklasą forms.ModelForm.

  • class Meta:: to specjalna klasa używana przez ModelForm Django w celu zapewnienia konfiguracji formularza. Klasa Meta informuje Django, jak utworzyć formularz, określając powiązany model i pola, które mają zostać uwzględnione w formularzu.

  • model=Zadanie: określa model, na którym oparty jest formularz. W tym przypadku formularz opiera się na modelu Task.

  • Fields=[„tytuł”, „Opis”, „Ukończony”] : Określa, które pola z modelu zadania powinny być zawarte w formularzu. Pozwala to kontrolować, które pola modelu pojawiają się w formie, i można je dostosować do tylko niektórych pól, a nie na wszystkie pola w modelu.

Utwórz widok

W pliku myapp/views.py wstaw ten kod:

from django.shortcuts import render,redirect
from .models import Task
from .forms import TaskForm

def task_list(request):
    tasks = Task.objects.all()    # Retrieve all tasks

    if request.method == 'POST':    # Handle form submissions
        form = TaskForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('task_list')  # Redirect to avoid duplicate submissions
    else:
        form = TaskForm()

    # Pass tasks and the form to the template
    return render(request, 'task_list.html', {'tasks': tasks, 'form': form})

W tym widoku

  • TaskForm jest importowany z forms.

  • Kod sprawdza, czy metoda żądania jest post , wskazując, że użytkownik przesłał formularz.

  • Jeśli metodą jest POST, tworzy instancję TaskForm przy użyciu przesłanych danych (request.POST).

  • Formularz jest następnie sprawdzany za pomocą form.is _valid() , a jeśli jest prawidłowy, formularz jest zapisywany w bazie danych.

  • Po zapisaniu użytkownik zostaje przekierowany na stronę listy zadań, aby zapobiec zduplikowaniu zgłoszeń.

Zdefiniuj szablon

W katalogu MyApp Utwórz folder szablony . W folderze szablonów utwórz plik i nazwij go task_list.html . Musimy dodać element formularza, który zbiera wejścia użytkownika i wyświetla je na liście w interfejsie użytkownika.

W pliku HTML task_list mamy:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>

    <h2>Add a New Task</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

W dodanym kodzie formularza:

  • Stworzyliśmy formularz HTML z metodą POST do przesyłania danych. Zawiera {% csrf_token % chroniący przed atakami CSRF.

  • Pola formularza są renderowane za pomocą {{form.as_p}} , który wyświetla każde pole w znaczniku <p>.

  • Wreszcie podano przycisk Przesyłania „Dodaj zadanie”, umożliwiając użytkownikowi przesłanie danych formularza.

Struktura folderów

Po osiągnięciu tego punktu ważne jest, aby sprawdzić, czy konfigurujesz aplikację we właściwy sposób. Oto jak powinna wyglądać struktura folderów/plików:

└── 📁myproject
    └── 📁myapp
        └── 📁__pycache__
        └── 📁migrations
        └── 📁templates
            └── task_list.html
        └── __init__.py
        └── admin.py
        └── apps.py
        └── forms.py
        └── models.py
        └── tests.py
        └── urls.py
        └── views.py
    └── 📁myproject
        └── 📁__pycache__
        └── __init__.py
        └── asgi.py
        └── settings.py
        └── urls.py
        └── wsgi.py
    └── db.sqlite3
    └── manage.py

Skonfiguruj adres URL projektu

W pliku myproject/urls.py umieść adres URL w pliku myapp:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
]

Dodaj aplikację do ustawień projektu

Dodaj swój MyApp do listy Zainstalowane aplikacje w swoim myProject/setting.py :

INSTALLED_APPS = [
    'myapp',      # added our myapp app
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Uruchom serwer

Zastosuj migrację i uruchom serwer, wprowadzając następujące polecenia:

python manage.py migrate

python manage.py runserver

Odwiedź http://127.0.0.1:8000/ w przeglądarce, aby przetestować aplikację.

Ostateczne spojrzenie

Tak wygląda nasza aplikacja z listą zadań w przeglądarce po dodaniu zadań za pomocą formularza. Możesz wprowadzić dalsze ulepszenia w stylizacji szablonu, według własnego uznania.

Wniosek

W tym artykule dowiedziałeś się o komponentach architektury MVT Django, o tym, jak współdziałają ze sobą i jak sprawiają, że korzystanie z Internetu jest płynne. Zbudowaliśmy także prosty projekt, aby zobaczyć, jak to działa w praktyce i mam nadzieję, że teraz rozumiesz go lepiej.

Jeśli podobało Ci się czytanie tego artykułu, możesz śledzić mnie na X lub połączyć się ze mną na LinkedIn, aby uzyskać więcej artykułów programowych i postów.

Do zobaczenia na kolejnym!