Как создать музыкальный менеджер с помощью Nuxt.js и Express.js

Обработка цифровых мультимедийных активов, таких как аудио и видео, в вашем приложении может быть сложной из-за соображений, которые должны быть сделаны на стороне сервера (например, сеть, хранилище и асинхронный характер обработки загрузки файлов). Однако мы можем использовать такие библиотеки, как Multer и Express.js, чтобы упростить наш рабочий процесс на бэкэнде, а Nuxt.js (фреймворк Vue) — для построения интерфейсных взаимодействий.

Всякий раз, когда веб-клиент загружает файл на сервер, он обычно отправляется через форму и кодируется как multipart/form-data . Multer — это промежуточное ПО для Express.js и Node.js, упрощающее обработку так называемых multipart/form-data всякий раз, когда ваши пользователи загружают файлы. В этом руководстве я объясню, как вы можете создать приложение для управления музыкой, используя Express.js с Multer для загрузки музыки и Nuxt.js (инфраструктура Vue) для нашего внешнего интерфейса.

Предпосылки

• Знание HTML, CSS и JavaScript (ES6+);
• Node.js, npm и MongoDB установлены на вашем компьютере для разработки;
• VS code или любой редактор кода на ваш выбор;
• Базовые знания Express.js.
  

Создание серверной службы

Давайте начнем с создания каталога для нашего проекта, перейдя в каталог и npm init -y на вашем терминале, чтобы создать файл package.json , который управляет всеми зависимостями для нашего приложения.

 mkdir serverside && cd serverside npm init -y

Затем установите multer , express и другие зависимости, необходимые для начальной загрузки приложения Express.js.

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

Затем создайте файл index.js :

 touch index.js

Затем в файле index.js мы инициализируем все модули, создадим приложение Express.js и создадим сервер для подключения к браузерам:

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

Мы, прежде всего, вносим в проект Express.js, а затем определяем порт, на котором будет работать наше приложение. Затем мы добавляем зависимости body-parser , morgan , mongoose и cors .

Затем мы сохраняем экспресс-экземпляр в переменной app . Мы можем использовать экземпляр app для настройки промежуточного программного обеспечения в нашем приложении так же, как мы настроили промежуточное программное обеспечение cors . Мы также используем экземпляр app для настройки корневого маршрута, который будет работать в определенном нами порту.

Давайте теперь создадим папку /config для нашей config базы данных и конфигурации multer :

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

Затем откройте config/db.js и добавьте следующий код для настройки нашей базы данных:

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

(На самом деле это объект, который содержит URL-адрес базы данных и секрет базы данных.)

Запуск nodemon и переход на localhost:4000 в вашем браузере должны дать вам следующее сообщение:

 "Hola MEVN devs...Assemble"

Кроме того, вот как теперь должен выглядеть ваш терминал:

Настройка модели, маршрутов и контроллеров

Давайте настроим файловую структуру, введя следующее:

 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

В нашем терминале мы используем mkdir для создания нового каталога, а затем cd для перехода в каталог. Итак, мы начнем с создания каталога с именем api , а затем перейдем в каталог api .

Команда touch используется для создания нового файла внутри каталога с помощью терминала, а команда cd используется для выхода из каталога.

Теперь давайте перейдем к нашему файлу api/model/Music.js , чтобы создать музыкальную схему. Модель — это класс, с помощью которого мы создаем документы. В этом случае каждый документ будет музыкальным произведением со свойствами и поведением, как указано в нашей схеме:

 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;

Перейдем к config/multer для настройки 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 });

В файле multer.js мы начинаем с настройки папки, в которую будут загружаться все загруженные музыкальные файлы. Нам нужно сделать этот файл статическим, определив его в файле index.js :

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

После этого пишем простой валидатор, который будет проверять mimetype файла перед загрузкой. Затем мы определяем экземпляр multer , добавляя место хранения, ограничения для каждого файла и созданный нами валидатор.

Создайте необходимые маршруты

Теперь давайте создадим наши маршруты. Ниже приведен список конечных точек, которые мы будем создавать.

Начнем с создания маршрута блога. Перейдите к api/routes/music.js и напишите следующий код:

 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;

Примечание : теперь всякий раз, когда мы делаем запрос на get /music . маршрут вызывает функцию getAllMusic , расположенную в файле «контроллеры».

