Создание приложения Angular с помощью API Azure Cosmos DB для MongoDB. Добавление функций CRUD в приложение

2024-08-15

Область применения: MongoDB

В этом руководстве по нескольким компонентам показано, как создать новое приложение, написанное Node.js с помощью Express и Angular, а затем подключить его к учетной записи Azure Cosmos DB, настроенной с помощью API Azure Cosmos DB для MongoDB. Часть 6 руководства основана на части 5. В этой части рассматриваются следующие задачи:

Создание функций Post, Put и Delete для службы hero
Выполнить приложение

Необходимые компоненты

Прежде чем переходить к этой части руководства, следует выполнить все задачи из части 5.

Совет

В этом руководстве изложены пошаговые инструкции по созданию приложения. Готовое приложение можно скачать из репозитория angular-cosmosdb на GitHub.

Добавление функции Post в службу hero

Откройте в Visual Studio Code файлы routes.js и hero.service.js параллельно. Для этого нажмите кнопку Разделить редактор .

Вы увидите, что строка 7 файла routes.js вызывает функцию getHeroes в строке 5 файла hero.service.js. Необходимо создать такие же пары для функций Post, Put и Delete.

Начнем с написания кода для службы hero.
Вставьте следующий код в файл hero.service.js после функции getHeroes и перед module.exports. Этот код выполняет следующие действия.
- Использует модель hero для публикации нового элемента hero.
- Проверяет ответы на наличие ошибок и возвращает значение состояния 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;
  }
}
```
В файле hero.service.js обновите module.exports, чтобы включить новую функцию postHero.
```
module.exports = {
  getHeroes,
  postHero
};
```
В файле routes.js добавьте маршрутизатор для функции post работу после маршрутизатора get. Этот маршрутизатор публикует один элемент hero в один момент времени. При таком структурировании файла маршрутизатора отображаются все доступные конечные точки API и делегируются все задачи файлу hero.service.js.
```
router.post('/hero', (req, res) => {
  heroService.postHero(req, res);
});
```
Запустите приложение, чтобы убедиться в его работоспособности. В Visual Studio Code сохраните все изменения, нажмите кнопку Отладка слева, а затем нажмите кнопку Начать отладку .
Теперь вернитесь в браузер и откройте вкладку с параметрами сети в инструментах разработчика. На большинстве компьютеров эта вкладка открывается нажатием клавиши F12. Перейдите по адресу http://localhost:3000 для просмотра вызовов по сети.
Добавьте новый элемент hero, нажав кнопку Add New Hero (Добавить героя). Введите идентификатор 999, имя Fred и фразу Hello. Затем нажмите кнопку Save (Сохранить). На вкладке с параметрами сети вы увидите, отправленный запрос POST для нового элемента hero.

Теперь добавим в приложение функции Put и Delete.

Добавление функций Put и Delete

В файле routes.js добавьте маршрутизаторы put и delete после маршрутизатора post.

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

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

Вставьте следующий код в файл hero.service.js после функции checkServerError. Этот код выполняет следующие действия.

Создает функции put и delete.
Определяет наличие элемента hero.
Обрабатывает ошибки.

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;
}

В файле hero.service.js экспортируйте новые модули:
```
module.exports = {
  getHeroes,
  postHero,
  putHero,
  deleteHero
};
```
Обновив код, нажмите кнопку Перезапустить в Visual Studio Code.
Обновите страницу в браузере и нажмите кнопку Add New Hero (Добавить героя). Добавьте новый элемент hero с идентификатором 9, именем Starlord и фразой "Hi". Нажмите кнопку Save (Сохранить), чтобы сохранить элемент hero.
Теперь выберите героя Starlord и измените его фразу с Hi на Bye. Нажмите кнопку Save (Сохранить).

Теперь выберите идентификатор на вкладке с параметрами сети, чтобы отобразить полезные данные. Вы увидите в полезных данных, что фраза героя поменялась на "Bye".

Вы можете удалить из пользовательского интерфейса один элемент hero, чтобы узнать, сколько времени занимает операция удаления. Попробуйте нажать кнопку Delete (Удалить) рядом с героем Fred.

Если обновить страницу, на вкладке с параметрами сети отобразится время, требуемое для получения элементов hero. Хотя эти операции выполняются быстро, многое зависит от расположения данных в мире и вашей возможности выполнять георепликацию в ближайшую к пользователям область. Дополнительные сведения о георепликации см. в следующем руководстве, которое скоро появится.

Следующие шаги

В этой части руководства мы выполнили следующую задачу:

добавили функции Post, Put и Delete в приложение.

Скоро в этой серии руководств появятся дополнительные видео. Следите за обновлениями.

Если вы планируете ресурсы для миграции в Azure Cosmos DB, Для планирования ресурсов можно использовать сведения об имеющемся кластере базы данных.

Если вам известно только количество виртуальных ядер и серверов в существующем кластере баз данных, прочитайте об оценке единиц запроса на основе этих данных.
Если вам известна стандартная частота запросов для текущей рабочей нагрузки базы данных, ознакомьтесь со статьей о расчете единиц запросов с помощью планировщика ресурсов Azure Cosmos DB

Поделиться через

Создание приложения Angular с помощью API Azure Cosmos DB для MongoDB. Добавление функций CRUD в приложение

Необходимые компоненты

Добавление функции Post в службу hero

Добавление функций Put и Delete

Следующие шаги

Обратная связь

Дополнительные ресурсы