Tworzenie hybrydowej aplikacji pojedynczej strony w WordPress z VueJS

Zasilaj swoją aplikację WordPress z Vue.js-progresywny framework JavaScript, który teraz dzieli scenę z takimi jak React i Angular.

W tym artykule pokażę Ci, jak zintegrować aplikację do wyszukiwania pojedynczej strony z istniejącą aplikacją WordPress z Vue.js-niezwykle popularny framework JavaScript do tworzenia bogatych interfejsów użytkownika. Przeprowadzę Cię przez cały proces budowania aplikacji Vue od podstaw, interakcji z WordPress REST API i tworzenia aplikacji wyszukiwania z komponentami wielokrotnego użytku Vue.

Jeśli nigdy nie pracowałeś z Vue lub innymi nowoczesnymi frameworkami/bibliotekami JavaScript, jest to świetny moment, aby się przyłączyć. Podczas gdy sama liczba frameworków zachęcających do gry w JavaScript może być dość przytłaczająca, Vue sprawia, że podróż jest niczym mniej niż przyjemna.

Uwaga: Ten artykuł jest przeznaczony dla średnio zaawansowanych programistów WordPress i zakłada, że masz praktyczną znajomość PHP, JavaScript, Vue.js i WordPress REST API. Jeśli chcesz odświeżyć, polecam zapoznanie się z poniższymi:

• JavaScript dla programistów WordPress
• Krótki przewodnik po API REST WordPress
• JavaScript i WordPress REST API: zrozumienie żargonu

Znajomość Vue.js (2.X) jest również niezbędna. Aplikacja Single Page (SPA) wykorzystuje wiele funkcji Vue, takich jak składniki pojedynczego pliku, niestandardowe zdarzenia, obliczone właściwości, haczyki cyklu życia, a także Axios do interakcji z WordPress REST API. Jeśli jesteś nowicjuszem w Vue, bardzo łatwo go opanować, a dzięki tym samouczkom możesz rozpocząć pracę w ciągu zaledwie kilku godzin:

• Vue.js 2-Pierwsze kroki Academind
• Wprowadzenie do Vue.js by Vue Mastery

Chociaż aplikacje Vue można pisać w czystej składni ES5, będę używał nowych funkcji JavaScript wprowadzonych w wersjach ES6 i ES7. Jeśli chcesz być na bieżąco z systemem ES6, zapoznaj się z poniższymi informacjami:

• ES6 JavaScript-podstawy
• WordPress Developer ’ s Guide to ES2015 (ES6)
• Pięciominutowy crash course w ES6 i ES7

Niezależnie od tego, czy potrzebujesz korzystać z nowoczesnego JavaScript, czy Vue.js będzie całkowicie zależeć od twoich wymagań i preferencji. Moim celem jest pomoc w zbadaniu możliwości integracji aplikacji jednostronicowych w WordPress z praktyczną aplikacją wyszukiwania. Więc zaczynajmy!

Przegląd vue SPA w WordPress

W tym artykule zbudowałem aplikację do wyszukiwania pojedynczej strony w WordPress z Vue.js za pomocą motywu potomnego motywu Twenty Seventeen WordPress. Możesz pobrać motyw potomny stąd, aby śledzić go wraz z artykułem.

Aplikacja Wyszukiwania może być renderowana na dowolnej stronie WordPress za pomocą niestandardowych szablonów stron. Szablon strony zasadniczo dostarcza instancji Vue z istniejącym elementem DOM do zamontowania.

Aplikacja przyjmuje zatem hybrydowe lub mieszane podejście, w którym aplikacja po stronie serwera (WordPress) służy również frontend, ale jego części są renderowane z aplikacją po stronie klienta, taką jak Vue. Różni się to od czystego SPA, które może używać Bezgłowego lub oddzielonego CMS, gdzie silnik po stronie serwera jest odpowiedzialny tylko za dostarczanie treści (za pośrednictwem API) i nie generuje HTML do jej renderowania.

Poprawa jakości Wyszukiwania dzięki Vue.js

W tradycyjnym scenariuszu wyszukiwania każde żądanie do serwera powoduje przeładowanie strony. Jednak z Vue.js lub podejście SPA, strona jest dynamicznie aktualizowana w miarę interakcji użytkownika z wyszukiwaniem, ale bez ciągłego przeładowania. Zapewnia to bardzo przyjemne wrażenia użytkownika. W rzeczywistości, możesz go wypróbować tutaj, w tym długopisie, który stworzyłem:

