Cómo crear un administrador de música con Nuxt.js y Express.js

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • Patrones de diseño para interfaces de IA, con Vitaly Friedman

  • Índice
    1. Requisitos previos
  • Construyendo el servicio back-end
  • Configuración de modelos, rutas y controladores
    1. Crea las rutas necesarias
  • Probando los puntos finales
    1. Agregar nueva música
    2. Listado de toda la música
    3. Eliminar música
  • Construyendo la interfaz
  • Configurando Axios
  • Construyendo el administrador musical
    1. Configurando la interfaz de usuario
  • Listing All Music
  • Outputting The Data
  • Adding Music
  • Deleting Music
  • Este artículo presenta cómo Multer agiliza el proceso de manejo de cargas de archivos. También presenta cómo usar Mongoose para interactuar con nuestra base de datos mediante la creación de una aplicación de administración de música usando Express.js junto con Multer para cargar música y Nuxt.js (marco Vue) para nuestra interfaz.

     

    Manejar activos de medios digitales como audio y video en su aplicación puede ser complicado debido a las consideraciones que deben tenerse en cuenta en el lado del servidor (por ejemplo, redes, almacenamiento y la naturaleza asincrónica del manejo de cargas de archivos). Sin embargo, podemos usar bibliotecas como Multer y Express.js para simplificar nuestro flujo de trabajo en el backend mientras usamos Nuxt.js (marco Vue) para desarrollar las interacciones del front-end.

    Cada vez que un cliente web carga un archivo a un servidor, generalmente lo envía a través de un formulario y se codifica como multipart/form-data. Multeres un middleware para Express.js y Node.js que facilita el manejo de lo que se denomina multipart/form-datacada vez que los usuarios cargan archivos. En este tutorial, explicaré cómo se puede crear una aplicación de gestión de música utilizando Express.js con Multer para cargar música y Nuxt.js (marco Vue) para nuestra interfaz.

    Requisitos previos

    • Familiaridad con HTML, CSS y JavaScript (ES6+);
    • Node.js, npm y MongoDB instalados en su máquina de desarrollo;
    • Código VS o cualquier editor de código de su elección;
    • Conocimientos básicos de Express.js.

    Construyendo el servicio back-end

    Comencemos creando un directorio para nuestro proyecto navegando hasta el directorio y emitiendo npm init -yen su terminal para crear un archivo package.json que administre todas las dependencias de nuestra aplicación.

    mkdir serverside cd serversidenpm init -y

    A continuación, instale multer, expressy las demás dependencias necesarias para iniciar una aplicación Express.js.

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

    A continuación, cree un archivo index.js :

    touch index.js

    Luego, en el archivo index.js , inicializaremos todos los módulos, crearemos una aplicación Express.js y crearemos un servidor para conectarnos a los navegadores:

    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 mongoosemongoose.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 corsapp.use(cors());//configure body parserapp.use(bodyParser.urlencoded({ extended: false }));app.use(bodyParser.json());//configure body-parser ends hereapp.use(morgan("dev")); // configire morgan// define first routeapp.get("/", (req, res) = { res.json("Hola MEVN devs...Assemble");});app.listen(PORT, () = { console.log(`App is running on ${PORT}`);});

    En primer lugar, incorporamos Express.js al proyecto y luego definimos un puerto en el que se ejecutará nuestra aplicación. A continuación , incorporamos body-parser, y las dependencias.morganmongoosecors

     

    Luego guardamos la instancia expresa en una variable llamada app. Podemos usar la appinstancia para configurar el middleware en nuestra aplicación tal como lo configuramos cors. También usamos la appinstancia para configurar la ruta raíz que se ejecutará en el puerto que definimos.

    Ahora creemos una /configcarpeta para nuestra base de datos configy multerconfiguración:

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

    Luego abra config/db.js y agregue el siguiente código para configurar nuestra base de datos:

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

    (Este es en realidad un objeto que contiene la URL de la base de datos y el secreto de la base de datos).

    Al ejecutar nodemony navegar localhost:4000en su navegador debería aparecer este mensaje:

    "Hola MEVN devs...Assemble"

    Además, así es como debería verse tu terminal ahora:

    Vista previa de terminal ( vista previa grande )

    Configuración de modelos, rutas y controladores

    Configuremos una estructura de archivos escribiendo lo siguiente:

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

    En nuestra terminal, usamos mkdirpara crear un nuevo directorio y luego cdmovernos a un directorio. Entonces comenzamos creando un directorio llamado apiy luego nos movemos al apidirectorio.

    El touchcomando se usa para crear un nuevo archivo dentro de un directorio usando la terminal, mientras que el cdcomando se usa para salir de un directorio.

    Ahora vayamos a nuestro archivo api/model/Music.js para crear un esquema musical. Un modelo es una clase con la que construimos documentos. En este caso, cada documento será una pieza musical con propiedades y comportamientos como se declara en nuestro esquema:

    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;

    Vayamos a config/multerconfigurar Multer:

     

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

    En el archivo multer.js , comenzamos configurando una carpeta donde se cargarán todos los archivos de música cargados. Necesitamos hacer que este archivo sea estático definiéndolo en el archivo index.js :

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

    Después de eso, escribimos un validador simple que verificará el tipo MIME del archivo antes de cargarlo. Luego definimos la multerinstancia agregando la ubicación de almacenamiento, los límites de cada archivo y el validador que creamos.

    Crea las rutas necesarias

    Ahora creemos nuestras rutas. A continuación se muestra la lista de puntos finales que crearemos.

    HTTP POST /music Agregar nueva música
    HTTP GET /music Obtener toda la música
    HTTP DELETE /music/:blogId eliminar una musica

    Empecemos creando la ruta del blog. Dirígete a api/routes/music.js y escribe el siguiente código:

    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;

    Nota : Ahora cada vez que hacemos una get solicitud a /music. la ruta llama a la getAllMusic función que se encuentra en el archivo 'controladores'.

    Pasemos a api/controllers/musicControllerdefinir los controladores. Comenzamos escribiendo una función para obtener toda la música de nuestra base de datos utilizando el db.collection.findmétodo mangosta que devolverá todos los elementos de esa colección.

    Después de hacer eso, escribimos otra función que creará una pieza musical nueva en la base de datos. Necesitamos crear una nueva instancia de música usando la newpalabra clave y luego definir el objeto de música. Después de hacer esto, usaremos el savemétodo mangosta para agregar música nueva a la base de datos.

    Para eliminar una pieza musical, necesitamos usar el removemétodo mangosta simplemente pasando el ID de la música como parámetro en la removeinstancia. Esto da como resultado que Mongoose busque la colección de música que tiene esa identificación en particular y luego la elimine de esa colección.

     

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

    Por último, pero no menos importante, para probar las rutas, necesitamos registrar las rutas de música en nuestro archivo index.js :

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

    Probando los puntos finales

    Para probar nuestros puntos finales, usaremos POSTMAN.

    Agregar nueva música

    Para probar la Add Musicfuncionalidad, configure el método de la solicitud haciendo clic en el menú desplegable de métodos. Después de hacer esto, escriba la URL del punto final y luego haga clic en la pestaña del cuerpo para seleccionar cómo desea enviar sus datos. (En nuestro caso, usaremos el método de datos de formulario).

    Así que haga clic en los datos del formulario y configure la clave de su modelo. Mientras lo configura, asigne algún valor a las claves como se muestra en la imagen a continuación:

    Prueba de agregar nueva API de música en el panel de Postman ( vista previa grande )

    Después de hacer esto, haga clic en 'Enviar' para realizar la solicitud.

    Listado de toda la música

    Para enumerar toda la música en nuestra base de datos, debemos escribir la URL del punto final en la sección de URL proporcionada. Después de hacer esto, haga clic en el botón 'Enviar' para realizar la solicitud.

    Prueba de API de listado en el panel de Postman ( vista previa grande )

    Eliminar música

    Para eliminar una pieza musical, debemos pasar music idcomo parámetro.

    Prueba de eliminación del panel de API Postman ( vista previa grande )

    ¡Eso es todo!

    Construyendo la interfaz

    Para nuestra interfaz, usaremos un marco Vue: Nuxt.js.

    “Nuxt es un marco progresivo basado en Vue.js para crear aplicaciones web modernas. Se basa en las bibliotecas oficiales de Vue.js (vue, vue-router y vuex) y potentes herramientas de desarrollo (webpack, Babel y PostCSS)”.

    — Guía de NuxtJS

    Para crear una nueva aplicación Nuxt.js, abra su terminal y escriba lo siguiente (con musicappel nombre de la aplicación que crearemos):

     

    $ npx create-nuxt-app musicapp

    Durante el proceso de instalación, se nos harán algunas preguntas sobre la configuración del proyecto:

    Project name aplicación de música
    project description Una aplicación sencilla de gestión de música
    Author name tu nombre
    Package manager npm
    UI framework Vista de arranque
    custom ui framework ninguno
    Nuxt modules Axios,pwa (use la barra espaciadora de su teclado para seleccionar elementos)
    Linting tool mas bonita
    test framework Ninguno
    Rendering Mode Universal (RSS)
    development tool Jsonconfig.json

    Después de seleccionar todo esto, nos toca esperar un poco a que se configure el proyecto. Una vez que esté listo, vaya a la /projectcarpeta y entregue el proyecto de la siguiente manera: Podcast ingles diario

    cd musicapp npm run dev

    Abra el proyecto en cualquier editor de código de su elección y luego abra el proyecto en el navegador accediendo a localhost:3000.

    Vista previa del proyecto Nuxt.js ( vista previa grande )

    Configurando Axios

    Lo usaremos axiospara realizar una solicitud HTTP a nuestro servidor back-end. Axios ya está instalado en nuestro proyecto, por lo que solo tenemos que configurarlo baseURLen nuestro servidor backend.

    Para hacer esto, abra el archivo nuxt.config.jsroot en el directorio y agréguelo baseURLen el axiosobjeto.

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

    Construyendo el administrador musical

    Configurando la interfaz de usuario

    Comencemos limpiando la interfaz de usuario. Abra el archivo páginas/index.vue y elimine todo el código que contiene con lo siguiente:

    templatedivHello/div/template

    Después de hacer esto, sólo debería poder ver un "Hola" en el navegador.

    En el rootdirectorio, cree una /partialscarpeta. Dentro de la /partialscarpeta, cree un archivo navbar.vue y agregue el siguiente código:

    template header nav div a href="#"Music App/a button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" span/span /button div ul li a href="#"Player/a /li li a href="#"Manager/a /li /ul /div /div /nav /header/templatestyle scoped.nav-link,.navbar-brand { color: #ffff !important;}/style

    Nota : utilizaremos el componente para navegar por las páginas de nuestra aplicación. Este será simplemente un componente simple compuesto por Bootstrap navbar . Consulte la documentación oficial de Bootstrap para obtener más referencia.

     

    A continuación, definamos un diseño personalizado para la aplicación. Abra la /layoutscarpeta, reemplace el código en el archivo default.vue con el siguiente código.

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

    Importamos el navbara este diseño, lo que significa que todas las páginas de nuestra aplicación tendrán ese navbarcomponente. (Este será el componente en el que se montarán todos los demás componentes de nuestra aplicación).

    Después de esto, deberías poder ver esto en tu navegador:

    Componente de barra de navegación Nuxt.js ( vista previa grande )

    Ahora configuremos la interfaz de usuario de nuestro administrador. Para hacer esto, necesitamos crear una /managercarpeta dentro de la carpeta de componentes y luego agregar un archivo a la carpeta llamada manager.vue .

    En este archivo, agregue el siguiente código:

    template section div div div div div div h4Add Music/h4 /div form div label for="title"Title/label input type="text" / /div div label for="artist"Artist/label input type="text" / /div div label for="artist"Music/label div input type="file" / label for="customFile"Choose file/label /div /div div buttonSubmit/button /div /form /div /div /div /div /div div div div div div buttonAdd Music/button /div div 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 td1/td tdDemo Title/td tdWisdom.vue/td td12/23/13/td td buttonDelete/button /td /tr /tbody /table /div /div /div /div /div /section/template

    Nota : Esta es solo una plantilla Bootstrap simple para agregar música a nuestra aplicación. El formulario definirá una plantilla de tabla que enumerará toda la música que se puede encontrar en nuestra base de datos.

    Después de definir este componente, debemos registrarlo en la /pagescarpeta para iniciar el enrutamiento.

    Nuxt.js no tiene un archivo 'router.js' como Vue.js. Utiliza la carpeta de páginas para el enrutamiento. Para obtener más detalles, visite el sitio web de Nuxt.js.

     

    To register the component, create a /manager folder within the /pages folder and create an index.vue file. Then, place the following code inside the file:

    template div manager / /div/templatescriptimport manager from '@/components/manager/manager'export default { components: { manager }}/script

    This is the component that will render in our pages route.

    After doing this, head over to your browser and navigate to /manager — you should be seeing this:

    Music manager UI (Large preview)

    Listing All Music

    Let’s continue by creating a function that will fetch all of the music. This function will be registered in the created life cycle hook, so that whenever the component is created, the function will be called.

    Let’s start by creating a variable in the vue instance that will hold all of the music:

    allmusic = [];musicLoading: false,

    Then, define a getAllMusics function and add the following code:

    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') } }

    Next, register within the created life cycle hook:

    created() { this.getAllMusics() }

    Outputting The Data

    Now it’s time to output all of the songs on the table which we’ve created earlier:

    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" role="status" spanLoading.../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 @click="deleteMusic(music._id)"Delete/button /td /tr /tbody /table

    Remember that table we created earlier? Well, we will need to loop through the response we get back from our backend to list all of the music received back from the database.

    Adding Music

    To add a new piece of music we need to make an HTTP request to the back-end server with the music details. To do this, let’s start by modifying the form and handling of the file uploads.

    On the form, we need to add an event listener that will listen to the form when it is submitted. On the input field, we add a v- model to bind the value to the input field.

    form @submit.prevent="addNewMusic" div label for="title"Title/label input type="text" v-model="musicDetails.title" / /div div label for="artist"Artist/label input type="text" v-model="musicDetails.artist" / /div div label for="artist"Music/label div input type="file" ref="file" v-on:change="handleFileUpload()" / label for="customFile"Choose file/label /div /div div button :disabled="isDisabled" span v-if="addLoading" role="status" aria-hidden="true" /spanSubmit /button /div /form

    And the script section should look like this:

     

    scriptexport 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

    We will define a function that will send a request to our back-end service to create any new music that has been added to the list. Also. we need to write a simple validation function that will check for the file type so that the users can only upload files with an extention of .mp3 and .mp4.

    It’s important to define a computed property to make sure that our input field isn’t empty. We also need to add a simple validator that will make sure the the file we are trying to upload is actually a music file.

    Let’s continue by editing the addMusic function to make a request to our back-end service. But before we do this, let’s first install sweetalert which will provide us with a nice modal window. To do this this, open up your terminal and type in the following:

    npm i sweetalert

    After installing the package, create a sweetalert.js file in the /plugins folder and add this:

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

    Then, register the plugin in the nuxt.config.js file inside the plugin instace like this:

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

    We have now successfully configured sweetalert in our application, so we can move on and edit the addmusic function to this:

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

    Let’s write a simple script that will toggle the form, i.e it should only display when we want to add new music.

     

    We can do this by editing the ‘Add Music’ button in the table that displays all of the music that can be found:

    button @click="initForm" {{addState?"Cancel":"Add New Music"}}/button

    Then, add a state that will hold the state of the form in the data property:

    addState: false

    After doing this, let’s define the initForm function:

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

    And then add v-if="addState" to the div that holds the form:

    div v-if="addState"

    Deleting Music

    To delete music, we need to call the delete endpoint and pass the music id as a param. Let’s add a click event to the ‘Delete’ button that will trigger the function to delete a function:

    button @click="deleteMusic(music._id)"Delete/button

    The delete function will be making an HTTP request to our back-end service. After getting the music ID from the deleteMusic function parameter, we will add the ID in the URL that we are using to send the request. This specifies the exact piece of music that ought to be removed from the database.

    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!') } }) }

    With all of this, we have just built our music manager. Now it’s time to build the music player.

    Let’s start by creating a new folder in the components folder named /player. Then, create a player.vue file within this folder and add this:

    template section div div div h3Player/h3 /div /div /div /section/templatescriptexport default { data() { return {} }}/scriptstyle scoped/style

    Next, let’s import this component into the index.vue file in the /pages folder. Replace the code in index.vue file to this:

    template div player / 




    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo crear un administrador de música con Nuxt.js y Express.js

    Cómo crear un administrador de música con Nuxt.js y Express.js

    Construyendo el servicio back-endConfiguración de modelos, rutas y controladoresProbando los puntos finalesConstruyendo la interfazConfigurando AxiosConstruye

    programar

    es

    https://pseint.es/static/images/programar-como-crear-un-administrador-de-musica-con-nuxt-1016-0.jpg

    2024-05-21

     

    Cómo crear un administrador de música con Nuxt.js y Express.js
    Cómo crear un administrador de música con Nuxt.js y Express.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences