Recherche de site Web

Comment fonctionne l'architecture MVT de Django : une plongée approfondie dans les modèles, les vues et les modèles


Django est un framework Python de haut niveau. Il est populaire pour sa simplicité et son efficacité dans la création d’applications Web robustes.

Au cœur de l'architecture de Django se trouve le modèle de modèle de vue modèle (MVT). Avoir une bonne compréhension de la façon dont les modèles, les vues et les modèles interagissent est crucial si vous cherchez à exploiter toute la puissance de Django.

Que vous soyez complètement nouveau dans Django ou un débutant, cet article servira de guide complet vous montrant comment ces composants fonctionnent et interagissent les uns avec les autres pour créer des applications Web dynamiques.

Pour le rendre encore plus compréhensible, nous créerons une application simple pour vous aider à mieux comprendre l'interconnectivité de ces composants.

Si vous êtes déjà excité, allons-y directement!

Voici ce que nous allons aborder :

  • Condition préalable

  • Qu'est-ce que l'architecture MVT?

  • Le composant modèle

  • Le composant de vue

  • Le composant de modèle

  • Diagramme montrant le workflow MVT

  • Analogie réelle du MVT

  • Tout rassembler dans un projet

  • Conclusion

Conditions préalables

Pour suivre, il vous faut :

  • Compréhension de base du fonctionnement des applications Web, y compris l'architecture client-serveur.

  • Connaissance de base de Python.

Qu'est-ce que l'architecture MVT ?

Le modèle MVT est l'approche de Django pour organiser la base de code et le flux de travail d'une application Web. Les composants qui composent cette architecture sont le modèle, la vue et le modèle. Chaque composant exécute des fonctions spécifiques, puis transmet le processus aux autres composants pour qu'ils effectuent les leurs.

Jetons un coup d'œil rapide aux composants avec les fonctions spécifiques qu'ils remplissent:

  • modèle : Également connu sous le nom de couche de données, il gère les données et interagit avec la base de données.

  • Vue : également connue sous le nom de couche logique, elle agit comme intermédiaire, gère la logique et gère le flux de données.

  • Modèle : également connu sous le nom de couche de présentation, il restitue le contenu HTML sur l'interface utilisateur.

Maintenant que vous avez une idée des composants et de leurs rôles dans une application Django, nous examinerons largement chaque composant et comment ils interagissent dans l'architecture.

Le composant modèle

Les modèles gèrent la structure et l'interaction des données au sein d'une application Django, ce qui en fait la base des applications Django en raison du rôle critique que jouent les données.

Les modèles Django utilisent une fonctionnalité puissante appelée Object-Relational Mapping (ORM), qui comble le fossé entre une base de données relationnelle et le code Python. Il convertit les objets Python (classes) en tables de base de données, leurs attributs en colonnes et les instances en lignes au sein de ces tables.

L'un des énormes avantages de l'ORM est qu'il vous permet d'interagir avec la base de données à l'aide d'objets Python au lieu d'écrire des requêtes SQL. Considérez-le comme un traducteur qui convertit une langue dans une autre pour que le public puisse la comprendre. Dans ce cas, l'ORM traduit le code Python en commandes SQL que la base de données peut exécuter, et vice versa.

Les modèles Django résument toutes les logiques liées à la base de données et définissent la structure de votre base de données, agissant comme un plan pour les données que vous souhaitez stocker.

Format général d'un modèle django

Dans Django, chaque modèle suit une manière particulière de déclaration. Voici la structure de base d'un modèle de déclaration :

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

Décomposons-le:

  • class : le mot-clé utilisé pour définir un modèle dans Django.

  • modèle_name : le nom du modèle.

  • models.Model : la classe de base dont hérite la classe modèle.

  • field_name : le nom de la colonne de la base de données.

  • field_type : fait référence au type de données que le champ détient comme charfield , booleanfield et ainsi de suite.

  • optional_field_characteristics : utilisé pour définir plus précisément le comportement du champ, comme max_length, default, etc.

Exemple de modèle

Ayant tout connu sur les modèles jusqu'à ce point, nous allons en construire un pour une liste de tâches. Il contient généralement le titre de la tâche, la description et un indicateur quant à savoir si les tâches ont été effectuées ou non.

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

