Шаг 4. Использование полного шаблона веб-проекта Django

  • Статья

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

Итак, вы изучили основы работы с Django в Visual Studio. Теперь вам будет проще понять более полное приложение, представленное шаблоном "Веб-проект Django".

На этом этапе вы сделаете следующее:

  • создадите более полное веб-приложение Django с помощью шаблона "Веб-проект Django" и изучите структуру проекта (шаг 4.1);
  • узнаете, какие представления и шаблоны страниц создаются при использовании шаблона проекта, в котором содержится три страницы, наследованные от шаблона базовой страницы, и используются статические библиотеки JavaScript, такие как jQuery и Bootstrap (ша 4.2);
  • узнаете, как реализуется маршрутизация URL-адресов, предоставляемая шаблоном (шаг 4.3).

В шаблоне также предусмотрена обычная проверка подлинности, которая рассматривается на шаге 5.

Шаг 4.1. Создание проекта на основе шаблона

  1. В Visual Studio перейдите к обозревателю решений и щелкните правой кнопкой мыши решение LearningDjango, созданное ранее в рамках этого руководства. Выберите Добавить>Новый проект. Если вы хотите использовать новое решение, вместо этого выберите Файл>Создать>Проект.

  2. В диалоговом окне Новый проект найдите и выберите шаблон Веб-проект Django. Вызовите проект DjangoWeb и нажмите кнопку "Создать".

  3. Поскольку шаблон включает файл requirements.txt, Visual Studio запрашивает расположение для установки зависимостей. Когда отобразится соответствующий запрос, выберите параметр Install into a virtual environment (Установка в виртуальном окружении) и в диалоговом окне Добавление виртуального окружения выберите Создать, чтобы принять значения по умолчанию.

  4. Когда в Visual Studio завершится настройка виртуального окружения, следуйте инструкциям в отображаемом файле readme.html, чтобы создать суперпользователя Django (т. е. администратора). Щелкните правой кнопкой мыши проект Visual Studio и выберите команду Python>Создать суперпользователя Django, а затем следуйте инструкциям на экране. Обязательно запишите имя пользователя и пароль, так как они понадобятся для тестирования проверки подлинности в приложении.

  5. Установите проект DjangoWeb в качестве проекта по умолчанию для решения Visual Studio, щелкнув правой кнопкой мыши этот проект в обозревателе решений и выбрав пункт Назначить запускаемым проектом. Запускаемый проект, выделенный полужирным шрифтом, выполняется при запуске отладчика.

    Solution Explorer showing the DjangoWeb project as the startup project.

  6. Выберите Отладка>Начать отладку (F5) или нажмите кнопку Веб-сервер на панели инструментов, чтобы запустить сервер:

    Run web server toolbar button in Visual Studio.

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

    Full browser view of the Django Web Project app.

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

    Mobile (narrow) view of the Django Web Project app.

  9. Вы можете оставить приложение запущенным и пройти следующие разделы.

    Чтобы остановить работу приложения и зафиксировать изменения в системе управления версиями, откройте страницу Изменения в Team Explorer, щелкните правой кнопкой мыши папку виртуального окружения (возможно, env) и выберите Игнорировать эти локальные элементы.

Просмотр элементов, созданных с помощью шаблона

В общем на основе шаблона "Веб-проект Django" создается следующая структура:

  • Файлы в корневом каталоге проекта:
    • manage.py — административная служебная программа Django.
    • db.sqlite3 — база данных SQLite по умолчанию.
    • requirements.txt — файл, который содержит зависимость от Django 1.x.
    • readme.html — файл, который отображается в Visual Studio после создания проекта. Как упоминалось в предыдущем разделе, следуйте приведенным ниже инструкциям, чтобы создать учетную запись суперпользователя (администратора) для приложения.
  • В папке app содержатся все файлы приложения, включая представления, модели, тесты, формы, шаблоны и статические файлы (см. шаг 4–2). Обычно эту папку нужно переименовать, указав более уникальное имя приложения.
  • В папке DjangoWeb проекта Django содержатся стандартные файлы проекта: __init__.py, settings.py, urls.py и wsgi.py. В файле settings.py уже задана конфигурация для файлов базы данных и приложения. Также в файле urls.py уже указаны пути ко всем страницам приложения, включая форму входа.

