איך פרישת ה-MVT של Django עובדת: חקירה עמוקה במודלים, תצוגות ותבניות

דג'נגו הוא מסגרת פייתון ברמה גבוהה. היא פופולרית בגלל פשטותה ויעילותה בבניית אפליקציות אינטרנט חזקות.

בלב הארכיטקטורה של דג'נגו נמצאת תבנית MVT (Model-View-Template). הבנת טובה של איך המודלים, התצוגות והתבניות פועלות יחד היא חיונית אם אתה מעוניין למצות את כל היכולות של דג'נגו.

בין אם אתה לגמרי חדש בדג'נגו או מתחיל, מאמר זה ישמש כמדריך מקיף שיראה לך כיצד הרכיבים הללו פועלים ומתקשרים זה עם זה כדי ליצור אפליקציות אינטרנט דינמיות.

כדי להפוך את זה עוד יותר מובן, נבנה אפליקציה פשוטה כדי לעזור לך להבין טוב יותר את הקשר בין רכיבים אלו.

אם אתה כבר מתרגש, בוא נתחיל!

דרישות מוקדמות

כדי לעקוב, יש לך:

הבנה בסיסית של איך מערכות אינטרנט פועלות, כולל ארכיטקטורת לקוח-שרת.
ידע בסיסי ב-Python.

מהו ארכיטקטורת MVT?

התבנית MVT היא הגישה של Django לארגון בסיס הקוד ותהליך העבודה של אפליקציית האינטרנט. הרכיבים שמרכיבים את ארכיטקטור זו הם המודל, התצוגה והתבנית. כל רכיב מבצע פונקציות ספציפיות ואז מעביר את התהליך לרכיבים אחרים כדי לבצע את שלהם.

בואו נסתכל בקצרה על הרכיבים עם הפונקציות הספציפיות שלהם:

מודל: גם ידוע כשכבת הנתונים, ניהול הנתונים והאינטראקציה עם מסד הנתונים.
תצוגה: גם ידועה כשכבת הלוגיקה, פועלת כאמצעית, עוסקת בלוגיקה וניהול זרימת הנתונים.
תבנית: גם ידועה כשכבת ההצגה, מציגה תוכן HTML על ממשק המשתמש.

עכשיו שיש לך רעיון על הרכיבים והתפקידים שלהם באפליקציה של Django, נסתכל באופן מקיף על כל רכיב וכיצד הם מתקשרים בארכיטקטורה.

רכיב המודל

המודלים ניהלים את מבנה והאינטראקציה של נתונים באפליקציה של Django, ובכך הם מהווים את היסוד של אפליקציות Django בשל תפקידם הקריטי של הנתונים.

Django משתמש בתכונה חזקה הנקראת מיפוי אובייקט-יחסי (ORM), אשר מבריק את הפער בין מסד נתונים רציונלי וקוד Python. זה ממיר את האובייקטים ב-Python (מחלקות) לטבלאות במסד הנתונים, את המאפיינים שלהם לעמודות, ואת המופעים לשורות בטבלאות אלו.

אחד היתרונות הגדולים של ORM הוא שהוא מאפשר לך לפעול עם מסד הנתונים באמצעות אובייקטים ב-Python במקום כתיבת שאילתות SQL. חשוב לחשוב על זה כמתרגם שממיר שפה אחת לשפה אחרת כדי שקהל מסוים יבין. במקרה זה, ORM מתרגם קוד Python לפקודות SQL שבהן המסד יכול לבצע, ולהיפך.

דג'נגו מודלים מכלילים את כל הלוגיקה הקשורה למסד הנתונים ומגדירים את מבנה מסד הנתונים שלך, פועלים כתבלוג לנתונים שברצונך לאחסן.

הפורמט הכללי של מודל Django

ב-Django, כל מודל עוקב אחר דרך מסוימת של הצהרה. הנה המבנה הבסיסי של הצהרת מודל:

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

בואו נפרט את זה:

class: המילת מפתח שמשמשת להגדרת מודל ב-Django.
model_name: שם המודל.
models.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)

במודל זה:

Task הוא שם המודל.
מודל המשימה כולל שלושה שדות:
- title: CharField שמחזיק טקסט, באורך מקסימלי של 100 תווים.
- description: TextField לטקסט ארוך יותר.
- completed: BooleanField ששומר ערך True או False, עם ברירת מחדל של False.

מרכיב התצוגה

תצוגות Django אחראיות על עיבוד הבקשות של המשתמשים והחזרת תגובות. הן פועלות כגשר בין המודל לתבנית על ידי איסוף נתונים מאובייקטי המודל, ביצוע פעולות לוגיות עליהם (כגון שאילתות המבוססות על קריטריונים מסוימים), ולאחר מכן העברת הנתונים לתבנית לצורך הצגה.

