Tworzenie aplikacji Angular przy użyciu interfejsu API usługi Azure Cosmos DB dla bazy danych MongoDB — dodawanie funkcji CRUD do aplikacji

Artykuł
08/15/2024

DOTYCZY: MongoDB

W tym wieloczęściowym samouczku pokazano, jak utworzyć nową aplikację napisaną w Node.js za pomocą usług Express i Angular, a następnie połączyć ją z kontem usługi Azure Cosmos DB skonfigurowanym przy użyciu interfejsu API usługi Azure Cosmos DB dla bazy danych MongoDB. Część 6 samouczka jest oparta na Części 5 i obejmuje następujące zadania:

Tworzenie funkcji Post, Put i Delete dla usługi hero
Uruchom aplikację

Wymagania wstępne

Przed rozpoczęciem tej części samouczka upewnij się, że zostały wykonane czynności opisane w Części 5 samouczka.

Napiwek

Ten samouczek przedstawia instrukcje tworzenia aplikacji krok po kroku. Jeśli chcesz pobrać gotowy projekt, ukończoną aplikację znajdziesz w repozytorium angular-cosmosdb w witrynie GitHub.

Dodawanie funkcji Post do usługi hero

W programie Visual Studio Code otwórz routes.js i hero.service.js obok siebie, naciskając przycisk Split Editor (Podziel edytor).

Zauważ, że wiersz 7 pliku routes.js wywołuje funkcję getHeroes w wierszu 5 pliku hero.service.js. Musimy utworzyć to samo parowanie dla funkcji post, put i delete.

Zacznijmy od kodowania usługi hero.

Skopiuj następujący kod do pliku hero.service.js po funkcji getHeroes i przed elementem module.exports. Ten kod:

Używa modelu hero w celu opublikowania nowego elementu hero.
Sprawdza odpowiedzi, aby sprawdzić, czy wystąpił błąd, i zwraca wartość stanu 500.

function postHero(req, res) {
  const originalHero = { uid: req.body.uid, name: req.body.name, saying: req.body.saying };
  const hero = new Hero(originalHero);
  hero.save(error => {
    if (checkServerError(res, error)) return;
    res.status(201).json(hero);
    console.log('Hero created successfully!');
  });
}

function checkServerError(res, error) {
  if (error) {
    res.status(500).send(error);
    return error;
  }
}

W pliku hero.service.js zaktualizuj element module.exports, aby uwzględnić nową funkcję postHero.
```
module.exports = {
  getHeroes,
  postHero
};
```
W pliku routes.js dodaj router dla funkcji post po routerze get. Ten router publikuje jeden element hero w danym momencie. Taka struktura pliku routera jasno przedstawia wszystkie dostępne punkty końcowe interfejsu API i pozostawia faktyczną pracę do wykonania plikowi hero.service.js.
```
router.post('/hero', (req, res) => {
  heroService.postHero(req, res);
});
```
Sprawdź, czy wszystko działa, uruchamiając aplikację. W programie Visual Studio Code zapisz wszystkie zmiany, wybierz przycisk Debuguj po lewej stronie, a następnie wybierz przycisk Rozpocznij debugowanie.
Teraz wróć do przeglądarki internetowej i otwórz kartę Narzędzia programistyczne > Sieć, naciskając klawisz F12 w przypadku większości komputerów. Przejdź do adresu http://localhost:3000, aby obejrzeć wywołania wykonywane w sieci.
Dodaj nowy element hero, wybierając przycisk Add New Hero (Dodaj nowy element hero). Wprowadź identyfikator „999”, nazwę „Fred” i powiedzenie „Hello”, a następnie wybierz przycisk Save (Zapisz). Na karcie Sieć powinno pojawić się wysłane żądanie POST dotyczące nowego elementu hero.

Teraz przejdź wstecz i dodaj funkcje Put i Delete do aplikacji.

Dodawanie funkcji Put i Delete

W pliku routes.js dodaj routery put i delete po routerze post.

router.put('/hero/:uid', (req, res) => {
  heroService.putHero(req, res);
});

router.delete('/hero/:uid', (req, res) => {
  heroService.deleteHero(req, res);
});

Skopiuj następujący kod do pliku hero.service.js po funkcji checkServerError. Ten kod:

Tworzy funkcje put i delete
Sprawdza, czy element hero został znaleziony
Obsługuje błędy

function putHero(req, res) {
  const originalHero = {
    uid: parseInt(req.params.uid, 10),
    name: req.body.name,
    saying: req.body.saying
  };
  Hero.findOne({ uid: originalHero.uid }, (error, hero) => {
    if (checkServerError(res, error)) return;
    if (!checkFound(res, hero)) return;

   hero.name = originalHero.name;
    hero.saying = originalHero.saying;
    hero.save(error => {
      if (checkServerError(res, error)) return;
      res.status(200).json(hero);
      console.log('Hero updated successfully!');
    });
  });
}

function deleteHero(req, res) {
  const uid = parseInt(req.params.uid, 10);
  Hero.findOneAndRemove({ uid: uid })
    .then(hero => {
      if (!checkFound(res, hero)) return;
      res.status(200).json(hero);
      console.log('Hero deleted successfully!');
    })
    .catch(error => {
      if (checkServerError(res, error)) return;
    });
}

function checkFound(res, hero) {
  if (!hero) {
    res.status(404).send('Hero not found.');
    return;
  }
  return hero;
}

W pliku hero.service.js eksportuj nowe moduły:

module.exports = {
  getHeroes,
  postHero,
  putHero,
  deleteHero
};

Po zaktualizowaniu kodu wybierz przycisk Uruchom ponownie w programie Visual Studio Code.
Odśwież stronę w przeglądarce internetowej, a następnie wybierz przycisk Add New Hero (Dodaj nowy element hero). Dodaj nowy element hero z identyfikatorem „9”, nazwą „Starlord” i powiedzeniem „Hi”. Wybierz przycisk Save (Zapisz), aby zapisać nowy element hero.
Teraz wybierz element hero Starlord i zmień powiedzenie z „Hi” na „Bye”, a następnie wybierz przycisk Save (Zapisz).

Teraz możesz wybrać identyfikator na karcie Sieć w celu wyświetlenia ładunku. W ładunku widać powiedzenie ustawione na „Bye”.

Możesz również usunąć jeden z elementów hero w interfejsie użytkownika i sprawdzić, ile czasu pozostało do ukończenia operacji usuwania. Wypróbuj tę funkcję, wybierz przycisk „Delete” (Usuń) dla elementu hero o nazwie „Fred”.

Po odświeżeniu strony na karcie sieci zostanie wyświetlony czas potrzebny do pobrania elementów hero. Czasy te są krótkie, ale wiele zależy od lokalizacji danych na świecie i możliwości ich replikacji geograficznej w obszarze znajdującym się w pobliżu użytkowników. Więcej informacji na temat replikacji geograficznej będzie można znaleźć w następnym samouczku, który udostępnimy wkrótce.