Angular - tworzenie lokalnego serwera na potrzeby serwisów

Stronę tą wyświetlono już: 13 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:

Listing 1
  1. {
  2. "posts": [
  3. {
  4. "id": 1,
  5. "title": "json-server",
  6. "author": "typicode"
  7. }
  8. ],
  9. "comments": [
  10. {
  11. "id": 1,
  12. "body": "some comment",
  13. "postId": 1
  14. }
  15. ],
  16. "profile": {
  17. "name": "typicode"
  18. }
  19. }

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:

Listing 2
  1. 0
  2. id 1
  3. body "some comment"
  4. postId 1

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

Listing 3
  1. {
  2. "posts": [
  3. {
  4. "id": 1,
  5. "title": "json-server",
  6. "author": "typicode"
  7. },
  8. {
  9. "id": 2,
  10. "title": "json-server",
  11. "author": "typicode 2"
  12. },
  13. {
  14. "id": 3,
  15. "title": "json-server",
  16. "author": "typicode 3"
  17. }
  18. ],
  19. "comments": [
  20. {
  21. "id": 1,
  22. "body": "some comment",
  23. "postId": 1
  24. },
  25. {
  26. "id": 2,
  27. "body": "some comment 2",
  28. "postId": 2
  29. },
  30. {
  31. "id": 3,
  32. "body": "some comment 3",
  33. "postId": 3
  34. }
  35. ],
  36. "profile": {
  37. "name": "typicode"
  38. }
  39. }

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

Listing 4
  1. 0
  2. id 1
  3. body "some comment"
  4. postId 1
  5. 1
  6. id 2
  7. body "some comment 2"
  8. postId 2
  9. 2
  10. id 3
  11. body "some comment 3"
  12. postId 3

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

Listing 5
  1. id 2
  2. body "some comment 2"
  3. postId 2

Komentarze