8. diel - Databázový klient vo Vue - Príprava projektu

V minulej lekcii, Dokončenie kalkulačky vo Vue , sme dokončili kalkulačku.

Dnes začneme pracovať na pokročilom projekte a postupne si tu vytvoríme plne funkčné klientsku aplikáciu pre databázu filmov a osobností, predstavujúcich režisérmi alebo herca. Komunikácia s databázou bude realizovaná prostredníctvom vopred pripraveného Restful API v Node.js. Klient bude umožňovať pohodlnú správu jednotlivých záznamov (filmov i osobností) v databáze a ich výpis v zozname bude možné filtrovať podľa rôznych dostupných parametrov.

Kód aplikácie bude maximálne stavať na využitie funkcionality čistého JavaScriptu (podľa štandardu ECMAScript 6) a samotné knižnice Vue, aby bol kurz maximálne univerzálny. Ak budete chcieť neskôr pridať akékoľvek ďalšie knižnice, nie je to problém.

Pre vývoj Vue klienta je potrebné mať nainštalované Node.js a na účely testovania aj MongoDB databázu. Tu je ukážka toho, ako bude vyzerať záverečná aplikácia:

Vytvorenie projektu

Náš projekt bude rozdelený do dvoch hlavných častí:

• klientská Angular aplikácie, ktorú si postupne naprogramujeme v rámci tohto tutoriálu
• serverová časť v Node.js pre spojenie s MongoDB databázou, ktorá bude dostupná na stiahnutie v príslušnom článku

Použitú architektúru s rozdelením jednotlivých častí projektu a ich vzájomnú komunikáciu znázorňuje nasledujúci diagram:

Šablóna Vue klienta

Na stiahnutie Vue šablóny pre klientsku aplikáciu môžeme použiť nasledujúci príkaz, spustený z koreňového adresára projektu:

vue create client

Zobrazí sa ponuka možností pre vytvorenie nového projektu, ako pri tvorbe 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

Pomocou šípok na klávesnici prejdite nadol a vyberte možnosť "Manually select features". Zobrazí sa nám táto ponuka:

? 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

Uistite sa, že máme 3 hviezdičky na nasledujúcich položkách. Následne všetko potvrdíme klávesou Enter. Po stlačení vyberieme tieto možnosti:

• Choose a version of Vue.js that you want to start the project with- Vyberieme 3.x (Preview) a potvrdíme klávesom 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, aj 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)
  • Teraz si môžete túto konfiguráciu uložiť pre budúce použitie. Ak chcete, zadajte "y" a potvrďte. Následne zadajte názov konfigurácie. V opačnom prípade zadáme "n" a potvrdíme.

Teraz sa spustí inštalácia Vue.

Hoci budeme potrebovať aj routovanie, nebudeme ho teraz vyberať. Router si nainštalujeme samostatne neskôr:)

Spustenie projektu

Teraz môžeme projekt spustiť pomocou príkazov:

cd client
npm run serve

Vo webovom prehliadači zadáme adresu http: // localhost: 8080 /. Prehliadač nám úvodné zobrazenie aplikácie, ktorú nám automaticky vygeneroval @vue/cli, čiže príkazový riadok Vue. Domovská obrazovka bude vyzerať nejako takto:

Štruktúra projektu

V našom textovom editore by sme mali vidieť nasledujúcu štruktúru súborov 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

Najprv venujme pozornosť súboru index.html v adresári public/. Všimnite si, že Vue pre nás předdefinoval tag <noscript>, ktorá sa zobrazí používateľom, ktorí nemajú vo svojom prehliadači povolený JavaScript. Správu v tagu <noscript> môžeme samozrejme ľubovoľne upraviť.

Ďalej si v tomto súbore môžeme všimnúť, že bol automaticky vytvorený element <div id="app">. Tento prvok predstavuje telo našej aplikácie. Budú do neho vložené všetky komponenty, ktoré do aplikácie napíšeme.

Adresár src/ je miesto, kde budeme písať náš kód, ako sme to robili doteraz.

Adresár src/components/ predstavuje miesto, kam budeme ukladať jednotlivé komponenty Vue. Zatiaľ obsahuje automaticky generovanú komponent HelloWorld.vue.

Ďalší dôležitý súbor je App.vue, ktorý bol vygenerovaný v adresári src/. Toto je základná koreňová komponenta našej aplikácie, ktorú upravíme v ďalšej lekcii.

V neposlednom rade sa pozrieme na súbor main.js, ktorý nájdeme aj v adresári src/:

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

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

Súbor importuje metódu createApp() z balíka Vue a základné koreňovú komponent App z balíka App.vue. Spustením metódy createApp() sa potom vytvorí aplikácie Vue a komponenta App.vue sa priradí k prvku <div id="app">, ktorý bol vytvorený v súbore index.html.

V ďalšej lekcii, Databázový klient vo Vue - Bootstrap a komponenty , si nainštalujeme potrebné balíky pre frontend a vysvetlíme si jednotlivé komponenty.