Dans ce modèle:

  • La tâche est le nom du modèle.

  • Le modèle de tâche a trois champs:

    • title : un CharField qui contient du texte, avec une longueur maximale de 100 caractères.

    • Description : A TextField pour un texte plus long.

    • terminé : A booleanfield qui stocke une valeur true ou false , avec une valeur par défaut de false .

Le composant de vue

Les vues Django sont responsables du traitement des demandes des utilisateurs et du renvoi des réponses. Ils servent de pont entre le modèle et le modèle en collectant les données des objets du modèle, en effectuant des opérations logiques sur eux (telles que des requêtes basées sur certains critères), puis en transmettant les données au modèle pour affichage.

Les vues peuvent être écrites comme des fonctions ou basées sur les classes, en fonction de la complexité et des exigences de votre application.

Format général d'une vue Django

Voici la structure de base d'une vue :

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

Décomposons-le:

  • View_name : le nom de la fonction View.

  • request : la requête HTTP envoyée par le client au serveur Django, peut être déclenchée à partir de la soumission d'un formulaire ou d'un clic sur un bouton.

  • return render : utilisé pour générer la réponse HTML. Ça prend:

    • request : l'objet de requête, qui contient des informations sur la requête entrante.

    • modèle : le fichier de modèle à rendre.

    • context : contient des variables à mettre à disposition dans le modèle, il se présente généralement sous la forme d'un dictionnaire.

Afficher un exemple

En continuant avec notre liste de tâches, voici à quoi ressemblerait notre point de vue :

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

Le composant de modèle

Les modèles Django sont chargés de rendre la sortie HTML finale sur le navigateur. Ils définissent comment les données doivent être présentées, en utilisant une combinaison de la langue des modèles de HTML et de Django.

Django Templating Language implique d'utiliser des balises de modèle {%%} et variables de modèle {{}} qui vous permettent de Entrez le mode Django dans votre modèle HTML. Dans ce mode, vous pouvez accéder aux variables définies dans vos vues et utiliser des structures de contrôle dans votre modèle.

Les modèles peuvent également être stylisés à l'aide de CSS ou de l'un de vos frameworks CSS préférés pour rendre votre interface utilisateur plus présentable.

Exemple de modèle

Notre modèle est un fichier HTML normal avec le langage de modèles de Django. Voici à quoi ressemblerait notre modèle de liste de tâches :

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

Dans ce modèle :

  • La boucle pour itère via chaque tâche dans la liste tâches (rappelez-vous qu'elle a été transmise comme contexte dans nos vues).

  • Pour chaque tâche, il publie le Titre de la tâche et son Statut terminé (comme "fait" ou "non fait").

  • Si la liste tâches est vide, le bloc {% vide %} affiche un message de secours indiquant « Aucune tâche disponible ».

Diagramme montrant le flux de travail MVT

Ce diagramme montre comment les données circulent dans l'architecture MVT de Django:

Analogie réelle du MVT

Imaginez que vous allez dans un restaurant et passez une commande pour votre repas préféré. Dans les coulisses, le restaurant a un livre de recettes qui décrit comment chaque plat doit être préparé. Le chef utilise les recettes pour préparer votre repas exactement comme vous l'avez commandé. Une fois qu'il est prêt, le serveur vous livre le repas de manière présentable.

Tout comme un chef suit la recette pour créer le plat, la vue utilise le modèle pour collecter et traiter les données. Enfin, comme le serveur livrant le plat, le modèle garantit que la sortie finale est présentée dans un format clair et engageant à l'utilisateur.

Tout rassembler dans un projet

Cette section vous expliquera, du début à la fin, comment configurer la liste des tâches que nous avons utilisée comme exemple dans l'article. Au final, vous devriez avoir une application fonctionnelle avec l'architecture MVT en plein débit.

Installer python

Tout d'abord, assurez-vous que Python soit installé. Vous pouvez visiter le site officiel de Python pour télécharger la dernière version Python.

Configurez le projet et l'application Django

Ensuite, installez Django. Vous pouvez l'installer à l'aide de PIP:

pip install django

Créez un dossier et ouvrez-le dans votre éditeur de code préféré.

Créez un nouveau projet et application Django en exécutant les commandes suivantes dans votre terminal, l'une après l'autre:

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

Définir le modèle

Dans votre 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)