Moja aplikacja wyszukiwania vue opiera się na przykładzie z powyższego pióra. Zanim przejdziemy do kodu, zapoznajmy się z wewnętrznym działaniem aplikacji wyszukiwania.

Anatomia aplikacji Vue Single Page Search

Poniższa infografika wyjaśnia, w jaki sposób aplikacja wyszukiwania składa się z kilku komponentów wielokrotnego użytku, które współdziałają ze sobą.

Na wysokim poziomie, oto, co robią różne komponenty:

• AppNavigation zapewnia łącza routera dla routera Vue do renderowania AppQuickSearch oraz AppCustomSearch komponenty.
• AppQuickSearch oraz AppCustomSearch praca jako komponenty nadrzędne do AppFilterSwitches oraz AppGetPosts. Skutkują one jednak dwoma całkowicie niezależnymi aplikacjami wyszukiwania, z których każda posiada własne dane, metody i właściwości.
• AppFilterSwitches renderuje przełączniki wejścia, które mogą być albo polami wyboru lub przyciskami radiowymi w zależności od parametrów przekazanych do niego.
• AppGetPosts pobiera dane z WordPress REST API i filtruje je za pomocą klawisza wyszukiwania i przełącza wejścia. Następnie nazywa AppDisplayPost komponent dla każdego słupka w przefiltrowanym wyniku.
• AppDisplayPost renderuje znaczniki dla pojedynczego elementu postu i wyświetla je w wynikach wyszukiwania.

Wszystko to odbywa się wewnątrz niestandardowego szablonu strony przypisanego do określonej strony(stron) w WordPress.

Korzystanie Z Pojedynczych Komponentów Vue

Być może widziałeś wiele przykładów komponentów vue utworzonych za pomocą Vue.komponent składnia wykorzystująca szablony in-DOM lub łańcuchy szablonów JavaScript. Jednak, aby zbudować aplikację wyszukiwania w WordPress, skorzystałem z potężnych składników pojedynczego pliku VUE zamiast.

Komponenty z pojedynczym plikiem mają wiele nieodłącznych zalet-możliwość dostarczenia wstępnie skompilowanego JavaScript (funkcji renderowania) do przeglądarki, podświetlanie składni, rozróżnianie wielkości liter i CSS ze skalowaniem komponentów, aby wymienić tylko kilka. Pozwalają mi również pisać modularny i zarządzalny kod, dzieląc bazę kodu na wiele (.Vue) pliki.

Teraz, gdy masz uczciwe pojęcie o tym, jak rzeczy działają, zacznijmy budować aplikację.

Korzystanie z Vue-CLI do konfigurowania lokalnego przepływu pracy programistycznej

Podział kodu na wiele (.Vue) pliki z pojedynczymi komponentami będą wymagały użycia narzędzi programistycznych, takich jak Vue Loader, Webpack, Babel itp. Jednak nie pozwól, aby to cię zmyliło, ponieważ zamierzam zachować rzeczy bardzo proste i nie zajmować się plikami konfiguracyjnymi.

Z Vue-CLI można szybko rusztować aplikację Vue, który jest wstępnie skonfigurowany z najlepszych narzędzi kompilacji dla nowoczesnego przepływu pracy frontend. Najpierw skonfigurujmy CLI.

Krok 1: Zainstaluj Węzeł.js

Aby korzystać z Vue-CLI, będziesz potrzebować węzła.js (8.x preferowany, npm wersja 3+) zainstalowany w systemie. Możesz pobrać instalator dla swojej platformy z węzła.strona do pobrania js tutaj. Po skonfigurowaniu sprawdź, czy działają następujące polecenia:

• node -- version oraz npm -- version

Krok 2: Zainstaluj Vue-CLI

Następnie otwórz terminal systemu (w moim przypadku PowerShell) i zainstaluj Vue-CLI (2.x) globalnie poprzez prowadzenie npm install-g vue-cli dowództwo. Po zakończeniu sprawdź, czy działa, uruchamiając vue -- version dowództwo.

