Django 1 часть: Создайте приложение для портфолио

22 июля, 2020

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

Перевод статьи – Get Started With Django Part 1: Build a Portfolio App

Оглавление

  • Почему вы должны учить Django
  • Структура сайта Django
  • Что вы сделаете
  • Привет мир!
    • Настройте свою среду разработки
    • Создайте проект Django
    • Создайте приложение Django
    • Создайте представление
    • Добавьте Bootstrap в ваше приложение
  • Продемонстрируйте свои проекты
    • Projects App: Модели
    • Projects App: Представления
    • Projects App: Шаблоны
  • Поделитесь своими знаниями с блогом
    • Блог приложение: модели
    • Блог приложение: Django Admin
    • Блог приложение: Просмотры
    • Блог приложение: шаблоны
  • Вывод

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

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

К концу этого урока вы сможете:

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

Почему вы должны учить Django

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

Вторая причина, по которой вы должны изучить Django, – это область его возможностей. Если вам нужно создать сайт, вам не нужно полагаться на какие-либо внешние библиотеки или пакеты, если вы выбираете Django. Это означает, что вам не нужно изучать, как использовать что-либо еще, и синтаксис является бесшовным, поскольку вы используете только одну платформу.

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

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

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

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

Django – это платформа веб-приложений высокого уровня с множеством функций. Это здорово для любого новичка в веб-разработке из-за его фантастической документацией.

Структура сайта Django

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

  • Управление пользователями : вход в систему, выход из системы, регистрация и т. Д.
  • Подача изображений : загрузка, редактирование и отображение изображений
  • Личные сообщения : личные сообщения между пользователями и уведомления

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

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

Каждое приложение также имеет свои собственные URL-адреса, а также свои собственные шаблоны HTML и статические файлы, такие как JavaScript и CSS.

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

  • Модель определяет структуру данных. Обычно это база данных и базовый уровень приложения.
  • Просмотр отображает некоторые или все данные для пользователя с HTML и CSS.
  • Контроллер управляет взаимодействием базы данных и представления.

Если вы хотите узнать больше о шаблоне MVC, то посмотрите объяснение Model-View-Controller (MVC) – с Legos .

В Джанго архитектура немного отличается. Несмотря на то, что Django основан на шаблоне MVC, он обрабатывает сам контроллер. Нет необходимости определять, как база данных и представления взаимодействуют. Это все сделано для вас!

Шаблон, который использует Django, называется шаблоном Model-View-Template (MVT). Представление и шаблон в шаблоне MVT составляют представление в шаблоне MVC. Все, что вам нужно сделать, это добавить некоторые конфигурации URL для сопоставления представлений, а Django обрабатывает все остальное!

Сайт Django начинается как проект и состоит из нескольких приложений, каждое из которых обрабатывает отдельные функции. Каждое приложение следует шаблону Model-View-Template. Теперь, когда вы знакомы со структурой сайта Django, давайте посмотрим, что вы собираетесь создать!

Что вы собираетесь построить

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

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

Примечание. Прежде чем начать, вы можете открыть исходный код и следовать инструкциям.

Если вы предпочитаете писать код самостоятельно, не волнуйтесь. Я ссылался на соответствующие части исходного кода, чтобы вы могли вернуться к нему.

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

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

Привет мир!

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

Настройте свою среду разработки

Всякий раз, когда вы начинаете новый проект веб-разработки, рекомендуется сначала настроить среду разработки. 
Создайте новый каталог для вашего проекта и перейдите в него:

$ mkdir rp-portfolio
$ cd rp-portfolio

После того, как вы попали в главный каталог, рекомендуется создать виртуальную среду для управления зависимостями. Существует много разных способов настройки виртуальных сред, но здесь вы будете использовать venv:

$ python3 -m venv venv

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

$ source venv/bin/activate

Примечание. Если вы не используете оболочку bash, вам может потребоваться использовать другую команду для активации виртуальной среды. Например, в Windows вам нужна эта команда:

C:\> venv\Scripts\activate.bat

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

(venv) $

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

Затем при активации виртуальной среды снова замените venv на my_venv.

Теперь, когда вы создали виртуальную среду, пришло время установить Django. Вы можете сделать это используя pip:

(venv) $ pip install Django

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

Создать проект Django

Как вы видели в предыдущем разделе, веб-приложение Django состоит из проекта и входящих в него приложений. Убедившись, что вы находитесь в rp_portfolioкаталоге и активировали свою виртуальную среду, выполните следующую команду для создания проекта:

$ django-admin startproject personal_portfolio

Это создаст новый каталог personal_portfolio. Если вы войдете в этот новый каталог, вы увидите другой каталог с именем personal_portfolio, и файл с именем manage.py. Ваша структура каталогов должна выглядеть примерно так:

rp-portfolio/
│
├── personal_portfolio/
│   ├── personal_portfolio/
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   │
│   └── manage.py
│
└── venv/

Большая часть вашей работы будет в этом первом каталоге personal_portfolio
Чтобы избежать необходимости проходить через несколько каталогов каждый раз, когда вы приступаете к работе над своим проектом, может быть полезно немного изменить порядок, переместив все файлы в каталог. Пока вы находитесь в rp-portfolio каталоге, выполните следующие команды:

