Как работает архитектура MVT в Django

Django - это высокоуровневый фреймворк на Python. Он популярен благодаря своей простоте и эффективности в создании надежных веб-приложений.

В основе архитектуры Django лежит шаблон Model-View-Template (MVT). Хорошее понимание того, как взаимодействуют модели, представления и шаблоны, имеет решающее значение, если вы хотите использовать всю мощь Django.

Независимо от того, являетесь ли вы новичком в Django, эта статья послужит вам исчерпывающим руководством, показывающим, как эти компоненты работают и взаимодействуют друг с другом для создания динамических веб-приложений.

Чтобы сделать это еще более понятным, мы создадим простое приложение, которое поможет вам лучше понять взаимосвязь этих компонентов.

Если вы уже взволнованы, давайте сразу перейдем к делу!

Вот о чем мы расскажем:

Предварительные требования

Чтобы продолжить, вам нужно:

  • Базовые представления о том, как работают веб-приложения, включая архитектуру клиент-сервер.

  • Базовые знания языка Python.

Что такое архитектура MVT?

Шаблон MVT - это подход Django к организации кодовой базы и рабочего процесса веб-приложения. Компонентами, составляющими эту архитектуру, являются Модель, представление и шаблон. Каждый компонент выполняет определенные функции, а затем передает процесс другим компонентам для выполнения своих функций.

Давайте кратко рассмотрим компоненты и конкретные функции, которые они выполняют:

  • Модель: Также известная как уровень данных, она управляет данными и взаимодействует с базой данных.

  • Представление: Также известный как логический уровень, он действует как посредник, обрабатывает логику и управляет потоком данных.

  • Шаблон: Также известный как уровень представления, он отображает содержимое HTML в пользовательском интерфейсе.

Теперь, когда у вас есть представление о компонентах и их ролях в приложении Django, мы подробно рассмотрим каждый компонент и то, как они взаимодействуют в архитектуре.

Компонент модели

Модели управляют структурой и взаимодействием данных в приложении Django, что делает их основой приложений Django из-за важной роли, которую играют данные.

В моделях Django используется мощная функция, называемая Объектно-реляционное отображение (ORM), которая устраняет разрыв между реляционной базой данных и кодом на Python. Он преобразует объекты (классы) Python в таблицы базы данных, их атрибуты - в столбцы, а экземпляры - в строки внутри этих таблиц.

Одним из огромных преимуществ ORM является то, что он позволяет вам взаимодействовать с базой данных, используя объекты Python, вместо написания SQL-запросов. Думайте об этом как о трансляторе, который преобразует один язык в другой для понимания аудитории. В этом случае ORM преобразует код Python в команды SQL, которые может выполнять база данных, и наоборот.

Модели Django инкапсулируют всю логику, связанную с базой данных, и определяют структуру вашей базы данных, действуя как схема для данных, которые вы хотите сохранить.

Общий формат модели Django

В Django каждая модель описывается определенным образом. Вот базовая структура описания модели:

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

Давайте разберем это по порядку:

  • class: ключевое слово, используемое для определения модели в Django.

  • model_name: название модели.

  • models.Model: базовый класс, от которого наследуется класс model.

  • field_name: имя столбца базы данных.

  • field_type: относится к типу данных, хранящихся в поле, например charField, BooleanField и так далее.

  • optional_field_characteristics: используется для дальнейшего определения поведения поля, например max_length, default, и так далее.

Пример модели

Зная все о моделях на данный момент, мы создадим такую модель для списка задач. Обычно она содержит название задачи, описание и индикатор того, были ли задачи выполнены или нет.

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

В этой модели:

  • Задача - это название модели.

  • Модель задачи состоит из трех полей:

    • title: CharField, содержащий текст, максимальная длина которого составляет 100 символов.

    • description: A TextField для более длинного текста.

    • completed: BooleanField, в котором хранится значение True или False, значение по умолчанию равно False.

Компонент представление

Представления Django отвечают за обработку запросов пользователей и возврат ответов. Они служат связующим звеном между моделью и шаблоном, собирая данные из объектов модели, выполняя над ними логические операции (например, запросы на основе определенных критериев), а затем передавая данные в шаблон для отображения.

Представления могут быть записаны как функции или на основе классов, в зависимости от сложности и требований вашего приложения.

Общий формат представления Django

Вот основная структура представления:

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

Давайте разберем это по порядку:

  • view_name: имя функции просмотра.

  • request: HTTP-запрос, отправляемый клиентом на сервер Django, может быть инициирован отправкой формы или нажатием кнопки.

  • return render: используется для генерации HTML-ответа. Требуется:

    • request: объект запроса, содержащий информацию о входящем запросе.

    • template: файл шаблона для рендеринга.

    • context: содержит переменные, которые должны быть доступны в шаблоне, обычно он представлен в виде словаря.

Посмотреть пример

Продолжая наш список задач, вот как будет выглядеть наше представление:

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

Компонент шаблона

Шаблоны Django отвечают за вывод окончательного HTML-кода в браузере. Они определяют, как должны быть представлены данные, используя комбинацию HTML и языка шаблонов Django.

Язык шаблонов Django предполагает использование тегов шаблона {% %} и переменных шаблона {{ }}, которые позволяют вам перейти в режим Django в вашем HTML-шаблоне. В этом режиме вы можете получать доступ к переменным, определенным в ваших представлениях, и использовать управляющие структуры в вашем шаблоне.

Шаблоны также можно оформить с помощью CSS или любого из ваших любимых CSS-фреймворков, чтобы сделать ваш пользовательский интерфейс более презентабельным.

Пример шаблона