Na powyższym obrazku zauważysz, że zainstalowałem również ESLint globalnie z npm install-g eslint. To dlatego, że używam Visual Studio Code edytor i jego wtyczki do formatowania i lint mój JavaScript. Możesz użyć dowolnego edytora kodu, ale konfiguracja jednego z Linterem JavaScript jest wysoce zalecana.

Po wykonaniu podstawowej konfiguracji stwórzmy aplikację w WordPress za pomocą Vue-CLI.

Rusztowanie aplikacja Vue z Vue-CLI

Aby utworzyć aplikację Vue, użyłem oficjalnego webpacka-simple VueJS-template. Możesz jednak użyć bardziej wyrafinowanego szablonu w zależności od twoich wymagań.

Szablon tworzy projekt Vue z Webpack i konfiguruje go z serwerem programistycznym i innymi nowoczesnymi narzędziami do budowania. Zapewnia nam to rozbudowany przepływ pracy nad rozwojem. Między innymi, pozwala nam pisać kod przy użyciu NextGen (ES6/ES7) JavaScript podczas rozwoju, ale statek skompilowany Pakiet JavaScript w ES5 dla lepszej kompatybilności przeglądarki.

Krok 1: skonfiguruj aplikację Vue wewnątrz WordPress

Aby skonfigurować projekt Vue, przejdź do motywu WordPress lub motywu podrzędnego za pomocą terminala systemu. Tutaj używam PowerShell (w Windows 10) zintegrowany z edytorem kodu Visual Studio.

Krok 2: Utwórz aplikację Vue za pomocą Webpack-Simple template

Następnie uruchom polecenie vue INIT webpack-prosty projekt-nazwa, substituting Nazwa projektu z nazwą projektu (spa w moim przykładzie) i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.

Uwaga: pomiń ten krok, jeśli podążasz za moim motywem potomnym vuetwentyseventeen. Zawiera już aplikację w spa folder projektu.

Tworzy to projekt Vue wewnątrz < Nazwa projektu> katalog z konfiguracjami dla nowoczesnych narzędzi budowlanych.

Krok 3: Zainstaluj Zależności Programistyczne

Jeśli przejdziesz do motywu WordPress za pomocą edytora kodu i zajrzysz do nowo utworzonego folderu projektu, wśród wielu nowych plików, zauważysz plik o nazwie paczka.json. Zasadniczo zawiera listę wszystkich narzędzi programistycznych, których aplikacja będzie wymagać. Te narzędzia nadal muszą być zainstalowane, a aby to zrobić, uruchom następujące czynności:

• cd Projekt-nazwa(substitue Nazwa projektu z Twoim projektem-folder)
• npm install

NPM pobierze i zainstaluje wszystkie wymagane zależności w folderze o nazwie node_modules

Pamiętaj, że nie będziemy wdrażać żadnego z tych pobranych plików w WordPress. Są one wymagane tylko w fazie rozwoju.

Krok 4: Uruchom serwer Dev Webpack wraz z WordPress

Ostatni krok polega na uruchomieniu serwera programistycznego Webpack, który został zainstalowany w poprzednim kroku. Na początku może to wydawać się dziwne, ale musisz uruchomić serwer programistyczny (zainstalowany w poprzednim kroku) i utrzymywać go razem z lokalnym serwerem WordPress (XAMP, WAMP, VVV itp.).

Mimo że vue SPA jest aplikacją po stronie klienta, początkowo musi być obsługiwana przez serwer, a serwer Webpack zrobi to za nas. Dopiero po zakończeniu rozwoju, będziemy służyć ostateczny pakiet JavaScript przez WordPress.

Aby uruchomić serwer programistyczny, uruchom polecenie npm run dev z folderu projektu Vue. Następnie aplikacja starter Vue zostanie automatycznie otwarta w localhost: 8080 w przeglądarce.

Pakiet Vue (build.js)

Jeśli spojrzysz na źródło strony aplikacji startowej w przeglądarce, zauważysz, że strona zawiera tylko jeden plik skryptu – buduj.js. Dzieje się tak dlatego, że po uruchomieniu serwera programistycznego Webpack automatycznie skompilował aplikację Vue i połączył ją z biblioteką Vue i innymi zależnościami w jeden plik JavaScript.

Należy jednak pamiętać, że plik nie istnieje fizycznie w systemie i jest dynamicznie generowany przez Node i Webpack w czasie wykonywania.

