Introdução

No desenvolvimento web moderno, separar backend e frontend se tornou uma prática comum. Essa arquitetura permite criar aplicações mais escaláveis, reutilizáveis e fáceis de manter. Uma combinação muito poderosa para isso é utilizar Vue.js no frontend e Django REST Framework no backend.

Enquanto o Vue.js é responsável pela interface e experiência do usuário, o Django REST Framework fornece uma API robusta para gerenciar dados, autenticação e regras de negócio.

Neste artigo vamos entender:

• O que é Vue.js
• O que é Django REST Framework
• Como eles trabalham juntos
• Vantagens dessa arquitetura
• Exemplo de comunicação entre frontend e backend

O que é Vue.js

Vue.js é um framework progressivo de JavaScript utilizado para construir interfaces interativas.

Ele é muito popular por ser:

• simples de aprender
• altamente reativo
• muito rápido
• fácil de integrar com APIs

Com Vue podemos criar:

• dashboards
• sistemas administrativos
• aplicações SPA (Single Page Application)

Exemplo de componente Vue consumindo uma API:

<script setup>
import { ref, onMounted } from "vue"
import axios from "axios"const products = ref([])onMounted(async () => {
  const response = await axios.get("http://localhost:8000/api/products/")
  products.value = response.data
})
</script>
<template>
  <div>
    <h1>Produtos</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import axios from "axios"const products = ref([])onMounted(async () => {
  const response = await axios.get("http://localhost:8000/api/products/")
  products.value = response.data
})
</script>
<template>
  <div>
    <h1>Produtos</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

O que é Django REST Framework

Django REST Framework (DRF) é uma biblioteca poderosa para construir APIs REST usando Python e Django.

Ele facilita:

• criação de endpoints
• serialização de dados
• autenticação
• permissões
• paginação

Exemplo de API simples no DRF:

from rest_framework import viewsets
from .models import Product
from .serializers import ProductSerializer

class ProductViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

from rest_framework import viewsets
from .models import Product
from .serializers import ProductSerializer

class ProductViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

Isso já cria automaticamente endpoints como:

Isso já cria automaticamente endpoints como:
GET /api/products/
POST /api/products/
PUT /api/products/{id}/
DELETE /api/products/{id}/

Como Vue e Django trabalham juntos

A comunicação acontece através de requisições HTTP.

Fluxo típico:

Vue (Frontend)
↓
HTTP Request (Axios / Fetch)
↓
Django REST API
↓
Banco de dados
↓
Resposta JSON
↓
Vue atualiza interface

Exemplo de resposta da API:

[
  {
    "id": 1,
    "name": "Notebook",
    "price": 3500
  }
]

O Vue recebe esse JSON e renderiza os dados na tela.

Autenticação entre Vue e Django

Um padrão muito usado é autenticação com JWT (JSON Web Token).

Fluxo:

1. Usuário faz login
2. API gera um token
3. Vue salva o token
4. Todas as requisições enviam o token no header

Exemplo:

Authorization: Bearer TOKEN_AQUI

Bibliotecas comuns:

Vue:

• axios
• pinia
• vue-router

Django:

• djangorestframework
• simplejwt

Vantagens dessa arquitetura

Usar Vue + Django traz vários benefícios:

Separação clara de responsabilidades

Backend:

• regras de negócio
• banco de dados
• autenticação

Frontend:

• interface
• interação do usuário
• experiência visual

Escalabilidade

A mesma API pode ser usada por:

• web
• aplicativo mobile
• sistemas externos

Desenvolvimento mais rápido

Frontend e backend podem ser desenvolvidos independentemente.

Exemplo de projeto real

Um exemplo de aplicação usando Vue + Django poderia ser:

Sistema de gestão com:

• login
• cadastro de clientes
• cadastro de produtos
• vendas
• dashboard

Backend:

• Django REST Framework
• PostgreSQL

Frontend:

• Vue 3
• Vuetify
• Axios

Conclusão

A combinação entre Vue.js e Django REST Framework é uma excelente escolha para construir aplicações web modernas.

Ela permite:

• criar interfaces rápidas e reativas
• desenvolver APIs robustas
• separar frontend e backend de forma profissional

Se você deseja desenvolver sistemas escaláveis e preparados para o futuro, essa arquitetura é uma ótima opção.