на чем писать фронтенд django
Python Django: Front End на React
Предполагается ваше предыдущее знакомство с основами Python-фреймворка Django и JavaScript-фреймворка React. Если вы впервые устанавливаете Django или React, то сперва прочитайте указанные в окончании руководства статьи.
1. Создание проекта Django
Начнем с нового виртуального окружения. Создайте папку внутри базового каталога, затем установите виртуальную среду при помощи следующей команды:
Активация виртуального окружения на Windows:
А также на Linux и macOS:
Пришло время следующей командой установить Django как Python-пакет:
Теперь создайте проект Django, назовите его Backend :
3. Создание приложения React
После инициализации Django-проекта необходимо создать приложение React в том же каталоге (точнее, в базовом каталоге). Для начала установите в систему Node.js.
После успешной установки Node.js на вашей платформе, выполните следующую команду для создания нового React-приложения:
Когда создастся фронтенд-приложение, запускайте:
3. Настройка Django для совместной работы с React
Теперь пришло время настроить конфигурацию бэкенда, то есть, проекта Django. В файле settings.py должна быть указана константа TEMPLATES:
А внутри константы TEMPLATES содержится список директорий, DIRS :
Также сообщите приложению Django, что нужно отрисовывать шаблоны из React-приложения frontend : добавьте в самый конец файла конфигурации Django settings.py следующее:
Следом добавьте соответствующий представлению путь в список urlpatterns из файла urls.py :
Все готово, запускайте проект или приложение Django с помощью команды:
Python Django: Front End на React
Предполагается ваше предыдущее знакомство с основами Python-фреймворка Django и JavaScript-фреймворка React. Если вы впервые устанавливаете Django или React, то сперва прочитайте указанные в окончании руководства статьи.
1. Создание проекта Django
Начнем с нового виртуального окружения. Создайте папку внутри базового каталога, затем установите виртуальную среду при помощи следующей команды:
Активация виртуального окружения на Windows:
А также на Linux и macOS:
Пришло время следующей командой установить Django как Python-пакет:
Теперь создайте проект Django, назовите его Backend :
3. Создание приложения React
После инициализации Django-проекта необходимо создать приложение React в том же каталоге (точнее, в базовом каталоге). Для начала установите в систему Node.js.
После успешной установки Node.js на вашей платформе, выполните следующую команду для создания нового React-приложения:
Когда создастся фронтенд-приложение, запускайте:
3. Настройка Django для совместной работы с React
Теперь пришло время настроить конфигурацию бэкенда, то есть, проекта Django. В файле settings.py должна быть указана константа TEMPLATES:
А внутри константы TEMPLATES содержится список директорий, DIRS :
Также сообщите приложению Django, что нужно отрисовывать шаблоны из React-приложения frontend : добавьте в самый конец файла конфигурации Django settings.py следующее:
Следом добавьте соответствующий представлению путь в список urlpatterns из файла urls.py :
Все готово, запускайте проект или приложение Django с помощью команды:
🔩 Полный фуллстек: пишем сайт на Django, Vue и GraphQL
Leo Matyushkin
Публикация представляет собой незначительно сокращенное пособие Дэйна Хилларда Build a Blog Using Django, Vue, and GraphQL.
Это руководство проведет вас через процесс создания серверной части на Django и клиентской части на Vue со связкой между ними в виде GraphQL. Это большой пошаговый проект, делайте перерывы по мере необходимости.
Из руководства вы узнаете:
Суть проекта на Django, Vue и GraphQL
Традиционно стартовым проектом для веба явлется блог — такие проекты включают все стандартные CRUD-операции: создание, чтение, обновление и удаление.
Мы разработаем небольшое приложение для ведения блога с некоторыми элементарными функциями. Авторы могут писать множество сообщений, сообщения могут иметь множество тегов, могут публиковаться или сохраняться в черновиках.
Бэкенд блога мы сделаем на Django, затем реализуем передачу контента GraphQL API и, наконец, воспользуемся Vue для отображения данных в браузере. Вот наши шаги:
Предварительные знания
Руководство будет легче воспринять, если вы уже знакомы с концепцией веб-приложений: как работают HTTP-запросы и API. В этом плане будет полезно прочитать нашу публикацию про Python и API.
Поскольку мы будем использовать для создания серверной части блога Django, хорошо бы ознакомиться с процедурой запуска проекта на Django. Возможно, стоит для начала попробовать создать проект на чистом Django.
Поскольку мы будем использовать для интерфейса пользователя Vue, будет полезен опыт работы с реактивным JavaScript. Если в прошлом вы манипулировали DOM-элементами только с помощью jQuery, знакомство с Vue станет хорошим продолжением.
Запросы GraphQL похожи на JSON-объекты и возвращают данные в формате JSON. Поэтому полезно разобраться, что это такое. Позже в этом руководстве вам потребуется установить Node.js, прочитайте наше руководство для новичков.
Шаг 1. Настраиваем Django
Мы будем разделять фронтенд и бэкенд-код, так что неплохо сразу создать подкаталоги для бэкенда:
Устанавливаем Django
Чтобы отделить зависимости проекта от других ваших проектов, создадим виртуальное окружение. Далее в руководстве предполагается, что вы запускате команды, связанные с Python и Django, в активированном виртуальном окружении. Для установки зависимостей создадим в директории backend файл requirements.txt :
Устанавливаем Django в виртуальном окружении:
Django установлен, инициализируем проект:
Мы создали новый проект, а значит, нужно создать базу данных и осуществить миграцию:
Вы увидите список миграций:
Есть база данных — можем создать суперпользователя:
Итак, мы установили Django, создали проект, провели миграции и добавили суперпользователя. В итоге у нас есть полностью функционирующее (пусть пока и пустое) приложение. Запускается оно так:
Шаг 2. Создаем приложение
Проект на Django может содержать множество различных приложений. Обычно одно приложение соответствует одному смысловому блоку сайта, например, ленте новостей, магазину товаров или корзине. Создадим приложение блога:
Будет создана директория blog с несколькими шаблонными файлами:
Позже в руководстве мы их дополним.
Вновь созданное приложение не добавляется по умолчанию в проект. Чтобы фреймворк знал, что приложение является частью проекта, дополняем список приложений в файле настроек проекта backend/settings.py :
Это поможет Django найти информацию о приложении: модели данных и шаблоны URL-адресов.
Создаем модели данных для блога
Создадим три следующие модели данных:
Модель Profile
Модель профиля содержит несколько полей:
Импортируем из Django модуль настроек settings и опишем класс для нашей новой модели:
Модель Tag
В модели Tag будет единственное поле, короткое имя тега:
Модель Post
Конфигурируем панель администратора
Для того, чтобы определить, как будут отображаться записи в панели администрирования блога, переходим в blog/admin.py и импортируем созданные модели:
Создаем и регистрируем классы моделей:
У постов мы не показываем все поля подряд, а только необходимые для администрирования. К ним мы добавили возможности фильтрации, редактирования и поиска. Подробно эти настройки рассмотрены в статье Customize the Django Admin With Python.
Создаем миграции модели
В Django есть вся информация, необходимая для управления содержимым сайта, но сначала нужно обновить базу данных. Ранее в этом руководстве мы запускали миграции Django для встроенных моделей. Теперь создадим и запустим миграции уже для наших моделей:
Теперь у нас есть модели данных и мы настроили админпанель Django, чтобы добавлять и редактировать эти модели.
Запустите или перезапустите сервер разработки Django и зайдите в панель по адресу http://localhost:8000/admin посмотреть, что изменилось. Вы увидите ссылки на списки тегов, профилей и сообщений, а также ссылки для добавления и редактирования каждого из них. Добавьте и отредактируйте несколько из них, чтобы увидеть, как отреагирует интерфейс администратора.
Шаг 3. Настройка Graphene-Django
В результате предыдущего этапа мы завершили основную работу над бэкендом. Далее можно было бы использовать механизмы маршрутизации URL и шаблонов Django для создания страниц, которые будут показывать читателям контент. Но вместо этого мы обернем созданную нами серверную часть в GraphQL API. За счет этого мы обеспечим более удобную работу на стороне клиента.
GraphQL позволяет получать только те данные, которые нам действительно нужны, что выгодно отличает эту технологию от RESTful API. GraphQL обеспечивает гибкость при проектировании данных, за счет чего мы можем получать новые структуры данных, не изменяя логику службы, предоставляющей GraphQL API.
Устанавливаем Graphene-Django
Для интеграции Django и GraphQL мы используем библиотеку Graphene-Django. Для установки библиотеки дополняем файл requirements.txt :
Запускаем установку через менеджер пакетов pip:
Теперь нужно добавить приложение «graphene_django» в список INSTALLED_APPS в модуле settings.py :
Настраиваем Graphene-Django
Параметр GRAPHENE в файле settings.py указывает Graphene-Django расположение схемы GraphQL. Для нашего примера этот путь соответствует blog.schema.schema (саму схему мы вскоре создадим):
Добавляем паттерн в список переменной urlpatterns :
Создаем GraphQL-схему. Теперь мы создадим схему GraphQL, похожу по своей логике на конфигурацию панели администратора. Схема состоит из нескольких классов, каждый из которых связан с определенной моделью Django, а также ещё одного класса, который показывает, как разрешать несколько важных типов запросов, которые понадобятся нам во внешнем интерфейсе.
В итоге получается следующий сниппет:
Если вы еще не наполняли блог тестовыми данными, сделайте это сейчас. Попробуйте выполнить следующий запрос. Он должен вернуть список всех созданных сообщений:
Ответ должен вернуть список постов. Структура каждого поста должна соответствовать форме запроса, как в следующем примере:
Если вы сохранили несколько постов и видите их в ответе, значит, можно продолжать.
Шаг 4. Настраиваем django-cors-headers
Чтобы считать работу над бэкендом завершенной, сделаем еще один шаг. Серверная часть и интерфейс будут запускаются на разных портах, а на практике так и вообще могут запускаться на разных доменах. Поэтому важное значение принимает вопрос совместного использования ресурсов (CORS). Без поддержки CORS запросы от фронтенда к бэкенду обычно блокируются браузером.
Библиотека django-cors-headers делает работу с CORS довольно безболезненной. Мы будем использовать эту библиотеку, чтобы указать Django отвечать на запросы, даже если они исходят из другого источника. Это позволит фронтенду правильно взаимодействовать с GraphQL API.
Установка. Добавляем название модуля в зависимости ( requirements.txt ):
Добавляем в список приложений INSTALLED_APPS в файле settings.py :
Теперь нужно подключить библиотеку в качестве промежуточного обработчика в переменной MIDDLEWARE :
Документация django-cors-headers советует ставить эту строку как можно выше в списке обработчиков.
CORS существует не просто так. Мы не хотим, чтобы наше приложение было доступно для использования из любого места в Интернете. Чтобы этого избежать, мы используем две настройки, чтобы определить, насколько мы хотим открыть GraphQL API:
Соответственно добавляем в settings.py две следующие строки:
Такие настройки разрешат запросы только от нашего фронтенда, которые в конечном итоге мы будем запускать локально на порту 8080.
Бэкенд готов! У нас есть модель данных, интерфейс администратора, GraphQL API на базе GraphiQL и возможность запрашивать API из внешнего интерфейса, который мы создадим дальше. Отличный момент, чтобы передохнуть, если вы ещё этого не делали ⛱️.
Шаг 5. Настраиваем Vue.js
В качестве фронтенд-фреймворка мы будем использовать Vue. Как и Django, Vue предоставляет интерфейс для создания проекта. Используя этот подход, нам не придется устанавливать вручную множество отдельных зависимостей, необходимых для запуска проекта на Vue. Достаточно использовать npx:
Установим плагины Vue
Чтобы правильно выполнять маршрутизацию и взаимодействовать с GraphQL API, нам понадобятся плагины Vue Router и Vue Apollo. При появлении запросов выбирайте параметры по умолчанию:
Этим командам потребуется время для установки зависимостей, они добавят или изменят некоторые файлы в проекте. Теперь мы можем запустить сервер разработки:
Итак, у нас есть приложение Django, работающее по адресу http://localhost:8000, и приложение Vue, которое запускается по адресу http://localhost:8080.
Шаг 6. Настраиваем Vue Router
Важной частью клиентских приложений является обработка маршрутизации без необходимости делать новые запросы к серверу. Распространенным решением во Vue является плагин Vue Router, который мы установили ранее.
Каждый из следующих элементов импорта соответствует нашим будущим компонентам:
Теперь создадим список маршрутов. Каждый маршрут имеет два параметра:
Создадим константу routes :
Далее в начале файла src/main.js импортируем router :
Передаем маршрут в экземпляр Vue:
На этом настройка Vue Router завершена. Мы создали маршруты для внешнего интерфейса, которые сопоставляют шаблон URL-адреса с отображаемым компонентом. Сами маршруты пока не работают, потому как указывают на компоненты, которые еще не созданы.
Шаг 7. Создаем компоненты Vue
Теперь Vue умеет работать с маршрутами, пора создать компоненты, которые будут отображать данные из конечной точки GraphQL:
Компонент AuthorLink
Файл AuthorLink.vue должен выглядеть следующим образом:
Компонент PostList
Код JavaScript должен выглядеть так:
Компонент PostList получает данные через prop вместо прямого использования GraphQL.
В том же файле можно добавить несколько дополнительных стилей CSS, чтобы сделать список постов удобнее для чтения:
Компонент AllPosts
Следующий компонент, который мы создадим, — список постов в блоге. Он должен отображать две вещи:
Позже мы заполним переменную allPosts динамически с помощью GraphQL-запроса.
Компонент PostsByTag
Компонент PostsByTag очень похож на компонент AllPosts :
Компонент Author
Компонент Author действует, как страница профиля автора. То есть компонент должен отображать следующее:
Компонент Post
Компонент Post является наиболее интересным, поскольку отвечает за отображение всей информации о публикации:
За счет используемой модели данных и компонентной архитектуры нам потребуется совсем немного кода:
Компонент App
В каталоге src/ откроем App.vue и заменим содержимое следующим кодом:
Итак, мы подошли к концу седьмого (предпоследнего) шага. Если вы раньше не использовали Vue, этот шаг, возможно, был трудоемким. Однако мы достигли важной вехи — работающего приложения Vue с маршрутами и представлениями, готовыми для отображения данных.
Запустите сервер разработки Vue и перейдите по адресу http://localhost:8080. Вы должны увидеть заголовок блога и заголовки недавних публикаций. На последнем шаге мы воспользуемся Apollo для обращений к GraphQL API, чтобы соединить между собой интерфейс и серверную часть.
Шаг 8. Собираем данные
Пора получить данные из GraphQL API. Плагин Vue Apollo, который мы установили ранее, интегрирует Apollo во Vue и делает удобнее процедуру выполнения запросов к GraphQL API.
Теперь мы можем добавить запросы для заполнения страниц. Мы сделаем это, добавив функцию created() в несколько наших SFC. Эта функция — специальный хук жизненного цикла Vue, выполняемый в момент, когда компонент готовится к рендерингу на странице. Функцию можно использовать для запроса данных, которые мы хотим визуализировать. Мы создадим запросы для следующих компонентов:
Запрос для получения информации о посте (Post)
Запрос для Author
Запрос Author принимает username автора и возвращает информацию, необходимую для отображения автора и его списка постов. Должно получиться так:
Запрос для PostByTag
Запрос для PostsByTag очень похож на предыдущие. Он принимает желаемый тег и возвращает список подходящих постов:
Вы уже могли заметить, что некоторые части запросов очень похожи друг на друга. Чтобы уменьшить дублирование кода, обратите внимание на концепцию GraphQL fragments.
Запрос для AllPosts
Ура! Это последний запрос. Теперь каждый компонент получает данные, необходимые для отображения, а мы получили работающий блог. Запустите сервер разработки Django и сервер разработки Vue. Откройте http://localhost:8080 и посмотрите на результат.
Возможные следующие шаги
Мы начали с создания серверной части блога Django для администрирования, сохранения и обслуживания данных блога. Затем создали интерфейс Vue для использования и отображения этих данных. Наконец, научили их общаться с GraphQL, используя Graphene и Apollo.
Чтобы еще раз убедиться, что блог работает должным образом, можно попробовать следующее:
Заключение
Итак, мы узнали, как использовать GraphQL для создания гибких типизированных представлений данных. Вы можете применять эти методы как в уже созданных приложениях Django, так и в тех, что вы только планируете создать. Как и другие API, этот подход применим для большинства современных фронтенд-фреймворков. Надеемся, что эта концепция пригодится вам ещё не раз.
Создаём веб-приложение с бэкендом на Django и фронтендом на React
В этом материале вы узнаете:
Подготовка
Создаём проект Django в виртуальном окружении Python
Создайте новую папку и перейдите в неё:
Потом активируйте виртуальное окружение Python:
Примечание все следующие команды нужно выполнять из папки django-react и с активированным виртуальным окружением.
Установите зависимости Django и Django REST Framework:
pip install django djangorestframework
После установки создайте новый проект Django:
django-admin startproject django_react
Теперь сделаем простое API на Django для создания и хранения контактов.
Создаём приложение на Django
В каждом проекте Django может быть много приложений. Приложения можно делать переиспользуемыми: такими, что их можно добавить в менеджер пакетов Python и установить через него в другой проект, в котором нужно такое приложение.
Для создания нового приложения Django используется команда:
django-admin startapp app_name
где app_name — название приложения.
В нашем случае команда будет выглядеть так:
django-admin startapp leads
Теперь сделаем так, чтобы Django проект использовал новое приложение. Откройте файл django_react/settings.py и добавьте приложение в INSTALLED_APPS :
INSTALLED_APPS = [ ‘django.contrib.admin’, ‘django.contrib.auth’, ‘django.contrib.contenttypes’, ‘django.contrib.sessions’, ‘django.contrib.messages’, ‘django.contrib.staticfiles’, ‘leads.apps.LeadsConfig’, # activate the new app ]
Создаём модель в базе данных с помощью Django
Модель — это объект, представляющий собой данные из таблицы. Почти каждый веб-фреймворк использует модели, и Django — не исключение.
Модель Django может иметь одно или больше полей. Каждое поле соответствует полю в таблице.
Мы собираемся хранить контакты, поэтому модель Lead может состоять из этих полей:
(Можно добавлять и другие поля, например телефон). Добавим ещё поле с временем создания модели, потому что по умолчанию Django этого не делает.
Откроем leads/models.py и опишем модель Lead :
from django.db import models class Lead(models.Model): name = models.CharField(max_length=100) email = models.EmailField() message = models.CharField(max_length=300) created_at = models.DateTimeField(auto_now_add=True)
Примечание изучите документацию Django о полях. Когда придумываете структуру модели, выбирайте самые подходящие для вашего случая поля.
Создадим миграции командой:
python manage.py makemigrations leads
и применим их к базе данных:
python manage.py migrate
Займёмся тестированием
Вы могли подумать «А как же тестирование?».
Существует масса туториалов по Django, начинающихся примерно так:
class SomeModelModelTest(TestCase): def setUp(self): SomeModel.objects.create( name=fake.name(), email=fake.email(), phone=fake.phone_number(), message=fake.text(), source=fake.url() ) def test_save_model(self): saved_models = SomeModel.objects.count() self.assertEqual(saved_models, 2)
Не надо так. Нет никакого смысла ни в тестировании стандартной модели Django, ни в тестировании Django ORM. Что точно не нужно тестировать при создании приложения на Django:
Не тестируйте то, что уже протестировано! Так что же тогда тестировать?
Добавили свой метод в модель Django — протестируйте его. Дополнили стандартное представление — протестируйте его. Но как узнать, что именно нужно протестировать?
Узнать это поможет библиотека coverage. Установите её:
pip install coverage
Теперь после каждого добавления или изменения кода запускайте coverage :
и создавайте отчёт:
Вы увидите, что именно нужно протестировать. Если предпочитаете увидеть отчёт в командной строке, запустите команду:
Сериализаторы Django
Сериализация — это конвертация объекта Python в другой формат. После сериализации можно сохранить объект в файл или послать его через сеть.
Почему сериализация необходима? Модель Django — это класс Python. Чтобы превратить её в данные в формате JSON, нужна сериализация.
Сериализаторы работают и в обратном направлении: они конвертируют JSON в объекты. Это позволяет:
Суммируя: сериализаторы в Django можно использовать для совершения операций с моделями Django через API.
Создаём представления
Если вы раньше работали с другими фреймворками, то можете удивиться, что в Django нет контроллеров.
Контроллеры содержат логику обработки запросов и возвращения ответов. В традиционной архитектуре MVC есть модель (Model), представление (View) и контроллер (Controller). Примеры MVC фреймворков: Rails (Ruby), Phoenix (Elixir), Laravel (PHP).
Django — это фреймворк MVT. MVT — это модель, представление и шаблон (Template). В Django есть много типов представлений: функции-представления, представления, основанные на классах, и обобщённые представления.
Используйте функции-представления только если изменение обобщенных представлений займет больше, чем написание представления заново.
Мы будем использовать обобщённые представления. Наше простое приложение будет:
С помощью трёх строк кода мы создали представление для обработки GET и POST запросов.
Чего ещё не хватает? Маршрутизации URL. Другими словами, нам нужно соединить URL и представления.
Настраиваем маршрутизацию url
from django.urls import path, include urlpatterns = [ path(», include(‘leads.urls’)), ]
# Application definition INSTALLED_APPS = [ # omitted for brevity ‘leads.apps.LeadsConfig’, ‘rest_framework’ ]
Запустим сервер Django:
python manage.py runserver
Перейдите по url http://127.0.0.1:8000/api/lead/ и вы увидите API:
Примечание в продакшене лучше отключить возможность просмотра API. Это можно сделать в конфигурации:
Соединяем Django и React
У многих разработчиков возникают вопросы по поводу того, как правильно соединить Django и React.
Должен ли роутер React взять на себя маршрутизацию? Нужно ли монтировать компоненты React в каждом шаблоне Django?
Ответ зависит от случая.
Есть следующие способы создания проекта на Django и React (они похожи почти для любого веб-фреймворка):
Если вы только начали работать с Django REST и React, избегайте варианта 2. Вместо этого выберите 1 (React в собственном приложении Django для фронтенда), если:
Если будете держать React близко к Django, то будет проще с авторизацией. Можно будет использовать встроенную систему авторизации Django для регистрации и входа пользователей. Используйте старую добрую авторизацию с помощью сессий и не беспокойтесь о токенах и JWT.
Выберите вариант 3 (смешанный вариант: мини-приложения React в шаблонах Django), если:
В данной статье мы будем использовать вариант 1.
Устанавливаем React и webpack
Создадим новое приложение Django для фронтенда:
django-admin startapp frontend
Вы увидите новую папку с названием frontend в вашей структуре папок:
Подготовим папки для хранения компонентов React:
Дальше установим React, webpack и babel. Перейдите в папку frontend и создайте окружение:
Установите webpack и webpack CLI:
Откройте package.json и запишите 2 скрипта для продакшна и для разработки:
Сохраните и закройте файл.
Установим babel, чтобы код был совместим со старыми браузерами, которые не поддерживают последние стандарты JavaScript:
Настроим Babel (по-прежнему находясь в папке frontend ):