Давайте перейдем к api/controllers/musicController , чтобы определить контроллеры. Мы начнем с написания функции для получения всей музыки в нашей базе данных, используя метод db.collection.find мангуста, который вернет все элементы в этой коллекции.

После этого мы напишем еще одну функцию, которая создаст новую музыку в базе данных. Нам нужно создать новый музыкальный экземпляр, используя new ключевое слово, а затем определить музыкальный объект. После этого мы будем использовать метод save мангуста, чтобы добавить новую музыку в базу данных.

Чтобы удалить музыкальное произведение, нам нужно использовать метод remove мангуста, просто передав идентификатор музыки в качестве параметра в экземпляре remove . Это приводит к тому, что мангуст просматривает музыкальную коллекцию с этим конкретным идентификатором, а затем удаляет ее из этой коллекции.

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

И последнее, но не менее важное: чтобы протестировать маршруты, нам нужно зарегистрировать музыкальные маршруты в нашем файле index.js :

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

Тестирование конечных точек

Чтобы протестировать наши конечные точки, мы будем использовать POSTMAN.

Добавление новой музыки

Чтобы протестировать функцию « Add Music », задайте метод запроса, щелкнув раскрывающийся список методов. После этого введите URL-адрес конечной точки, а затем щелкните вкладку body, чтобы выбрать способ отправки данных. (В нашем случае мы будем использовать метод form-data.)

Поэтому нажмите на данные формы и настройте ключ модели. Когда вы настроите его, присвойте ключам некоторое значение, как показано на изображении ниже:

После этого нажмите «Отправить», чтобы отправить запрос.

Список всей музыки

Чтобы перечислить всю музыку в нашей базе данных, мы должны ввести URL-адрес конечной точки в предоставленном разделе URL-адресов. После этого нажмите кнопку «Отправить», чтобы отправить запрос.

Удаление музыки

Чтобы удалить музыкальное произведение, нам нужно передать music id в качестве параметра.

Вот и все!

Создание внешнего интерфейса

Для нашего внешнего интерфейса мы будем использовать фреймворк Vue: Nuxt.js.

«Nuxt — это прогрессивный фреймворк на основе Vue.js для создания современных веб-приложений. Он основан на официальных библиотеках Vue.js (vue, vue-router и vuex) и мощных инструментах разработки (webpack, Babel и PostCSS)».

- Руководство по NuxtJS

Чтобы создать новое приложение Nuxt.js, откройте свой терминал и введите следующее (с musicapp в качестве имени приложения, которое мы будем создавать):

 $ npx create-nuxt-app musicapp

В процессе установки нам зададут несколько вопросов по настройке проекта:

После выбора всего этого нам нужно немного подождать, пока проект будет настроен. Когда все будет готово, перейдите в папку /project и обработайте проект следующим образом:

 cd musicapp && npm run dev

Откройте проект в любом редакторе кода по вашему выбору, а затем откройте проект в браузере, обратившись к localhost:3000 .

Настройка Аксиос

Мы будем использовать axios для отправки HTTP-запроса на наш внутренний сервер. Axios уже установлен в нашем проекте, поэтому нам просто нужно настроить baseURL — на наш внутренний сервер.

Для этого откройте файл nuxt.config.js в root каталоге и добавьте baseURL в объект axios .

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

Создание музыкального менеджера

Настройка пользовательского интерфейса

Начнем с очистки пользовательского интерфейса. Откройте файл pages/index.vue и удалите из него весь код следующим образом:

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

После этого вы сможете увидеть только «Привет» в браузере.

В root каталоге создайте папку /partials . Внутри папки /partials создайте файл navbar.vue и добавьте следующий код:

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

Примечание . Мы будем использовать этот компонент для навигации по страницам нашего приложения. Это будет простой компонент, состоящий из панели навигации Bootstrap navbar Ознакомьтесь с официальной документацией Bootstrap для получения дополнительной информации.

Далее давайте определим пользовательский макет для приложения. Откройте папку /layouts , замените код в файле default.vue кодом ниже.

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

Мы импортируем navbar в этот макет, что означает, что все страницы в нашем приложении будут иметь этот компонент navbar . (Это будет компонент, к которому будут монтироваться все остальные компоненты нашего приложения.)

После этого вы должны увидеть это в своем браузере:

Теперь давайте настроим пользовательский интерфейс для нашего менеджера. Для этого нам нужно создать папку /manager в папке компонентов, а затем добавить в папку файл с именем manager.vue .