Наш шаблон представляет собой обычный HTML-файл с использованием языка шаблонов Django. Вот как должен выглядеть наш шаблон списка задач:

<!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>

В этом шаблоне:

  • Цикл for выполняет итерацию по каждой задаче в списке tasks (помните, что в наших представлениях она передавалась как контекст).

  • Для каждой задачи он выводит значение title и ее статус completed (либо как "Выполнено", либо как "Не выполнено").

  • Если список tasks пуст, в блоке {% empty %} отображается резервное сообщение "Нет доступных задач".

Диаграмма, показывающая рабочий процесс MVT

На этой диаграмме показано, как передаются данные в архитектуре MVT Django:

MVT architecture diagram showing how data flows between client and server

Реальная аналогия MVT

Представьте, что вы приходите в ресторан и заказываете свое любимое блюдо. За кулисами ресторана есть книга рецептов, в которой описано, как следует готовить каждое блюдо. Шеф-повар использует рецепты, чтобы приготовить ваше блюдо именно так, как вы заказали. Как только блюдо будет готово, официант доставит его вам в презентабельном виде.

Точно так же, как шеф-повар при приготовлении блюда следует рецепту, программа View использует модель для сбора и обработки данных. Наконец, как и сервер, доставляющий блюдо, шаблон обеспечивает представление конечного результата в понятном и привлекательном для пользователя формате.

Объединяем все это в проект

В этом разделе мы расскажем вам от начала до конца, как настроить список задач, который мы использовали в качестве примера в статье. В итоге у вас должно получиться функциональное приложение с архитектурой MVT в полном объеме.

Установить Python

Сначала убедитесь, что у вас установлен Python. Вы можете посетить Официальный веб-сайт Python, чтобы загрузить последнюю версию Python.

Настройка проекта и приложения Django

Затем установите Django. Вы можете установить его с помощью pip:

pip install django

Создайте папку и откройте ее в вашем любимом редакторе кода.

Создайте новый проект и приложение на Django, выполнив в своем терминале одну за другой следующие команды:

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

Определите модель

В вашем myapp/models.py:

from django.db import models

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

Создать форму

Нам нужна форма Django, основанная на модели задачи, поэтому мы создадим ее, используя Django ModelForm.

В вашем myapp создайте файл, назовите его forms.py и вставьте этот код:

from django import forms
from .models import Task

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

В этом коде:

  • Task импортируется из .models.

  • class TaskForm(forms.ModelForm): При этом создается новый класс с именем TaskForm, который является подклассом forms.ModelForm.

  • class Meta:: это специальный класс, используемый ModelForm в Django для обеспечения конфигурации формы. Класс Meta сообщает Django, как создать форму, указывая соответствующую модель и поля, которые необходимо включить в форму.

  • model = Task: указывает модель, на которой основана форма. В данном случае форма основана на модели Task.

  • fields = ['title', 'description', 'completed']: указывает, какие поля из модели Task должны быть включены в форму. Это позволяет вам контролировать, какие поля модели отображаются в форме, и может быть настроено таким образом, чтобы включать только определенные поля, а не все поля в модели.

Создайте представление

В поле myapp/views.py вставьте этот код:

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})

В этом представлении,

  • TaskForm импортируется из forms.

  • Код проверяет, является ли метод запроса POST, указывая, что пользователь отправил форму.

  • Если метод равен POST, он создает экземпляр TaskForm, используя отправленные данные (request.POST).

  • Затем форма проверяется с помощью form.is_valid(), и, если она верна, сохраняется в базе данных.

  • После сохранения пользователь перенаправляется на страницу списка задач, чтобы предотвратить повторные отправки.

Определите шаблон

В вашем каталоге myapp создайте папку templates. Внутри папки templates создайте файл и назовите его task_list.html. Нам нужно добавить элемент формы, который собирает вводимые пользователем данные и отображает их в виде списка в пользовательском интерфейсе.

В task_list HTML-файле у нас есть:

<!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>

В добавленном коде формы:

  • Мы создали HTML-форму с помощью метода POST для отправки данных. Она включает в себя {% csrf_token %} для защиты от атак CSRF.

  • Поля формы отображаются с помощью {{ form.as_p }}, при этом каждое поле отображается в теге <p>.

  • Наконец, предусмотрена кнопка отправки с надписью "Добавить задачу", позволяющая пользователю отправить данные формы.

Структура папок

После этого важно перепроверить, правильно ли вы настраиваете свое приложение. Вот как должна выглядеть структура ваших папок/файлов:

└── 📁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

Настройте URL-адрес проекта

В вашем myproject/urls.py укажите URL-адрес в вашем myapp:

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

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

Добавьте приложение в настройки проекта

Добавьте свое myapp в список Установленных приложений в вашем myproject/settings.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',
]

Запустите сервер

Примените миграцию и запустите сервер, введя следующие команды:

python manage.py migrate

python manage.py runserver

Перейдите по ссылке http://127.0.0.1:8000/ в своем браузере, чтобы протестировать приложение.

Окончательный вид

Вот как выглядит наше приложение со списком задач в браузере после добавления некоторых задач с помощью формы. Вы можете внести дополнительные улучшения в оформление шаблона по своему усмотрению.

Final task app interface

Заключение

В этой статье вы узнали о компонентах архитектуры MVT в Django, о том, как они взаимодействуют друг с другом и как они упрощают работу в Интернете. Мы также создали простой проект, чтобы посмотреть, как он работает на практике, и я надеюсь, что теперь вы лучше его понимаете.

Если вам понравилось читать эту статью, вы можете подписаться на меня на X или связаться со мной на LinkedIn для получения дополнительных статей и сообщений по программированию.

Увидимся на следующем!

Вернуться на верх