Aby wygenerować fizyczny plik kompilacji, który możesz wysłać za pomocą aplikacji, musisz uruchomić npm run build, które zobaczymy w późniejszym etapie.

Na tym etapie mamy w pełni funkcjonalną aplikację Vue obsługiwaną przez serwer programistyczny z folderu motywu WordPress. Jednak nie ma to jeszcze nic wspólnego z WordPressem. Spójrzmy więc, jak możesz zintegrować aplikację Vue z motywem WordPress.

Integracja vue SPA z WordPress

Integracja aplikacji Vue z WordPress wymaga zasadniczo trzech rzeczy:

• Element DOM w WordPress dla aplikacji Vue do zamontowania na
• Zapytanie o pakiet Vue w WordPress
• Informowanie Vue o punkcie montowania DOM w WordPress

Dostarczenie elementu DOM w WordPress dla Vue

Możesz podłączyć aplikację Vue do jednej strony WordPress lub wielu stron lub warunkowo. Wszystkie potrzeby Vue to element DOM, który istnieje na wybranej stronie WordPress.

W tym celu możesz skorzystać z WordPress Hierarchia Szablonów aby zdecydować o niezbędnym pliku szablonu, który należy edytować. W moim przykładzie chcę, aby aplikacja wyszukiwania pojawiła się na dowolnej stronie WordPress, która używa określonego niestandardowego szablonu strony. Zamiast tego możesz używać zwykłych szablonów stron, aby kierować reklamy na określone strony w oparciu o twoje wymagania.

Własny Szablon Strony templates / vue-search-app-template.php mojego przykładowego motywu potomnego zapewnia element DOM, # wp-vue-app dla Vue.

Rejestracja aplikacji Vue w WordPress

Aby poinformować WordPress o aplikacji Vue, musisz się zarejestrować / zapytać pakiet Vue w WordPress. Jednak nie jest możliwe wygenerowanie pliku kompilacji po każdej modyfikacji podczas programowania. W tym celu możemy skorzystać z dynamicznej konstrukcji, którą widzieliście wcześniej.

Tak długo, jak działa serwer programistyczny Webpack, możemy używać dynamicznej ścieżki budowania http://localhost:8080/dist/build.js aby zarejestrować skrypt Vue w WordPress.

Serwer Webpack automatycznie ponownie skompiluje pakiet Vue i zaktualizuje stronę w miarę modyfikowania aplikacji.

To jest powód, dla którego musisz uruchomić zarówno lokalny serwer WordPress, jak i serwer Webpack podczas tworzenia. Po zakończeniu programowania będziesz musiał zmodyfikować ścieżkę, aby odzwierciedlić fizyczny plik wygenerowany przez uruchomienie npm run build.

Należy również pamiętać, z wyjątkiem ostatecznego pakietu Vue, żaden z plików w folderze projektu Vue nie musi być dostarczany z motywem WordPress. Są one wymagane tylko podczas rozwoju i gdy musisz dokonać modyfikacji, aby zregenerować pakiet Vue.

W moim przykładzie tematu zarejestrowałem pakiet Vue w includes / enqueue-scripts.php

Informowanie Vue o punkcie montowania w WordPressie

Wreszcie, aby załadować aplikację Vue w WordPress, wszystko, co jest wymagane, to powiedzieć Vue, gdzie się zamontować. Odbywa się to poprzez określenie elementu DOM WordPress z el opcja w główna.js twojego projektu Vue. Alternatywnie możesz również skorzystać z $ mount zamiast tego metoda.

W moim przykładzie montuję aplikację na # wp-vue-app Kontener DIV mojego niestandardowego szablonu strony.

I tak po prostu aplikacja starter Vue zostanie renderowana w WordPress.

Świetnie, dzięki aplikacji starter vue pomyślnie wstrzykniętej do WordPress, możesz teraz zbudować prawie wszystko z Vue. Przejdźmy więc do szczegółów mojej aplikacji wyszukiwania Vue.

Budowanie aplikacji wyszukiwania pojedynczej strony w WordPress

Jeśli spojrzysz na SCHEMAT BLOKOWY na początku artykułu, będziesz w stanie odnieść się do ostatecznej aplikacji wyszukiwania pokazanej poniżej:

Struktura Folderów Projektu

