Шаг2. Создание приложения Django с представлениями и шаблонами страниц

Статья
09/08/2023

Предыдущий шаг. Руководство (шаг 1). Начало работы с веб-платформой Django в Visual Studio

В проекте Visual Studio теперь имеются только компоненты на уровне сайта проекта Django, с помощью которых можно выполнить одно или несколько приложений Django. Следующий шаг — создание первого одностраничного приложения.

На этом шаге вы научитесь делать следующее:

Создание одностраничного приложения Django (шаг 2–1).
Запуск приложения из проекта Django (шаг 2–2).
Преобразование представления с помощью HTML (шаг 2–3).
Преобразование представления с помощью шаблона страницы Django (шаг 2–4).

Шаг 2–1. Создание приложения со стандартной структурой

Приложение Django — это отдельный пакет Python, который содержит набор связанных файлов для определенной цели. Проект Django может содержать множество приложений, с помощью которых веб-узел может обслуживать множество отдельных точек входа с использованием одного доменного имени. Например, проект Django для домена, например contoso.com , может содержать одно приложение для www.contoso.com, второе приложение для support.contoso.comи третье приложение для docs.contoso.com. В этом случае проект Django обрабатывает маршрутизацию и параметры URL-адресов на уровне сайта (с использованием файлов urls.py и settings.py). Каждое приложение имеет свои собственные стиль и поведение, основанные на реализации внутренней маршрутизации, представлений, моделей, статических файлов и административного интерфейса.

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

Шаблоны. В обозревателе решений щелкните проект правой кнопкой мыши и выберите пункты Добавить>Новый элемент. В диалоговом окне Добавить новый элемент выберите шаблон Приложение Django 1.9, укажите имя приложения в поле Имя и нажмите кнопку Добавить.

Screenshot of Solution Explorer.

Screenshot of Add New Item window.

Интегрированная команда. В обозревателе решений щелкните правой кнопкой мыши проект и выберите Добавить>Приложение Django. Команда запросит имя. Укажите имя приложения в поле Имя нового приложения и нажмите кнопку ОК.

Создайте приложение с именем HelloDjangoApp, используя любой из методов. Теперь в проекте создается папка HelloDjangoApp. Эта папка содержит следующие элементы:

Django app files in Solution Explorer.

Элемент	Description
migrations	Папка, в которой Django хранит скрипты, обновляющие базу данных в соответствии с изменениями в моделях. Затем средства миграции Django применяют необходимые изменения к любой из предыдущих версий базы данных для соответствия текущим моделям. С помощью миграции вы можете сконцентрироваться на работе с моделями и позволить Django обрабатывать базовую схему базы данных. Вопросы миграции обсуждаются в документации по Django. Сейчас папка содержит файл __init__.py (указывает, что папка определяет собственный пакет Python).
__init__.py	Файл, определяющий приложение в качестве пакета.
templates	Папка для шаблонов страниц Django, содержащая один файл index.html. Файл index.html находится в папке, имя которой совпадает с именем приложения. (В Visual Studio 2017 версии 15.7 и более ранних версий этот файл размещается непосредственно в папке templates, а на шаге 2-4 приводятся инструкции по созданию вложенной папки.) Шаблоны — это блоки HTML-кода, в которые представления могут добавлять сведения для динамического отображения страницы. Переменные шаблона страницы, например `{{ content }}` в index.html, — это заполнители для динамических значений, как описано далее в этой статье (шаг 2). Обычно приложения Django создают пространство имен для своих шаблонов, помещая их в подпапку, которая соответствует имени приложения.
admin.py	Файл Python, в котором расширяется административный интерфейс приложения, используемый для просмотра и изменения данных в базе данных. Изначально файл содержит только оператор, `from django.contrib import admin`. По умолчанию Django включает стандартный административный интерфейс с помощью записей в файле settings.py проекта Django. Чтобы включить интерфейс, можно раскомментировать существующие записи в файле urls.py.
apps.py	Файл Python, который определяет класс конфигурации для приложения (см. после этой таблицы ниже).
models.py	Модели — это определенные функциями объекты данных, с помощью которых представления взаимодействуют с основной базой данных приложения. Django предоставляет уровень подключения к базе данных, поэтому приложениям не нужно обрабатывать эти сведения. Модели по умолчанию создаются в файле models.py. Изначально файл models.py содержит только оператор, `from django.db import models`.
tests.py	Файл Python, содержащий базовую структуру модульных тестов.
views.py	Представления похожи на веб-страницы, которые принимают HTTP-запросы и возвращают HTTP-ответы. Представления обычно отображаются в виде HTML-кода в веб-браузерах, однако представление не обязательно должно быть видимым (как промежуточная форма). Представление определяется функцией Python, которая отвечает за обработку HTML-кода для отображения в браузере. Представления по умолчанию создаются в файле views.py. Изначально файл views.py содержит только оператор, `from django.shortcuts import render`.

