Projeto SerieLog — Vue Router e Remoção

Disciplina: Programação Web 2 Assunto: Roteamento Client-Side com Vue Router Professor: Me. Danilo Bueno Grupos: duplas Duração: 4 aulas de 50 minutos em sala

Importante

• Material de apoio — Vue Router e Roteamento Client-Side
• Descrição completa do projeto SerieLog

Contextualização

O SerieLog já lista e cadastra séries. O time de produto voltou com novos pedidos: a tela de listagem e o formulário de cadastro precisam ser rotas separadas, com URLs próprias — / para a lista e /series/nova para o cadastro. Além disso, o usuário precisa conseguir remover séries do catálogo.

Você vai continuar no mesmo projeto Vue da aula anterior, instalando o Vue Router e reorganizando o código em views distintas.

Cronograma

Missão 1 — Configurando o Vue Router

O objetivo desta missão é instalar o Vue Router e fazer o App.vue funcionar como casca de navegação.

1.1 Instale o Vue Router no projeto:

npm install vue-router

Crie o arquivo src/router/index.js com duas rotas: / apontando para HomeView e /series/nova apontando para NovaSerieView. (As views ainda não existem — pode usar null ou criar arquivos vazios por enquanto.)

1.2 Em src/main.js, importe o router e registre-o com app.use(router) antes de app.mount('#app').

1.3 Substitua todo o conteúdo de App.vue por uma <nav> com dois <RouterLink> (um para / e outro para /series/nova) seguido de <RouterView />.

Por que usar <RouterLink to="/series/nova"> em vez de <a href="/series/nova">? O que acontece com o estado da aplicação Vue se você clicar num <a href> normal?

Missão 2 — Separando em views

O objetivo desta missão é mover o código do App.vue original para as duas views.

2.1 Crie o arquivo src/views/HomeView.vue. Mova para ele toda a parte de listagem: o fetch GET, a variável series, o v-for, e os computed totalSeries e totalAssistidas.

2.2 Crie o arquivo src/views/NovaSerieView.vue. Mova para ele o formulário de cadastro: o objeto novaSerie, a função cadastrar e o template do <form>.

2.3 Abra o navegador, navegue entre as duas rotas pela <nav> e confirme que cada tela funciona corretamente: a listagem carrega as séries e o formulário cadastra.

Por que faz sentido cada view buscar seus próprios dados no onMounted, em vez de buscar tudo no App.vue e distribuir via props?

Missão 3 — Removendo séries

O objetivo desta missão é implementar a exclusão de séries com fetch DELETE.

3.1 Em HomeView.vue, adicione um botão “Remover” ao lado de cada série no v-for. O botão deve chamar uma função remover passando o id da série como argumento.

3.2 Implemente a função remover(id). Ela deve fazer um fetch com method: "DELETE" para http://localhost:3000/series/:id.

3.3 Após o fetch retornar com sucesso, atualize series.value removendo o item com .filter() — sem fazer um novo fetch GET.

Por que atualizamos series.value manualmente com .filter() após o DELETE, em vez de chamar o fetch GET novamente para recarregar a lista do servidor?

Missão 4 — Redirecionando após o cadastro

O objetivo desta missão é fazer o usuário ser redirecionado para a listagem automaticamente após cadastrar uma série.

4.1 Em NovaSerieView.vue, importe useRouter do vue-router e crie a instância: const router = useRouter().

4.2 No final da função cadastrar, após o push no array, adicione router.push('/') para redirecionar o usuário para a tela de listagem.

4.3 Teste: cadastre uma série e confirme que você é redirecionado para / e que a nova série aparece na lista.

O que aconteceria com a experiência do usuário se não houvesse o router.push('/') após o cadastro?

Desafio — Crie a rota /series/:id com um componente SerieDetalheView.vue. Use useRoute().params.id para buscar a série específica com GET http://localhost:3000/series/:id no onMounted e exiba todos os dados dela. Na listagem da HomeView, torne o título de cada série um <RouterLink :to="'/series/' + serie.id">.