Kiedy przechodziłem przez Bootcamp z kodowaniem, starałem się zrozumieć, dlaczego uczymy się, jak uzyskiwać dostęp do właściwości obiektu i iterować po tablicach. Moment, w którym wszystko zaskoczyło, uświadomił mi, jak manipulować interfejsami API. W tym artykule znajduje się niesamowicie gęsta ilość informacji. Celem jest zapoznanie Cię z pracą z interfejsami API, abyś podczas swojej edukacyjnej podróży miał pojęcie, dlaczego uczysz się niektórych metod.
W tym artykule rozpoczniemy Twoją podróż od instalacji vs code, instalacji węzła i serwera json, poznania sposobu przepływu danych z JSON do HTML oraz tego, jak używamy metody forEach do iteracji po obiektach JSON.
Zachęcamy do śledzenia. Jeśli nie masz skonfigurowanego środowiska, skorzystaj z tego przewodnika dla użytkowników systemu Windows lub tego linku dla użytkowników komputerów Mac. Po zainstalowaniu vsCode będziesz musiał zainstalować dwa pakiety. (Uwaga, jeśli masz zainstalowane te pakiety, przejdź do Łączenie koncepcji)
Instalowanie pakietów
Pakiety, które zainstalujemy to:
instalacja nvm -lts
npm install -g serwer-json
Aby to zrobić, musisz otworzyć vs code i otworzyć nowy terminal:
Następnie w terminalu wpisz „nvm install -lts” w następujący sposób:
Po naciśnięciu klawisza Enter na komputerze zostanie zainstalowana biblioteka węzłów.
Pamiętaj, aby wpisać także npm install -g json-server i nacisnąć Enter.
Teraz jesteśmy wreszcie gotowi, aby przyjrzeć się kodowi.
Otwórz kod VS i w folderze Plik otwórz…
W ten sposób utworzymy nowy folder.
Na pulpicie kliknij prawym przyciskiem myszy i utwórz nowy folder, nadaj mu dowolną nazwę i wybierz folder:
Na koniec będziemy musieli dodać trzy pliki, które będą miały nazwy Index.html, script.js i db.json w następujący sposób:
Konfigurowanie naszego kodu
Najlepszym sposobem na naukę jest przyglądanie się złożonym blokom kodu i sprawdzanie, jak są ze sobą powiązane. Nie przejmuj się zbytnio blokami kodu JSON i HTML. Są tam tylko w celach informacyjnych. Główny nacisk położony jest na JavaScript. Tytuły nad naszymi blokami kodu będą tym, czego użyjemy później do analogii. Skopiuj i wklej te bloki kodu do nowo utworzonych plików. Upewnij się, że kod HTML trafia do pliku Index.html, a JavaScript do pliku script.js i tak dalej.
HTML — okno do danych, farma AKA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script src = "script.js"></script>
</body>
</html>
JSON — Źródło danychAKA dam
{
"results": [
{
"id": 1,
"name": "Rick Sanchez",
"status": "Alive",
"species": "Human",
"gender": "Male",
"bio": "You are a Rick Sanchez because you are the main character in your story, most care about youself. You do care about your family but only when you've had some drinks or if they are mad at you.",
"image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg"
},
{
"id": 2,
"name": "Morty Smith",
"status": "Alive",
"species": "Human",
"gender": "Male",
"image": "https://rickandmortyapi.com/api/character/avatar/2.jpeg",
"bio": "You are a Morty, mostly because you are the campanion in this story, like being bossed around. When someone asks where you want to go eat you say 'I dont care where' or 'Where ever' and then complain about it later."
},
{
"id": 3,
"name": "Summer Smith",
"status": "Alive",
"species": "Human",
"gender": "Female",
"image": "https://rickandmortyapi.com/api/character/avatar/3.jpeg",
"bio": "You are a Summer, not the the season but the character from the show. the show Rick and morty. this is a fansite of the show. thats why you are here. Unless you clicked on a random link? which means you dont care, which is why you are a Summer, becasue you dont care."
},
{
"id": 4,
"name": "Beth Smith",
"status": "Alive",
"species": "Human",
"gender": "Female",
"image": "https://rickandmortyapi.com/api/character/avatar/4.jpeg",
"bio": "You are Beth, you are probably loving and caring person unless you chose to abandon your kids in season 5 and go become space beth. #spoilers. Also you like wine."
},
{
"id": 5,
"name": "Jerry Smith",
"status": "Alive",
"species": "Human",
"gender": "Male",
"image": "https://rickandmortyapi.com/api/character/avatar/5.jpeg",
"bio": "You are a Jerry, we know why you are here. its ok. actually its not haha this is rick you suck Jerry!"
}
]}
JavaScript — Manipulacja danymi AKA nawadnianie
const whereWeAppend = document.querySelector("div");
function getCharacters(parameter1){
fetch(`http://localhost:3000/results${parameter1}`)
.then (r=> r.json())
.then (json => json.forEach(data => render(data))
)}
getCharacters("/?_limit=3");
function render(data){
let picture = document.createElement("img");
picture.src = data.image;
whereWeAppend.append(picture);
};
Jeśli pomyślnie zainstalowałeś serwer json (npm install -g json-server) i węzeł (nvm-install -lts), możesz zobaczyć, co zrobiłeś, tworząc dwa nowe terminale.
Jeśli nie masz otwartego terminala, wykonaj powyższe kroki, aby otworzyć nowy terminal.
Aby dodać kolejny terminal, naciśnij mały symbol +, aby dodać kolejny terminal.
Będziesz mieć teraz dwa terminale, między którymi możesz się przełączać.
W jednym z terminali wpisz json-server --watch db.json
W drugim terminalu wpisz explorer.exe indeks.html
Pamiętaj, że explorer.exe Index.html otwiera Twoją domyślną przeglądarkę. Mam domyślną przeglądarkę ustawioną na Chrome. Może to nie działać, jeśli nie masz Chrome.
To ekscytujące, teraz powinieneś zobaczyć taki ekran, kiedy przejdziesz do Google Chrome:
Gratulacje!!!!! W jednym z tutoriali zainstalowałeś pakiety węzłów i wyrenderowałeś coś z serwera JSON na swoją stronę. Rozłóżmy poszczególne części kodu, aby zrozumieć, co się dzieje.
Przekazywanie parametrów do funkcji
Pobawmy się zaworem, który pozwala na przepływ informacji z naszego pliku JSON na nasz ekran (HTML). Spójrz na swój plik JavaScript (script.js). W tym pliku zobaczysz ten blok kodu:
getCharacters("/?_limit=3");
Jeśli przełączymy limit=3 na limit=5 w następujący sposób:
getCharacters("/?_limit=5");
Po odświeżeniu Chrome na ekranie pojawi się pięć znaków.
Co się dzieje? Powiedzieliśmy JS, aby pozwolił na przejście tylko 5 obiektów z naszego pliku JSON, podczas gdy wcześniej poprosiliśmy, aby pozwolił na przejście tylko 1 obiektu. Jeśli wpisaliśmy:
getCharacters("/?_limit=1");
Ricka widzieliśmy na ekranie dopiero po odświeżeniu. Zachowajmy to w ten sposób, aby ułatwić zrozumienie pojęć.
Musimy zidentyfikować pewne powiązania. Gdzie oni są? getCharacters to funkcja, którą zadeklarowaliśmy powyżej. Przekazaliśmy do niego parametr o nazwie parametr1.
function getCharacters(parameter1){
fetch(`http://localhost:3000/results${parameter1}`)
.then (r=> r.json())
.then (json => json.forEach(data => render(data))
)}
Porównaj te dwa bloki kodu. Zauważyliście coś, co wygląda tak samo?
Istnieją trzy połączenia, którym chcemy się przyjrzeć. Połączenia wyglądają następująco:
1. Najpierw zwróć uwagę na nawiasy w getCharacters(“/?_limit=1”).
2. Następnie spójrz na nawiasy, które mówią (parametr 1).
3. Na koniec spójrz na ${parametr1}
Istnieje przepływ informacji, który mówi JSONowi, ile znaków należy przepuścić, zaczynając od getCharacters i płynąc do ${paramter1}
Mówimy JS, aby przekazał /?_limit=1 do parametru1. Gdy zostanie to przekazane, nasz kod będzie wyglądał następująco:
fetch(`http://localhost:3000/results/?_limit=1`)
Baw się kodem, aby go zrozumieć.
Podczas zabawy z kodem możesz nacisnąć ctrl + z i cofnąć zmiany. Jeśli cofniesz się za daleko, możesz nacisnąć ctrl + y, aby przywrócić zmiany. Aby zobaczyć zmiany, za każdym razem będziesz musiał odświeżyć stronę Chrome.
Jak uzyskać z naszego JSON
Jeśli spojrzymy na nasz plik JSON, zauważymy tablicę o nazwie „results”:[
{
"results": [
{
"id": 1,
"name": "Rick Sanchez",
"status": "Alive",
"species": "Human",
"gender": "Male",
"bio": "You are a Rick Sanchez because you are the main character in your story, most care about youself. You do care about your family but only when you've had some drinks or if they are mad at you.",
"image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg"
},
W tej tablicy pierwszym znakiem jest Rick Sanchez i mamy klucz obrazu o wartości „https://rickandmortyapi.com/api/character/avatar/1.jspeg”
Obiekty to po prostu pary klucz-wartość. Dostęp do klucza wartości uzyskujemy za pomocą notacji z kropką. Porozmawiajmy o notacji kropkowej.
W poniższym bloku kodu mamy image.src = data.image;
picture.src = data.image;
Oznacza to, że na naszym obrazie chcemy, aby źródło było równe dane.obraz.
Co to jest data.image?
Przyjrzyjmy się powiązaniom:
Mamy do czynienia z dwoma różnymi połączeniami: połączeniem A i połączeniem B.
Zwróć uwagę na wyniki w A1 i jest to połączenie z wynikami A2. To, co robi nasz fetch, to po prostu zapytanie localhost:3000/results (czyli w terminalu, w którym uruchomiłeś json-server --watch db.json), aby uzyskać dostęp do wyników tablicy z naszego db.json. Do dwóch „.potem” dojdziemy później. Wystarczy wiedzieć, że dane przepływają z naszego pliku JSON do tego, co nazywamy danymi.
Ponieważ pozwalamy tylko 1 obiektowi pochodzić z naszych danych JSON =:
{
"id": 1,
"name": "Rick Sanchez",
"status": "Alive",
"species": "Human",
"gender": "Male",
"bio": "You are a Rick Sanchez because you are the main character in your story, most care about youself. You do care about your family but only when you've had some drinks or if they are mad at you.",
"image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg"
}
Kiedy patrzymy na nasze drugie połączenie, B1 (nasze dane) jest przekazywane do B2 (nasz parametr, który nazwaliśmy danymi)
Zatem w B3 data.image =
„https://rickandmortyapi.com/api/character/avatar/1.jpeg”
Jeśli umieścimy data.name zamiast data.image otrzymamy:
„Rick Sanchez”
Kropką jest po prostu dostęp do klucza w naszych danych.
W ten sposób pobieramy nasz obraz z db.json. Następnie przyjrzymy się, jak dołączyć obraz do naszego kodu HTML.
Dołączanie do naszego kodu HTML
Teraz widzieliśmy, jak wyciągnąć informacje z JSON do naszego JS. Najtrudniejsza część już za Tobą. Teraz mamy proste zadanie dołączenia go do kodu HTML.
Przyjrzyjmy się najpierw naszej „const WhereWeAppend” w naszym JS. Skup się na div
To, co mówi document.querySelector to „wejdź do naszego dokumentu HTML i znajdź pierwszy element o nazwie div”.
Przywróćmy nasz kod HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script src = "script.js"></script>
</body>
</html>
zlokalizuj miejsce, gdzie jest napisane div. znajduje się w treści kodu HTML.
Mówimy o tym, że parametr WhereWeAppend jest ustawiony jako element div w naszym kodzie HTML.
div działa jak tablica, na której możemy publikować nasze zdjęcia.
Teraz skupmy się na tym, jak dołączamy zdjęcia do naszego div:
Najpierw tworzymy obraz za pomocą metody .createElement(). Ustawiamy image = na jakiś obraz. Pamiętaj, że ten obraz ma TYLKO szablon obrazu. Aby zdefiniować rzeczywisty obraz, który będzie się pojawiał na obrazku, musimy w następnej linii wykonać image.src.
Pamiętaj, że data.image to klucz „image” znajdujący się w naszym obiekcie JSON. Zatem teraz image.src nie jest już pustą ramką. Teraz ma wizerunek Ricka Sancheza.
gdzieWeAppend to element div, który zdefiniowaliśmy w kodzie HTML. Dodatek .append na nim mówi „umieść obraz na div” i gotowe, możesz teraz zobaczyć pełny przepływ. Podsumujmy, a jako bonus porozmawiajmy o forEach
Nasza rzeka informacji i .forEach
To wizualna reprezentacja tego, jak wszystko jest ze sobą połączone. Mamy nadzieję, że daje to wgląd w sposób, w jaki JS przekazuje informacje. Jest jeszcze jedna sprawa, którą należy poruszyć. To jest forEach w ciągu sekundy.then.
Kiedy otwieramy zawór, wykonując następujące czynności:
getCharacters("/?_limit=5")
Teraz renderujemy wszystkie 5 znaków do kodu HTML. Ale jak?
Używamy metody .forEach. Aby zrozumieć, co to oznacza, złammy nasz kod, zmieniając go na:
.then(json => render(json))
Nie otrzymalibyśmy żadnych zdjęć. Dzieje się tak dlatego, że próbujemy przekazać całą tablicę obiektów, a całe pole nie może znaleźć danych.obrazu w tym polu, ponieważ ono nie istnieje.
Użyjmy analogii:
- Funkcja render() jest analogiczna do pompowania powietrza.
- json jest analogiczny do pudełka.
- dane są analogiczne do rur rzecznych w pudełku.
Załóżmy, że właśnie kupiłeś pudełko pełne pięciu tubek, aby spłynąć rzeką. Gdybyś próbował napompować skrzynkę powietrzem i wrzucić skrzynkę z rurami rzecznymi do rzeki, nigdzie byśmy nie dotarli. Kiedy wykonujemy powyższy kod .then(json =› render(json)) uruchamiamy funkcję na naszym pudełku… a raczej pompujemy pudełko powietrzem. Kiedy uruchomimy metodę forEach w następujący sposób:
.then(json => json.forEach(data => render(data))
Mówimy, aby wyjąć każdy obiekt z pudełka i uruchomić na nim funkcję renderowania. Lub, w naszej analogii, wyjmij każdą tubkę z pudełka i napompuj każdą pojedynczą tubę.
W podsumowaniu
Spójrz na wszystko, co zrobiłeś.
- Zainstalowano vs-kod
- zainstalowanych pakietów węzłów
- Widziałem, jak JavaScript łączy HTML i JSON
- dowiedziałem się o metodzie forEach
Rezultat tych lekcji umożliwi Ci przekazywanie danych z wielu innych interfejsów API, dzięki czemu będziesz mógł renderować je na swojej stronie internetowej. Kontynuując naukę, będziesz w stanie zdać sobie sprawę z użyteczności tego, czego uczą cię instruktorzy. Ponadto, jeśli pobawisz się tym kodem, lepiej zrozumiesz, jak działa JavaScript.