Aby to zbudować, po prostu użyłem aplikacji vue starter jako podstawy. Pozbyłem się spa/indeks.html oraz src / aktywa z projektu Vue, i przybył do następującej struktury folderów:

Jeśli zastanawiasz się nad zawiera folder w temacie potomnym, to dlatego, że używam funkcje.php tylko w celu określenia Haki WordPress, i definiować odpowiednie wywołania zwrotne w poszczególnych plikach PHP pod zawiera/. Wolę takie podejście do wyrzucania wszystkiego w jednym funkcje.php plik.

Dodawanie dodatkowych zależności dla funkcji ESLint i ECMAScriptNext (Opcjonalnie)

Jeśli zamierzasz korzystać z funkcji ESLint (co bardzo polecam) lub ESNext, takich jak Async/Waiting, będziesz musiał dodać kilka dodatkowych pakietów programistycznych do swojego projektu.

Konfigurowanie ESLint dla WordPress i Vue

Aby skonfigurować ESLint, zainstalowałem eslint-plugin-vue plugin i eslint-config-wordpress konfiguracja. Aby to zrobić, zatrzymaj serwer deweloperski (Ctrl + C)i uruchom następujące czynności z folderu projektu Vue:
npm install -- save-dev eslint eslint-plugin-vue
npm install -- save-dev eslint-config-WordPress

Następnie dodaj następujące elementy do swojego .eslintrc.json plik:
"extends": ["eslint: recommended", "wordpress", "plugin: vue / recommended"]

To ustawi standardy kodowania JavaScript dla WordPress, a vue / Gorąco polecam predefiniowane reguły lintingu dla Vue. Dzięki nowoczesnym edytorom, takim jak VS Code, niezmiernie pomaga mi to w łapaniu i naprawianiu błędów w locie:

Dodawanie presetów Babel dla Asynchronizacji / oczekiwania

Ustawienia Babel są poza zakresem tego artykułu, ale poniżej zasadniczo pozwoli Ci używać ES7 Async/Waiting w aplikacji Vue. W tym celu należy dodać babel-preset-vue-app przez bieganie:
npm install -- save-dev babel-preset-vue-app

Następnie dodaj preset vue-app do .babelrc plik w folderze projektu Vue:
"presets": [["env", {"modules": false }], "stage-3","vue-app"]

Kiedy skończysz, nie zapomnij uruchomić serwera programistycznego z npm run dev. Mój przykładowy motyw potomny vue ma to wszystko już skonfigurowane dla ciebie, więc musisz tylko zainstalować pakiety, uruchamiając npm install od wewnątrz spa katalog.

Udostępnianie Vue lokalnych danych WordPress

Vue jest ostatecznie JavaScript, który działa w przeglądarce, a więc nie będzie miał dostępu do żadnych danych w WordPress. Aby lokalne dane WordPress były dostępne w aplikacji Vue, musisz użyć starego, dobrego wp_localize_script Funkcja WordPress.

Zrobiłem to w includes / enqueue-scripts.php of my vuetwentyseventeen motyw dziecięcy.

Treść powyżej powinna być dość zrozumiała dla wszystkich moich komentarzy, więc zamiast tego skupię się na danych, które udostępniłem mojej aplikacji Vue:

• wpData.template_directory_uri – aby zbudować ścieżkę do pliku dla zasobów statycznych (takich jak obrazy) w folderze motywu
• wpData.rest_url – URL do pobierania postów z API WP REST
• wpData.app_path – strona SPA WordPress do budowania względnych linków
• wpData.post_kategorie – do renderowania pól wyboru do filtrowania postów

Mając to na uwadze, w końcu zbadajmy składniki pojedynczego pliku w aplikacji wyszukiwania.

Budowanie aplikacji wyszukiwania z pojedynczymi komponentami Vue

Dzięki strukturze aplikacji wyszukiwania, pierwszym komponentem, który faktycznie zbudowałem, był AppDisplayComponent. Zacząłem od bardzo podstawowego komponentu do wyświetlania tylko tytułów postów za pomocą JavaScript API Fetchi WordPress Posts resource – / wp / v2 / posts.

Podstawowa wersja komponentu AppDisplayPost

I renderować go na stronie WordPress, usunąłem całą zawartość startową w App.vue, i powołując się na AppDisplayPost komponent jak pokazano poniżej:

