So erstellen Sie einen Musikmanager mit Nuxt.js und Express.js

Der Umgang mit digitalen Medieninhalten wie Audio und Video in Ihrer Anwendung kann schwierig sein, da serverseitig Überlegungen angestellt werden müssen (z. B. Netzwerk, Speicherung und die asynchrone Art der Handhabung von Datei-Uploads). Wir können jedoch Bibliotheken wie Multer und Express.js verwenden, um unseren Workflow im Backend zu vereinfachen, während wir Nuxt.js (Vue-Framework) verwenden, um die Frontend-Interaktionen aufzubauen.

Immer wenn ein Webclient eine Datei auf einen Server hochlädt, wird sie im Allgemeinen über ein Formular übermittelt und als multipart/form-data codiert. Multer ist eine Middleware für Express.js und Node.js, die es einfach macht, diese sogenannten multipart/form-data zu handhaben, wenn Ihre Benutzer Dateien hochladen. In diesem Tutorial werde ich erklären, wie Sie eine Musikmanager-App erstellen können, indem Sie Express.js mit Multer verwenden, um Musik und Nuxt.js (Vue-Framework) für unser Frontend hochzuladen.

Voraussetzungen

• Vertrautheit mit HTML, CSS und JavaScript (ES6+);
• Node.js, npm und MongoDB auf Ihrem Entwicklungscomputer installiert;
• VS-Code oder ein beliebiger Code-Editor Ihrer Wahl;
• Grundkenntnisse von Express.js.
  

Aufbau des Back-End-Dienstes

Beginnen wir damit, ein Verzeichnis für unser Projekt zu erstellen, indem wir in das Verzeichnis navigieren und npm init -y auf Ihrem Terminal ausgeben, um eine package.json -Datei zu erstellen, die alle Abhängigkeiten für unsere Anwendung verwaltet.

 mkdir serverside && cd serverside npm init -y

Installieren Sie als Nächstes multer , express und die anderen Abhängigkeiten, die zum Bootstrap einer Express.js-App erforderlich sind.

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

Erstellen Sie als Nächstes eine index.js -Datei:

 touch index.js

Dann werden wir in der Datei index.js alle Module initialisieren, eine Express.js-App erstellen und einen Server für die Verbindung mit Browsern erstellen:

 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("mongoose"); const config = require("./config/db"); const app = express(); //configure database and mongoose mongoose.set("useCreateIndex", true); mongoose .connect(config.database, { useNewUrlParser: true }) .then(() => { console.log("Database is connected"); }) .catch(err => { console.log({ database_error: err }); }); // db configuaration ends here //registering cors app.use(cors()); //configure body parser app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); //configure body-parser ends here app.use(morgan("dev")); // configire morgan // define first route app.get("/", (req, res) => { res.json("Hola MEVN devs...Assemble"); }); app.listen(PORT, () => { console.log(`App is running on ${PORT}`); });

Wir bringen zunächst Express.js in das Projekt ein und definieren dann einen Port, auf dem unsere Anwendung ausgeführt wird. Als nächstes bringen wir die Abhängigkeiten body-parser , morgan , mongoose und cors ein.

Wir speichern dann die Expressinstanz in einer Variablen namens app . Wir können die app Instanz verwenden, um Middleware in unserer Anwendung zu konfigurieren, genauso wie wir die cors Middleware konfiguriert haben. Wir verwenden die app -Instanz auch, um die Root-Route einzurichten, die in dem von uns definierten Port ausgeführt wird.

Lassen Sie uns nun einen /config config Ordner für unsere Datenbankkonfiguration und multer :

 mkdir config and cd config touch multer.js && touch db.js

Öffnen Sie dann config/db.js und fügen Sie den folgenden Code hinzu, um unsere Datenbank zu konfigurieren:

 module.exports = { database: "mongodb://localhost:27017/", secret: "password" };

(Dies ist eigentlich ein Objekt, das die Datenbank-URL und das Datenbankgeheimnis enthält.)

Wenn Sie nodemon und in Ihrem Browser zu localhost:4000 navigieren, sollten Sie diese Meldung erhalten:

 "Hola MEVN devs...Assemble"

Außerdem sollte Ihr Terminal jetzt so aussehen:

Einrichten von Modell, Routen und Controllern

Lassen Sie uns eine Dateistruktur einrichten, indem Sie Folgendes eingeben:

 mkdir api && cd api mkdir model && cd model && touch Music.js cd .. mkdir controller && cd controller && touch musicController.js cd .. mkdir routes && cd routes && touch music.js

