Руководство. Создание приложения Django с представлениями и шаблонами страниц в Visual Studio

В этой статье представлен шаг 2 в серии учебников Работа с веб-платформой Django в Visual Studio.

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

На шаге 2 руководства вы узнаете, как:

Необходимые условия

• Решение Visual Studio и проект Django, созданный на шаге 1. Создание решения Visual Studio и проекта Django.

• Выполните обзор раздела Предварительных требований в шаге 1 этой серии руководств для получения детальной информации о версиях шаблонов Django, проектах Visual Studio по сравнению с проектами Django и разработке Python на Mac.

Создание приложения Django со структурой по умолчанию

Приложение 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. Существует также встроенная команда меню, которая служит той же цели.

Создание приложения с помощью шаблона

Выполните следующие действия, чтобы создать приложение на основе шаблона:

1. В Обозревателе решенийщелкните правой кнопкой мыши проект Visual Studio (BasicProject) и выберите Добавить>Новый элемент.

   

   

2. В диалоговом окне Добавление нового элемента выберите шаблон приложения Django 1.9:

   1. Введите имя приложенияHelloDjangoApp.

   2. Выберите Добавить.

   

   

Использование команды интегрированного меню для создания приложения

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

1. В обозревателе решенийщелкните правой кнопкой мыши проект Visual Studio (BasicProject) и выберите Добавить>приложение Django.

   

   

2. В диалоговом окне добавления приложения Django введите имя приложения HelloDjangoApp:

   

   

3. Выберите ОК.

Изучение папки приложения Django

При создании приложения HelloDjangoApp Visual Studio создает папку с тем же именем в проекте Visual Studio:

Папка содержит следующие элементы:

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

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjangoApp'

Создание приложения в Visual Studio или из командной строки

Команда Add>Django app и команда Add>New Item (в сочетании с шаблоном приложения Django) создает те же файлы, что и команда командной строки Django manage.py startapp <app_name>. Преимущество создания приложения Django в Visual Studio заключается в том, что папка приложения и все его файлы автоматически интегрируются в проект. Вы можете использовать ту же команду Visual Studio для создания любого количества приложений в проекте.

Добавление представлений страниц для конкретного приложения

Если запустить текущий проект в Visual Studio, выбрав Отладка>Начать отладку (F5) или веб-сервер на главной панели инструментов, вы увидите стандартную страницу Django. Веб-приложения обычно имеют несколько страниц с различными представлениями. Уникальный маршрут для URL-адреса приложения определяет каждую страницу в приложении.

Выполните следующие действия, чтобы определить представления страниц для конкретного приложения и добавить приложение в проект Django:

1. В подпапке HelloDjangoApp проекта Visual Studio замените содержимое файла views.py следующим кодом:

   from django.shortcuts import render
   from django.http import HttpResponse
   
   def index(request):
       return HttpResponse("Hello, Django!")
   

   Этот код импортирует необходимые определения отрисовки и HTTP и определяет представление с именем index.

