Creare un'app Angular con l'API di Azure Cosmos DB per MongoDB - Aggiungere funzioni CRUD all'app

SI APPLICA A: MongoDB

Questa esercitazione in più parti illustra come creare una nuova app scritta in Node.js con Express e Angular e quindi connetterla all'account Azure Cosmos DB configurato con l'API Azure Cosmos DB for MongoDB. La Parte 6 dell'esercitazione è basata sulla Parte 5 e illustra le attività seguenti:

• Creare funzioni Post, Put e Delete per il servizio hero
• Eseguire l'app

Prerequisiti

Prima di iniziare questa parte dell'esercitazione, assicurarsi di avere completato le procedure illustrate nella Parte 5 dell'esercitazione.

Suggerimento

Questa esercitazione illustra in modo dettagliato la procedura per la creazione dell'applicazione. Se si vuole scaricare il progetto finito, è possibile ottenere l'applicazione completa dal repository angular-cosmosdb in GitHub.

Aggiungere una funzione Post al servizio hero

1. In Visual Studio Code aprire routes.js e hero.service.js affiancati facendo clic sul pulsante Dividi editor .

   Si noti che la riga 7 di routes.js chiama la funzione getHeroes nella riga 5 di hero.service.js. È necessario creare questa stessa associazione per le funzioni post, put e delete.

   

   Per iniziare, sarà necessario codificare il servizio hero.

2. Copiare il codice seguente in hero.service.js dopo la funzione getHeroes e prima di module.exports. Questo codice:

   • Usa il modello hero per pubblicare un nuovo elemento hero.
   • Controlla le risposte per verificare se è presente un errore e restituisce un valore di stato 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;
     }
   }
   

3. In hero.service.js aggiornare module.exports per includere la nuova funzione postHero.

   module.exports = {
     getHeroes,
     postHero
   };
   

4. In routes.js aggiungere un router per la funzione post dopo il router get. Questo router pubblica un elemento hero alla volta. Questa struttura del file del router mostra chiaramente tutti gli endpoint API disponibili e lascia eseguire le attività vere e proprie al file hero.service.js.

   router.post('/hero', (req, res) => {
     heroService.postHero(req, res);
   });
   

5. Controllare che sia tutto a posto eseguendo l'app. In Visual Studio Code salvare tutte le modifiche, fare clic sul pulsante Debug sul lato sinistro, quindi selezionare il pulsante Avvia debug .

6. Tornare ora al browser Internet e aprire la scheda Network (Rete) degli strumenti di sviluppo premendo F12 per la maggior parte dei computer. Passare a http://localhost:3000 per controllare le chiamate eseguite in rete.

   

7. Aggiungere un nuovo elemento hero facendo clic sul pulsante Add New Hero (Aggiungi nuovo elemento hero). Immettere l'ID "999", il nome "Fred" e il testo "Hello", quindi fare clic su Save (Salva). La scheda Networking (Rete) indica che è stata inviata una richiesta POST per un nuovo elemento hero.

   

   Tornare ora indietro e aggiungere le funzioni Put e Delete all'app.

Aggiungere le funzioni Put e Delete

1. In routes.js aggiungere i router put e delete dopo il router post.

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

2. Copiare il codice seguente in hero.service.js dopo la funzione checkServerError. Questo codice:

   • Crea le funzioni put e delete
   • Controlla se hero è stato trovato
   • Esegue la gestione degli errori

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

3. In hero.service.js esportare i nuovi moduli:

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

4. Ora che il codice è stato aggiornato, fare clic sul pulsante Riavvia in Visual Studio Code.

5. Aggiornare la pagina nel browser Internet e fare clic sul pulsante Add New Hero (Aggiungi nuovo elemento hero). Aggiungere un nuovo elemento hero con ID "9", nome "Starlord" e testo "Hi". Fare clic sul pulsante Save (Salva) per salvare il nuovo elemento hero.

6. Selezionare ora l'elemento hero Starlord e cambiare il testo da "Hi" a "Bye" quindi fare clic sul pulsante Save (Salva).

   È ora possibile selezionare l'ID nella scheda Network (Rete) per visualizzare il payload. Il payload mostra che il testo ora è impostato su "Bye".

   

   È anche possibile eliminare uno degli elementi hero nell'interfaccia utente e verificare il tempo necessario per completare l'operazione di eliminazione. Per provare, fare clic sul pulsante "Delete" (Elimina) per l'elemento hero denominato "Fred".

   

   Se si aggiorna la pagina, la scheda Network (Rete) indica il tempo necessario per ottenere gli elementi hero. Anche se i tempi sono rapidi, molto dipende dalla posizione geografica dei dati e dalla possibilità di eseguirne la replica geografica in un'area vicina agli utenti. Altre informazioni sulla replica geografica saranno disponibili nella prossima esercitazione, che verrà presto rilasciata.

Passaggi successivi

In questa parte dell'esercitazione sono state eseguite le operazioni seguenti:

• Sono state aggiunte le funzioni Post, Put e Delete all'app

Ricontrollare a breve se sono disponibili altri video in questa serie di esercitazioni.

Si sta tentando di pianificare la capacità per una migrazione ad Azure Cosmos DB? È possibile usare le informazioni del cluster di database esistente per la pianificazione della capacità.

• Se si conosce solo il numero di vcore e server nel cluster di database esistente, leggere le informazioni sulla stima delle unità richieste usando vCore o vCPU
• Se si conosce la frequenza delle richieste tipiche per il carico di lavoro corrente del database, leggere le informazioni sulla stima delle unità richieste con lo strumento di pianificazione della capacità di Azure Cosmos DB