В этот файл добавьте следующий код:

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

Примечание . Это всего лишь простой шаблон Bootstrap для добавления музыки в наше приложение. Форма определит шаблон таблицы, в которой будет указана вся музыка, которую можно найти в нашей базе данных.

После определения этого компонента нам нужно зарегистрировать его в папке /pages для инициализации маршрутизации.

Nuxt.js не имеет файла router.js, такого как Vue.js. Он использует папку pages для маршрутизации. Для получения более подробной информации посетите веб-сайт Nuxt.js.

Чтобы зарегистрировать компонент, создайте папку /manager в папке /pages и создайте файл index.vue . Затем поместите следующий код внутрь файла:

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

Это компонент, который будет отображаться в маршруте наших pages .

После этого зайдите в свой браузер и перейдите в /manager — вы должны увидеть это:

Список всей музыки

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

Давайте начнем с создания переменной в экземпляре vue , которая будет содержать всю музыку:

 allmusic = []; musicLoading: false,

Затем определите функцию getAllMusics и добавьте следующий код:

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

Затем зарегистрируйтесь в созданном хуке жизненного цикла:

 created() { this.getAllMusics() }

Вывод данных

Теперь пришло время вывести все песни в таблице, которую мы создали ранее:

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

Помните ту таблицу, которую мы создали ранее? Что ж, нам нужно будет пройтись по ответу, который мы получили от нашего бэкенда, чтобы перечислить всю музыку, полученную обратно из базы данных.

Добавление музыки

Чтобы добавить новое музыкальное произведение, нам нужно сделать HTTP-запрос на внутренний сервер с деталями музыки. Для этого начнем с изменения формы и обработки загрузки файлов.

В форме нам нужно добавить прослушиватель event , который будет прослушивать форму при ее отправке. В поле input мы добавляем v- -модель для привязки значения к полю ввода.

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

И раздел скрипта должен выглядеть так:

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

Мы определим функцию, которая будет отправлять запрос в нашу серверную службу для создания любой новой музыки, которая была добавлена ​​в список. Также. нам нужно написать простую функцию проверки, которая будет проверять тип файла, чтобы пользователи могли загружать только файлы с расширением .mp3 и .mp4 .

Важно определить вычисляемое свойство, чтобы убедиться, что наше поле ввода не пусто. Нам также нужно добавить простой валидатор, который удостоверится, что файл, который мы пытаемся загрузить, на самом деле является музыкальным файлом.

Давайте продолжим, отредактировав функцию addMusic , чтобы сделать запрос к нашей серверной службе. Но прежде чем мы это сделаем, давайте сначала установим sweetalert , который предоставит нам красивое модальное окно. Для этого откройте терминал и введите следующее:

 npm i sweetalert

После установки пакета создайте файл sweetalert.js в папке /plugins и добавьте следующее:

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

Затем зарегистрируйте плагин в файле nuxt.config.js внутри экземпляра плагина следующим образом:

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

Теперь мы успешно настроили sweetalert в нашем приложении, поэтому мы можем двигаться дальше и отредактировать функцию addmusic следующим образом:

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

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

Мы можем сделать это, отредактировав кнопку «Добавить музыку» в таблице, которая отображает всю музыку, которую можно найти:

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

Затем добавьте состояние, которое будет хранить состояние формы в свойстве data :

 addState: false

После этого давайте определим функцию initForm :

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

А затем добавьте v-if="addState" в div , который содержит форму:

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

Удаление музыки

Чтобы удалить музыку, нам нужно вызвать конечную точку delete и передать music id в качестве параметра. Давайте добавим событие click к кнопке «Удалить», которое вызовет функцию для удаления функции:

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

Функция delete будет отправлять HTTP-запрос к нашей серверной службе. Получив идентификатор музыки из параметра функции deleteMusic , мы добавим идентификатор в URL-адрес, который мы используем для отправки запроса. Это указывает точное музыкальное произведение, которое должно быть удалено из базы данных.

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

Со всем этим мы только что создали нашего музыкального менеджера. Теперь пришло время создать музыкальный проигрыватель.

Начнем с создания новой папки в папке компонентов с именем /player . Затем создайте файл player.vue в этой папке и добавьте следующее:

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

Далее давайте импортируем этот компонент в файл index.vue в папке /pages . Замените код в файле index.vue на этот:

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

Давайте настроим маршрутизацию в нашем компоненте navbar , чтобы включить маршрутизацию между нашими страницами.

Для маршрутизации в приложении Nuxt.js используется nuxt-link , после чего вы указываете страницу для этого маршрута к конкретному экземпляру. Итак, давайте отредактируем код в компоненте partials/navbar следующим образом:

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

При этом мы можем перемещаться по нашим страницам с помощью панели навигации.

Создание игрока

Прежде чем мы начнем, нам нужно расширить Webpack для загрузки аудиофайлов. Аудиофайлы должны обрабатываться file-loader . Этот загрузчик уже включен в конфигурацию Webpack по умолчанию, но он не настроен для обработки аудиофайлов.

Для этого перейдите в файл nuxt.config.js и измените объект build следующим образом:

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

Далее давайте напишем функцию, которая будет получать все песни, а затем использовать конструктор Audio для воспроизведения первой песни в массиве allMusic .

Для начала давайте изменим наш файл player.vue следующим образом:

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

После того, как файл будет загружен, в фоновом режиме будет воспроизводиться музыка, и тогда вы сможете увидеть это в своем браузере:

Чтобы остановить музыку, все, что вам нужно сделать, это закомментировать await player.play() в функции initPlayer .

Создание интерфейса игрока

Давайте теперь определим пользовательский интерфейс нашего музыкального проигрывателя, заменив шаблон в нашем файле player.vue следующим:

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

Затем добавьте следующий стиль в раздел style :

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

После внесения изменений плеер должен выглядеть так:

Добавление функции воспроизведения

Мы продолжим, отобразив описание музыки на столе. Для этого замените таблицу кодом ниже:

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

Мы не хотим отображать значки «Воспроизведение» и «Пауза» одновременно. Вместо этого мы хотим, чтобы во время воспроизведения песни отображался значок «Пауза». Кроме того, когда песня поставлена ​​на паузу, должен отображаться значок воспроизведения.

Для этого нам нужно установить состояние isPlaying в экземпляр false , а затем использовать этот экземпляр для переключения значков. После этого мы добавим функцию к нашему значку «Play».

 isplaying:false

После этого измените значок «Воспроизведение» и «Пауза» на это:

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

При всем этом определим метод 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 },

Мы, прежде всего, получаем текущую песню и передаем ее в параметр function . Затем мы определяем экземпляр JavaScript Audio() . Затем мы проверяем, является ли песня нулевой: если это не так, мы устанавливаем this.current на песню, которую мы передали в параметре, а затем вызываем экземпляр Audio . (Кроме того, не забывайте, что мы должны установить для состояния isPlaying значение true , когда играет музыка.)

Добавление функции паузы

Чтобы приостановить песню, мы будем использовать метод Audio pause. Нам нужно добавить событие click к значку паузы:

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

А затем определите функцию в экземпляре methods :

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

Воспроизведение песни из музыкального списка

Это довольно просто реализовать. Все, что нам нужно сделать, это добавить событие click , которое изменит параметр song в методе play на песню, которую мы только что создали.

Просто измените кнопку play в таблице со списком музыки следующим образом:

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

И вот оно!

Добавление следующей функции

Чтобы добавить следующую функцию, нам нужно увеличить индекс на единицу. Для этого добавьте событие click к следующему значку:

 @click="next"

А затем определите функцию prev в экземпляре methods :

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

Это условное выражение отвечает за повторное воспроизведение всех песен всякий раз, когда воспроизводится последняя песня в списке.

Добавление previous функции

На самом деле это противоположность следующей функции, поэтому давайте добавим событие click к предыдущей функции:

 @click="prev"

Далее мы определяем предыдущую функцию:

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

Наше приложение для музыкального плеера готово!

Заключение

В этой статье мы рассмотрели, как создать музыкальный менеджер с помощью Nuxt.js и Express.js. Попутно мы увидели, как Multer оптимизирует процесс загрузки файлов и как использовать Mongoose для взаимодействия без базы данных. Наконец, мы использовали Nuxt.js для создания клиентского приложения, которое делает его быстрым и шустрым.

В отличие от других фреймворков, создание приложения с помощью Nuxt.js и Express.js выполняется довольно просто и быстро. Самое интересное в Nuxt.js — это то, как он управляет вашими маршрутами и позволяет лучше структурировать ваши приложения.

• Вы можете получить дополнительную информацию о Nuxt.js здесь.
• Вы можете получить доступ к исходному коду на Github здесь