Lekce 9 - Databázový klient ve Vue - Příprava projektu

V předchozí lekci, Jednoduchá kalkulačka ve Vue, jsme dokončili poměrně složitou kalkulačku ve Vue, tentokrát to zkusíme jednodušeji.

Dnes začneme pracovat na pokročilém projektu a postupně si zde vytvoříme plně funkční klientskou aplikaci pro databázi filmů a osobností, představujících režiséry nebo herce. Komunikace s databází bude realizována prostřednictvím předem připraveného RESTful API v Node.js. Klient bude umožňovat pohodlnou správu jednotlivých záznamů (filmů i osobností) v databázi a jejich výpis v seznamu bude možné filtrovat podle různých dostupných parametrů.

Kód aplikace bude maximálně stavět na využití funkcionality čistého JavaScriptu (podle standardu ECMAScript 6) a samotné knihovny Vue, aby byl kurz maximálně univerzální. Pokud budete chtít později přidat jakékoli další knihovny, není to problém.

Pro vývoj Vue klienta je potřeba mít nainstalované Node.js a pro účely testování i MongoDB databázi. Zde je ukázka toho, jak bude vypadat závěrečná aplikace:

Vytvoření projektu

Náš projekt bude rozdělen do dvou hlavních částí:

• klientská Vue aplikace, kterou si postupně naprogramujeme v rámci tohoto tutoriálu
• serverová část v Node.js pro spojení s MongoDB databází, která bude dostupná ke stažení v příslušném článku

Použitou architekturu s rozdělením jednotlivých částí projektu a jejich vzájemnou komunikaci znázorňuje následující diagram:

Šablona Vue klienta

Ke stažení Vue šablony pro klientskou aplikaci můžeme použít následující příkaz, spuštěný z kořenového adresáře projektu:

vue create client

Zobrazí se nabídka možností pro vytvoření nového projektu, jako při tvorbě kalkulačky:

Vue CLI v4.5.13
? Please pick a preset:
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

Pomocí šipek na klávesnici přejděte dolů a vyberte možnost "Manually select features". Zobrazí se nám tato nabídka:

? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Ujistěte se, že máme 3 hvězdičky na následujících položkách. Následně vše potvrdíme klávesou Enter. Po stisknutí vybereme tyto možnosti:

• Choose a version of Vue.js that you want to start the project with
  • Vybereme 3.x (Preview) a potvrdíme klávesou Enter
• Pick a linter / formatter config: (Use arrow keys)
  • Potvrdíme ESLint with error prevention only
• Pick additional lint features: (Press space> to select, a> to toggle all, i to invert selection)
  • Potvrdíme Lint on save
• Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  • Potvrdíme In dedicated config files
• Save this as a preset for future projects? (y/N)
  • Nyní si můžete tuto konfiguraci uložit pro budoucí použití. Pokud chcete, zadejte "y" a potvrďte. Následně zadejte název konfigurace. V opačném případě zadáme "n" a potvrdíme.

Nyní se spustí instalace Vue.

Ačkoliv budeme potřebovat i routování, nebudeme ho nyní vybírat. Router si nainstalujeme samostatně později

Spuštění projektu

Nyní můžeme projekt spustit pomocí příkazů:

cd client
npm run serve

Ve webovém prohlížeči zadáme adresu http://localhost:8080/. Prohlížeč nám zobrazí úvodní stránku aplikace, kterou nám automaticky vygeneroval @vue/cli, neboli příkazový řádek Vue. Domovská obrazovka bude vypadat nějak takto:

Struktura projektu

V našem textovém editoru bychom měli vidět následující strukturu souborů nového projektu:

client/
├───node_modules/
│    └─ xx adresářů
├───public/
│    ├─ favicon.ico
│    └─ index.html
├───src/
│   ├───assets/
│   │     └─ logo.png
│   ├───components/
│   │     └─ HelloWorld.vue
│   ├─ App.vue
│   └─ main.js
├─ .browserslistrc
├─ .eslintrc.js
├─ .gitignore
├─ babel.config.js
├─ package.json
├─ package-lock.json
└─ README.md

Nejprve věnujme pozornost souboru index.html v adresáři public/. Všimněte si, že Vue pro nás předdefinoval tag <noscript>, která se zobrazí uživatelům, kteří nemají ve svém prohlížeči povolený JavaScript. Zprávu v tagu <noscript> můžeme samozřejmě libovolně upravit.

Dále si v tomto souboru můžeme všimnout, že byl automaticky vytvořen element <div id="app">. Tento prvek představuje tělo naší aplikace. Budou do něj vloženy všechny komponenty, které do aplikace napíšeme.

Adresář src/ je místo, kde budeme psát náš kód, jako jsme to dělali doposud.

Adresář src/components/ představuje místo, kam budeme ukládat jednotlivé komponenty Vue. Prozatím obsahuje automaticky generovanou komponentu HelloWorld.vue.

Další důležitý soubor je App.vue, který byl vygenerován v adresáři src/. Toto je základní kořenová komponenta naší aplikace, kterou upravíme v další lekci.

V neposlední řadě se podíváme na soubor main.js, který najdeme také v adresáři src/:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Soubor importuje metodu createApp() z balíku Vue a základní kořenovou komponentu App z balíku App.vue. Spuštěním metody createApp() se pak vytvoří aplikace Vue a komponenta App.vue se přiřadí k prvku <div id="app">, který byl vytvořen v souboru index.html.

V další lekci, Databázový klient ve Vue - Bootstrap a komponenty, si nainstalujeme potřebné balíčky pro frontend a vysvětlíme si jednotlivé komponenty.