При использовании имени HelloDjangoApp содержимое файла apps.py выглядит следующим образом:

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjango'

Вопрос. Отличается ли создание приложения Django в Visual Studio от создания приложения в командной строке?

Ответ. Если выполнить команду Добавить>Приложение Django или Добавить>Новый элемент в шаблоне приложения Django, будут созданы те же файлы, что и при использовании команды Django manage.py startapp <app_name>. Преимуществом создания приложения в Visual Studio является то, что папка приложения и все ее файлы автоматически интегрируются в проект. С помощью той же команды Visual Studio можно создать любое количество приложений в проекте.

Шаг 2–2. Запуск приложения из проекта Django

Теперь, если вы снова запустите проект в Visual Studio (используя кнопку панели инструментов или выполнив команды Отладка>Начать отладку), отобразится страница по умолчанию. Содержимое приложения не отобразится, так как для этого необходимо определить страницу приложения и добавить приложение в проект Django.

В папке HelloDjangoApp измените файл views.py, чтобы определить представление с именем index:
```
from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, Django!")
```
В папке BasicProject (созданной в шаге 1) измените файл urls.py, чтобы он соответствовал следующему коду (при необходимости можно оставить полезные комментарии):
```
from django.urls import include, re_path
import HelloDjangoApp.views

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
    re_path(r'^$', HelloDjangoApp.views.index, name='index'),
    re_path(r'^home$', HelloDjangoApp.views.index, name='home')
]
```
Каждый шаблон URL-адреса описывает представления, в которые Django направляет определенные URL-адреса, связанные с сайтом (это фрагмент после https://www.domain.com/). Первая запись в urlPatterns, которая начинается с регулярного выражения ^$, — это маршрутизация для корня сайта, "/". Вторая запись ^home$ конкретно направляет /home. В одном представлении может быть несколько маршрутов.
Запустите проект еще раз, чтобы убедиться, что отображается сообщение Hello, Django!, как определено в представлении. По завершении остановите сервер.

Фиксация в системе управления версиями

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

Нажмите кнопку изменений в нижней части Visual Studio (выделена кружком ниже), чтобы перейти к Team Explorer.
В Team Explorer введите сообщение фиксации, например "Создать исходное приложение Django" и выберите Зафиксировать все. После завершения фиксации появится сообщение Фиксация <хэш> создана локально. Выполните синхронизацию, чтобы отправить изменения на сервер. Если вы хотите отправить изменения в удаленный репозиторий, выберите Синхронизировать, а затем нажмите Отправить в разделе Исходящие фиксации. Кроме того, вы можете накапливать несколько локальных фиксаций перед отправкой в удаленный репозиторий.

Вопрос. Что означает префикс r перед строками маршрутизации?

Ответ. Префикс r в строке Python означает raw (без обработки). Это указывает Python не использовать escape-символы в строке. В регулярных выражениях используется множество специальных символов. Использование префикса "r" значительно упрощает чтение строк по сравнению с escape-символом "\".

Вопрос. Что означают символы ^ и $ в записях маршрутизации URL-адреса?

Ответ. В регулярных выражениях, определяющих шаблоны URL-адреса, ^ означает start of line (начало строки), а $ — end of line (конец строки), где URL-адреса аналогичным образом являются относительными для корня сайта (часть за https://www.domain.com/). Регулярное выражение ^$ фактически означает blank (пусто) и соответствует полному URL-адресу https://www.domain.com/ (ничего не добавляется к корню сайта). Шаблон ^home$ точно соответствует https://www.domain.com/home/. (Django не использует косую черту (/) в конце сопоставления шаблона.)

Если вы не используете в конце регулярного выражения символ $, как в случае с ^home, то шаблон URL-адреса соответствует любому URL-адресу, который начинается с home, например home, homework, homestead и home192837.

Чтобы поэкспериментировать с разными регулярными выражениями, попробуйте воспользоваться интерактивными средствами, например regex101.com в pythex.org.

Шаг 2–3. Преобразование представления с помощью HTML

Функция index в файле views.py создает ответы HTTP в простом текстовом формате для страницы. Большинство реальных веб-страниц предоставляют ответы с большим количеством страниц HTML, которые часто содержат фактические данные. На самом деле основной причиной для определения представления с помощью функции является возможность создавать содержимое динамически.

Так как аргумент в HttpResponse — это просто строка, вы можете создать любой необходимый HTML-код в строке. В качестве простого примера замените функцию index следующим кодом (сохраните существующие операторы from). Затем функция index создает ответ HTML с использованием динамического содержимого, которое обновляется каждый раз при обновлении страницы.

from datetime import datetime

def index(request):
    now = datetime.now()

    html_content = "<html><head><title>Hello, Django</title></head><body>"
    html_content += "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
    html_content += "</body></html>"

    return HttpResponse(html_content)

Теперь снова запустите проект, чтобы отобразилось сообщение наподобие Hello, Django! в понедельник 16 апреля 2018 г. в 16:28:10". Обновите страницу, чтобы обновить время, и убедитесь, что содержимое создается при каждом запросе. По завершении остановите сервер.

Совет

Чтобы быстро остановить и перезапустить проект, выполните команду меню Отладка>Перезапустить (CTRL+SHIFT+F5) или нажмите кнопку Перезапуск на панели инструментов отладки:

Шаг 2–4. Преобразование представления с помощью шаблона страницы

Создание HTML в коде хорошо подходит для небольших страниц. Но чем сложнее страницы, тем больше необходимость хранить статические HTML-части страницы (вместе со ссылками на файлы CSS и JavaScript) в виде "шаблонов страниц". Так вы можете вставлять динамически создаваемое кодом содержимое в шаблоны страниц. В предыдущем разделе только дата и время вызова now.strftime являлись динамическими. Это значит, что остальное содержимое можно поместить в шаблон страницы.

Шаблон страницы Django — это блок HTML, содержащий несколько маркеров замены, называемых "переменными". Переменные обозначаются с помощью {{ и }}, например {{ content }}. Затем модуль шаблонов Django заменяет переменные динамическим содержимым, предоставленным в коде.

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

В папке BasicProject, содержащей проект Django, откройте файл settings.py. Добавьте в список INSTALLED_APPS имя приложения HelloDjangoApp. Добавление приложения в список указывает проекту Django, что существует папка с именем HelloDjangoApp, содержащая приложение:
```
INSTALLED_APPS = [
    'HelloDjangoApp',
    # Other entries...
]
```
В файле settings.py убедитесь, что объект TEMPLATES содержит следующую строку (включена по умолчанию). Следующий код указывает Django искать шаблоны в папке templates установленного приложения:
```
'APP_DIRS': True,
```
В папке HelloDjangoApp откройте файл шаблона страницы templates/HelloDjangoApp/index.html (или templates/index.html в Visual Studio 2017 15.7 и более ранних версий), чтобы увидеть, что в нем находится только одна переменная {{ content }}:
```
<html>
  <head>
    <title></title>
  </head>

  <body>
    {{ content }}
  </body>
</html>
```
В папке HelloDjangoApp откройте файл views.py и замените функцию index приведенным ниже кодом, в котором используется вспомогательная функция django.shortcuts.render. Вспомогательная функция render предоставляет упрощенный интерфейс для работы с шаблонами страницы. Сохраните все существующие операторы from.
```
from django.shortcuts import render   # Added for this step

def index(request):
    now = datetime.now()

    return render(
        request,
        "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
        # "index.html", # Use this code for VS 2017 15.7 and earlier
        {
            'content': "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
        }
    )
```
Первый аргумент в render — это объект запроса, за которым следует относительный путь к файлу шаблона в папке templates приложения. Файл шаблона называется в соответствии с поддерживаемым представлением, если это уместно. Третий аргумент в render представляет собой словарь переменных, к которым относится шаблон. Вы можете добавить объект в словарь. В этом случае переменная в шаблоне может ссылаться на {{ object.property }}.
Запустите проект и просмотрите выходные данные. Должно отобразиться примерно такое же сообщение, что и на шаге 2-2. Оно означает, что шаблон работает.

Обратите внимание, что HTML-код, используемый в свойстве content, отображается только в качестве обычного текста, так как функция render автоматически экранирует этот HTML-код. Автоматическое экранирование предотвращает случайные уязвимости к атакам путем внедрения кода. Разработчики часто собирают входные данные с одной страницы и используют их в качестве значения на другой странице с помощью заполнителя шаблона. Экранирование служит напоминанием о том, что HTML-код рекомендуется хранить в шаблоне страницы, а не в коде. Кроме того, при необходимости можно легко создать дополнительные переменные. Например, измените файл index.html в папке шаблонов, чтобы он соответствовал следующей разметке. Следующая разметка добавляет заголовок страницы и сохраняет все форматирование в шаблоне страницы:
```
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>
```
Затем запишите функцию представления index указанным ниже образом, чтобы предоставить значения для всех переменных в шаблоне страницы:
```
def index(request):
    now = datetime.now()

    return render(
        request,
        "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
        # "index.html", # Use this code for VS 2017 15.7 and earlier
        {
            'title' : "Hello Django",
            'message' : "Hello Django!",
            'content' : " on " + now.strftime("%A, %d %B, %Y at %X")
        }
    )
```
Остановите сервер и перезапустите проект. Убедитесь, что страница отображается корректно:
В Visual Studio 2017 версии 15.7 и более ранних версий: в качестве последнего шага переместите шаблоны во вложенную папку с именем, совпадающим с именем вашего приложения. При использовании вложенной папки создается пространство имен, что позволяет избежать потенциальных конфликтов с другими приложениями, которые можно добавить в проект. (Шаблоны в VS 2017 версии 15.8 и более поздних версий реализуют такое поведение автоматически.) Для этого создайте в папке templates вложенную папку с именем HelloDjangoApp, переместите в нее файл index.html и измените функцию index. Функция index будет ссылаться на новый путь к шаблону, HelloDjangoApp/index.html. Затем запустите проект, убедитесь, что страница отображается должным образом и остановите сервер.
Зафиксируйте изменения в системе управления версиями и обновите удаленный репозиторий при необходимости, как описано в шаге 2.2.

Вопрос. Следует ли хранить шаблоны страницы в отдельном файле?

Ответ. Обычно шаблоны хранятся в отдельных HTML-файлах. Также можно использовать встроенный шаблон. Чтобы сохранить четкое разделение между разметкой и кодом, рекомендуется использовать отдельный файл.

Вопрос. Следует ли использовать в шаблонах расширение файлов HTML?

Ответ. Использовать расширение HTML для файлов шаблона страницы совсем необязательно, так как вы всегда определяете точный относительный путь к файлу во втором аргументе функции render. Однако Visual Studio (и другие редакторы) предоставляет такие функции, как завершение кода или разметка синтаксиса, для файлов HTML, что значительно важнее того, что шаблоны страниц не имеют строгого формата HTML.

На самом деле, при работе с проектом Django Visual Studio автоматически обнаруживает, что HTML-файл, который вы редактируете, фактически является шаблоном Django, и предоставляет определенные функции автоматического завершения. Например, когда вы начинаете вводить комментарий шаблона страницы Django, {#, Visual Studio автоматически предоставляет вам закрывающие символы #}. В командах Закомментировать выделенный фрагмент и Раскомментировать выделенный фрагмент (в меню Изменить>Дополнительно или на панели инструментов) также используются комментарии шаблона, а не HTML.

Вопрос. При запуске проекта отображается ошибка, указывающая, что шаблон не найден. Что я делаю не так?

Ответ. Если отображаются сообщения о том, что не удается найти шаблон, убедитесь в том, что вы добавили приложение в файл settings.py проекта Django в список INSTALLED_APPS. Без этой записи Django не сможет выполнять поиск в папке templates приложения.

Вопрос. Почему организация пространства имен шаблона важна?

Ответ. Когда платформа Django выполняет поиск шаблона, на который ссылается функция render, она использует первый найденный файл, который соответствует относительному пути. Если у вас есть несколько приложений Django в одном проекте, использующих одну структуру папок для шаблонов, скорее всего, одно приложение будет непреднамеренно использовать шаблон из другого приложения. Чтобы избежать подобных ошибок, всегда создавайте вложенную папку в папке templates приложения, которая соответствует имени приложения. Это позволит избежать любого дублирования.

Следующие шаги

Обработка статических файлов, добавление страниц и использование наследования шаблонов

Дополнительные подробности

Write your first view (Написание первого представления) (docs.djangoproject.com)
Дополнительные сведения о возможностях шаблонов Django, таких как включение и наследование, см. в статье The Django template language (Язык шаблона Django) (docs.djangoproject.com)
Regular Expressions (Регулярные выражения) (LinkedIn)
Руководство по исходному коду на сайте GitHub: Microsoft/python-sample-vs-learning-django

Поделиться через