Перевод статьи подготовлен в преддверии старта курса «Web-разработчик на Python».
![](https://habrastorage.org/r/w1560/webt/nl/l8/j3/nll8j3yukrxa2szuf4bjfx9dleu.png)
Сейчас я работаю над очень интересным проектом. И в нем все сложно, потому что сам проект очень масштабный, а я занимаюсь им один в свободное время, при этом работая полный рабочий день. Поэтому я должен быть эффективным. К счастью, я использую Django с его подходом «батарейки в комплекте».
Я использую весь функционал Django, который ускоряет разработку, и я не хотел бы упускать из виду его шаблонизатор. Поэтому бэкенд на Django и фронтенд на JavaScript SPA – это для меня не вариант. Однако даже самый заядлый бэкенд-разработчик должен признать, что некоторые вещи нужно реализовывать на стороне клиента. Незначительные действия пользователя не должны требовать перезагрузки страницы. Помимо этого, некоторые части веб-приложения, которое я создаю, требуют довольно сложного взаимодействия с пользователем.
По традиции, можно было бы смешать Django и jQuery, чтобы получить желаемое поведение. Но сейчас есть более новые технологии JavaScript, такие как React и Vue. Поскольку наша цель состоит в том, чтобы найти фреймворк, который мы сможем использовать вместе с Django не переписывая все с нуля, мы воспользуемся Vue, как более легкой альтернативой. В этой статье я покажу, как начать пользоваться Vue вместе с Django с минимальными усилиями.
Одна из причин пользоваться Vue – это его превосходная документация. В ней есть множество примеров, достойный поиск и четкое оглавление. Цель этой статьи показать, что вы можете начать пользоваться Vue в своих проектах на Django сразу же без сложной многочасовой настройки. Поэтому воспользуемся самым простым методом подключения
Теперь мы готовы создать наш первый экземпляр
Я взял этот пример из официального руководства по началу работы. Однако есть кое-что еще. По умолчанию Django и Vue используют одни и те же шаблонные теги. Следовательно, нам нужно явно отделить Vue от Django, чтобы избежать конфликтов с шаблонизатором Django.
Самый простой способ получить данные – это использовать встроенный фильтр
В HTML:
А затем на JavaScript мы загрузим данные в переменную:
И она уже готова к использованию с Vue:
Одной из наиболее частых задач на фронтенде на Vue является выполнение запросов к серверному приложению на бэкенде. С полноценным приложением на Django, нам не нужно делать это с каждым действием пользователя. В некоторых случаях полная перезагрузка страницы – это отлично, и система шаблонов Django предоставит все преимущества. Но чтобы улучшить пользовательский опыт и воспользоваться всеми преимуществами Vue, нам все равно может понадобиться делать запросы на бэкенд в некоторых случаях.
Сам по себе Vue не умеет обрабатывать запросы. В этой статье я воспользуюсь axios, поскольку он также рекомендуется официальной документацией Vue. Вы можете выбрать и другие альтернативы. Чтобы передать механизм защиты Django от CSRF, axios должен включить соответствующий файл cookie в свои запросы. Самый простой способ – это установить глобальные значения axios по умолчанию:
Помимо этого, мы можем создать экземпляр axios с необходимыми настройками:
Ваш шаблон Django должен содержать тег
Этот вызов можно сделать из
Если вы активировали
Когда вы будете гуглить про Django + Vue, большинство результатов поиска будут о том, как использовать Django на бэкенде, а Vue для отдельного проекта на фронтенде. Наличие двух независимых проектов усложняет работу, и вы теряете доступ к системе шаблонов Django, которая в свою очередь является очень эффективным средством экономии времени. С другой стороны, доступ к такому фреймворку как Vue может творить такие чудеса в мире веб-приложений, которые выходят за рамки функциональности CRUD.
К счастью, нам не нужно выбирать между ними. Это руководство показывает, что вы вполне можете угнаться за двумя зайцами!
Расширение возможностей Django(бесплатный вебинар).
![](https://habrastorage.org/webt/nl/l8/j3/nll8j3yukrxa2szuf4bjfx9dleu.png)
Введение
Сейчас я работаю над очень интересным проектом. И в нем все сложно, потому что сам проект очень масштабный, а я занимаюсь им один в свободное время, при этом работая полный рабочий день. Поэтому я должен быть эффективным. К счастью, я использую 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(бесплатный вебинар).