Вопрос. Можно ли предоставлять проектам Visual Studio общий доступ к виртуальному окружению?

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

Чтобы все равно использовать существующее виртуальное окружение, сделайте следующее:

  1. Когда в Visual Studio будет предложено установить зависимости, выберите вариант Я установлю их самостоятельно.
  2. В обозревателе решений щелкните правой кнопкой мыши узел Окружения Python и выберите Добавить существующее виртуальное окружение.
  3. Перейдите к папке виртуального окружения и выберите ее. Затем нажмите кнопку ОК.

Шаг 4.2. Сведения о представлениях и шаблонах страниц, созданных с использованием шаблона проекта

При запуске проекта вы увидите, что приложение содержит три представления: домашняя страница, а также страницы со сведениями и контактными данными. Код для этих представлений найден в файле views.py . Каждая функция представления вызывает django.shortcuts.render с путем к шаблону и простым объектом словаря. Например, страница сведений обрабатывается функцией about:

def about(request):
    """Renders the about page."""
    assert isinstance(request, HttpRequest)
    return render(
        request,
        'app/about.html',
        {
            'title':'About',
            'message':'Your application description page.',
            'year':datetime.now().year,
        }
    )

Шаблоны хранятся в папке templates/app приложения. Как правило, app нужно переименовать, указав имя фактического приложения. Файл базового шаблона (layout.html) является самым большим. В файле layout.html задаются ссылки на все необходимые статические файлы (JavaScript и CSS). Файл layout.html также определяет блок с именем "content", который переопределяется другими страницами и предоставляет другой блок с именем "scripts". Следующие аннотированные фрагменты из layout.html отображают следующие области:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <!-- Define a viewport for Bootstrap's responsive rendering -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - My Django Application</title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
    <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>
<body>
    <!-- Navbar omitted -->

    <div class="container body-content">

<!-- "content" block that pages are expected to override -->
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; {{ year }} - My Django Application</p>
        </footer>
    </div>

<!-- Additional scripts; use the "scripts" block to add page-specific scripts.  -->
    <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
    <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
    <script src="{% static 'app/scripts/respond.js' %}"></script>
{% block scripts %}{% endblock %}

</body>
</html>

Каждый шаблон отдельной страницы (about.html, contact.html и index.html) дополняет основной шаблон layout.html. Файл шаблона about.html является самым простым и содержит теги {% extends %} и {% block content %}:

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

Файлы шаблонов index.html и contact.html имеют такую же структуру, но предоставляют больше содержимого в блоке content.

В папке templates/app есть еще и файл четвертой страницы login.html вместе с файлом loginpartial.html, указанным в layout.html с помощью {% include %}. Эти файлы шаблона рассматриваются на шаге 5 с инструкциями по аутентификации.

Вопрос. Можно ли добавить отступ перед тегами {% block %} и {% endblock %} в шаблоне страницы Django?

Ответ: Да. Шаблоны страниц Django будут работать без ошибок, если добавить отступ перед тегами блоков, например, чтобы выровнять их в соответствующих родительских элементах. Чтобы лучше видеть места размещения тегов блоков, в шаблонах страниц Visual Studio для них не используются отступы.

Шаг 4.3. Сведения о маршрутизации URL-адресов, создаваемой на основе шаблона

Файл urls.py проекта Django, созданный на основе шаблона "Веб-проект Django", содержит такой код:

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

Первые три шаблона URL-адресов сопоставляются непосредственно с представлениями home, contact и about в файле views.py приложения. А в шаблонах ^login/$ и ^logout$ используются встроенные представления Django вместо представлений, определяемых приложением. Также в вызовах метода url содержатся дополнительные данные для настройки представления. Эти вызовы рассматриваются на шаге 5.

Вопрос. Почему в созданном мной проекте в шаблоне URL-адреса about используется ^about, а не ^about$, как показано в этом разделе?

Ответ. Отсутствие символа $ в конце регулярного выражения — это просто ошибка, которая встречается во многих версиях шаблона проекта. Шаблон URL-адреса для страницы сведений с именем "about" работает без ошибок. Но без символа $ в конце этот шаблон также соответствует таким URL-адресам, как "about=django", "about09876", "aboutoflaughter" и т. д. В этом примере символ $ в конце выражения используется для создания URL-адресов, соответствующих только "about".

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

Аутентификация пользователей в Django

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