Angular - tworzenie lokalnego serwera na potrzeby serwisów

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2032 razy

W celu realizacji zadań związanych z komunikacją z serwerem konieczne będzie utworzenie lokalnie własnego serwera tak, aby możliwe było realizowanie podstawowych zadań z tego typu komunikacją związanych. W tym celu konieczne będzie zainstalowanie globalnie JSON server-a co też i czynię za pomocą następującego polecenia:

npm install -g json-server

Po tym jakże żmudnym zadaniu możliwe będzie uruchomienie JSON server-a w następujący sposób:

json-server server_data.json

Powyższe polecenie spowoduje utworzenie pliku server_data.json oraz uruchomienie lokalnego serwera na porcie 3000, który posiada zdolność obsługi następujących typów zapytań:

GET - pobieranie danych z serwera;
POST - wysyłanie danych do serwera, które mają zostać zapisane w bazie danych;
PUT - wysyłanie danych do serwera, które mają zastąpić lub uaktualnić wpis istniejący w bazie danych;;
PATCH
DELETE - wysłanie żądania usunięcia wpisu z bazy danych;
OPTIONS

Tylko cztery z powyższych opcji będą mnie interesować i tylko je będę wykorzystywał w następnych przykładach. Jak już wspominałem uruchomienie polecenia:

json-server server_data.json

utworzy plik JSON-a z przykładowymi danymi:

{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } }

Jeżeli wystartowałeś swój JSON server to możesz wpisać w pasku adresu przeglądarki localhost:3000 by po chwili lub co najwyżej dwóch zobaczyć podstawowe informacje o tym serwerze. Warto też wpisać np. localhost:3000/posts aby zobaczyć w przeglądarce następujące dane:

0 id 1 body "some comment" postId 1

Wyświetlił się jeden wpis więc zmodyfikuję dane w pliku json_data.json:

{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" }, { "id": 2, "title": "json-server", "author": "typicode 2" }, { "id": 3, "title": "json-server", "author": "typicode 3" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 }, { "id": 2, "body": "some comment 2", "postId": 2 }, { "id": 3, "body": "some comment 3", "postId": 3 } ], "profile": { "name": "typicode" } }

Teraz po wpisaniu tego samego adresu w przeglądarce oczom twym ukazać powinny się następujące dane:

0 id 1 body "some comment" postId 1 1 id 2 body "some comment 2" postId 2 2 id 3 body "some comment 3" postId 3

zaś po wpisaniu loclahost:3000/2 powinien pokazać się wpis z id = 2:

id 2 body "some comment 2" postId 2