In unserem Terminal verwenden wir mkdir , um ein neues Verzeichnis zu erstellen, und dann cd , um in ein Verzeichnis zu wechseln. Also erstellen wir zunächst ein Verzeichnis namens api und wechseln dann in das api Verzeichnis.

Der touch -Befehl wird verwendet, um mit dem Terminal eine neue Datei in einem Verzeichnis zu erstellen, während der cd -Befehl verwendet wird, um aus einem Verzeichnis herauszugehen.

Gehen wir nun zu unserer Datei api/model/Music.js , um ein Musikschema zu erstellen. Ein Modell ist eine Klasse, mit der wir Dokumente konstruieren. In diesem Fall ist jedes Dokument ein Musikstück mit Eigenschaften und Verhaltensweisen, wie sie in unserem Schema angegeben sind:

 let mongoose = require("mongoose"); let musicSchema = mongoose.Schema({ title: { type: String, required: true }, music: { type: Object, required: true }, artist: { type: String, required: true }, created: { type: Date, default: Date.now() } }); let Music = mongoose.model("Music", musicSchema); module.exports = Music;

Gehen wir zu config/multer , um Multer zu konfigurieren:

 let multer = require("multer"); const path = require("path"); const storage = multer.diskStorage({ destination: (req, res, cb) => { cb(null, "./uploads"); }, filename: (req, file, cb) => { cb(null, new Date().toISOString() + file.originalname); } }); const fileFilter = (req, file, cb) => { if ( file.mimetype === "audio/mpeg" || file.mimetype === "audio/wave" || file.mimetype === "audio/wav" || file.mimetype === "audio/mp3" ) { cb(null, true); } else { cb(null, false); } }; exports.upload = multer({ storage: storage, limits: { fileSize: 1024 * 1024 * 5 }, fileFilter: fileFilter });

In der Datei multer.js richten wir zunächst einen Ordner ein, in den alle hochgeladenen Musikdateien hochgeladen werden. Wir müssen diese Datei statisch machen, indem wir das in der Datei index.js definieren:

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

Danach schreiben wir einen einfachen Validator, der den Mimetyp der Datei vor dem Hochladen überprüft. Anschließend definieren wir die multer Instanz, indem wir den Speicherort, die Grenzen jeder Datei und den von uns erstellten Validator hinzufügen.

Erstellen Sie die erforderlichen Routen

Jetzt erstellen wir unsere Routen. Nachfolgend finden Sie die Liste der Endpunkte, die wir erstellen werden.

Beginnen wir mit der Erstellung der Blog-Route. Gehen Sie zu api/routes/music.js und schreiben Sie den folgenden Code:

 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 = router;

Hinweis : Jetzt immer, wenn wir eine get - Anforderung an /music stellen . Die Route ruft die Funktion getAllMusic auf, die sich in der Datei „controllers“ befindet.

Gehen wir weiter zu api/controllers/musicController , um die Controller zu definieren. Wir beginnen damit, eine Funktion zu schreiben, um die gesamte Musik in unserer Datenbank abzurufen, indem wir die Mongoose-Methode db.collection.find verwenden, die alle Elemente in dieser Sammlung zurückgibt.

Danach schreiben wir eine weitere Funktion, die ein neues Musikstück in der Datenbank erstellt. Wir müssen eine neue Musikinstanz mit dem new Schlüsselwort erstellen und dann das Musikobjekt definieren. Danach verwenden wir die Mungo- save , um neue Musik zur Datenbank hinzuzufügen.

Um ein Musikstück zu löschen, müssen wir die Mungo- remove verwenden, indem wir einfach die Musik-ID als Parameter in der remove übergeben. Dies führt dazu, dass Mongoose in die Musiksammlung mit dieser bestimmten ID schaut und sie dann aus dieser Sammlung entfernt.

 let mongoose = require("mongoose"); const Music = require("../model/Music"); exports.getAllMusics = async (req, res) => { try { let music = await Music.find(); res.status(200).json(music); } catch (err) { res.status(500).json(err); } }; exports.addNewMusic = async (req, res) => { try { const music = new Music({ title:req.body.title, artist:req.body.artist, music:req.file }); let newMusic = await music.save(); res.status(200).json({ data: newMusic }); } catch (err) { res.status(500).json({ error: err }); } }; exports.deleteMusic = async (req, res) => { try { const id = req.params.musicId; let result = await Music.remove({ _id: id }); res.status(200).json(result); } catch (err) { res.status(500).json(err); } };