ניתן לכתוב תצוגות כפונקציות או באופן מבוסס מחלקה, תלוי במורכבות ובדרישות היישום שלך.

פורמט כללי של תצוגה ב-Django

כאן מבנה הבסיס של תצוגה:

def <view_name>(request):
    # הלוגיקה של התצוגה היא כאן....
    return render(request, <template>, <context>)

נביא את זה לפירוט:

view_name: שם פונקציית התצוגה.
request: בקשת ה-HTTP שנשלחת על ידי הלקוח אל שרת ה-Django, יכולה להתקבל משליחת טופס או לחיצה על כפתור.
return render: משמש ליצירת תגובת HTML. זה מקבל:
- request: אובייקט הבקשה, שמכיל מידע על הבקשה הנכנסת.
- template: קובץ התבנית להצגה.
- context: מכיל משתנים שיהיו זמינים בתבנית, נכון לרוב המגיע בצורת מילון.

דוגמה לתצוגה

המשכים עם רשימת המשימות שלנו, כך ייראה התצוגה שלנו:

def task_list(request):
    # הלוגיקה מתבצעת כאן...
    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

תאמינו שאתם הולכים למסעדה ומזמינים את המנה האהובה עליכם. מאחורי הקלעים, במסעדה יש ספר מתכונים שמתאר כיצד יש להכין כל מנה. השף משתמש במתכונים כדי להכין את האוכל שלכם בדיוק כפי שהזמנתם אותו. כאשר הוא מוכן, המלצר מגיש לכם את המנה בצורה מסודרת.

כשהשף עוקב אחר המתכון כדי להכין את המנה, ה-View משתמש ב-Model כדי לאסוף ולעבד נתונים. סופית, בדומה למלצר שמגיש את המנה, ה-Template מבטיח שהפלט הסופי מוצג בפורמט ברור ומעניין למשתמש.

איחוד הכל יחד לפרויקט

קטע זה ינחה אותך, מתחילתו ועד סופו, כיצד להקים את רשימת המשימות ששימשה כדוגמה במאמר. בסוף, אתה אמור להיות עם אפליקציה פונקציונלית עם אדריכלות MVT בזרימה מלאה.

התקן את פייתון

ראשית, ודא שיש לך את פייתון מותקן. אתה יכול לבקר ב-האתר הרשמי של פייתון כדי להוריד את הגרסה האחרונה של פייתון.

הגדר את פרויקט 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()    # קבלת כל המשימות

    if request.method == 'POST':    # טיפול בהגשות טופס
        form = TaskForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('task_list')  # הפניית משתמשים כדי למנוע הגשות כפולות
    else:
        form = TaskForm()

    # העברת משימות והטופס לתבנית
    return render(request, 'task_list.html', {'tasks': tasks, 'form': form})

במבט הזה,

TaskForm מיובא מ-forms.
הקוד בודק אם שיטת הבקשה היא POST, מה שמצביע על כך שהמשתמש הגיש טופס.
אם השיטה היא POST, נוצר מופע של TaskForm באמצעות הנתונים שהוגשו (request.POST).
לאחר מכן, הטופס מאומת באמצעות form.is_valid(), ואם הוא תקף, הטופס נשמר במסד הנתונים.
לאחר השמירה, המשתמש מופנה לדף רשימת המשימות כדי למנוע הגשות כפולות.

הגדרת התבנית

בתיקיית myapp שלך, צור תיקייה בשם templates. בתוך תיקיית התבניות, צור קובץ ותתן לו שם task_list.html. אנו צריכים להוסיף אלמנט טופס שמאסף את קלטי המשתמש ומציג אותם ברשימה בממשק המשתמש.

בקובץ ה-HTML של task_list, יש:

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

הגדר את כתובת הפרויקט

בקובץ 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',      # הוספנו את אפליקציית myapp שלנו
    '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/ בדפדפן שלך כדי לבדוק את האפליקציה שלך.

מראה סופי

כך נראה אפליקציית רשימת המשימות שלנו בדפדפן לאחר הוספת משימות מסוימות באמצעות הטופס. תוכלו לבצע שדרוגים נוספים בעיצוב התבנית כפי שתרצו.

מסקנה

במאמר זה, למדתם על הרכיבים בארכיטקטורת ה-MVT של Django, כיצד הם מתקשרים זה עם זה, וכיצד הם עושים את חוויות האינטרנט חלקות. בנו גם פרויקט פשוט כדי לראות כיצד זה עובד בפועל, ואני מקווה שאתם מבינים את זה טוב יותר כעת.

אם נהניתם לקרוא את המאמר הזה, אתם יכולים לעקוב אחריי בX או להתחבר אליי בLinkedIn למאמרים ופוסטים נוספים על תכנות.

נתראה במאמר הבא!