Как подружить django и vue.js

Введение

Мне часто по жизни доводится работать с проектами, где есть SPA на Vue и какой-то бэк на Django + DRF. Раскидывать их по разных контейнерам в докере и рулить маршрутами на стороне nginx, конечно, круто, но а что если нужно передать какой-то параметр (например, токен) в Vue и мы не можем авторизовать пользователя просто так?

Кейс

Есть такая штука, как битрикс (да, я знаю, питону не место там, но всё же он там может быть). У него есть возможность установки внешних приложений из маркетплейса. И работает оно просто — открывается iframe и посылается POST запрос на URI обработчика приложения. В этом запросе битрикс передаёт токены для доступа, id пользователя, домен портала и прочую полезную инфу (место вызова приложения, тариф и прочее). Кстати, в битриксе это называют приложением второго типа (Первый тип без бэка вообще. А третий без фронта xD).

Подкручиваем бэк

Для начала стоит создать приложение, которое будет сёрвить фронт (можно и не создавать, но мне кажется, что пилить проект по кускам, когда одно приложение отвечает за пользователей, другое за фронт, третье за посты/товары/корзины и многое другое и так далее). Сделаем с нуля проект django, вкинем туда venv и приступим

django-admin startproject vue_django_test_app cd vue_django_test_app python3 -m venv venv source venv/bin/activate pip install django pip freeze > requirements.txt python3 ./manage.py startapp app

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

Во-первых, нам нужно подредачить settings.py и добавить приложение app в INSTALLED_APPS, прописать STATIC_ROOT и указать путь к шаблонам

INSTALLED_APPS = [   ...   'app' ] ... TEMPLATES = [     {       ...       'DIRS': [BASE_DIR / 'templates'],       ...     } ] ...  STATIC_ROOT = BASE_DIR / 'static/'

Теперь займёмся настройкой маршрутизации. По пути vue_django_test_app/urls.py нужно подключить вьюху, которая отправит шаблон (чуть позже напишем). Также на деве будем обслуживать статику через встроенный механизм django

from django.urls import path from django.contrib.staticfiles.urls import staticfiles_urlpatterns from app.views import FrontendTemplateView  urlpatterns = [     path('', FrontendTemplateView.as_view()) ] urlpatterns += staticfiles_urlpatterns

Пишем представление Django

Как мы помним, нам нужно передать токены и GET параметры на фронт. Для этого нужно написать своё представление. Напишем его в app/views.py

from django.shortcuts import render from django.views import View import json   class FrontendTemaplteView(View):      def post(self, request):     # Собираем все параметры запроса в контекст     context = {     	'post_data': request.body,       'get_data': json.dumps(request.GET) # Сериализуем в JSON     }          # Отправляем клиенту отрендеренный с контекстом шаблон     return render(request, 'index.html', context)     

Абсолютно простая вьюшка. Думаю, легко понять, что осталось сделать, чтобы пробросить данные)

Создание и настройка сборки vue приложения

Допустим, какой-то бэк на django у нас уже есть. Заходим в корень проекта и создаём проект vue.js (пусть будет frontend)

vue create frontend

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

Затем нам нужно подредачить vue.config.js, чтобы webpack автоматом клал шаблон и статику в директории django

// Путь к приложению в котором храниться статика django  const static_dir = '../app/static' // Путь, относительно static_dir // В него webpack положит шаблон Vue приложения const template_path = '../../templates/index.html'  module.exports = {   // Paths   // Рабочая директория сборки    // Я обычно указываю директорию приложения django, которое отвеает за фронт   outputDir: process.env.NODE_ENV === 'production' ? static_dir : 'dist/',    // Куда пойдёт шаблон проекта   indexPath: process.env.NODE_ENV === 'production' ? template_path : 'index.html',   // Куда пойдут ассеты (относительно outputDir)   assetsDir: '', // ассеты храним там же, где и JS/CSS   // Путь по которому можно достать статику   // Нужно указать тот, который прописан в STATIC_URL настроек django   publicPath: process.env.NODE_ENV === 'production' ? 'static' : '/', }

Проверка на NODE_ENV нужна для того, что дев сервер webpack мог нормально отработать при запуске npm/yarn run serve (ну мало ли нужно будет)

Модификация шаблона webpack

Осталось лишь дать понять django куда пихать контекст. И нам в этом поможет файл public/index.html — из него webpack соберёт окончательный html файл и положит его в папку templates. Добавим в этот файл маленький скрипт в котором создадим переменную глобального скоупа и положим туда наши JSON-чики

<head>   ... 	<script>   	window.data = {     	post: {{post_data | safe}}, 	    get: {{get_data | safe}},   	} 	</script>   ... </head>

Фильтр safe отключает экранирование символов, чтобы JSON остался валидным.

Финиш

Вот и всё готово! Осталось лишь собрать проект!

Из корня проекта:

cd frontend; npm run build; cd ../ python3 ./manage.py collectstatic --noinput python3 ./manage.py makemigrations; python3 ./manage.py migrate pip install gunicorn gunicorn vue_django_test_app.wsgi