Nuxt.js: Server middleware
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.
W tej lekcji zajmiemy się tworzeniem. Tzw.
server middleware dla.
Nexta i dzięki niemu będziemy w stanie
stworzyć nasz własny endpoint przy użyciu Express.
Jeżeli nie masz tutaj doświadczenia z
Expressem, to postaram Ci się to troszkę nakreślić.
Natomiast jest to dosyć. Intuicyjne i nie powinno zająć.
Zbyt dużo czasu.
Będziemy testować naszego event pointy przy pomocy polecenia curl.
Które działa na takiej zasadzie, że możemy
podać dowolny adres internetowy, aby zobaczyć co
znajduje się na nim w protokole http https.
I faktycznie, jeżeli uruchomimy.
Sobie kamerę localhost 8000 to widzimy
treść naszej strony www i będziemy w taki sam sposób analogiczny testować endpoint.
W związku z czym co trzeba zrobić na samym początku, to w katalogu
pliku na ext config ts musimy stworzyć właściwość server minor.
Oczywiście.
Upewnijmy się, żeby nie było.
Żadnych literówek i serwer middleware przyjmuje jako wartość tablicę.
Tablica ta może być albo tablicą obiektów, albo tablicą stringów.
W zależności od tego, jak chcemy do.
Tego podejść.
Ja tutaj ustawię to jako obiekt i ten obiekt przyjmuje dwa parametry.
Pierwszy z nich to jest PATH i ten path.
To będzie właśnie to, do czego będziemy się odwoływali na.
Naszych.
Podstrona w Perlu właśnie, żeby.
Odnieść się do danego endpoint.
Czyli jeśli sobie tutaj wpiszemy API slash API, to wszystkie nasze end pointy.
Będą znajdowały się w podkatalogu API, tak
jakby w podkatalogu widocznie w pasku przeglądarki.
No i druga rzecz jaką trzeba zrobić czy jest to handler
i handler jest odniesieniem do pliku, który musimy sobie oczywiście stworzyć.
I powiedzmy, że stworzymy katalog API. Tutaj na.
Naszym drzewku katalogu to się odnosi.
Do roota w przeglądarce, a to odnosi.
Się do miejsca w naszym systemie.
Plików.
Czyli musimy sobie stworzyć katalog API. I powiedzmy.
Że zrobimy sobie indeks.
Ja tego nie będę zapisywał, bo nam się
wtedy serwer crashuje, ponieważ ten plik jeszcze nie istnieje.
Więc zróbmy sobie tutaj w naszej mini BDI nowy katalog nazwijmy go API.
I dodamy. Tutaj prawym przyciskiem myszy nowy plik.
Index czas.
To, co trzeba zrobić zanim.
Faktycznie uruchomimy nasz middleware.
To musimy koniecznie jeżeli tworzymy
endpoint wyeksportować instancje Expression.
Czyli jeśli stworzymy tutaj import Express from.
Ekspres.
I stworzymy nową instancję, czyli APP.
Ekspres.
Następnie eksportujemy ją albo po prostu export default i tutaj.
Wstawiamy nasz kod.
Jeżeli to zapiszemy i zapiszemy też nexta.
W tym momencie on się nie powinien.
Już wywrócić i faktycznie wydaje się, że działa.
Jednak to co trzeba jeszcze zrobić to
oczywiście zarejestrować jakieś raporty, żebyśmy mogli to przetestować.
Więc na naszym AP zrobimy sobie GET.
Hello!
I jako drugi parametr dla tej funkcji get
na obiekcie, która jest instancją Expression.
Musimy przekazać funkcję, która będzie przyjmowała dwa parametry.
Pierwszy z nich jest to.
Request, a drugi jest to response.
Czyli mamy tutaj dostęp do obiektu, który
jest wysyłany do nas z przeglądarki czy np.
z Carla oraz do obiektu response, który my wysyłamy z serwera.
W czasie z powrotem do klienta.
Czyli to, co możemy zrobić, aby wyświetlić jakiekolwiek dane.
Zwrócić klientowi to możemy zrobić return res send.
Powiedzmy. I tutaj.
Wyślemy jakąś.
Treść, powiedzmy po prostu hello.
I możemy jeszcze dodać tutaj status cout, bo jakieś małe z tego nie chcemy.
Status 200 czyli request nieudany i zamiast może heloł możemy zrobić ping.
I jako wartość zwrotną Pan kto.
Jest też taka konwencja dosyć popularna w
programowaniu, aby sprawdzać czy coś faktycznie odpowiada.
Więc napiszmy to.
Zobaczmy, co tutaj się wywróciło.
Cannot find express.
Widocznie nie jest tutaj zainstalowany.
Express domyślnie, więc zainstaluj go sobie.
W tempie ekspresowym, więc odpalamy RPM Install Express.
Restartujemy nasz serwer.
Mam nadzieję, że w tym momencie już się nam to nie wywróci.
Słuchawki nasz mózg dalej tutaj chodzi.
Troszkę się to będzie.
Przebudowywać i żeby to też przetestować.
Jak tutaj zauważyliście ja użyłem funkcji
GET, czyli oznacza to, że stworzymy endpoint.
O typie GET.
Jeżeli chodzi o.
Networking http To jest kilka rodzajów requestów.
Jest ich całkiem sporo.
Jest get, post, put, update.
Get jest takim najprostszym.
Który dzieje się np.
w momencie, kiedy wchodzimy przez adres przeglądarki na daną podstronę.
I służy on. Do odbierania danych.
Tak więc np.
nie powinniśmy przesyłać jakiś haseł czy tego typu istotnych.
Rzeczy, bo po pierwsze są widoczne w pasku przeglądarki, a po drugie po prostu łatwo.
Nie jest to dobra praktyka.
W związku z czym zobaczmy czy to faktycznie zadziałało.
Curl localhost 8000.
I teraz tak.
My tutaj zdefiniowaliśmy sobie ping, ale warto zauważyć, że w next config jest.
Tutaj jest jeszcze path API, więc najpierw musimy poprzedzić tego naszego pinga.
Tym przedrostkiem API.
W przeciwnym wypadku nie dostaniemy się do naszej sekcji express.
A więc spróbujmy API ping.
No i super, dostaliśmy zwrotkę ping.
I właśnie w ten sposób będziemy tworzyli
integrację z Wiki, że jest to znaczy tutaj gdzieś obok.
Będziemy również importować paczkę wiki G i po prostu w momencie.
Gdy dostaniemy jakąś informację.
Od użytkownika, czyli np.
od kernela czy bezpośrednio z frontendu Nexta.
Będziemy zwracać informacje, które są odpowiednie do tego.
O co użytkownik. Poprosił.
Jednak zanim do tego przejdziemy możemy
jeszcze to troszkę posprzątać, tzn podzielić sobie tą naszą aplikację.
Na pojedyncze raty.
Czyli tutaj.
Stworzymy sobie katalog. I.
Możemy stworzyć sobie katalog.
Pinger jest i w katalogu pinger jest za.
Importujemy ponownie tym razem router z Express.
I to co możemy zrobić to na naszym routerze.
Oczywiście trzeba zrobić.
Nową instancję tego rutera czyli router równa się router z wielkiej litery.
I w tym momencie wystarczy nam zrobić.
Zamiast apt get to router get i wyeksportować.
Router.
I w tym momencie jesteśmy w stanie użyć go
wewnątrz naszego pliku index, że jest a kropka już.
I po zaimportowaniu tego pliku czyli import.
Pink Front przechodzimy do rac.
Oraz następnie ping.
Tutaj widzę, że bicie generują jakieś pliki DISC prawdopodobnie.
Ma jakieś rozszerzenie.
Tym się nie powinniście w tym momencie przejmować co się wam dziać nie będzie.
Ja takie rozszerzenie wyłączyłem to podobnie jest to player.
Hero i tutaj tego pinga.
Możemy właśnie użyć w tym miejscu.
No i przetestujemy po prostu ponownie ten sam endpoint stworzony troszkę inaczej.
I faktycznie dalej to działa.
Jeszcze dla pewności możemy zabić cały serwer, uruchomić go ponownie.
I w taki sposób możemy zarządzać różnymi latami.
Teraz też mogą mieć swoje podkategorie, czyli jak byśmy bardzo chcieli.
Jesteśmy w stanie.
Zamknąć wszystkie tego typu rzeczy jeszcze w inny powiedzmy scope.
Tak samo jak mamy skopiowane wszystko do AP i w tym momencie.
To moglibyśmy.
Zrobić, że wszystkie rzeczy dotyczą Springa.
Bo tutaj może być oczywiście więcej niż jeden endpoint zdefiniowany.
Moglibyśmy tutaj stworzyć
bank, który będzie zwracał dane w jakimś innym formacie.
I wszystkie te rzeczy mogłyby.
Być skopiowane do nowego
miejsca czasu, tak jakby nam to w tym momencie nie jest potrzebne.
I ostatni test.
Dalej wszystko działa.
Więc ja preferuję jeżeli chodzi o ekspresy i.
Takie najprostsze użycie.
Właśnie tworzyć w ten sposób, czyli.
Mieć osobne route zdefiniowane poprzez. Router.
Używać ich głównym.
Ekspresem pomimo tego, że.
Faktycznie możemy tutaj też definiować ten tryb bezpośrednio na AP.
Jest to po prostu troszkę czystsze.
W następnej lekcji zajmiemy się integracją z wiki, jak będzie to taka podstawowa
integracja na zasadzie zainstalowania paczki.
Zobaczenia mniej więcej jak.
Działa dane API i wyświetlenia.
Jakichkolwiek danych.
Dla naszych klientów.
Do zobaczenia w następnej lekcji.
Kod
Zmiany wprowadzone w lekcji · 9 min
diff --git a/13/minipedia/api/index.js b/13/minipedia/api/index.js
new file mode 100644
index 0000000..7f3258c
--- /dev/null
+++ b/13/minipedia/api/index.js
@@ -0,0 +1,8 @@
+import Express from 'express';
+import Ping from './routes/ping';
+
+const app = Express();
+
+app.use(Ping);
+
+export default app;
\ No newline at end of file
diff --git a/13/minipedia/api/routes/ping.js b/13/minipedia/api/routes/ping.js
new file mode 100644
index 0000000..b1eb423
--- /dev/null
+++ b/13/minipedia/api/routes/ping.js
@@ -0,0 +1,10 @@
+import { Router } from 'express';
+
+const router = Router();
+
+router.get('/ping', (req, res) => {
+ return res.status(200).send('pong');
+});
+
+
+export default router;
\ No newline at end of file
diff --git a/13/minipedia/nuxt.config.js b/13/minipedia/nuxt.config.js
index 8f2bf8d..135474a 100644
--- a/13/minipedia/nuxt.config.js
+++ b/13/minipedia/nuxt.config.js
@@ -1,5 +1,11 @@
export default {
dev: process.env.NODE_ENV !== 'production',
+ serverMiddleware: [
+ {
+ path: '/api',
+ handler: '~/api/index.js'
+ }
+ ],
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'Minipedia',