Использование VueJS вместе с Django

Перевод статьи подготовлен в преддверии старта курса «Web-разработчик на Python».

---

Введение

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

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

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

Установка и настройка

Одна из причин пользоваться Vue – это его превосходная документация. В ней есть множество примеров, достойный поиск и четкое оглавление. Цель этой статьи показать, что вы можете начать пользоваться Vue в своих проектах на Django сразу же без сложной многочасовой настройки. Поэтому воспользуемся самым простым методом подключения Vue.js, добавив его с через тег <script>.

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Теперь мы готовы создать наш первый экземпляр Vue.js:

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

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

Доступ к данным Django из Vue

Самый простой способ получить данные – это использовать встроенный фильтр jscon_script из Django. Таким образом, вы можете сразу начать использовать свои модели Django в качестве данных для экземпляров Vue.

В HTML:

{{ django_template_variable|json_script:"djangoData" }}

А затем на JavaScript мы загрузим данные в переменную:

let jsVariable = JSON.parse(document.getElementById('djangoData').textContent);

И она уже готова к использованию с Vue:

new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: jsVariable
})

Выполнение асинхронных запросов на бэкенде

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

Сам по себе Vue не умеет обрабатывать запросы. В этой статье я воспользуюсь axios, поскольку он также рекомендуется официальной документацией Vue. Вы можете выбрать и другие альтернативы. Чтобы передать механизм защиты Django от CSRF, axios должен включить соответствующий файл cookie в свои запросы. Самый простой способ – это установить глобальные значения axios по умолчанию:

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";

Помимо этого, мы можем создать экземпляр axios с необходимыми настройками:

var instance = axios.create({
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: "X-CSRFTOKEN",
});

Ваш шаблон Django должен содержать тег {% csrf_token %} или, как вариант, соответствующее представление должно использовать декоратор ensure_csrf_cookie(). Остальная часть бэкенда сессии Django по умолчанию для аутентификации будет работать из коробки, а это значит, что вы можете аннотировать свои сервисы на бэкенде такими вещами как loginRequired, и это будет просто работать. Чтобы сделать запрос, можно использовать axios:

axios.post('/django/backend/endpoint', {
    data: jsVariable 
})
    .then(function (response) {
        // handle response
    })
    .catch(function (error) {
        // handle error
    });

Этот вызов можно сделать из mounted хука экземпляра Vue или любого другого места, где вы можете положить код на JavaScript.

Если вы активировали CSRF_USE_SESSIONS или CSRF_COOKIE_HTTPONLY в настройках Django, вам нужно будет прочитать CSRF-токен из DOM. Чтобы узнать об этом подробнее, ознакомьтесь с официальной документацией Django.

Заключение

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

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

---

Расширение возможностей Django(бесплатный вебинар).