Как добавить страницу в Django

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

1. Создайте заготовку

В первую очередь, конечно, вам нужно установить Django:

# pip install django

После установки создайте стандартный Django-проект. Он и будет вашим магазином смартфонов:

$ django-admin startproject phones_shop

Вы получите файл manage.py и папку проекта со стандартными файлами:

Теперь, если запустить python manage.py runserver, то по адресу 127.0.0.1:8000 вас встретит стандартная главная страница:

2. Добавьте ссылку и вьюху

Когда пользователь заходит на ваш сайт, Django заглядывает в файл urls.py в переменную urlpatterns. Там перечислены адреса сайта, на которые она должна реагировать:

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

В первом аргументе написан адрес, на который страница должна реагировать, а во втором — функция, которую в таком случае запускать. По умолчанию уже подключена админка по адресу 127.0.0.1:8000/admin. Если admin/ заменить на owner/, то страничка админки будет по адресу 127.0.0.1:8000/owner.

Чтобы на сайте появилась новая страница, нужно добавить её в urlpatterns: Добавьте к списку главную:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('phones/', show_phones),
]

Теперь, если вы зайдёте по адресу 127.0.0.1:8000/phones, то запустится функция show_phones. Её-то и не хватает, чтобы всё работало:

from django.http import HttpResponse

def show_phones(request):
    print('Кто-то зашёл на главную!')
    return HttpResponse('Привет!')


urlpatterns = [
    path('admin/', admin.site.urls),
    path('phones/', show_phones),
]

Вот что должно получиться:

Функция выше — не простая. Такие функции называются view. Они вызываются, когда пользователь заходит на страницы, за которые они отвечают. К этим функциям есть несколько требований:

1. Все функции должны принимать первым аргументом request. Это и есть “запрос” пользователя, который он послал из браузера, когда перешёл на страничку сайта.
2. Все функции должны возвращать HttpResponse-объекты. То есть раз уж к вам отправили запрос, вы обязаны ответить.

3. Сделайте страницу главной

Сейчас функция show_phones отвечает за адрес 127.0.0.1:8000/phones. Для этого в urlpatterns вы написали phones/. Как же сделать так, чтобы она отвечала за главную страницу 127.0.0.1:8000?

На самом деле, довольно просто: достаточно вместо 'phones/' поставить пустую строку:

urlpatterns = [
    path('admin/', admin.site.urls),
    # path('phones/', show_phones),
    path('', show_phones),
]

4. Вынесите вьюху в файл для вьюх

Вьюхам не место в файле urls.py. Так файл быстро разрастётся и ориентироваться в нём станет невозможно. Прелесть Django в том и состоит, что у любой функции или класса есть свой файл, где она должна лежать. Место вьюхам в файле views.py.

Создайте такой файл и переместите функцию в него:

# views.py
from django.http import HttpResponse

def show_phones(request):
    print('Кто-то зашёл на главную!')
    return HttpResponse('Привет!')

Осталось только импортировать этот файл в urls.py, чтобы код не сломался:

from phones_shop import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.show_phones),
]

5. Подключите вёрстку

От страницы мало толку, если она возвращает просто текст. На деле странички сайтов содержат HTML-разметку. Как же это сделать?

Для начала скачайте страничку, которую уже подготовил фронтендер.

Все странички сайта содержатся в папке templates/. Туда его и стоит положить:

Чтобы Django нашла этот файл, в settings.py нужно добавить его в настройки:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Осталось только подключить этот шаблон во вьюхе и отдать вместо текста:

from django.http import HttpResponse
from django.template import loader

def show_phones(request):
    template = loader.get_template('product_page.html')
    context = {}
    rendered_page = template.render(context, request)
    return HttpResponse(rendered_page)

Что происходит на этих строчках:

• template = loader.get_template('product_page.html') — создаётся шаблон на основе странички product_page.html.
• context = {} — это данные, которые нужно подставить в шаблон. В этой конкретной ситуации данные туда подставлять не нужно, поэтому словарь остаётся пустым.
• rendered_page = template.render(context, request) — шаблон превращается в “отрендеренную страницу” после того, как туда подставлены данные.
• return HttpResponse(rendered_page) — возвращаем страницу пользователю.

Или, вместо примера выше используйте шорткат. Вместо страшной записи сверху, в Django есть специальная функция, чтобы сократить запись:

from django.shortcuts import render

def show_phones(request):
    return render(request, 'product_page.html')

Готово, на главной появится эта страница: