Comment créer un gestionnaire de musique avec Nuxt.js et Express.js

Gestion des ressources multimédias numériques telles que l'audio et la vidéo dans votre application peut être délicate en raison des considérations qui doivent être prises côté serveur (par exemple, la mise en réseau, le stockage et la nature asynchrone de la gestion des téléchargements de fichiers). Cependant, nous pouvons utiliser des bibliothèques comme Multer et Express.js pour simplifier notre flux de travail sur le backend tout en utilisant Nuxt.js (framework Vue) pour développer les interactions frontales.

Chaque fois qu'un client Web télécharge un fichier sur un serveur, il est généralement soumis via un formulaire et encodé en multipart / form-data . Multer est un middleware pour Express.js et Node.js qui facilite la gestion de ces soi-disant multipart / form-data chaque fois que vos utilisateurs téléchargent des fichiers. Dans ce didacticiel, je vais vous expliquer comment créer une application de gestion de la musique en utilisant Express.js avec Multer pour télécharger de la musique et Nuxt.js (framework Vue) pour notre interface.

Prérequis

• Familiarité avec HTML, CSS, et JavaScript (ES6 +);
• Node.js, npm et MongoDB installés sur votre machine de développement;
• Code VS ou éditeur de code de votre choix;
• Connaissances de base d'Express.js.

Service principal

Commençons par créer un répertoire pour notre projet en naviguant dans le répertoire et en émettant npm init -y sur votre terminal pour créer un fichier package.json qui gère toutes les dépendances de notre application.

 mkdir serverside && cd serverside
npm init -y

Ensuite, installez multer express et les autres dépendances nécessaires pour Bootstrap une application Express.js.

 npm install express multer nodemon mongoose cors morgan body-parser - -enregistrer

Ensuite, créez un fichier index.js :

 touchez index.js

Ensuite, dans le fichier index.js nous initialiserons tous les modules, créerons une application Express.js et créerons un serveur pour la connexion aux navigateurs:

 const express = require (" Express");
const PORT = process.env.PORT || 4000;
const morgan = require ("morgan");
const cors = require ("cors");
const bodyParser = require ("body-parser");
const mongoose = require ("mangouste");
const config = require ("./ config / db");
const app = express ();
// configurer la base de données et la mangouste
mongoose.set ("useCreateIndex", true);
mangouste
  .connect (config.database, {useNewUrlParser: true})
  .then (() => {
    console.log ("La base de données est connectée");
  })
  .catch (err => {
    console.log ({database_error: err});
  });
// La configuration de db se termine ici
// enregistrement des cors
app.use (cors ());
// configurer l'analyseur de corps
app.use (bodyParser.urlencoded ({extended: false}));
app.use (bodyParser.json ());
// configurer l'analyseur de corps se termine ici
app.use (morgan ("dev")); // configire morgan
// définir la première route
app.get ("/", (req, res) => {
  res.json ("Hola MEVN devs ... Assemble");
});
app.listen (PORT, () => {
  console.log (`L'application fonctionne sur $ {PORT}`);
});

Nous introduisons tout d'abord Express.js dans le projet, puis définissons un port sur lequel notre application sera exécutée. Ensuite, nous introduisons les dépendances body-parser morgan mongoose et cors .

Nous enregistrons ensuite l'express par exemple dans une variable appelée app . Nous pouvons utiliser l'instance app pour configurer le middleware dans notre application, tout comme nous avons configuré le middleware cors . Nous utilisons également l'instance app pour configurer la route racine qui s'exécutera dans le port que nous avons défini.

Créons maintenant un dossier / config pour notre base de données config et multer config:

 mkdir config et cd config
toucher multer.js && toucher db.js

Ouvrez ensuite config / db.js et ajoutez le code suivant pour configurer notre base de données:

 module.exports = {
  base de données: "mongodb: // localhost: 27017 /",
  secret: "mot de passe"
};