2. В подпапке BasicProject проекта Visual Studio измените файл 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-адреса в отношении сайта (т. е. часть маршрута, следующая за URL-адресом часть https://www.domain.com/).

• Первая запись в определении urlPatterns, которая начинается с регулярного выражения ^$, — это маршрутизация для корневой страницы сайта /.
• Вторая запись, ^home$, направляется на страницу приложения /home.

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

Определение необработанных строк маршрута с префиксом (r)

Префикс r в строке маршрута в Python означает "необработанный". Этот префикс указывает Python не экранировать символы в строке маршрута. Регулярные выражения для строк маршрута используют множество специальных символов. Префикс r в строке маршрута проще считывать, чем символ escape-\.

Использование символов caret (^) и доллара ($) в маршрутах

В регулярных выражениях, определяющих шаблоны URL-адресов, символ курсора ^ означает "начало строки" и знак доллара $ означает "конец строки". Существует несколько способов использования этих символов в URL-адресах относительно корневого каталога сайта (часть, которая следует адресу приложения https://www.domain.com/):

• Регулярное выражение ^$ фактически означает "пустой" и соответствует полному URL-адресу корня сайта приложения, https://www.domain.com/.
• Шаблон ^home$ точно соответствует https://www.domain.com/home/, который представляет собой маршрут сайта, следуемый /home. (Django не использует конечную / в сопоставлении шаблонов.)
• Если в регулярном выражении не используется $ конечный знак доллара, например для строки маршрута ^home, сопоставление шаблонов URL-адресов применяется к любой URL-адрес, начинающийся с home, например home, homework, homestead, home192837и т. д.

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

Запуск приложения из проекта Django

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

1. Когда приложение откроется в браузере, проверьте просмотры страниц для маршрутов URL / (корневой узел сайта) и /home. В обоих маршрутах приложение отображает сообщение Hello, Django! в браузере.

2. По завершении выберите Ctrl+C в окне консоли, и затем любую клавишу, чтобы остановить приложение. Вы также можете выбрать Отладка>Остановить отладку.

3. Закройте все открытые окна браузера для приложения.

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

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

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

Использование шаблонов для отображения страниц и представлений

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

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

Настройте представления для использования встроенного HTML

Преобразуйте обработку представления для использования встроенного HTML-кода для страницы с некоторым динамическим содержимым:

1. В подпапке HelloDjangoApp проекта Visual Studio откройте файл views.py.

2. Замените функцию index следующим кодом (сохраняйте существующие операторы from):

   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)
   

   Измененная функция index создает HTML-ответ с помощью динамического содержимого, которое обновляется при каждом обновлении страницы.

3. Сохраните изменения и снова запустите приложение. На странице теперь отображается текущая дата и время вместе сHello Django! сообщение.

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

Создание шаблона HTML для представлений страниц

Создание HTML в коде хорошо подходит для небольших страниц. Тем не менее, так как страницы получают более сложные, необходимо поддерживать статические HTML-части страницы (а также ссылки на ФАЙЛЫ CSS и JavaScript) как "шаблоны страниц". Затем вы можете вставить динамическое содержимое, созданное кодом, в шаблоны страниц. В предыдущем разделе только дата и время вызова now.strftime является динамическим, что означает, что все остальное содержимое можно поместить в шаблон страницы.

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

Выполните следующие действия, чтобы преобразовать процесс отрисовки страниц для использования шаблона HTML:

1. В подпапке HelloDjangoApp проекта Visual Studio откройте файл settings.py.

2. Обновите ссылки на приложения в определении INSTALLED_APPS, чтобы включить имя приложения HelloDjangoApp. Добавьте имя приложения в качестве первой записи в списке:

   INSTALLED_APPS = [
       'HelloDjangoApp',
       # Existing entries in the list ...
   ]
   

   Добавление приложения в список сообщает проекту Django, что есть папка с именем HelloDjangoApp, которая содержит приложение.

3. Подтвердите, что конфигурация объекта TEMPLATES устанавливает для APP_DIRS значение True.

   'APP_DIRS': True,
   

   Эта инструкция предписывает Django искать шаблоны в папке шаблонов для установленного приложения. (Эта инструкция должна быть включена в определение по умолчанию.)

4. В подпапке HelloDjangoApp откройте файл шаблона templates/HelloDjangoApp/index.html страницы.

5. Убедитесь, что файл содержит только одну переменную, {{ content }}:

   <html>
     <head>
       <title></title>
     </head>
   
     <body>
       {{ content }}
     </body>
   </html>
   

   Оператор {{ content }} — это заполнитель или маркер замены (также называемый переменная шаблона), для которого вы задаёте значение в коде.

6. В подпапке HelloDjangoApp проекта Visual Studio откройте файл views.py.

7. Замените функцию index следующим кодом, использующим вспомогательную функцию django.shortcuts.render (сохраняйте существующие операторы from).

   def index(request):
      now = datetime.now()
   
      return render(
         request,
         "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
         {
            'content': "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
         }
      )
   

   Функция render предоставляет упрощенный интерфейс для работы с шаблонами страниц. Эта функция имеет три аргумента:

   • Объект запроса.
   • Относительный путь к файлу шаблона в папке шаблонов приложения. Файл шаблона называется в соответствии с представлением, которое он поддерживает, если это уместно.
   • Словарь переменных, к которым ссылается шаблон. Объекты можно включить в словарь, где переменная в шаблоне может ссылаться на {{ object.property }}.

8. Сохраните изменения проекта и снова запустите приложение.

   Обратите внимание, что встроенный синтаксис HTML (\<strong> ...) в значении content не отображает как HTML, так как подсистема шаблонов (Jinja) автоматически экранирует HTML-содержимое. Автоматическое экранирование предотвращает случайные уязвимости для инъекционных атак.

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

   По завершении остановите приложение.

Используйте отдельные заполнители

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

1. Замените содержимое файла шаблона страницы templates/HelloDjangoApp/index.html следующей разметкой:

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

   Эта разметка HTML добавляет заголовок страницы и сохраняет все форматирование в шаблоне страницы.

2. В файле HelloDjangoApp/views.py замените функцию 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")
           }
       )
   

   Этот код содержит значения для всех переменных в шаблоне страницы.

3. Сохраните изменения и снова запустите приложение. На этот раз вы должны увидеть правильно отображенный результат.

   

4. Вы можете зафиксировать изменения в системе контроля версий и обновить свой удалённый репозиторий. Дополнительные сведения см. в разделе Фиксация изменений в управлении исходным кодом.

Отдельные шаблоны страниц

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

Использование расширения .html для шаблонов

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

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

Устранение неполадок

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

Шаблон не найден

Если Django или Visual Studio отображает шаблон не найден ошибку, убедитесь, что приложение находится в списке INSTALLED_APPS. Этот список находится в файле settings.py в подпапке приложения проекта Visual Studio (например, HelloDjangoApp). Если в списке нет записи для приложения, Django не знает, чтобы просмотреть шаблоны приложения папке.

Повторяющаяся структура шаблона

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

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