Jednak nie wszystko działało przy pierwszej próbie (lub nawet kilku po niej), czyli wtedy na ratunek przyszło rozszerzenie Chrome Vue DevTools. Sugerowałbym również zainstalowanie go, ponieważ pozwoli Ci debugować i sprawdzać aplikację Vue za pomocą bardziej przyjaznego dla użytkownika interfejsu, a nie tylko rejestrować wszystko do konsoli.

Polecam również użycie narzędzia takiego jak Listonosz do interakcji z WP REST API. Pozwoli Ci to zaoszczędzić dużo czasu na zrozumieniu odpowiedzi API i udostępni dane w formacie, który jest znacznie łatwiejszy do wyświetlenia. O to mi chodzi.:

Renderowanie postów z WordPress w aplikacji Vue Zajęło mi trochę czasu, aby początkowo skonfigurować, ale po kilku rundach między Vue DevTools i Postman, byłem gotowy do pracy. W tym momencie zdecydowałem się również rozszerzyć odpowiedź API, aby dodać niestandardową zawartość.

Rozszerzenie interfejsu API REST WordPress dla niestandardowych treści

Domyślna odpowiedź z REST API jest dość obszerna; jest jednak prawdopodobne, że może nie spełniać wszystkich twoich wymagań.

Na przykład możesz wyświetlić informacje, takie jak nazwisko autora, komentarze i polecany obraz postu. Jeśli zrobisz Wyślij zapytanie do posts route w programie Postman (lub preferowanym kliencie REST) zauważysz, że nie są one bezpośrednio dostępne w odpowiedzi domyślnej. Chociaż rozszerzenie API jest tutaj opcją, możesz je również pobrać, po prostu dodając _embed=true, parametr do zasobu – wp / v2 / posty?_embed=true,. Z _embed, API zestawi wszystkie metadane oznaczone embeddable: true w odpowiedzi na post.

W przypadku mojej aplikacji wyszukiwania Vue postanowiłem rozszerzyć interfejs API i dodać następującą zawartość niestandardową:

Jeśli spojrzeć na ostateczną wersję AppDisplayPost komponent w moim motywie podrzędnym, zauważysz, że użyłem pola vue_meta który nie jest częścią domyślnej odpowiedzi. Został dodany z register_rest_field funkcja w includes / extend-api.php z motywem dziecięcym. Kod jest dość prosty, a aby dowiedzieć się więcej o rozszerzaniu API, spójrz na Modyfikowanie Odpowiedzi sekcja Podręcznik REST API.

Dzięki temu przeniosłem logikę pobierania postów do AppGetPosts komponent, i używane tylko AppDisplayPost do renderowania wymaganej zawartości poszczególnych elementów post.

Komponent AppGetPosts do pobierania danych z REST API

Oddzielenie logiki pobierania danych oznaczało również przekazanie Posty tablica do AppDisplayPosts via rekwizyty.

Następnie w AppGetPosts Przywołałem AppDisplayPost dla każdego postu w tablicy postów.

Postanowiłem również skorzystać z Axios zamiast natywnego API pobierania, aby pobrać posty z API REST WordPress. Wygodniej jest mi używać Axios do pobierania danych z interfejsów API, ale możesz także użyć jQuery (który jest już zawarty w WordPress), aby AJAX telefony.

Uwaga: aby używać Axios, musisz zainstalować go jako zależność produkcyjną, uruchamiając npm install axios w folderze projektu Vue.

Pobieranie tylko określonych pól z interfejsu REST API WordPress

Niedawno odkryłem, że można użyć _fields parametr do pobierania tylko wymaganych pól z odpowiedzi API. To znacznie zmniejsza rozmiar ładunku, zwłaszcza gdy nie chcesz treści postu w odpowiedzi JSON. Aby to zrobić, wystarczy dodać _fields parametr z rozdzieloną przecinkami listą nazw pól jako wartości – wp / v2 / posty?_fields=id,title, excerpt

Na _fields parametr nadal musi znaleźć się w podręczniku REST API, więc warto mieć na niego oko.

Pobieranie wszystkich postów z WordPress REST API

Obecnie nie ma sposobu, aby pobrać wszystkie posty z WordPress REST API. Aby to zrobić, musisz uruchomić pętlę i wysłać wiele żądań do API, dopóki wymagane dane nie zostaną pobrane.