Zu guter Letzt müssen wir zum Testen der Routen die Musikrouten in unserer index.js -Datei registrieren:

 const userRoutes = require("./api/user/route/user"); //bring in our user routes app.use("/user", userRoutes);

Testen der Endpunkte

Um unsere Endpunkte zu testen, verwenden wir POSTMAN.

Neue Musik hinzufügen

Um die Funktion „ Add Music zu testen, legen Sie die Methode der Anfrage fest, indem Sie auf das Dropdown-Menü „Methoden“ klicken. Geben Sie danach die URL des Endpunkts ein und klicken Sie dann auf die Registerkarte Body, um auszuwählen, wie Sie Ihre Daten senden möchten. (In unserem Fall verwenden wir die Form-Data-Methode.)

Klicken Sie also auf die Formulardaten und richten Sie Ihren Modellschlüssel ein. Weisen Sie den Schlüsseln beim Einrichten einen bestimmten Wert zu, wie in der Abbildung unten gezeigt:

Klicken Sie danach auf „Senden“, um die Anfrage zu stellen.

Alle Musik auflisten

Um die gesamte Musik in unserer Datenbank aufzulisten, müssen wir die Endpunkt-URL in den bereitgestellten URL-Abschnitt eingeben. Klicken Sie danach auf die Schaltfläche „Senden“, um die Anfrage zu stellen.

Musik löschen

Um ein Musikstück zu löschen, müssen wir die music id als Parameter übergeben.

Das ist es!

Aufbau des Frontends

Für unser Frontend verwenden wir ein Vue-Framework: Nuxt.js.

„Nuxt ist ein progressives Framework, das auf Vue.js basiert, um moderne Webanwendungen zu erstellen. Es basiert auf den offiziellen Bibliotheken von Vue.j (vue, vue-router und vuex) und leistungsstarken Entwicklungstools (webpack, Babel und PostCSS).“

– NuxtJS-Leitfaden

Um eine neue Nuxt.js-Anwendung zu erstellen, öffnen Sie Ihr Terminal und geben Sie Folgendes ein (mit musicapp als Name der App, die wir erstellen werden):

 $ npx create-nuxt-app musicapp

Während des Installationsvorgangs werden uns einige Fragen zur Projekteinrichtung gestellt:

Nachdem wir all dies ausgewählt haben, müssen wir eine Weile warten, bis das Projekt eingerichtet ist. Sobald es fertig ist, verschieben Sie es in den Ordner /project und stellen Sie das Projekt wie folgt bereit:

 cd musicapp && npm run dev

Öffnen Sie das Projekt in einem beliebigen Code-Editor Ihrer Wahl und öffnen Sie das Projekt dann im Browser, indem Sie auf localhost:3000 zugreifen.

Axios konfigurieren

Wir werden axios verwenden, um eine HTTP-Anfrage an unseren Back-End-Server zu stellen. Axios ist bereits in unserem Projekt installiert, also müssen wir nur die baseURL konfigurieren - zu unserem Backend-Server.

Öffnen Sie dazu die Datei nuxt.config.js im root und fügen Sie die baseURL im axios Objekt hinzu.

 axios: { baseURL:'https://localhost:4000' },

Erstellen des Musikmanagers

Einrichten der Benutzeroberfläche

Beginnen wir mit der Bereinigung der Benutzeroberfläche. Öffnen Sie die Datei pages/index.vue und entfernen Sie den gesamten Code darin mit dem folgenden:

 <template> <div>Hello</div> </template>

Danach sollten Sie im Browser nur noch ein „Hallo“ sehen können.

