Pular para conteúdo

Aula 12 – Projeto Prático II (CRUD Completo) 🚀

Nesta aula prática, vamos aplicar a "Trindade do Vue Moderno": Vue Router + Axios + Pinia. O objetivo é construir um sistema de Gerenciamento de Produtos com persistência em uma API simulada.

🎯 Escopo do Projeto

Vamos desenvolver um CRUD (Create, Read, Update, Delete) que realize: 1. Listagem: Buscar produtos de uma API e exibir em cards (Axios + Pinia). 2. Criação: Formulário para adicionar novos itens (POST). 3. Edição: Alterar dados de um produto existente (PUT). 4. Exclusão: Remover itens da API e da tela (DELETE). 5. Navegação: Páginas separadas para "Home", "Produtos" e "Novo Produto".

🏗️ Arquitetura em Camadas

A organização profissional separa as responsabilidades:

graph TD
    View[Views / Páginas] --> Store[Pinia Stores]
    Store --> Service[Axios Services]
    Service --> API[(API Externa)]

O que cada camada faz?

  • Service: Apenas faz a requisição axios.get('/produtos').
  • Store: Chama o service e guarda o resultado na ref([]).
  • View: Apenas exibe o que está na Store e chama funções de clique.

🖥️ Estrutura de Pastas Recomendada

# Organize seu projeto assim:
src/
  services/
    produtoService.js
  stores/
    produtoStore.js
  views/
    ListagemProdutos.vue
    FormProduto.vue
  router/
    index.js

💡 Dicas de Implementação

API de Teste

Use o JSON Server localmente para ter uma API real rodando em minutos, ou use mocks simples no código se preferir focar apenas no Vue.

Chave Reativa

Ao editar um produto, lembre-se de usar o useRoute().params.id do Vue Router para buscar o ID correto da URL.

📊 Fluxo de Dados do CRUD

sequenceDiagram
    participant U as Usuário
    participant V as View
    participant S as Store
    participant A as API
    U->>V: Clica em 'Excluir'
    V->>S: store.excluir(id)
    S->>A: DELETE /produtos/1
    A-->>S: 200 OK
    S->>S: Remove do array local
    Note right of S: Reatividade atualiza a View automaticamente!

📝 Checkpoint de Entrega

Para concluir esta aula, o aluno deve demonstrar: 1. Navegação fluida entre páginas sem recarregar o browser. 2. Dados sendo buscados de uma fonte externa (real ou mock). 3. Uso do Pinia para gerenciar o array de produtos.

🚀 Próximo Módulo: Vamos profissionalizar ainda mais com Boas Práticas, Estilização e Deploy!