$ mv personal_portfolio/manage.py ./
$ mv personal_portfolio/personal_portfolio/* personal_portfolio
$ rm -r personal_portfolio/personal_portfolio/

Вы должны получить что-то вроде этого:

rp-portfolio/
│
├── personal_portfolio/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
│
├── venv/
│
└── manage.py

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

$ python manage.py runserver

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

Начальный вид сайта Django

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

Создание приложения Django

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

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

$ python manage.py startapp hello_world

Это создаст еще один каталог hello_world с несколькими файлами:

  • __init__.py говорит Python обрабатывать каталог как пакет Python.
  • admin.py содержит настройки для страниц администратора Django.
  • apps.py содержит настройки для конфигурации приложения.
  • models.py содержит серию классов, которые ORM Django преобразует в таблицы базы данных.
  • tests.py содержит тестовые классы.
  • views.py содержит функции и классы, которые обрабатывают, какие данные отображаются в шаблонах HTML.

После того как вы создали приложение, вам нужно установить его в свой проект. В rp-portfolio/settings.py, добавьте следующую строку кода под INSTALLED_APPS:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello_world',
]

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

Создать представление

Представления в Django – это набор функций или классов внутри файла views.py в каталоге вашего приложения. Каждая функция или класс обрабатывает логику, которая обрабатывается при каждом посещении другого URL.

Перейдите к файлу views.py в каталоге hello_world . Там уже есть строка кода, которая импортирует render(). Добавьте следующий код:

from django.shortcuts import render

def hello_world(request):
    return render(request, 'hello_world.html', {})

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

Функция представления принимает один аргумент request. Этот объект HttpRequestObject создается, когда страница загружается. Он содержит информацию о запросе, такую ​​как метод, который может принимать несколько значений, включая GET и POST.

Теперь, когда вы создали функцию просмотра, вам нужно создать шаблон HTML для отображения пользователю. render() ищет шаблоны HTML внутри каталога, который вызывается внутри каталога templates вашего приложения. Создайте этот каталог и затем файл с именем hello_world.html внутри него:

$ mkdir hello_world/templates/
$ touch hello_world/templates/hello_world.html

Добавьте следующие строки HTML в ваш файл:

<h1>Hello, World!</h1>

Теперь вы создали функцию для обработки ваших представлений и шаблонов для отображения пользователю. Последний шаг – подключить ваши URL, чтобы вы могли посетить только что созданную вами страницу. В вашем проекте есть модуль, urls.py в который нужно включить конфигурацию URL для hello_world приложения. Внутри personal_portfolio/urls.py добавьте следующее:

from django.contrib import admin
from django.urls import path, include

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

Это ищет модуль, вызываемый urls.py внутри hello_world приложения, и регистрирует любые URL-адреса, определенные там. Всякий раз, когда вы посещаете корневой путь вашего URL (localhost:8000), URL-адреса hello_world приложения будут зарегистрированы. Модуль hello_world.urls еще не существует, так что вам нужно создать его:

$ touch hello_world/urls.py

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

from django.urls import path
from hello_world import views

urlpatterns = [
    path('', views.hello_world, name='hello_world'),
]

Теперь, когда вы перезапустите сервер и зайдете localhost:8000, вы сможете увидеть созданный вами HTML-шаблон:

Привет мир!  вид на сайт Джанго

Поздравляю еще раз! Вы создали свое первое приложение Django и подключили его к своему проекту. Не забудьте проверить исходный код этого раздела и предыдущего. Единственная проблема сейчас в том, что это выглядит не очень красиво. В следующем разделе мы собираемся добавить стили начальной загрузки в ваш проект, чтобы сделать его красивее!

Добавить Bootstrap в ваше приложение

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

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

Создайте еще один каталог с именем templates, на этот раз внутри personal_portfolio, и файл с именем base.html внутри нового каталога:

$ mkdir personal_portfolio/templates/
$ touch personal_portfolio/templates/base.html

Мы создаем этот каталог дополнительных шаблонов для хранения шаблонов HTML, которые будут использоваться в каждом приложении Django в проекте. Как вы видели ранее, каждый проект Django может состоять из нескольких приложений, которые обрабатывают отдельную логику, и каждое приложение содержит свой собственный templatesкаталог для хранения шаблонов HTML, связанных с приложением.

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

Внутри этого нового файла (personal_portfolio/templates/base.html) добавьте следующие строки кода:

{% block page_content %}{% endblock %}

Теперь, в hello_world/templates/hello_world.html мы можем расширить этот базовый шаблон:

{% extends "base.html" %}

{% block page_content %}
<h1>Hello, World!</h1>
{% endblock %}

Здесь происходит то, что любой HTML внутри блока page_content добавляется внутри того же самого блока в base.html.

Чтобы установить Bootstrap в ваше приложение, вы будете использовать Bootstrap CDN . Это действительно простой способ установить Bootstrap, который просто включает несколько строк кода base.html. Проверьте исходный код, чтобы увидеть, как добавить ссылки CDN в ваш проект.

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

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

Прежде чем мы сможем увидеть наше новое стилизованное приложение, мы должны сообщить нашему проекту Django, что base.html существует. Настройки по умолчанию регистрируют каталоги шаблонов в каждом приложении, но не в самом каталоге проекта. В personal_portfolio/settings.py обновите TEMPLATES:

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": ["personal_portfolio/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",
            ]
        },
    }
]

Теперь, когда вы заходите на localhost:8000, вы должны увидеть, что страница была отформатирована с немного другим стилем:

Привет мир!  просмотр сайта Django со стилями Bootstrap

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

Добавление шаблонов является последним этапом построения вашего Hello, World! Сайт Джанго. Вы узнали, как работает шаблонизатор Django и как создавать шаблоны на уровне проекта, которые могут использоваться всеми приложениями в вашем проекте Django.

В этом разделе вы узнали, как создать простой Hello, World! Сайт Django путем создания проекта с помощью одного приложения. В следующем разделе вы создадите еще одно приложение для демонстрации проектов веб-разработки и узнаете все о моделях в Django!

Исходный код этого раздела можно найти на GitHub .

Продемонстрируйте свои проекты

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

Прежде чем мы создадим projects приложение, давайте сначала удалим hello_world приложение. Все, что вам нужно сделать , это удалить hello_world каталог и удалить строку "hello_world",из INSTALLED_APPS в settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello_world',  # Delete this line
]

Наконец, вам нужно удалить путь URL, созданный в personal_portfolio/urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('hello_world.urls')),  # Delete this line
]

Теперь, когда вы удалили hello_world приложение, мы можем создать projects приложение. Убедившись, что вы находитесь в rp-каталоге portfolio, выполните в консоли следующую команду:

$ python manage.py startapp projects

Это создаст каталог с именем projects. Созданные файлы такие же, как те, которые были созданы при настройке hello_world приложения. Чтобы подключить наше приложение, нам нужно добавить его INSTALLED_APPS в settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'projects',
]

Проверьте исходный код этого раздела на GitHub. Мы пока не будем беспокоиться об URL для этого приложения. Вместо этого мы собираемся сосредоточиться на построении Project модели.

Projects App: Модели

Если вы хотите хранить данные для отображения на веб-сайте, вам понадобится база данных. Как правило, если вы хотите создать базу данных с таблицами и столбцами в этих таблицах, вам необходимо использовать SQL для управления базой данных. Но когда вы используете Django, вам не нужно изучать новый язык, потому что он имеет встроенный Object Relational Mapper (ORM).

ORM – это программа, которая позволяет создавать классы, соответствующие таблицам базы данных. Атрибуты класса соответствуют столбцам, а экземпляры классов соответствуют строкам в базе данных. Таким образом, вместо изучения совершенно нового языка для создания нашей базы данных и ее таблиц, мы можем просто написать несколько классов Python.

Когда вы используете ORM, создаваемые вами классы, представляющие таблицы базы данных, называются моделями . В Django они живут в models.py модуле каждого приложения Django.

В вашем приложении проектов вам понадобится только одна таблица для хранения различных проектов, которые вы будете показывать пользователю. Это означает, что вам нужно будет создать только одну модель models.py.

Модель, которую вы создадите, будет вызвана Project и будет иметь следующие поля:

  • title будет коротким строковым полем для хранения названия вашего проекта.
  • description будет большим строковым полем для хранения более длинного фрагмента текста.
  • technology будет строковым полем, но его содержимое будет ограничено выбранным количеством вариантов.
  • image будет полем изображения, содержащим путь к файлу, в котором хранится изображение.

Чтобы создать эту модель, мы создадим новый класс models.py и добавим в наши поля следующее:

from django.db import models

class Project(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    technology = models.CharField(max_length=20)
    image = models.FilePathField(path="/img")

Модели Django поставляются со многими встроенными типами полей модели . Мы использовали только три в этой модели. CharField используется для коротких строк и указывает максимальную длину.

TextField аналогично CharField, но может использоваться для более длинного текста формы, так как не имеет ограничения максимальной длины. Наконец, FilePathField также содержит строку, но должна указывать на путь к файлу.

Теперь, когда мы создали наш Project класс, нам нужен Django для создания базы данных. По умолчанию Django ORM создает базы данных в SQLite, но вы можете использовать другие базы данных, использующие язык SQL, такие как PostgreSQL или MySQL, с Django ORM.

Чтобы начать процесс создания нашей базы данных, нам нужно создать миграцию . Миграция – это файл, содержащий Migration класс с правилами, которые сообщают Django, какие изменения необходимо внести в базу данных. Чтобы создать миграцию, введите в консоли следующую команду, убедившись, что вы находитесь в rp-portfolio каталоге:

$ python manage.py makemigrations projects
Migrations for 'projects':
  projects/migrations/0001_initial.py
    - Create model Project

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

Теперь, когда вы создали файл миграции, вам нужно применить миграции, указанные в файле миграции, и создать базу данных с помощью migrate команды:

$ python manage.py migrate projects
Operations to perform:
  Apply all migrations: projects
Running migrations:
  Applying projects.0001_initial... OK

Примечание: При выполнении как makemigrations и migrate команды, мы добавили projects к нашей команде. Это говорит Django смотреть только на модели и миграции в projects приложении. Django поставляется с несколькими уже созданными моделями.

Если вы запустите makemigrations и migrate без projects флага, то все миграции для всех моделей по умолчанию в ваших проектах Django будут созданы и применены. Это не проблема, но для целей данного раздела они не нужны.

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

Чтобы создать экземпляры нашего Project класса, нам нужно использовать оболочку Django. Оболочка Django похожа на оболочку Python, но позволяет получить доступ к базе данных и создавать записи. Чтобы получить доступ к оболочке Django, мы используем другую команду управления Django:

$ python manage.py shell

Получив доступ к оболочке, вы заметите, что командная строка изменится с $ на >>>. Затем вы можете импортировать ваши модели:

>>> from projects.models import Project

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

  • name: My First Project
  • description: A web development project.
  • technology: Django
  • image: img/project1.png

Для этого мы создаем экземпляр класса Project в оболочке Django:

>>> p1 = Project(
...     title='My First Project',
...     description='A web development project.',
...     technology='Django',
...     image='img/project1.png'
... )
>>> p1.save()

Это создаст новую запись в таблице ваших проектов и сохранит ее в базе данных. Теперь вы создали проект, который вы можете отобразить на своем сайте портфолио.

Последний шаг в этом разделе – создание еще двух примеров проектов:

>>> p2 = Project(
...     title='My Second Project',
...     description='Another web development project.',
...     technology='Flask',
...     image='img/project2.png'
... )
>>> p2.save()
>>> p3 = Project(
...     title='My Third Project',
...     description='A final development project.',
...     technology='Django',
...     image='img/project3.png'
... )
>>> p3.save()

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

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

Projects App: Представления

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

В projects приложении вы создадите два разных представления:

  1. Индексное представление, которое показывает фрагмент информации о каждом проекте
  2. Подробный вид, который показывает больше информации по определенной теме

Давайте начнем с представления индекса, так как логика немного проще. Внутри views.py вам нужно импортировать Project класс из models.py и создать функцию project_index(), которая отображает шаблон с именем project_index.html. В теле этой функции вы сделаете запрос Django ORM, чтобы выбрать все объекты в Project таблице:

from django.shortcuts import render
from projects.models import Project

def project_index(request):
    projects = Project.objects.all()
    context = {
        'projects': projects
    }
    return render(request, 'project_index.html', context)

В этом блоке кода происходит довольно много, поэтому давайте разберем его.

В строке 5 вы выполняете запрос . Запрос – это просто команда, которая позволяет вам создавать, извлекать, обновлять или удалять объекты (или строки) в вашей базе данных. В этом случае вы извлекаете все объекты в projects таблице.

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

В строке 6 блока кода выше мы определяем словарь context. В словаре есть только одна запись, projects которой мы назначаем наш набор запросов, содержащий все проекты. Контекстный словарь используется для отправки информации в наш шаблон. Каждая созданная вами функция просмотра должна иметь контекстный словарь.

В строке 9 , context добавляется в качестве аргумента render(). Любые записи в context словаре доступны в шаблоне, если context аргумент передан render(). Вам нужно будет создать контекстный словарь и передать его render в каждую созданную вами функцию просмотра.

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

Далее вам нужно будет создать project_detail() функцию просмотра. Для этой функции потребуется дополнительный аргумент: идентификатор просматриваемого проекта.

В остальном логика похожа:

def project_detail(request, pk):
    project = Project.objects.get(pk=pk)
    context = {
        'project': project
    }
    return render(request, 'project_detail.html', context)

В строке 14 мы выполняем еще один запрос. Этот запрос извлекает проект с первичным ключом pk, равным этому в аргументе функции. Затем мы назначаем этот проект в нашем context словаре, который мы передаем render(). Опять же, есть шаблон project_detail.html, который нам еще предстоит создать.

Как только ваши функции просмотра созданы, нам нужно подключить их к URL-адресам. Мы начнем с создания файла projects/urls.py для хранения конфигурации URL для приложения. Этот файл должен содержать следующий код:

from django.urls import path
from . import views

urlpatterns = [
    path("", views.project_index, name="project_index"),
    path("<int:pk>/", views.project_detail, name="project_detail"),
]

В строке 5 мы подключаем корневой URL нашего приложения к представлению project_index. Немного сложнее подключить представление project_detail. Чтобы сделать это, мы хотим, чтобы URL был /1, или /2, и так далее, в зависимости от pk проекта.

Значение pk в URL-адресе совпадает с pk, переданным функции просмотра, поэтому необходимо динамически генерировать эти URL-адреса в зависимости от того, какой проект вы хотите просмотреть. Для этого мы использовали нотацию . Это просто говорит Django, что значение, переданное в URL, является целым числом, а его имя переменной pk.

Теперь, когда они настроены, нам нужно подключить эти URL к URL проекта. В personal_portfolio/urls.py добавьте следующую выделенную строку кода:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("projects/", include("projects.urls")),
]

Эта строка кода включает в себя все URL-адреса в приложении проектов, но означает, что к ним осуществляется доступ с префиксом projects/. Теперь есть два полных URL, к которым можно получить доступ в нашем проекте:

  • localhost:8000/projects: Индексная страница проекта
  • localhost:8000/projects/3:  Подробный вид проекта с pk=3

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

Projects App: Шаблоны

Уф!  Наш последний шаг – создать два шаблона:

  1. project_index шаблон
  2. project_detail шаблон

Поскольку мы добавили стили Bootstrap в наше приложение, мы можем использовать некоторые предварительно стилизованные компоненты, чтобы представления выглядели хорошо. Начнем с project_index шаблона.

Для project_index шаблона вы создадите сетку из карт Bootstrap , где каждая карта отображает детали проекта. Конечно, мы не знаем, сколько будет проектов. Теоретически, их могут отображать сотни.

Мы не хотим создавать 100 различных карт Bootstrap и жесткий код во всей информации для каждого проекта. Вместо этого мы собираемся использовать функцию механизма шаблонов Django: циклы for .

Используя эту функцию, вы сможете просмотреть все проекты и создать карту для каждого. Синтаксис цикла for в шаблонизаторе Django выглядит следующим образом:

{% for project in projects %}
{# Do something... #}
{% endfor %}

Теперь, когда вы знаете, как работают циклы, вы можете добавить следующий код в файл с именем projects/templates/project_index.html:

{% extends "base.html" %}
{% load static %}
{% block page_content %}
<h1>Projects</h1>
<div class="row">
{% for project in projects %}
    <div class="col-md-4">
        <div class="card mb-2">
            <img class="card-img-top" src="{% static project.image %}">
            <div class="card-body">
                <h5 class="card-title">{{ project.title }}</h5>
                <p class="card-text">{{ project.description }}</p>
                <a href="{% url 'project_detail' project.pk %}"
                   class="btn btn-primary">
                    Read More
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

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

В строке 1 мы расширяем base.html, как мы это делали в Hello, World! приложение учебник. Я добавил еще несколько стилей в этот файл, чтобы включить панель навигации и чтобы весь контент содержался в контейнере Bootstrap. Изменения в base.html можно увидеть в исходном коде на GitHub.

В строке 2 мы включаем тег {% load static%} для включения статических файлов, таких как изображения. Вспомните еще раз в разделе о моделях Django, когда вы создали модель Project. Одним из его атрибутов был путь к файлу. Именно в этом пути к файлам мы будем хранить фактические изображения для каждого проекта.

Django автоматически регистрирует статические файлы, хранящиеся в каталоге с именем static / в каждом приложении. Наши пути к файлам изображений имели следующую структуру: img / .png.

При загрузке статических файлов Django ищет в каталоге static / файлы, соответствующие указанному пути к файлу в static /. Итак, нам нужно создать каталог с именем static / с другим каталогом с именем img / inside. Внутри img / вы можете скопировать изображения из исходного кода на GitHub.

В строке 6 мы начинаем цикл for, перебирая все проекты, переданные контекстным словарем.

Внутри цикла for мы можем получить доступ к каждому отдельному проекту. Чтобы получить доступ к атрибутам проекта, вы можете использовать точечные обозначения в двойных фигурных скобках. Например, чтобы получить доступ к заголовку проекта, вы используете {{project.title}}. Та же самая запись может использоваться для доступа к любому из атрибутов проекта.

В строке 9 мы включаем изображение нашего проекта. Внутри атрибута src мы добавляем код {% static project.image%}. Это говорит Django заглянуть внутрь статических файлов, чтобы найти файл, соответствующий project.image.

Последний пункт, который нам нужно выделить, – это ссылка в строке 13. Это ссылка на нашу страницу project_detail. Доступ к URL-адресам в Django похож на доступ к статическим файлам. Код для URL имеет следующую форму:

{% url '<url path name>' <view_function_arguments> %}

В этом случае мы обращаемся к URL-пути с именем project_detail, который принимает целочисленные аргументы, соответствующие pkномеру проекта.

Со всем этим, если вы запустите сервер Django и зайдете localhost:8000/projects, то вы должны увидеть что-то вроде этого:

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

С project_index.html шаблоном всё в порядке, пришло время создать шаблон project_detail.html. Код для этого шаблона ниже:

{% extends "base.html" %}
{% load static %}

{% block page_content %}
<h1>{{ project.title }}</h1>
<div class="row">
    <div class="col-md-8">
        <img src="{% static project.image %}" alt="" width="100%">
    </div>
    <div class="col-md-4">
        <h5>About the project:</h5>
        <p>{{ project.description }}</p>
        <br>
        <h5>Technology used:</h5>
        <p>{{ project.technology }}</p>
    </div>
</div>
{% endblock %}

Код в этом шаблоне имеет ту же функциональность, что и каждая карта проекта в project_index.html шаблоне. Единственным отличием является введение некоторых столбцов Bootstrap.

Если вы заходите на localhost:8000/projects/1, вы должны увидеть страницу с подробностями того первого проекта, который вы создали:

подробный вид проекта

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

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

Поделитесь своими знаниями с блогом

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

  • Создание, обновление и удаление сообщений в блоге
  • Отображать сообщения для пользователя в виде индекса или подробного просмотра
  • Назначить категории постам
  • Разрешить пользователям комментировать сообщения

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

Прежде чем приступить к созданию функциональности этой части вашего сайта, создайте новое приложение Django с именем blog. Не удаляйте projects. Вам понадобятся оба приложения в вашем проекте Django:

$ python manage.py startapp blog

Это может начать казаться вам знакомым, так как это происходит в третий раз. Не забудьте добавить blog в свой INSTALLED_APPS в personal_porfolio/settings.py:

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "projects",
    "blog",
]

Задержитесь на подключении URL сейчас. Как и в projects приложении, вы начнете с добавления моделей.

Блог приложение: модели

Файл models.py в этом приложении гораздо более сложный , чем в projects приложении.

Вам понадобятся три отдельные таблицы базы данных для блога:

  1. Post
  2. Category
  3. Comment

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

Ниже приведен код для Category и Post моделей:

from django.db import models

class Category(models.Model):
    name = models.CharField(max_length=20)

class Post(models.Model):
    title = models.CharField(max_length=255)
    body = models.TextField()
    created_on = models.DateTimeField(auto_now_add=True)
    last_modified = models.DateTimeField(auto_now=True)
    categories = models.ManyToManyField('Category', related_name='posts')

Модель Category очень проста. Все, что нужно, – это одно CharField, в котором мы храним название категории.

Поля title и body в модели Post – это те же типы полей, которые использовались в модели Project. Нам нужен только CharField для заголовка, так как нам нужна только короткая строка для заголовка записи. Тело должно быть длинным фрагментом текста, поэтому мы используем TextField.

Следующие два поля, create_on и last_modified, являются Django DateTimeFields. Они хранят объект datetime, содержащий дату и время, когда публикация была создана и изменена соответственно.

В строке 9 DateTimeField принимает аргумент auto_now_add = True. Это назначает текущую дату и время этому полю всякий раз, когда создается экземпляр этого класса.

В строке 10 DateTimeField принимает аргумент auto_now = True. Это назначает текущую дату и время этому полю всякий раз, когда экземпляр этого класса сохраняется. Это означает, что когда вы редактируете экземпляр этого класса, date_modified обновляется.

Последнее поле на почтовой модели является наиболее интересным. Мы хотим связать наши модели для категорий и сообщений таким образом, чтобы многие категории могли быть назначены многим сообщениям. К счастью, Django делает это проще для нас, предоставляя тип поля ManytoManyField. Это поле связывает модели Post и Category и позволяет нам создать связь между двумя таблицами.

ManyToManyField принимает два аргумента. Первая – это модель, с которой связаны отношения, в данном случае это категория. Второй позволяет нам получить доступ к связи из объекта Category, даже если мы не добавили туда поле. Добавляя related_name сообщений, мы можем получить доступ к category.posts, чтобы предоставить нам список сообщений с этой категорией.

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

Вы увидите, как это работает после того, как мы определим класс Comment:

class Comment(models.Model):
    author = models.CharField(max_length=60)
    body = models.TextField()
    created_on = models.DateTimeField(auto_now_add=True)
    post = models.ForeignKey('Post', on_delete=models.CASCADE)

Первые три поля этой модели должны выглядеть знакомо. Для пользователей есть поле author для добавления имени или псевдонима, поле body для тела комментария и поле created_on, идентичное полю created_on в Post модели.

В строке 20 мы используем другое реляционное поле ForeignKey. Это похоже на ManyToManyField, но вместо этого определяет отношение многие к одному . Это объясняется тем, что одному сообщению можно назначить множество комментариев . Но вы не можете иметь комментарий, который соответствует многим постам.

Поле ForeignKey принимает два аргумента. Первый – это другая модель в отношениях, в данном случае Post. Второй говорит Django, что делать, когда сообщение удалено. Если сообщение удалено, то мы не хотим, чтобы комментарии, связанные с ним, торчали. Поэтому мы хотим также удалить их, поэтому добавим аргумент on_delete=models.CASCADE.

После того, как вы создали модели, вы можете создать файлы миграции с помощью makemigrations:

$ python manage.py makemigrations blog

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

$ python manage.py migrate

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

Вместо этого вы узнаете, как использовать Django Admin, который позволит вам создавать экземпляры классов вашей модели в приятном веб-интерфейсе.

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

Приложение для блогов: Django Admin

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

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

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

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

$ python manage.py createsuperuser

Затем вам будет предложено ввести имя пользователя, а затем ваш адрес электронной почты и пароль. Как только вы введете необходимые данные, вы получите уведомление о создании суперпользователя. Не беспокойтесь, если сделаете ошибку, так как можете начать все сначала:

Username (leave blank to use 'jasmine'): jfiner
Email address: jfiner@example.com
Password:
Password (again):
Superuser created successfully.

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

Django Admin по умолчанию

Должны появиться модели «Пользователь» и «Группы», но вы заметите, что нет ссылок на модели, которые вы создали сами. Это потому, что вам нужно зарегистрировать их внутри админа.

В blog каталоге откройте файл admin.py и введите следующие строки кода:

from django.contrib import admin
from blog.models import Post, Category

class PostAdmin(admin.ModelAdmin):
    pass

class CategoryAdmin(admin.ModelAdmin):
    pass

admin.site.register(Post, PostAdmin)
admin.site.register(Category, CategoryAdmin)

В строке 2 вы импортируете модели, которые хотите зарегистрировать, на странице администратора.

Примечание: мы не добавляем комментарии к администратору. Это потому, что обычно нет необходимости редактировать или создавать комментарии самостоятельно.

Если вы хотите добавить функцию, где комментарии модерируются, тогда добавьте также модель комментариев. Шаги для этого точно такие же!

В строке 4 и строке 7 вы определяете пустые классы PostAdmin и CategoryAdmin. Для целей данного руководства вам не нужно добавлять какие-либо атрибуты или методы в эти классы. Они используются для настройки того, что показано на страницах администратора. Для этого урока достаточно конфигурации по умолчанию.

Последние две строки являются наиболее важными. Они регистрируют модели с классами администратора. Если вы сейчас заходите localhost:8000/admin, вы должны увидеть, что модели Post и Category теперь видны:

Джанго Админ с постами и категориями

Если вы нажмете на «Сообщения» или «Категории» , вы сможете добавить новые экземпляры обеих моделей. Мне нравится добавлять текст поддельных сообщений в блоге, используя фиктивный текст lorem ipsum .

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

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

Блог приложение: Просмотры

Вам нужно создать три функции просмотра в файле views.py в blog каталоге:

  • blog_index отобразит список всех ваших сообщений.
  • blog_detail отобразит полный пост, а также комментарии и форму, позволяющую пользователям создавать новые комментарии.
  • blog_categoryбудет аналогичным blog_index, но просмотренные сообщения будут относиться только к определенной категории, выбранной пользователем.

Простейшая функция просмотра для начала это blog_index(). Это будет очень похоже на project_index() вид из вашего project приложения. Вы просто запросите Post модели и получите все их объекты:

from django.shortcuts import render
from blog.models import Post, Comment

def blog_index(request):
    posts = Post.objects.all().order_by('-created_on')
    context = {
        "posts": posts,
    }
    return render(request, "blog_index.html", context)

В строке 2 , вы импортировали модели Post и Comment, и на линии 5 внутри функции view, вы получаете QuerySet , содержащий все сообщения в базе данных. order_by() упорядочивает Queryset в соответствии с приведенным аргументом. Знак минус говорит Django начинать с наибольшего значения, а не с самого маленького. Мы используем это, так как мы хотим, чтобы посты были упорядочены в первую очередь.

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

Далее вы можете начать создавать blog_category() вид. Функция представления должна будет взять имя категории в качестве аргумента и запросить Post базу данных для всех сообщений, которым была присвоена данная категория:

def blog_category(request, category):
    posts = Post.objects.filter(
        categories__name__contains=category
    ).order_by(
        '-created_on'
    )
    context = {
        "category": category,
        "posts": posts
    }
    return render(request, "blog_category.html", context)

В строке 14 вы использовали фильтр Django Queryset . Аргумент фильтра сообщает Django, какие условия должны быть выполнены для извлечения объекта. В этом случае нам нужны только сообщения, категории которых содержат категорию, имя которой соответствует названию, указанному в аргументе функции просмотра. Опять же, вы используете order_by()для заказа сообщений, начиная с самых последних.

Затем мы добавляем эти сообщения и категорию в context словарь и отображаем наш шаблон.

Последняя функция просмотра для добавления blog_detail(). Это сложнее, так как мы собираемся включить форму. Прежде чем добавить форму, просто настройте функцию просмотра, чтобы показать конкретное сообщение с комментарием, связанным с ним. Эта функция будет почти эквивалентна функции просмотра project_detail() в projects приложении:

def blog_detail(request, pk):
    post = Post.objects.get(pk=pk)
    comments = Comment.objects.filter(post=post)
    context = {
        "post": post,
        "comments": comments,
    }

    return render(request, "blog_detail.html", context)

Функция view принимает pk значение в качестве аргумента и в строке 22 извлекает объект с заданным значением pk.

В строке 23 мы снова получаем все комментарии к данному сообщению, используя фильтры Django.

Наконец, добавьте оба post и comments в contextсловарь и отрендерируйте шаблон.

Чтобы добавить форму на страницу, вам нужно создать еще один файл в blog каталоге с именем forms.py. Формы Джанго очень похожи на модели. Форма состоит из класса, где атрибуты класса являются полями формы. Django поставляется с некоторыми встроенными полями формы, которые вы можете использовать для быстрого создания необходимой формы.

Для этой формы вам понадобятся только те поля author, которые должны быть и CharField, и body которые также могут быть CharField.

Примечание: если CharField вашей формы соответствует модели CharField, убедитесь, что оба имеют одинаковое max_length значение.

blog/forms.py должен содержать следующий код:

from django import forms

class CommentForm(forms.Form):
    author = forms.CharField(
        max_length=60,
        widget=forms.TextInput(attrs={
            "class": "form-control",
            "placeholder": "Your Name"
        })
    )
    body = forms.CharField(widget=forms.Textarea(
        attrs={
            "class": "form-control",
            "placeholder": "Leave a comment!"
        })
    )

Вы также заметите, что аргумент widget был передан обоим полям. В поле author есть forms.TextInput виджет. Это говорит Django загружать это поле как элемент ввода текста HTML в шаблонах. Поле body использует forms.TextArea виджет вместо того, чтобы , таким образом , что поле отображается как элемент текстового поля HTML.

Эти виджеты также принимают аргумент attrs, который является словарем и позволяет нам указать некоторые классы CSS, которые помогут с форматированием шаблона для этого представления позже. Это также позволяет нам добавить текст-заполнитель.

Когда форма публикуется, POST запрос отправляется на сервер. Итак, в функции просмотра нам нужно проверить, был ли получен запрос. Затем мы можем создать комментарий из полей формы. Django поставляется с удобной is_valid() формой, поэтому мы можем проверить правильность ввода всех полей.

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

def blog_detail(request, pk):
    post = Post.objects.get(pk=pk)

    form = CommentForm()
    if request.method == 'POST':
        form = CommentForm(request.POST)
        if form.is_valid():
            comment = Comment(
                author=form.cleaned_data["author"],
                body=form.cleaned_data["body"],
                post=post
            )
            comment.save()

    comments = Comment.objects.filter(post=post)
    context = {
        "post": post,
        "comments": comments,
        "form": form,
    }
    return render(request, "blog_detail.html", context)

В строке 24 мы создаем экземпляр нашего класса формы. Не забудьте импортировать вашу форму в начале файла:

from .forms import CommentForm

Затем мы продолжаем проверять, получен ли запрос POST . Если это так, то мы создаем новый экземпляр нашей формы, заполненный данными, введенными в форму.

Форма затем проверяется с помощью is_valid(). Если форма действительна, создается новый экземпляр Comment. Вы можете получить доступ к данным из формы, используя form.cleaned_data словарь.

Ключи словаря соответствуют полям формы, поэтому вы можете получить доступ к автору с помощью form.cleaned_data['author']. Не забудьте добавить текущее сообщение в комментарий при его создании.

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

  1. Когда пользователь посещает страницу, содержащую форму, он отправляет GET запрос на сервер. В этом случае данные не вводятся в форму, поэтому мы просто хотим отобразить форму и отобразить ее.
  2. Когда пользователь вводит информацию и нажимает кнопку « Отправить» , отправляется запрос POST на сервер, содержащий данные, отправленные с формой. На этом этапе данные должны быть обработаны, и могут произойти две вещи:
    • Форма действительна, и пользователь перенаправляется на следующую страницу.
    • Форма недействительна, и снова отображается пустая форма. Пользователь возвращается на шаг 1, и процесс повторяется.

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

В строке 33 , сохраняется комментарий и добавляется form в contextсловарь , чтобы вы могли получить доступ к форме в шаблоне HTML.

Последний шаг перед тем, как вы создадите шаблоны и увидите, что этот блог запущен и работает, – это подключение URL-адресов. Вам нужно создать еще один urls.py файл внутри blog/ и добавить URL-адреса для трех представлений:

from django.urls import path
from . import views

urlpatterns = [
    path("", views.blog_index, name="blog_index"),
    path("<int:pk>/", views.blog_detail, name="blog_detail"),
    path("<category>/", views.blog_category, name="blog_category"),
]

Как только URL-адреса для блогов будут созданы, вам нужно добавить их в конфигурацию URL проектов, используя include():

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("projects/", include("projects.urls")),
    path("blog/", include("blog.urls")),
]

При такой настройке все URL-адреса блога будут иметь префикс blog/, и у вас будут следующие URL-пути:

  • localhost:8000/blog: Индекс блога
  • localhost:8000/blog/1: Подробный вид блога сpk=1
  • localhost:8000/blog/python: Индекс блога просмотр всех сообщений с категориейpython

Эти URL-адреса пока не будут работать, так как вам все еще нужно создавать шаблоны.

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

Как всегда, не забывайте, что вы можете проверить исходный код этого раздела на GitHub.

Блог приложение: шаблоны

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

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

Первый шаблон, который вы создадите, предназначен для индекса блога в новом файле blog/templates/blog_index.html. Это будет очень похоже на индексное представление проектов.

Вы будете использовать цикл for, чтобы перебрать все сообщения. Для каждого сообщения вы будете отображать заголовок и фрагмент тела. Как всегда, вы расширите базовый шаблон personal_porfolio/templates/base.html, который содержит нашу панель навигации и дополнительное форматирование:

{% extends "base.html" %}
{% block page_content %}
<div class="col-md-8 offset-md-2">
    <h1>Blog Index</h1>
    <hr>
    {% for post in posts %}
    <h2><a href="{% url 'blog_detail' post.pk%}">{{ post.title }}</a></h2>
    <small>
        {{ post.created_on.date }} |&nbsp;
        Categories:&nbsp;
        {% for category in post.categories.all %}
        <a href="{% url 'blog_category' category.name %}">
            {{ category.name }}
        </a>&nbsp;
        {% endfor %}
    </small>
    <p>{{ post.body | slice:":400" }}...</p>
    {% endfor %}
</div>
{% endblock %}

В строке 7 у нас есть заголовок сообщения, который является гиперссылкой. Ссылка представляет собой ссылку Django, где мы указываем на названный URL-адрес blog_detail, который принимает целое число в качестве аргумента и должен соответствовать pk значению поста.

Под заголовком мы отобразим created_on атрибут сообщения, а также его категории. В строке 11 мы используем другой цикл for, чтобы перебрать все категории, назначенные посту.

В строке 17 мы используем фильтр шаблонов slice, чтобы обрезать текст сообщения в 400 символов, чтобы индекс блога стал более читабельным.

Как только это произойдет, вы сможете получить доступ к этой странице, посетив localhost:8000/blog:

Индекс блога

Затем создайте еще один HTML-файл blog/templates/blog_category.html, где будет находиться ваш шаблон blog_category. Это должно быть идентично blog_index.html, за исключением того, что имя категории находится внутри тега h1 вместо Blog Index:

{% extends "base.html" %}
{% block page_content %}
<div class="col-md-8 offset-md-2">
    <h1>{{ category | title }}</h1>
    <hr>
    {% for post in posts %}
        <h2><a href="{% url 'blog_detail' post.pk%}">{{ post.title }}</a></h2>
        <small>
            {{ post.created_on.date }} |&nbsp;
            Categories:&nbsp;
            {% for category in post.categories.all %}
            <a href="{% url 'blog_category' category.name %}">
                {{ category.name }}
            </a>&nbsp;
            {% endfor %}
        </small>
        <p>{{ post.body | slice:":400" }}...</p>
    {% endfor %}
</div>
{% endblock %}

Большая часть этого шаблона идентична предыдущему шаблону. Единственная разница – в строке 4 , где мы используем другой шаблонный фильтр Django title. Это применяет заголовок к строке и заставляет слова начинаться с заглавной буквы.

Закончив этот шаблон, вы сможете получить доступ к представлению вашей категории. Если вы определили названную категорию python, вы сможете посетить localhost:8000/blog/python и просмотреть все сообщения с этой категорией:

Просмотр категории блога

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

Между заголовком и телом поста вы увидите дату создания поста и любые категории. Ниже вы добавите форму комментариев, чтобы пользователи могли добавлять новые комментарии. Под этим будет список комментариев, которые уже были оставлены:

{% extends "base.html" %}
{% block page_content %}
<div class="col-md-8 offset-md-2">
    <h1>{{ post.title }}</h1>
    <small>
        {{ post.created_on.date }} |&nbsp;
        Categories:&nbsp;
        {% for category in post.categories.all %}
        <a href="{% url 'blog_category' category.name %}">
            {{ category.name }}
        </a>&nbsp;
        {% endfor %}
    </small>
    <p>{{ post.body | linebreaks }}</p>
    <h3>Leave a comment:</h3>
    <form action="/blog/{{ post.pk }}/" method="post">
        {% csrf_token %}
        <div class="form-group">
            {{ form.author }}
        </div>
        <div class="form-group">
            {{ form.body }}
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <h3>Comments:</h3>
    {% for comment in comments %}
    <p>
        On {{comment.created_on.date }}&nbsp;
        <b>{{ comment.author }}</b> wrote:
    </p>
    <p>{{ comment.body }}</p>
    <hr>
    {% endfor %}
</div>
{% endblock %}

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

Под сообщением в строке 16 вы увидите свою форму. Действие формы указывает на URL-адрес страницы, на которую вы отправляете запрос POST. В этом случае это то же самое, что и страница, которую вы сейчас посещаете. Затем вы добавляете csrf_token, который обеспечивает безопасность и отображает поля body и author формы, после чего следует кнопка отправки.

Чтобы получить начальную загрузку для полей автора и тела, вам нужно добавить form-control класс в текстовые поля .

Поскольку Django отображает входные данные для вас, когда вы включаете {{ form.body }} и {{ form.author }}, вы не можете добавить эти классы в шаблон. Вот почему вы добавили атрибуты к виджетам формы в предыдущем разделе.

Под формой есть еще один цикл for, который перебирает все комментарии к данному посту. В комментарии, bodyauthor и created_on атрибуты все отображаются.

Как только этот шаблон будет создан, вы сможете посетить localhost:8000/blog/1 и просмотреть свой первый пост:

Детальный просмотр блога

Вы также должны иметь доступ к страницам с подробностями публикации, щелкнув по их заголовку в представлении blog_index .

Последний штрих – добавить ссылку на панель навигации blog_index в base.html. Таким образом, когда вы нажмете « Блог» на панели навигации, вы сможете посетить блог. Проверьте обновление к base.html в исходном коде , чтобы увидеть , как добавить эту ссылку.

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

Здесь и там вы можете найти несколько вещей, которые, по вашему мнению, нуждаются в изменении. Идите и приведите их в порядок. Лучший способ узнать больше об этой веб-среде – это на практике, поэтому постарайтесь расширить этот проект и сделать его еще лучше! Если вы не уверены, с чего начать, я оставил вам несколько идей в заключении ниже!

Вывод

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

В этом уроке вы узнали:

  • Как создавать проекты и приложения Django
  • Как добавить веб-страницы с представлениями и шаблонами
  • Как получить пользовательский ввод с помощью форм
  • Как подключить ваши представления и шаблоны к настройкам URL
  • Как добавить данные на ваш сайт с помощью реляционных баз данных с помощью Django Object Relational Mapper
  • Как использовать Django Admin для управления вашими моделями

Кроме того, вы узнали о структуре MVT веб-приложений Django и почему Django является таким хорошим выбором для веб-разработки.

Если вы хотите узнать больше о Django, ознакомьтесь с документацией.


Совершенствуй знания каждый день у нас в Телеграм-каналах

Вопросы, реклама — VK | Telegram