Créer un formulaire

Nous avons besoin d'un formulaire Django basé sur le modèle de tâche, nous allons donc en créer un à l'aide du Django Modelform.

Dans votre myApp , créez un fichier, nommez-le forms.py et insérez ce code:

from django import forms
from .models import Task

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

Dans ce code:

  • La Tâche est importée depuis .models.

  • class TaskForm(forms.ModelForm) : cela crée une nouvelle classe appelée TaskForm, qui est une sous-classe de forms.ModelForm.

  • Class Meta: : est une classe spéciale utilisée par Django modelform pour fournir une configuration pour le formulaire. La classe méta explique à Django comment créer le formulaire en spécifiant le modèle associé et les champs à inclure dans le formulaire.

  • modèle=tâche : spécifie le modèle sur lequel le formulaire est basé. Dans ce cas, le formulaire est basé sur le modèle tâche .

  • fields=['title', 'Description', 'terminé'] : Spécifie les champs du modèle tâche doit être inclus dans le formulaire. Cela vous permet de contrôler quels champs de modèle apparaissent dans la forme, et il peut être personnalisé pour inclure uniquement certains champs, plutôt que tous les champs du modèle.

Créer la vue

Dans votre myApp/Views.py , insérez ce code:

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

Dans ce point de vue,

  • taskform est importé à partir de formulaires .

  • Le code vérifie si la méthode de demande est post , indiquant que l'utilisateur a soumis un formulaire.

  • Si la méthode est post , il crée une instance de taskform à l'aide des données soumises ( request.post ).

  • Le formulaire est ensuite validé à l'aide de form.is_valid(), et s'il est valide, le formulaire est enregistré dans la base de données.

  • Après l'enregistrement, l'utilisateur est redirigé vers la page de liste des tâches pour éviter les soumissions en double.

Définir le modèle

Dans votre répertoire myapp, créez un dossier templates. Dans le dossier des modèles, créez un fichier et nommez-le task_list.html. Nous devons ajouter un élément de formulaire qui collecte les entrées de l'utilisateur et les affiche dans une liste sur l'interface utilisateur.

Dans le fichier task_list html, nous avons:

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

Dans le code de formulaire ajouté:

  • Nous avons créé un formulaire HTML avec la méthode POST pour soumettre les données. Il comprend un {% csrf_token %} pour se protéger contre les attaques CSRF.

  • Les champs de formulaire sont rendus à l'aide de {{form.as_p}} , qui affiche chaque champ dans une balise <p>.

  • Enfin, un bouton de soumission intitulé « Ajouter une tâche » est fourni, permettant à l'utilisateur de soumettre les données du formulaire.

Structure de dossier

Une fois arrivé à ce point, il est important de vérifier si vous configurez votre application de la bonne manière. Voici à quoi devrait ressembler votre structure de dossiers/fichiers :

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

Configurer l'URL du projet

Dans votre myproject/urls.py , incluez l'URL dans votre myApp :

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

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

Ajouter l'application aux paramètres du projet

Ajoutez votre myapp à la liste des applications installées dans votre 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',
]

Exécuter le serveur

Appliquer la migration et exécuter le serveur en entrant ces commandes:

python manage.py migrate

python manage.py runserver

Visitez http://127.0.0.1:8000/ dans votre navigateur pour tester votre application.

Regard final

Voici à quoi ressemble notre application de liste de tâches sur le navigateur après avoir ajouté certaines tâches en utilisant le formulaire. Vous pouvez apporter des améliorations supplémentaires dans le style du modèle comme vous le souhaitez.

Conclusion

Dans cet article, vous avez découvert les composants de l’architecture MVT de Django, comment ils interagissent les uns avec les autres et comment ils rendent les expériences Web transparentes. Nous avons également construit un projet simple pour voir comment cela fonctionne dans la pratique, et j'espère que vous le comprenez mieux maintenant.

Si vous avez aimé lire cet article, vous pouvez me suivre sur X ou me contacter sur LinkedIn pour plus d'articles et de publications sur la programmation.

Rendez-vous sur le suivant!