Nauč se s námi víc. Využij 50% zdarma na e-learningové kurzy.
discount week 50

Lekce 8 - Databázový klient ve Vue - Příprava projektu Nové

V minulé lekci, Dokončení kalkulačky ve Vue, jsme dokončili kalkulačku.

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á Angular 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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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.


 

Předchozí článek
Dokončení kalkulačky ve Vue
Všechny články v sekci
Vue.js
Článek pro vás napsal Samuel Hél
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje hlavně programování, nejvíce z oblasti webových technologií, dělá občasné video edity ze svých dovolených. Má rád memes a svou gf
Aktivity

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!