Get best of the week

Usando o VueJS com Django

Uma tradução do artigo foi preparada antes do início do curso Python Web Developer .



Introdução


Agora estou trabalhando em um projeto muito interessante. E tudo é complicado, porque o projeto em si é muito amplo e eu trato dele sozinho no meu tempo livre, enquanto trabalho em período integral. Portanto, devo ser eficaz. Felizmente, eu uso o Django com sua abordagem de "bateria incluída" .

Eu uso toda a funcionalidade do Django, que acelera o desenvolvimento, e eu não gostaria de perder de vista seu mecanismo de modelo. Portanto, o back-end do Django e o front-end do JavaScript SPA não são uma opção para mim. No entanto, mesmo o desenvolvedor de back-end mais ávido deve admitir que algumas coisas precisam ser implementadas no lado do cliente. Ações menores do usuário não devem exigir o recarregamento da página. Além disso, algumas partes do aplicativo Web que eu criei exigem uma interação do usuário bastante complicada.

Por tradição, pode-se misturar Django e jQuery para obter o comportamento desejado. Mas agora existem novas tecnologias JavaScript como React e Vue. Como nosso objetivo é encontrar uma estrutura que possamos usar com o Django sem reescrever tudo do zero, usaremos o Vue como uma alternativa mais fácil. Neste artigo, mostrarei como começar a usar o Vue com o Django com o mínimo de esforço.

Instalação e configuração


Uma das razões para usar o Vue é a excelente documentação . Tem muitos exemplos, uma pesquisa decente e um sumário claro. O objetivo deste artigo é mostrar que você pode começar a usar o Vue em seus projetos Django imediatamente sem a configuração complicada de uma hora. Portanto, usaremos o método de conexão mais simples Vue.js, adicionando-o via tag <script>.

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

Agora estamos prontos para criar nossa primeira instância Vue.js:

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

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

Peguei este exemplo no guia oficial de introdução. No entanto, há algo mais. Por padrão, Django e Vue usam as mesmas tags de modelo. Portanto, precisamos separar explicitamente o Vue do Django para evitar conflitos com o mecanismo de modelo do Django.

Acesse dados do Django do Vue


A maneira mais fácil de obter dados é usar o filtro internojscon_script do Django . Dessa forma, você pode começar imediatamente a usar seus modelos de Django como dados para instâncias do Vue.

Em HTML:

{{ django_template_variable|json_script:"djangoData" }}

E, em JavaScript, carregamos os dados em uma variável:

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


E ela está pronta para uso com o Vue:

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

Executando solicitações assíncronas no back-end


Uma das tarefas mais comuns no front-end no Vue é consultar o aplicativo do servidor no back-end. Com um aplicativo Django completo, não precisamos fazer isso com todas as ações do usuário. Em alguns casos, uma recarga de página inteira é excelente, e o sistema de modelos do Django fornecerá todos os benefícios. Mas, para melhorar a experiência do usuário e aproveitar ao máximo o Vue, ainda precisamos fazer solicitações de back-end em alguns casos.

O próprio Vue não sabe como lidar com solicitações. Neste artigo vou usar axioscomo também é recomendado pela documentação oficial do Vue. Você pode escolher outras alternativas. Para passar no mecanismo de proteção CSRF do Django, os axios devem incluir o cookie apropriado em suas solicitações. A maneira mais fácil é definir valores de axios globais por padrão:

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

Além disso, podemos criar uma instância de axios com as configurações necessárias:

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

Seu modelo do Django deve conter uma tag {% csrf_token %}ou, alternativamente, a visualização correspondente deve usar um decorador ensure_csrf_cookie(). O restante do back-end padrão para uma sessão do Django para autenticação funcionará loginRequiredimediatamente , o que significa que você pode anotar seus serviços no back-end com coisas como esta e simplesmente funcionará. Para fazer uma solicitação, você pode usar axios:

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

Essa chamada pode ser feita no mountedgancho da instância do Vue ou em qualquer outro lugar onde você possa colocar o código JavaScript.

Se você ativou o CSRF_USE_SESSIONS CSRF_COOKIE_HTTPONLYDjango nas configurações, precisará ler o token CSRF no DOM. Para aprender mais sobre isso, consulte a documentação oficial do Django .

Conclusão


Quando você pesquisar no Django + Vue, a maioria dos resultados da pesquisa será sobre como usar o Django no back-end e o Vue para um projeto separado no front-end. Ter dois projetos independentes complica o trabalho e você perde o acesso ao sistema de modelos do Django, que por sua vez é uma maneira muito eficaz de economizar tempo. Por outro lado, o acesso a uma estrutura como o Vue pode fazer maravilhas no mundo dos aplicativos da Web que vão além da funcionalidade CRUD.

Felizmente, não precisamos escolher entre eles. Este guia mostra que você pode acompanhar dois coelhos!


Expandindo os recursos do Django (seminário on-line gratuito).

More articles:


All Articles