Erstellen Sie im root einen Ordner /partials . Erstellen Sie im Ordner /partials partials eine Datei navbar.vue und fügen Sie den folgenden Code hinzu:

 <template> <header> <nav class="navbar navbar-expand-lg navbar-light bg-info"> <div class="container"> <a class="navbar-brand" href="#">Music App</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Player</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Manager</a> </li> </ul> </div> </div> </nav> </header> </template> <style scoped> .nav-link, .navbar-brand { color: #ffff !important; } </style>

Hinweis : Wir werden die Komponente verwenden, um durch Seiten in unserer Anwendung zu navigieren. Dies wird nur eine einfache Komponente sein, die aus der Bootstrap navbar . Weitere Informationen finden Sie in der offiziellen Bootstrap-Dokumentation.

Als Nächstes definieren wir ein benutzerdefiniertes Layout für die Anwendung. Öffnen Sie den Ordner /layouts , ersetzen Sie den Code in der Datei default.vue durch den unten stehenden Code.

 <template> <div> <navbar /> <nuxt /> </div> </template> <script> import navbar from '@/partial/navbar' export default { components: { navbar } } </script>

Wir importieren die navbar in dieses Layout, was bedeutet, dass alle Seiten in unserer Anwendung diese navbar enthalten. (Dies wird die Komponente sein, die alle anderen Komponenten in unserer Anwendung montiert werden.)

Danach sollten Sie dies in Ihrem Browser sehen können:

Lassen Sie uns nun die Benutzeroberfläche für unseren Manager einrichten. Dazu müssen wir einen /manager -Ordner im Komponentenordner erstellen und dann eine Datei mit dem Namen manager.vue in den Ordner einfügen.

Fügen Sie in dieser Datei den folgenden Code hinzu:

 <template> <section class="mt-5"> <div class="container mb-4"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="card-title mb-4"> <h4>Add Music</h4> </div> <form> <div class="form-group"> <label for="title">Title</label> <input type="text" class="form-control" /> </div> <div class="form-group"> <label for="artist">Artist</label> <input type="text" class="form-control" /> </div> <div class="form-group"> <label for="artist">Music</label> <div class="custom-file"> <input type="file" class="custom-file-input" /> <label class="custom-file-label" for="customFile">Choose file</label> </div> </div> <div class="form-group"> <button class="btn btn-primary">Submit</button> </div> </form> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="card bg-light p-1 showdow-sm"> <div class="card-title"> <button class="btn btn-info m-3">Add Music</button> </div> <div class="card-body"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Title</th> <th scope="col">Artist</th> <th scope="col">Date created</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Demo Title</td> <td>Wisdom.vue</td> <td>12/23/13</td> <td> <button class="btn btn-info">Delete</button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </section> </template>

Hinweis : Dies ist nur eine einfache Bootstrap-Vorlage zum Hinzufügen von Musik zu unserer Anwendung. Das Formular definiert eine Tabellenvorlage, die alle Musikstücke auflistet, die in unserer Datenbank zu finden sind.

Nachdem wir diese Komponente definiert haben, müssen wir sie im Ordner /pages registrieren, um das Routing zu initialisieren.

Nuxt.js hat keine „router.js“-Datei wie Vue.js. Es verwendet den Seitenordner für das Routing. Weitere Informationen finden Sie auf der Nuxt.js-Website.

Um die Komponente zu registrieren, erstellen Sie einen /manager -Ordner innerhalb des /pages -Ordners und erstellen Sie eine index.vue -Datei. Fügen Sie dann den folgenden Code in die Datei ein:

 <template> <div> <manager /> </div> </template> <script> import manager from '@/components/manager/manager' export default { components: { manager } } </script>

Dies ist die Komponente, die in unserer pages gerendert wird.

Gehen Sie danach zu Ihrem Browser und navigieren Sie zu /manager – Sie sollten Folgendes sehen:

Alle Musik auflisten

Fahren wir fort, indem wir eine Funktion erstellen, die die gesamte Musik abruft. Diese Funktion wird im erstellten Lebenszyklus-Hook registriert, sodass die Funktion jedes Mal aufgerufen wird, wenn die Komponente erstellt wird.

Beginnen wir damit, eine Variable in der vue -Instanz zu erstellen, die die gesamte Musik enthält:

 allmusic = []; musicLoading: false,

Definieren Sie dann eine getAllMusics Funktion und fügen Sie den folgenden Code hinzu:

 async getAllMusics() { this.musicLoading = true try { let data = await this.$axios.$get('/music') this.allmusic = data this.musicLoading = false } catch (err) { this.musicLoading = false swal('Error', 'Error Fetting Musics', 'error') } }

Registrieren Sie sich als Nächstes innerhalb des erstellten Lebenszyklus-Hooks:

 created() { this.getAllMusics() }

Ausgabe der Daten

Jetzt ist es an der Zeit, alle Songs auf dem Tisch auszugeben, die wir zuvor erstellt haben:

 <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Title</th> <th scope="col">Artist</th> <th scope="col">Date created</th> <th scope="col">Action</th> </tr> </thead> <div v-if="musicLoading" class="spinner-border" role="status" > <span class="sr-only">Loading...</span> </div> <tbody v-else> <tr v-for="(music, index) in allmusic" :key="index"> <td>{{ index + 1 }}</td> <td>{{ music.title }}</td> <td>{{ music.artist }}</td> <td>{{ music.created }}</td> <td> <button class="btn btn-info" @click="deleteMusic(music._id)">Delete</button> </td> </tr> </tbody> </table>

Erinnern Sie sich an die Tabelle, die wir zuvor erstellt haben? Nun, wir müssen die Antwort durchlaufen, die wir von unserem Backend erhalten, um die gesamte Musik aufzulisten, die wir von der Datenbank erhalten haben.

Musik hinzufügen

Um ein neues Musikstück hinzuzufügen, müssen wir eine HTTP-Anfrage an den Back-End-Server mit den Musikdetails senden. Dazu ändern wir zunächst das Formular und die Handhabung der Datei-Uploads.

Auf dem Formular müssen wir einen event -Listener hinzufügen, der das Formular abhört, wenn es gesendet wird. Auf dem input fügen wir ein v- -Modell hinzu, um den Wert an das Eingabefeld zu binden.

 <form @submit.prevent="addNewMusic"> <div class="form-group"> <label for="title">Title</label> <input type="text" v-model="musicDetails.title" class="form-control" /> </div> <div class="form-group"> <label for="artist">Artist</label> <input type="text" v-model="musicDetails.artist" class="form-control" /> </div> <div class="form-group"> <label for="artist">Music</label> <div class="custom-file"> <input type="file" ref="file" v-on:change="handleFileUpload()" class="custom-file-input" /> <label class="custom-file-label" for="customFile">Choose file</label> </div> </div> <div class="form-group"> <button class="btn btn-primary" :disabled="isDisabled"> <span class="spinner-border spinner-border-sm" v-if="addLoading" role="status" aria-hidden="true" ></span>Submit </button> </div> </form>

Und der Skriptabschnitt sollte so aussehen:

 <script> export default { data() { return { musicDetails: { title: '', artist: '', music: '' }, allmusic = [], musicLoading: false, isValid: false; addLoading: false, } }, computed: { isDisabled: function() { if ( this.musicDetails.title === '' || this.musicDetails.artist === '' || this.musicDetails.music === '' ) { return !this.isValid } } }, methods: { handleFileUpload() { this.musicDetails.music = this.$refs.file.files[0] console.log(this.musicDetails.music.type) }, addNewMusic() { let types = /(\.|\/)(mp3|mp4)$/i if ( types.test(this.musicDetails.music.type) || types.test(this.musicDetails.music.name) ) { console.log('erjkb') } else { alert('Invalid file type') return !this.isValid } } } } </script>

Wir werden eine Funktion definieren, die eine Anfrage an unseren Back-End-Dienst sendet, um neue Musik zu erstellen, die der Liste hinzugefügt wurde. Ebenfalls. Wir müssen eine einfache Validierungsfunktion schreiben, die den Dateityp überprüft, sodass die Benutzer nur Dateien mit einer Erweiterung von .mp3 und .mp4 hochladen können.

Es ist wichtig, eine berechnete Eigenschaft zu definieren, um sicherzustellen, dass unser Eingabefeld nicht leer ist. Wir müssen auch einen einfachen Validator hinzufügen, der sicherstellt, dass die Datei, die wir hochladen möchten, tatsächlich eine Musikdatei ist.

Fahren wir fort, indem wir die addMusic Funktion bearbeiten, um eine Anfrage an unseren Back-End-Dienst zu stellen. Aber bevor wir das tun, installieren wir zunächst sweetalert , das uns ein nettes modales Fenster zur Verfügung stellt. Öffnen Sie dazu Ihr Terminal und geben Sie Folgendes ein:

 npm i sweetalert

Erstellen Sie nach der Installation des Pakets eine Datei sweetalert.js im Ordner /plugins und fügen Sie diese hinzu:

 import Vue from 'vue'; import swal from 'sweetalert'; Vue.prototype.$swal = swal;

Registrieren Sie dann das Plug-in in der Datei nuxt.config.js innerhalb der Plug-in-Instanz wie folgt:

 plugins: [ { src: '~/plugins/sweetalert' } ],

Wir haben sweetalert jetzt erfolgreich in unserer Anwendung konfiguriert, sodass wir weitermachen und die addmusic Funktion bearbeiten können:

 addNewMusic() { let types = /(\.|\/)(mp3|mp4)$/i if ( types.test(this.musicDetails.music.type) || types.test(this.musicDetails.music.name) ) { let formData = new FormData() formData.append('title', this.musicDetails.title) formData.append('artist', this.musicDetails.artist) formData.append('music', this.musicDetails.music) this.addLoading = true this.$axios .$post('/music', formData) .then(response => { console.log(response) this.addLoading = false this.musicDetails = {} this.getAllMusics() // we will create this function later swal('Success', 'New Music Added', 'success') }) .catch(err => { this.addLoading = false swal('Error', 'Something Went wrong', 'error') console.log(err) }) } else { swal('Error', 'Invalid file type', 'error') return !this.isValid } },

Lassen Sie uns ein einfaches Skript schreiben, das das Formular umschaltet, dh es sollte nur angezeigt werden, wenn wir neue Musik hinzufügen möchten.

Wir können dies tun, indem wir die Schaltfläche „Musik hinzufügen“ in der Tabelle bearbeiten, die alle gefundenen Musikstücke anzeigt:

 <button class="btn btn-info m-3" @click="initForm"> {{addState?"Cancel":"Add New Music"}} </button>

Fügen Sie dann einen Status hinzu, der den Status des Formulars in der data enthält:

 addState: false

Danach definieren wir die Funktion initForm :

 initForm() { this.addState = !this.addState },

Und fügen Sie dann v-if="addState" zu dem div hinzu, das das Formular enthält:

 <div class="card" v-if="addState">

Musik löschen

Um Musik zu löschen, müssen wir den delete aufrufen und die music id als Parameter übergeben. Fügen wir der Schaltfläche „Löschen“ ein click hinzu, das die Funktion zum Löschen einer Funktion auslöst:

 <button class="btn btn-info" @click="deleteMusic(music._id)">Delete</button>

Die delete stellt eine HTTP-Anfrage an unseren Back-End-Dienst. Nachdem wir die Musik-ID aus dem Funktionsparameter deleteMusic haben, fügen wir die ID in die URL ein, die wir zum Senden der Anfrage verwenden. Dies gibt das genaue Musikstück an, das aus der Datenbank entfernt werden soll.

 deleteMusic(id) { swal({ title: 'Are you sure?', text: 'Once deleted, you will not be able to recover this Music!', icon: 'warning', buttons: true, dangerMode: true }).then(willDelete => { if (willDelete) { this.$axios .$delete('/music/' + id) .then(response => { this.getAllMusics() swal('Poof! Your Music file has been deleted!', { icon: 'success' }) }) .catch(err => { swal('Error', 'Somethimg went wrong', 'error') }) } else { swal('Your Music file is safe!') } }) }

Mit all dem haben wir gerade unseren Musikmanager aufgebaut. Jetzt ist es Zeit, den Musikplayer zu bauen.

Beginnen wir mit der Erstellung eines neuen Ordners im Komponentenordner mit dem Namen /player . Erstellen Sie dann eine player.vue -Datei in diesem Ordner und fügen Sie diese hinzu:

 <template> <section> <div class="container"> <div class="row"> <div class="col-md-12"> <h3 class="text-center">Player</h3> </div> </div> </div> </section> </template> <script> export default { data() { return {} } } </script> <style scoped> </style>

Als Nächstes importieren wir diese Komponente in die Datei index.vue im Ordner /pages . Ersetzen Sie den Code in der Datei index.vue wie folgt:

 <template> <div> <player /> </div> </template> <script> import player from '@/components/player/player' export default { components: { player } } </script>

Lassen Sie uns das Routing in unserer navbar Komponente konfigurieren, um das Routing zwischen unseren Seiten zu ermöglichen.

Zum Weiterleiten in einer Nuxt.js-Anwendung wird der nuxt-link verwendet, nach dem Sie die Seite für diese Route zu einer bestimmten Instanz angegeben haben. Bearbeiten wir also den Code in der Komponente partials/navbar wie folgt:

 <template> <header> <nav class="navbar navbar-expand-lg navbar-light bg-info"> <div class="container"> <nuxt-link to="/" class="navbar-brand">Music App</nuxt-link> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end"> <ul class="navbar-nav"> <li class="nav-item active"> <nuxt-link to="/" class="nav-link">Player</nuxt-link> </li> <li class="nav-item"> <nuxt-link to="/manager" class="nav-link">Manager</nuxt-link> </li> </ul> </div> </div> </nav> </header> </template> <style scoped> .nav-link, .navbar-brand { color: #ffff !important; } </style>

Damit können wir mithilfe der Navigationsleiste durch unsere Seiten navigieren.

Aufbau des Players

Bevor wir beginnen, müssen wir Webpack erweitern, um Audiodateien zu laden. Audiodateien sollten vom file-loader verarbeitet werden. Dieser Loader ist bereits in der Standard-Webpack-Konfiguration enthalten, aber er ist nicht für die Verarbeitung von Audiodateien eingerichtet.

Gehen Sie dazu zur Datei nuxt.config.js und ändern Sie das build -Objekt wie folgt:

 build: { extend(config, ctx) { config.module.rules.push({ test: /\.(ogg|mp3|mp4|wav|mpe?g)$/i, loader: 'file-loader', options: { name: '\[path\][name].[ext]' } }) } }

Als Nächstes schreiben wir eine Funktion, die alle Songs abruft, und verwenden dann den Audio -Konstruktor, um den ersten Song im allMusic Array abzuspielen.

Ändern wir zunächst unsere player.vue -Datei wie folgt:

 <template> <section v-if="allMusic"> <div class="container"> <div class="row"> <div class="col-md-12"> <h3 class="text-center">Player</h3> </div> </div> <div class="row"> <div class="col-md-6"> <span>{{this.current.title}} - {{this.current.artist}}</span> </div> </div> </div> </section> </template> <script> export default { data() { return { current: { title: '', artist: '' }, song: true, isplaying: false, allMusic: null, index: 0, player: '' } }, methods: { async initPlayer() { if (this.allMusic !== []) { this.current = await this.allMusic[this.index] this.player.src = `https://localhost:4000/${this.current.music.path}` } else { this.song = true } }, async getAllSongs() { try { let response = await this.$axios.$get('/music') console.log(response) if (response === []) { this.song = true this.current = null } else { this.song = false this.allMusic = response } await this.initPlayer() } catch (err) { this.current = null console.log(err) } } }, created() { if (process.client) { this.player = new Audio() } this.getAllSongs() } } </script> <style scoped> </style>

Sobald die Datei bereitgestellt wurde, wird die Musik im Hintergrund abgespielt und Sie sollten dies in Ihrem Browser sehen können:

Um die Musik zu stoppen, müssen Sie await player.play() in der initPlayer Funktion auskommentieren.

Erstellen der Player-Benutzeroberfläche

Lassen Sie uns nun unsere Musikplayer-Benutzeroberfläche definieren, indem Sie die Vorlage in unserer player.vue -Datei durch Folgendes ersetzen:

 <template> <section v-if="allMusic"> <div class="container"> <div class="row mb-5"> <div class="col-md-12"> <h3 class="text-center">Player</h3> </div> </div> <div class="row mt-5"> <div class="col-md-6"> <img src="https://images.pexels.com/photos/3624281/pexels-photo-3624281.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="image" /> <div class="card player_card"> <div class="card-body"> <h6 class="card-title"> <b>{{this.current.title}} - {{this.current.artist}}</b> </h6> <div> <i class="fas fa-backward control mr-4"></i> <i class="fas fa-play play"></i> <i class="fas fa-pause play"></i> <i class="fas fa-forward control ml-4"></i> </div> </div> </div> </div> <div class="col-md-6"> <div class="card shadow"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Title</th> <th scope="col">Artist</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td> <button class="btn btn-primary">Play</button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </section> </template>

Fügen Sie dann den folgenden style zum Stilabschnitt hinzu:

 <style scoped> .image { border-radius: 5px !important; position: relative; height: 300px; width: 100%; } .player_card { text-align: center; bottom: 20px; margin: 0px 40px; } .text-muted { font-size: 15px; } .play { font-size: 40px; } .control { font-size: 25px; } </style>

Nachdem Sie dies geändert haben, sollte der Player wie folgt aussehen:

Hinzufügen der Play-Funktion

Wir fahren fort, indem wir die Musikbeschreibung in der Tabelle anzeigen. Ersetzen Sie dazu die Tabelle durch den folgenden Code:

 <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Title</th> <th scope="col">Artist</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr v-for="(music,index) in allMusic" :key="index"> <th scope="row">{{index+1}}</th> <td>{{music.title}}</td> <td>{{music.artist}}</td> <td> <button class="btn btn-primary">Play</button> </td> </tr> </tbody> </table>

Wir möchten die Symbole „Play“ und „Pause“ nicht gleichzeitig anzeigen. Stattdessen möchten wir eine Situation, in der das Symbol „Pause“ angezeigt wird, wenn der Song abgespielt wird. Auch wenn der Song pausiert ist, sollte das Wiedergabesymbol angezeigt werden.

Um dies zu erreichen, müssen wir einen isPlaying -Zustand auf die false Instanz setzen und dann diese Instanz verwenden, um die Symbole umzuschalten. Danach fügen wir unserem „Play“-Icon eine Funktion hinzu.

 isplaying:false

Ändern Sie danach Ihr „Play“- und „Pause“-Symbol wie folgt:

 <i class="fas fa-play play" v-if="!isplaying" @click="play"></i> <i class="fas fa-pause play" v-else></i>

Mit all dem definieren wir die play :

 play(song) { console.log(song) if (song) { this.current = song this.player.src = `https://localhost:4000/${this.current.music.path}` } this.player.play() this.isplaying = true },

Wir holen uns zunächst den aktuellen Song und übergeben ihn an den function . Anschließend definieren wir die JavaScript Audio() Instanz. Als nächstes prüfen wir, ob der Song null ist: Wenn dies nicht der Fall ist, setzen wir this.current auf den Song, den wir im Parameter übergeben haben, und rufen dann die Audio -Player-Instanz auf. (Vergessen Sie auch nicht, dass wir den Zustand isPlaying auf true setzen müssen, wenn die Musik abgespielt wird.)

Hinzufügen der Pausenfunktion

Um einen Song anzuhalten, verwenden wir die Audio -Pause-Methode. Wir müssen dem Pausensymbol ein click hinzufügen:

 <i class="fas fa-pause play" @click="pause" v-else></i>

Und dann definieren Sie die Funktion in der methods :

pause() { this.player.pause() this.isplaying = false },

Wiedergabe eines Titels aus der Musikliste

Dies ist recht einfach umzusetzen. Alles, was wir tun müssen, ist ein click -Ereignis hinzuzufügen, das den song -Parameter in der play auf den gerade erstellten Song ändert.

Ändern Sie einfach die play in der Musiklistentabelle wie folgt:

 <button class="btn btn-primary" @click="play(music)">Play</button>

Und da haben Sie es!

Hinzufügen der nächsten Funktion

Um die nächste Funktion hinzuzufügen, müssen wir den Index um eins erhöhen. Fügen Sie dazu dem nächsten Symbol ein click Ereignis hinzu:

 @click="next"

Und definieren Sie dann die Funktion prev in der methods :

 next() { this.index++ if (this.index > this.allMusic.length - 1) { this.index = 0 } this.current = this.allMusic[this.index] this.play(this.current) },

Diese Bedingung ist dafür verantwortlich, dass alle Songs wiederholt werden, wenn der letzte Song in der Liste gespielt wurde.

Hinzufügen der previous Funktion

Dies ist eigentlich das Gegenteil der nächsten Funktion, also fügen wir der vorherigen Funktion ein click -Ereignis hinzu:

 @click="prev"

Als nächstes definieren wir die vorherige Funktion:

 prev() { this.index-- if (this.index < 0) { this.index = this.allMusic.length - 1 } this.current = this.allMusic[this.index] this.play(this.current) },

Unsere Musik-Player-App ist jetzt fertig!

Fazit

In diesem Artikel haben wir uns angesehen, wie wir mit Nuxt.js und Express.js einen Musikmanager erstellen können. Unterwegs haben wir gesehen, wie Multer den Prozess der Handhabung von Datei-Uploads rationalisiert und wie man Mongoose verwendet, um ohne Datenbank zu interagieren. Schließlich haben wir Nuxt.js verwendet, um die Client-App zu erstellen, was ihr ein schnelles und bissiges Gefühl verleiht.

Im Gegensatz zu anderen Frameworks ist das Erstellen einer Anwendung mit Nuxt.js und Express.js recht einfach und schnell. Das Coole an Nuxt.js ist die Art und Weise, wie es Ihre Routen verwaltet und Sie Ihre Apps besser strukturieren lässt.

• Weitere Informationen zu Nuxt.js finden Sie hier.
• Sie können hier auf den Quellcode auf Github zugreifen