Lekce 15 - Databázový klient ve Vue - Detail, editace a odstranění osob

V minulé lekci, Databázový klient ve Vue - Filtrování a výpis osob, jsme se podívali na komponenty pro filtrování a výpis osoby.

V dnešní lekci si naprogramujeme zobrazení detailu osoby, její úpravu údajů a také odstranění.

Routování

Jak jistě už víme, detail a editaci osoby budeme dělat přes jiné URL adresy. Ke každé funkcionalitě si vytvoříme další routy v souboru router/index.js:

{
  path: "/people/show/:id",
  name: "PeopleShow",
  component: () => import("@/components/People/PersonShow"),
},
{
  path: "/people/edit/:id",
  name: "PeopleEdit",
  component: () => import("@/components/People/PersonEdit"),
},

Nyní můžeme navštívit adresy /people/show/1 či /people/edit/1. Samozřejmě za předpokladu, že existuje osobnost s ID 1 (v MongoDB databázi však máme většinou hexadecimální hodnotu, například 61372b34766f9f0900b2ad67). Zda osobnost s tímto ID existuje je zatím jedno, nemáme totiž přichystané šablony, které by něco vypisovaly. Také nám chybí ve výpisu osob tlačítka na editaci či detail. Pojďme to napravit.

...konec náhledu článku...
Pokračuj dál