Aby obliczyć liczbę żądań API, użyłem parametru paginacji per_page=100 oraz X-WP-razem pole nagłówka, które podaje całkowitą liczbę rekordów w kolekcji. Na per_page parametr jest obecnie ograniczony do 100 rekordów, dlatego musimy wysłać wiele zapytań do API, gdy jest więcej niż 100 postów. Zobaczysz to w akcji w get_posts metoda AppGetPosts komponent w treści Poniżej:

W treści powyżej, get_posts jest automatycznie wywoływany po zamontowaniu komponentu. Wykorzystałem ES7 Async / Await funkcja oznaczająca metodę jako funkcja aynchroniczna który zawiera czekać wyrażenia.

Zauważysz, że pierwszy Axios zapytanie jest oznaczone czekać –
const response = await axios (... ) . Uniemożliwia to wykonywanie kolejnych linii kodu, dopóki żądanie nie zostanie rozwiązane. Zrobiłem to, aby odzyskać x-wp-razem nagłówek do obliczenia wymaganej liczby żądań API.

Drugie użycie czekać jest na końcu, gdzie czeka na wszystko Obietnice aby rozwiązać z Obiecuję.wszystkie przed renderowaniem danych na stronie. Możesz jednak również renderować dane, gdy tylko będą dostępne, w ten sposób:

Mając dostępne wymagane dane, dodałem pole wyszukiwania i logikę filtrowania w obliczonej właściwości. W treści Poniżej, zauważ, jak FilteredResults zastąpiony wpPosts aby powołać się na AppDisplayPost komponent.

Komponenty AppQuickSearch i AppFilterSwitches

Z AppGetPosts ładnie dbając o pobieranie i filtrowanie danych, przeniosłem dane wejściowe użytkownika do komponentu nadrzędnego AppQuickSearch i użyłem rekwizytów do przekazania danych w łańcuchu.

Stworzyłem nowy komponent AppFilterSwitches aby renderować filtry kategorii za pomocą zlokalizowanego WordPress wpData obiekt. Komponent emituje wydarzenie niestandardowe onFilterToggle że element nadrzędny AppQuickSearch muszę słuchać.

Ostatecznie wszystkie komponenty zostały połączone w AppQuickSearch

W końcu po prostu zapytałem o ostateczną kompilację wygenerowaną przez uruchomienie npm run build.

Jeśli doszedłeś tak daleko, powinieneś czuć się komfortowo odkrywając resztę aplikacji na własną rękę. Finalne wersje komponentów mają znacznie więcej, ale są zbudowane na wszystkim, co właśnie widziałeś.

Odkrywanie elementów routingu i Utrzymania Ruchu

Chociaż mogłem zakończyć aplikację tylko szybkim wyszukiwaniem, dodałem kolejny komponent AppCustomSearch aby poznać routing Vue i sposób, w jaki różne komponenty można łatwo ponownie wykorzystać za pomocą właściwości.

Na Router Vue jest poza zakresem tego artykułu, ale funkcjonalność routingu można znaleźć w spa / src / app-routes.js. Zapewnia odwzorowanie pomiędzy AppQuickSearch, AppCustomSearch i linki nawigacyjne. Jeśli skończysz używać routera Vue na stronie WordPress, pamiętaj, że Vue użyje URL"#" aby symulować stronę, aby nie przeładowywała się podczas przełączania się między łączami routera. Jeśli spróbujesz wykluczyć hash (zobacz moje komentarze w app-routes.js), WordPress Rewrite API przejmie, a skończysz z 404 nie znaleziono.

Na App.vue komponent hostuje AppNavigation oraz Router-widok komponenty. Zauważysz również, że Router-widok jest zapakowany w keep-alive aby zachować Stany składowe i uniknąć ponownego renderowania AppQuickSearch oraz AppCustomSearch kiedy przełączasz się między nimi.

To jest to!

Podsumowując

Mam nadzieję, że ten artykuł okazał się przydatny. Zapraszam do zabawy z moją aplikacją wyszukiwania Vue, którą możesz pobrać jako część motywu dziecięcego twenty-seventeen tutaj. Możesz go używać jako placu zabaw, aby ćwiczyć i rozwijać swoje umiejętności w WordPress i nowoczesnym JavaScript.

Tagi:

• vue.js
• WordPress rest api