Nuxt.js: Główne informacje
Prosty i Nowoczesny Framework dla Vue.js
7 godz. 2 min · Vue.js · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego się nauczysz
- Praktyczny kurs, praktyczny projekt: klon Wikipedii
- Migracja statycznej strony HTML do ekosystemu Nuxt
- Tworzenie klasycznych komponentów VueJS
- Przygotowanie własnego API i konsumpcja zewnętrznych endpointów
- Tworzenie i wykorzystanie modułów i pluginów do Nuxt
- SSR - Server Side Rendering
- Programowanie z duchem idei progressive enhancement
- Animacje podczas przejść między podstronami
- Wsparcie dla różnych wersji językowych
- Niebanalne funkcjonalności aplikacji
- Optymalizacja dla wyszukiwarek internetowych
Praktyczny kurs - praktyczny projekt
W tym projekcie tworzyć będziemy praktyczny projekt - klona Wikipedii! Minipedia pobierze dane z prawdziwego źrodła danych, zewnętrznego API WikiMedia - będzie łudząco podobna do oryginału oraz współdzieliła najważniejsze funkcjonalności, takie jak dostarczanie treści w różnych wersjach językowych, możliwość wyszukiwania artykułów, czy pobieranie najpopularniejszych wpisów dla danego języka. Stworzymy także podstronę wyświetlającą za każdym razem losowy artykuł w danej wersji językowej.Zobaczysz też, jak dokonać migracji ze statycznej strony HTML na Nuxt - oraz jak tworzyć przykładowe komponenty podczas tego procesu.Dzięki temu wszystkiemu, dowiesz się jak wykorzystać nabytą wiedzę w praktyce.
Renderowanie po stronie serwera
Dzięki Nuxtowi dowiesz się jak optymalizować Twoje strony www z duchem idei progressive enhancement, dostarczając coraz to lepsze doświadczenia dla swoich użytkowników oraz tworząc aplikację napisaną w 100% w JavaScript, która będzie działała nawet wtedy, gdy użytkownik jawnie wyłączy go w przeglądarce! To wszystko za SSR (Server Side Rendering), dzięki któremu treści będą gotowe do konsumpcji już przy wstępnej, pierwszej odpowiedzi z serwera WWW.Oczywiście, ma to swoje implikacje na wydajność naszej aplikacji - sprawiając że Lighthouse czy optymalizacja pod SEO staje się coraz prostsza!
Najciekawsze pluginy i moduły
Czymże jest ekosystem danego frameworka bez wsparcia społeczności! Dlatego podczas tego kursu nauczysz się instalować i wykorzystywać różne pluginy i moduły, które zaoszczędzą Ci dużo czasu. Dowiesz się też, jak tworzyć własne moduły - które rozszerzą działanie Twojej aplikacji Nuxt w sposób czysty i zarządzalny.
Tworzenie API
Nuxt jest frameworkiem w którym pracujemy zarówno po stronie front-endu, jak i back-endu. W związku z czym, stworzymy swoje własne API (bazujące na express.js) które będzie pewnego rodzaju pośrednikiem pomiędzy API WikiMedia oraz Twoją aplikacją internetową.
Routing w Nuxt
W tym kursie, dowiesz się także jak tworzyć swoje własne Middleware'y - czyli fragmenty kodu wywoływane pomiędzy przechodzeniem między stronami, czy podczas innych zapytań HTTP.Dodatkowo, zobaczysz jakie narzędzia daje nam Nuxt aby tworzyć progresywne aplikacje internetowe, oferując wsparcie dla takich funkcjonalności jak np. animacje między przejściami pojedynczymi podstronami naszego serwisu.
Lokalizacja i tłumaczenie danych
Tajemnicze i18n - czyli numeronim odpowiadający angielskiemu słowu "internalisation" - odnosi się w kontekście web developmentu do tłumaczenia danych na różne języki. Podczas realizacji projektu Minipedii, nie tylko wykorzystamy standardowe podejście do tłumaczeń stałych elementów naszego interfejsu użytkownika, ale także przetłumaczymy same dane zwracane z API, wykorzystując inną wersję językową w zależności od preferencji użytkownika!
Optymalizacja dla wyszukiwarek internetowych
Poznasz też kilka ciekawych pluginów i rozwiązań dotyczących optymalizacji pod SEO - poza faktem, że podejście spełniające intencje użytkownika jest najlepszym, co możemy zrobić - pluginy generujące nam mapę stron automatycznie na podstawie zadeklarowanych przez nas podstron, czy generatory danych jsonld pomogą w pozycjonowaniu Twojej wydajnej aplikacji jeszcze wyżej w hierarchii wyszukiwarek.
Dla kogo jest ten kurs?
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End, z naciskiem na umiejętność posługiwania się JavaScriptem oraz solidne podstawy NodeJS. Konieczna jest znajomość Vue, jako że Nuxt jest frameworkiem korzystającym z niego u swoich podstaw. Jeśli czujesz się dość swobodnie w wyżej wymienionych aspektach web developmentu, ten kurs będzie idealny dla Ciebie.
Cześć!
W tej lekcji będziemy tworzyli trzeci i ostatni komponent w tej sekcji
kursu, w którym będzie sekcja z głównymi informacjami o danej postaci czy danym
obiekcie, który jest omawiany na danej naszej podstronie.
W tym momencie będzie to informacja z biografią o kurczaku.
No i oczywiście w zależności od tego,
jakie inne strony będziemy później ładowali to będzie to troszkę inaczej.
Tak jak wspominałem my to troszkę uprościłem.
Ja tutaj starałem się zachować strukturę
Wikipedii, czyli aby była to tabelka z nagłówkami, z odpowiednimi
wierszami i z odpowiednimi wartościami dla każdego wiersza czy kolumny.
Będzie to problematyczne niestety, ponieważ każda jedna strona na Wikipedii
posiada różne struktury, w związku z czym ciężko będzie stworzyć
komponent, który będzie renderować wszystko idealnie, ale możemy spróbować
i po prostu ewentualnie zrezygnować z niektórych funkcjonalności.
Później oczywiście
jak wiemy nie zależy tutaj na tym, aby zrobić klona Wikipedii czy konkurencja.
Tak czy siak korzystamy z Wikipedii jako
ze źródła danych, natomiast warto jest po prostu spróbować.
Więc przechodzimy do
nowego pliku w komponentach i nazwijmy to full info box kropka view.
Tutaj wklejamy nasz naszą treść oraz nasz komponent.
Również tutaj przerzuciłem full info box.
Zapisujemy.
Pozbądźmy się styli.
A to w sumie tak naprawdę może je po prostu wrzucić tutaj.
Czyli tutaj ten template sobie sami stworzymy ręcznie.
Tak będzie szybciej.
I tutaj skrypt, żeby wyeksportować.
Nasz komponent.
Export default.
Skrypt, a nie skrypt.
Zapisujemy.
No i teraz tak.
Co nasz komponent będzie przyjmował na wejściu?
Ja proponuję aby przyjmował jednego props.
Czyli co tworzymy props i ten props będzie nazywał się ponownie content.
Oczywiście ten content może mieć zupełnie
inną strukturę niż pozostałe, bo jest to zupełnie inny komponent, ale stworzymy to
tak, że będzie on o typie object no i oczywiście będzie required.
Po zapisaniu ja sobie może skopiuje na chwilę tą tabelkę.
Możemy ją sobie zmodyfikować aby otworzyć tą paletę w kodzie
możemy zrobić Shift control P bądź Shift command p i po wpisaniu bitwa jeżeli
posiadamy rozszerzenie i możemy wpisać jak ma się nam sformatować tekst.
Więc przejdziemy na naszego index view.
I tutaj ponownie wklejamy te dane nie po to, żeby je faktycznie wyświetlić,
tylko żeby mieć jakąś referencję do tego jak będziemy używali naszego komponentu.
Czyli full info box.
Tutaj zapisujemy.
I musimy przekazać content, który jest obiektem.
Więc tutaj musimy zrobić
aby to było reaktywne, a nie na prymitywnych wartościach.
No i musimy przekazać jakieś wartości.
I co tutaj przekazać?
Ja proponuję.
Aby niezależnie co tutaj wstawiamy pod dowolnym kluczem czyli np.
ABB i tutaj wartość Trampa czy np.
Hello World.
I tutaj powiedzmy też czemu nie.
Nieważne, co tutaj wstawimy, aby to się wygenerowało w jakikolwiek sposób.
Czyli wykorzystamy tutaj Object Keys i Object Warehouse,
aby po prostu wyrenderować to, co zostało nam przekazane w komponencie.
To wynika z tego, że właśnie w takim
formacie wysyłane nam są dane przez API z Wikipedii czy przez Wikipedia.
Czyli narzędzie, z którego korzystamy, aby pobrać dane z Wikipedii.
Więc ja komentuję to tutaj tylko na chwilę, aby to się nam nie wyświetlało,
ale żebym dalej miał dostęp do tych danych.
I widzimy, że w tym momencie
ten komponent inline, bo chyba nam się nie wyrenderować poprawnie.
Zastanawiam się czemu tak czy siak powinniśmy przenieść.
Co do Compact Property tak jak zrobiliśmy to analogicznie do.
Całej treści.
I tutaj wstawimy sobie jaka to full info.
Więc będziemy zwracać taki oto obiekt.
Troszkę wyrównany.
I zapiszemy.
Zobaczmy jaki jest błąd.
2.
Empty czyli tutaj nie wypełniam tego pola.
Info zapiszemy ponownie i w tym momencie to nam się wygenerowało.
Oczywiście ta treść jest dalej kodowana
w naszym komponencie Full info box, ale mamy do niego już dostęp.
Ponieważ mamy tutaj właściwość content
i to co moglibyśmy zrobić to ponownie stworzyć sobie komplet property.
Wyrenderować.
Powiedzmy.
Details.
Czyli szczegóły.
I zwracać w tym miejscu tablicę obiektów,
być może którą będziemy budowali na podstawie tego kontentu.
Czyli to co możemy zrobić to pobrać sobie wszystkie klucze.
Keys równa się object i tutaj przekazujemy tablicę.
To znaczy obiekt naszego props content.
I teraz będziemy w stanie zwrócić
this kropka map, czyli malujemy wartość każdą pojedynczą wartość z tej tablicy.
Jeśli przekazujemy tutaj info.
Klucze ABB i Hello World.
Co to będzie tablica 2 cementowa?
Ponieważ mamy dwa klucze i dla każdego klucza możemy zrobić różne rzeczy.
Czyli tutaj możemy zwrócić po prostu.
Zarówno klucz oraz wartość.
Czyli w taki sposób moglibyśmy to zrobić.
Czyli Des props.
Content.
Ki i będziemy mieli dzięki temu obie wartości.
Ale nie ma to takiego znaczenia, ponieważ
jesteśmy w stanie zrobić dokładnie to samo.
Dokładnie ten sam fragment kodu poprzez Object Matrix.
Czyli Object Entry jest tutaj.
Przekazując DS props content zrobię
dokładnie to samo co przed chwilą zaprezentowałem.
Tylko jako jedna zwykła funkcja,
więc możemy sobie to wyrenderować w tym momencie.
Może wewnątrz tabelki, bo to będzie brzydko wyglądać.
Róbmy sobie tutaj pdfa.
I przenieśmy go na sam dół.
Tak, aby tabelka nie była pierwszym elementem wewnątrz templatki.
I tutaj po prostu details.
I tak jak widzimy
mamy tutaj tablicę tablic, czyli dla każdego wpisu, dla każdej linijki
moglibyśmy powiedzieć mamy osobną tablicę i pierwszym elementem jest klucz.
Drugim elementem jest jego wartość i tego będziemy używali, aby wyrenderować.
Naszą cześć.
Czyli tutaj możemy wpisać np.
.
Janusz Korczak jako wartość i tutaj nam jako klucz.
I w tym momencie będziemy mogli to sobie wyrenderować.
Problem jest taki, że nie będziemy do
końca wiedzieli, który klucz odnosi się do czego i jak go wyrenderować,
w związku z czym nie będziemy tutaj umieszczali.
W związku z czym nie będziemy tutaj umieli stosowali.
W związku z czym nie będziemy tutaj umieszczali tego nagłówka.
Pozbędziemy się go całkowicie.
Zestawimy sobie tą tabelkę z obrazkiem i wszystkie pozostałe tabelki,
które będą faktycznie danymi typu klucz wartość.
Czyli możemy sobie skopiować PORN i miejsce w którym został urodzony.
Tutaj wpisujemy Born tutaj miejsce urodzenia.
Gdzie zginął.
Ten szlachetny człowiek.
Żeby pozbyć się spacji.
Dziś kopiujemy, to nie będziemy kopiowali
wszystkich wartości, ponieważ nie ma to znaczenia.
Jeśli chodzi o.
Tę tablicę moglibyśmy wykorzystać np.
przy PJN i chyba tak zrobimy.
Czyli tutaj wstawimy.
Klucz.
I tutaj będzie tablica wartości.
Dotyczących jego stanu.
Czyli autor Humanitaryzm, humanitaryzm.
Kiedy?
Pedagog, pedagog.
I obrońca praw dzieci.
Po zapisaniu tego.
Faktycznie to nam się tutaj pokaże.
Tylko, że chyba zabrakło nam syntax error an token expected przecinek.
Tutaj nie daliśmy przecinka.
I tu powinno być oczywiście dwukropek.
Super.
No i w tym momencie możemy pozbyć się tego rendery na samej górze.
Zapisujemy.
I możemy dla każdego t zrobić bufor.
I tutaj detail in details.
I dla każdego klucza najpierw będziemy wyświetlać detale 0.
Oraz detale. 1.
Czyli tutaj będzie to klucz.
Tutaj będzie to wartość.
Zapiszemy.
Możemy pozbyć się pozostałych.
Pierwszy.
I widzimy, że wyświetliło się nam.
Zawsze ten sam wpis. Oczywiście ma to sens,
ponieważ musimy tutaj odnieść się do Detail i tutaj do niego.
Do pojedynczych elementów super, więc mamy praktycznie to samo.
Tutaj nam się to wyświetla jako reakcja to troszkę przy sumuje.
Czyli widzimy, że nie jest to faktycznie tekst, więc co moglibyśmy zrobić?
To być może jakaś metoda.
Na przykład Render option detail 1.
I teraz news.
Możemy tutaj wpisać render poprzez.
Poprze.
I teraz w zależności od typu możemy robić różne rzeczy.
Czyli jeśli.
Owszem, ale to znaczy jeżeli dana
zmienna ma długość, może być to troszkę zdradliwe.
Natomiast możemy w taki sposób łatwo
wykryć tablicę, ale taką lepszą opcją byłoby array array.
I teraz jeżeli tak jest to możemy wrócić poprzez join.
I połączyć to przecinkiem albo dowolnym
innym znakiem, a w przeciwnym wypadku po prostu zwrócić.
Oczywiście tych warunków będzie tutaj więcej,
ale jeśli to zapiszemy, to faktycznie widzimy, że to nam się udało.
Są to połączone przecinkiem wartości możemy dać jeszcze po przecinku spacja.
I teraz nie będzie takiego
złączenia tych wartości, przez co nasz blog będzie się rozszerzał.
Ale zajęliśmy się tylko i wyłącznie tą sekcją.
Informacji. Nie zrobiliśmy zupełnie obrazka.
To, co musimy zrobić.
Jeżeli zrobiliśmy takie założenie, że
koniecznie musimy zwracać to w takim formacie.
Jest to ponownie format narzucany przez API Wikipedii.
No to możemy zrobić sobie tutaj dowolny klucz.
Nie ma to znaczenia, powiedzmy image.
On się będzie mógł zmieniać
i tutaj będziemy mieli jakieś jakieś rozszerzenie, jakiś plik, obrazek.
Więc zobaczmy jak nazywa się. Ten plik?
Jaki jest jego adres?
I sobie go tutaj wstawiamy.
I teraz jak to zapiszemy
to zobaczymy, że po pierwsze tam nic nam się wyświetliło oczywiście,
a po drugie dalej to nie jest tutaj zawarte w tym miejscu.
W związku z czym co możemy zrobić?
Ja bym na początku pozbył się tego image z tego pola.
Czyli co musimy zrobić? Po prostu przefiltrować wszystkie nasze
details i możemy do tego stworzyć dodatkowe property czyli filter.
Details.
Albo.
Tekst details.
I możemy zwrócić details, gdzie filtrujemy każdy z detali.
W zależności od tego, czy jego wartość.
Będzie miała
png na końcu, co jest oczywiście bardzo uproszczonym rozwiązaniem, ale na potrzeby
tego kursu damy radę, czyli details albo decay od liczby pojedynczej.
Include kropka.
PNG to będziemy zwracać tylko i wyłącznie
takie rekordy, które nie zawierają w sobie.
PNG i tutaj details wartość pierwsza.
Jako, że jest to Vario to możemy sobie wrzucić do osobnej zmiennej const detail.
Fajne.
Zapiszemy i tutaj możemy to wykorzystać.
Zapisujemy.
I teraz podmieniając details na text details.
Zobaczymy co się stanie.
A teraz zobaczmy. W konsoli.
Co się wydarzyło?
Details. Find.
Oczywiście musimy się odnieść do DSA.
Cieszmy.
I faktycznie zniknął nasz wpis dotyczący obrazka.
Więc analogicznie, aby wyświetlić teraz
ten obrazek, możemy sobie zrobić kopię property MIME image.
Return DS Details.
To te.
DSL.
I zwracać dokładne przeciwieństwo, czyli
tylko i wyłącznie obrazki, które mają rozszerzenie png.
Oczywiście nie wszystkie obrazki będą
miały takie rozszerzenie, w związku z czym to się nie będzie generowało.
To powinno być o wiele lepiej wykryte.
Ale możemy też.
Wybrać pierwszy element.
Jako że będziemy nadawali tylko jeden obrazek, zapiszemy nasz MG.
I teraz dla testów możemy tutaj go sobie wrzucić w to miejsce.
Błąd.
Zobaczmy, co się wydarzyło, panowie.
Detail Island i Find.
Do.
Wewnątrz image.
Tutaj ta S-ka.
Pozbądźmy się S-ki.
Odświeżamy.
No i super. I się udało.
Prawdopodobnie.
Zobaczmy co tutaj się skróciło i mega ok.
Czyli po prostu zwróciła się nam cała tabelka.
Czyli jeśli tutaj.
Wybierzemy sobie first image based on valium.
Tutaj może to zbierzmy troszkę, bo jest faktycznie ciasno i teraz na fest.
Image based on bali value możemy zwrócić element.
Aby dobrać się do jego wartości i faktycznie tam się wyrenderować.
Nie jest to najczystszy kawałek kodu.
Niestety API Wikipedii nie pozwoliło mi na
tego rodzaju komfort, w związku z czym zrobimy to w taki sposób.
I co istotne, jeżeli nawet będzie tutaj
więcej obrazków w tym momencie, albo ten klucz będzie jakikolwiek inny, czyli np.
profile photo,
to i tak nie zostanie użyte, a i tak nasz obrazek zostanie wykryty.
I analogicznie jeżeli damy tutaj jakiś obrazek, to tylko ten pierwszy zostanie.
Pobrany, więc jako ostatni krok ja jeszcze usunę.
Tutaj to fight, caption, cube, Field
i w momencie kiedy będziemy propagowali nasze informacje z API Wikipedii,
to zaktualizuję to w taki sposób, aby się dobrze wyświetlało.
Więc to był ostatni komponent, który będziemy robili w tej sekcji.
Mam nadzieję, że dało się nadążyć za tym trybem myślenia.
Tak naprawdę wszystko co robimy tutaj, to przenosimy obecną strukturę HTML
pod komponent View i tworzymy te komponenty na takiej zasadzie,
aby pasowały one do tego, co będziemy mieli zwracane z API.
A z API będziemy pracować już w najbliższych sekcjach tego kursu.
Linki
Kod
Zmiany wprowadzone w lekcji · 18 min
diff --git a/09/minipedia/components/FullInfoBox.vue b/09/minipedia/components/FullInfoBox.vue
new file mode 100644
index 0000000..d8f98f8
--- /dev/null
+++ b/09/minipedia/components/FullInfoBox.vue
@@ -0,0 +1,62 @@
+<template>
+ <div>
+ <table class="box full-bio">
+ <tr>
+ <td colspan="2">
+ <figure>
+ <img
+ :src="mainImage">
+ <figcaption>
+ To be filled
+ </figcaption>
+ </figure>
+ </td>
+ </tr>
+
+
+ <tr v-for="detail in textDetails">
+ <td>{{ detail[0] }} </td>
+ <td>{{ renderOption(detail[1]) }} </td>
+ </tr>
+ </table>
+ </div>
+</template>
+<script>
+ export default {
+ props: {
+ content: {
+ type: Object,
+ required: true,
+ }
+ },
+ computed: {
+ details() {
+ return Object.entries(this.$props.content);
+ },
+ textDetails() {
+ return this.details.filter(detail => {
+ const detailValue = detail[1];
+ return !detailValue.includes('.PNG')
+ });
+ },
+ mainImage() {
+ const firstImageBasedOnValue = this.details.filter(detail => {
+ const detailValue = detail[1];
+ return detailValue.includes('.PNG')
+ })[0];
+
+ return firstImageBasedOnValue[1];
+ }
+ },
+ methods: {
+ renderOption(option) {
+ if (Array.isArray(option)) {
+ return option.join(', ');
+ }
+ return option;
+ }
+ }
+ }
+
+
+</script>
diff --git a/09/minipedia/pages/index.vue b/09/minipedia/pages/index.vue
index 8c67f15..c946534 100644
--- a/09/minipedia/pages/index.vue
+++ b/09/minipedia/pages/index.vue
@@ -5,9 +5,10 @@
</h1>
<span class="notice">From Wikipedia, the free encyclopedia</span>
-
-
- <table class="box full-bio">
+
+
+ <FullInfoBox :content="fullInfo" />
+ <!-- <table class="box full-bio">
<tr>
<th colspan="2">
Janusz Korczak
@@ -45,8 +46,7 @@
<td>Children's author, humanitarian, pediatrician, child pedagogue and defender of children's rights
</td>
</tr>
- </table>
-
+ </table>-->
<p>Janusz Korczak, the pen name of Henryk Goldszmit (22 July 1878 or 1879 – 7 August 1942), was a
Polish Jewish educator, children's author and pedagogue known as Pan Doktor ("Mr. Doctor") or Stary
@@ -217,6 +217,15 @@
export default {
layout: 'default',
computed: {
+ fullInfo() {
+ return {
+ "Profile photo": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Janusz_Korczak.PNG/220px-Janusz_Korczak.PNG",
+ "Born ": "Henryk Goldszmit 22 July 1878",
+ "Died": `c. 7 August 1942 (aged 64)
+ Treblinka extermination camp, German-occupied Poland`,
+ "Occupation": [`Children's author`, `humanitarian`, `pediatrician`, `child pedagogue and defender of children's rights`]
+ };
+ },
content() {
return [{
title: 'Biography',