(Il s'agit en fait d'un objet qui contient l'URL de la base de données et le secret de la base de données.)

Exécution de nodemon et navigation vers localhost: 4000 sur votre navigateur devrait vous donner ceci message:

 "Hola MEVN devs ... Assemble"

En outre, voici à quoi devrait ressembler votre terminal:

Configuration du modèle, des itinéraires et des contrôleurs [19659010] Configurons une structure de fichiers en tapant ce qui suit:

 mkdir api && cd api
modèle mkdir && modèle cd && touch Music.js
cd ..
contrôleur mkdir && contrôleur cd && touch musicController.js
cd ..
itinéraires mkdir && itinéraires cd && touch music.js

Dans notre terminal, nous utilisons mkdir pour créer un nouveau répertoire, puis cd pour nous déplacer dans un répertoire. Nous commençons donc par créer un répertoire appelé api puis passons au répertoire api .

La commande touch est utilisée pour créer un nouveau fichier à l'intérieur d'un répertoire utilisant le terminal, tandis que la commande cd est utilisée pour sortir d'un répertoire.

Passons maintenant à notre fichier api / model / Music.js pour créer un schéma musical. Un modèle est une classe avec laquelle nous construisons des documents. Dans ce cas, chaque document sera un morceau de musique avec des propriétés et des comportements tels que déclarés dans notre schéma:

 let mongoose = require ("mongoose");
laissez musicSchema = mongoose.Schema ({
  Titre: {
    type: String,
    requis: vrai
  },
  la musique: {
    type: Objet,
    requis: vrai
  },
  artiste: {
    type: String,
    requis: vrai
  },
  créé: {
    type: Date,
    par défaut: Date.now ()
  }
});
laissez Music = mongoose.model ("Music", musicSchema);
module.exports = Musique;

Dirigeons-nous vers config / multer pour configurer Multer:

 let multer = require ("multer");
const path = require ("path");
const storage = multer.diskStorage ({
  destination: (req, res, cb) => {
    cb (null, "./uploads");
  },
  nom de fichier: (req, file, cb) => {
    cb (null, new Date (). toISOString () + file.originalname);
  }
});
const fileFilter = (req, file, cb) => {
  si (
     file.mimetype === "audio / mpeg" ||
     file.mimetype === "audio / wave" ||
     file.mimetype === "audio / wav" ||
     file.mimetype === "audio / mp3"
  ) {
    cb (nul, vrai);
  } autre {
    cb (null, false);
  }
};
exports.upload = multer ({
  stockage: stockage,
  limites: {
    fileSize: 1024 * 1024 * 5
  },
  fileFilter: fileFilter
});

Dans le fichier multer.js nous commençons par créer un dossier où tous les fichiers musicaux téléchargés seront téléchargés. Nous devons rendre ce fichier statique en le définissant dans le fichier index.js :

 app.use ('/ uploads', express.static ('uploads'));

Après cela, nous écrivons un validateur simple qui vérifiera le fichier mimetype avant de le télécharger. Nous définissons ensuite l'instance multer en ajoutant l'emplacement de stockage, les limites de chaque fichier et le validateur que nous avons créé.

Créer les itinéraires nécessaires

Créons maintenant nos itinéraires. Vous trouverez ci-dessous la liste des points de terminaison que nous allons créer.

Commençons par créer l'itinéraire du blog. Rendez-vous sur api / routes / music.js et écrivez le code suivant:

 const express = require ("express");
const router = express.Router ();
const musicController = require ("../ controller / musicController");
const upload = require ("../../ config / multer");
router.get ("/", musicController.getAllMusics);
router.post ("/", upload.upload.single ("music"), musicController.addNewMusic);
router.delete ("/: musicId", musicController.deleteMusic);
module.exports = routeur;

Note : Maintenant, chaque fois que nous faisons une demande de à / musique . l'itinéraire appelle la fonction getAllMusic qui se trouve dans le fichier "controllers".

Passons à api / controllers / musicController pour définir les contrôleurs. Nous commençons par écrire une fonction pour obtenir toute la musique dans notre base de données en utilisant la méthode mongoose db.collection.find qui retournera tous les éléments de cette collection.

Après cela, nous écrivons une autre fonction qui va créer un morceau de nouvelle musique dans la base de données. Nous devons créer une nouvelle instance musicale à l'aide du mot-clé nouveau puis définir l'objet musical. Après cela, nous allons utiliser la méthode mongoose save pour ajouter de la nouvelle musique à la base de données.

Pour supprimer un morceau de musique, nous devons utiliser la mangouste remove en passant simplement l'ID de musique comme paramètre dans l'instance remove . Il en résulte que la mangouste examine la collection de musique qui a cet ID particulier, puis la retire de cette collection.

 let mongoose = require ("mongoose");
const Music = require ("../ model / Music");
exports.getAllMusics = async (req, res) => {
  essayez {
    laisser la musique = attendre Music.find ();
    res.status (200) .json (musique);
  } catch (err) {
    res.status (500) .json (err);
  }
};
exports.addNewMusic = async (req, res) => {
  essayez {
    const music = new Music ({
      titre: req.body.title,
      artiste: req.body.artist,
      musique: fichier de demande
    });
    
    laissez newMusic = attendre music.save ();
    res.status (200) .json ({données: newMusic});
  } catch (err) {
    res.status (500) .json ({erreur: err});
  }
};
exports.deleteMusic = async (req, res) => {
  essayez {
    const id = req.params.musicId;
    laissez result = attendre Music.remove ({_id: id});
    res.status (200) .json (résultat);
  } catch (err) {
    res.status (500) .json (err);
  }
};

Enfin et surtout, pour tester les itinéraires, nous devons enregistrer les itinéraires musicaux dans notre fichier index.js :

 const userRoutes = require ("./ api / user / route / utilisateur "); // apportez nos itinéraires utilisateurs
app.use ("/ user", userRoutes);

Test des points de terminaison

Pour tester nos points de terminaison, nous utiliserons POSTMAN.

Ajout de nouvelle musique

Pour tester la fonctionnalité Ajouter de la musique définissez la méthode de la demande par en cliquant sur le menu déroulant des méthodes. Après cela, tapez l'URL du point de terminaison, puis cliquez sur l'onglet corps pour sélectionner la façon dont vous souhaitez envoyer vos données. (Dans notre cas, nous utiliserons la méthode des données de formulaire.)

Cliquez donc sur les données de formulaire et configurez votre clé de modèle. Au fur et à mesure que vous le configurez, donnez aux touches une certaine valeur, comme indiqué dans l'image ci-dessous: