Att fejka backend i Angular med JSON

För det mesta, när man bygger en Angular-applikation kommunicerar man från och till en backend via ett REST API som använder JSON som dataformat. Ibland vill du börja bygga en Angular-applikation, men du har ingen backend för att ge dig riktig data.

Oroa dig inte mer! I den här artikeln kommer jag att presentera dig för JSON Server, ett verktyg som gör det enkelt att håna vilo-API:er så att du inte behöver ha en riktig backend för att komma igång.

Varför ett Mock API?

Först, låt oss börja med varför du skulle vilja ha ett mock API i första hand. Mina tre främsta anledningar till att ha ett mock API är prototypframställning , hånfull , och undervisning .

Prototypframställning

Med ett mock API kan du börja utveckla utan att vänta på backend-teamet. Du börjar skriva din Angular-applikation, kopplar in den till ett mock API och byter sedan till den riktiga backend när den är klar. Detta kan också hjälpa dig att designa de potentiella formerna för serverns svar i samarbete med backend-teamet.

Hånfull

För end-to-end-tester vill du vanligtvis inte träffa dina riktiga API:er när du kör dina testsviter. Ett mock API låter dig ha ett realistiskt API för dina tester utan att behöva oroa dig för att fylla i eller återställa din databas.

Undervisning

I handledningar, demos, workshops och onlinekurser kan ett mock-API vara väldigt praktiskt genom att du kan fokusera på att lära ut frontend-tekniken istället för att oroa dig för att sätta upp en backend.

Vad är JSON Server?

JSON Server är en Express-baserad server som simulerar ett fullfjädrat REST API, med en JSON-fil som sin databas.

När jag skrev den här artikeln försökte jag ta reda på det bästa sättet att beskriva JSON Server. Sedan tog jag en andra titt på LÄS MIG av JSON Server-förvaret eftersom det beskriver JSON Server på bästa möjliga sätt.

Så JSON Server är ett verktyg som hjälper Frontend-utvecklare snabbt prototyp eller falsk ett REST API. Där JSON Server lyser är att du inte behöver ställa in en riktig databas. Din databas är en enkel JSON-fil.

Konfigurera JSON Server

Låt oss nu prata om hur man ställer in en JSON-server.

Ställning en ny Angular-applikation

Låt oss först bygga en ny Angular-applikation som heter |_+_| med Angular CLI:

Ändra katalog till |_+_|

Installera JSON Server

JSON Server är tillgänglig som ett paket som du kan installera med NPM:

Skapa databasfilen

Skapa |_+_| fil med följande innehåll:

Filen |_+_| definierar våra API-slutpunkter. I det här exemplet har vi en slutpunkt som heter |_+_| som kommer att returnera en lista över fotbollslag.

Skapa en ruttkartläggningsfil

Skapa en fil med namnet |_+_| med följande innehåll:

Som standard har våra rutter inte prefixet |_+_|. Så vi kommer att använda |_+_| fil för att konfigurera JSON Server för att prefixa alla våra API-slutpunkter med |_+_|. Detta är mycket viktigt eftersom vi i vår Angular-applikation vill att alla våra HTTP-anrop ska börja med |_+_|.

Du kanske också gillar: För att bli en effektiv Angular-utvecklare behöver du lära dig 19 saker i den här artikeln.

Lägg till ett skript för att starta servern

Lägg till följande nyckel/värdepar till skriptsektionen i din |_+_| fil:

Starta mock API

Nu är vi redo att starta mock API med följande kommando:

nunit vs xunit vs mstest

Detta kommer att starta vårt mock API på http://localhost:3000 .

Kommunicera med Mock API från Angular

Ställ in |_+_|

Innan du kan skicka HTTP-förfrågningar till en backend måste du ställa in |_+_|. Öppna |_+_| fil och lägg till |_+_| till |_+_| array av |_+_|:

Gör en förfrågan till backend

Du kan nu injicera |_+_| tjänst i din rotkomponent—|_+_|. Skapa sedan en egenskap som heter |_+_| som kommer att hålla den observerbara av lag som returneras från vår |_+_| begäran.

Visa listan över lag

Vi kan nu använda |_+_| pipe to och |_+_| direktiv i vår komponents mall för att visa listan över lag:

Starta applikationen

Vi är redo att servera applikationen:

Den öppnar automatiskt din webbläsare tack vare |_+_| flagga. Men hallå, ingenting visas på sidan. Öppna webbläsarens dev-verktyg och du kommer att se att begäran misslyckades på grund av CORS-problem.

Detta beror på att vår Angular-applikation och vår backend inte finns på samma domän – olika portar är liktydigt med olika domännamn.

Att lösa CORS-problem

För att lösa CORS-problem är det enklaste sättet att helt undvika HTTP-anrop över flera domäner. För det mesta ligger vår frontend och vår backend i samma domän så vi har inga CORS-problem i produktionen. Detta är en utvecklingstidsfråga och lösningen är att dra fördel av Angular CLI:s utvecklingsserver inbyggd proxy och göra alla våra HTTP-anrop relativa.

Gör våra HTTP-anrop relativa

Byt ut |_+_| med |_+_| inuti komponenten:

I produktion kommer denna begäran att träffa |_+_| om din frontend är utplacerad på |_+_| och din backend finns på |_+_|. Men under utveckling kommer begäran att träffa |_+_| medan vår backend finns på |_+_|. För att lösa detta utvecklingstidsproblem, låt oss ställa in en proxy med Angular CLI.

Skapa proxykonfigurationsobjektet

Skapa ett filnamn |_+_| i roten av din ansökan:

Öppna |_+_| fil och uppdatera |_+_| mål genom att lägga till nyckel/värdeparet |_+_|

Uppdatera arbetsytans konfigurationsfil för att använda proxyn

Med denna konfiguration, i utvecklingsläge, alla förfrågningar som börjar med |_+_| kommer att vidarebefordras till |_+_| där vårt mock API finns. Inga CORS-problem längre och när vi distribuerar vår applikation till produktion krävs ingen förändring av vår Angular-applikation för att få den att fungera med en riktig backend.

Starta om servern

Starta om servern för att ta hänsyn till proxykonfigurationen och kontrollera din webbläsare igen.

Sammanfattning

I den här artikeln lärde vi oss hur man använder JSON Server för att bygga mock API. Vi lärde oss också hur vi korrekt konfigurerar våra Angular-applikationer för att dra fördel av CLI:s inbyggda proxy för att undvika CORS-problem i utvecklingsläge.

Tack för att du läste! Om du gillade den här artikeln, vänligen dela den med andra som kanske gillar den också.!