Jak vytvořit správce hudby s Nuxt.js a Express.js

Manipulace s digitálními mediálními aktivy, jako je zvuk a video ve vaší aplikaci, může být složitá kvůli úvahám, které je třeba provést na straně serveru (např. síť, úložiště a asynchronní povaha zpracování nahrávání souborů). Můžeme však použít knihovny jako Multer a Express.js ke zjednodušení našeho pracovního postupu na backendu a zároveň používat Nuxt.js (rámec Vue) k vybudování front-endových interakcí.

Kdykoli webový klient nahraje soubor na server, je obvykle odeslán prostřednictvím formuláře a zakódován jako multipart/form-data . Multer je middleware pro Express.js a Node.js, který usnadňuje manipulaci s tímto takzvaným multipart/form-data kdykoli vaši uživatelé nahrávají soubory. V tomto tutoriálu vysvětlím, jak můžete vytvořit aplikaci pro správu hudby pomocí Express.js s Multerem k nahrávání hudby a Nuxt.js (rámec Vue) pro náš frontend.

Předpoklady

• Znalost HTML, CSS a JavaScriptu (ES6+);
• Node.js, npm a MongoDB nainstalované na vašem vývojovém počítači;
• kód VS nebo libovolný editor kódu podle vašeho výběru;
• Základní znalost Express.js.
  

Vytváření back-endové služby

Začněme vytvořením adresáře pro náš projekt tím, že přejdeme do adresáře a vydáme npm init -y na vašem terminálu a vytvořte package.json soubor, který spravuje všechny závislosti naší aplikace.

mkdir serverside && cd serverside
npm init -y

Dále nainstalujte multer , express a další závislosti potřebné k zavedení aplikace Express.js.

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

Dále vytvořte index.js soubor:

touch index.js

Poté v index.js inicializujeme všechny moduly, vytvoříme aplikaci Express.js a vytvoříme server pro připojení k prohlížečům:

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

Nejprve do projektu zavedeme Express.js a poté definujeme port, na kterém bude naše aplikace běžet. Dále přinášíme body-parser , morgan ,mongoose a cors závislosti.

Expresní instanci pak uložíme do proměnné nazvané app . Můžeme použít app pro konfiguraci middlewaru v naší aplikaci, stejně jako jsme nakonfigurovali cors middleware. Používáme také app instance pro nastavení kořenové trasy, která poběží na námi definovaném portu.

Nyní vytvoříme /config složku pro naši databázi config a multer config:

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

Poté otevřete config/db.js a přidejte následující kód pro konfiguraci naší databáze:

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

(Toto je ve skutečnosti objekt, který obsahuje adresu URL databáze a tajný klíč databáze.)

Spuštěn nodemon a přejděte na localhost:4000 ve vašem prohlížeči by vám měla zobrazit tato zpráva:

"Hola MEVN devs...Assemble"

Také by váš terminál měl nyní vypadat takto:

Nastavení modelu, tras a ovladačů

Pojďme nastavit strukturu souborů zadáním následujícího:

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

V našem terminálu používáme mkdir vytvořte nový adresář a poté cd přesunout do adresáře. Začneme tedy vytvořením adresáře s názvem api a poté přejděte do api adresář.

touch příkaz se používá k vytvoření nového souboru v adresáři pomocí terminálu, zatímco cd příkaz se používá k přesunutí z adresáře.

Nyní přejděme k našemu api/model/Music.js soubor k vytvoření hudebního schématu. Model je třída, pomocí které vytváříme dokumenty. V tomto případě bude každý dokument hudební skladbou s vlastnostmi a chováním, jak je deklarováno v našem schématu:

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;

Pojďme na config/multer pro konfiguraci 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
});

V multer.js soubor, začneme nastavením složky, kam se budou nahrávat všechny nahrané hudební soubory. Potřebujeme, aby byl tento soubor statický tím, že jej definujeme v index.js soubor:

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

Poté napíšeme jednoduchý validátor, který zkontroluje soubor mimetype před nahráním. Poté definujeme multer přidáním umístění úložiště, limitů každého souboru a validátoru, který jsme vytvořili.

Vytvoření nezbytných tras

Nyní vytvoříme naše trasy. Níže je seznam koncových bodů, které vytvoříme.

Začněme vytvořením trasy blogu. Přejděte na api/routes/music.js a napište následující kód:

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;

Poznámka :Nyní, kdykoli uděláme get požádat o /music . trasa volá getAllMusic funkce, která se nachází v souboru ‘controllers’.

Pojďme na api/controllers/musicController k definování ovladačů. Začneme napsáním funkce pro získání veškeré hudby v naší databázi pomocí mongoose db.collection.find metoda, která vrátí všechny položky v dané kolekci.

Poté napíšeme další funkci, která vytvoří v databázi novou hudbu. Potřebujeme vytvořit novou hudební instanci pomocí new klíčové slovo a poté definujte hudební objekt. Poté použijeme mongoose save způsob přidání nové hudby do databáze.

Abychom mohli odstranit hudební skladbu, musíme použít mongoose remove jednoduše předáním ID hudby jako parametru v remove instance. To vede k tomu, že se mangusta dívá do hudební sbírky, která má toto konkrétní ID, a pak ji z této sbírky odstraňuje.

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

V neposlední řadě, abychom mohli otestovat trasy, musíme zaregistrovat hudební trasy v našem index.js soubor:

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

Testování koncových bodů

K testování našich koncových bodů budeme používat POSTMAN.

Přidání nové hudby

Chcete-li otestovat Add Music funkcionalitu, nastavte způsob požadavku kliknutím na rozevírací seznam metod. Poté zadejte adresu URL koncového bodu a poté klikněte na kartu tělo a vyberte, jak chcete data odeslat. (V našem případě budeme používat metodu form-data.)

Klikněte tedy na data formuláře a nastavte klíč modelu. Při nastavování přidělujte klávesám určitou hodnotu, jak je znázorněno na obrázku níže:

Poté kliknutím na „Odeslat“ odešlete požadavek.

Výpis veškeré hudby

Abychom uvedli veškerou hudbu v naší databázi, musíme zadat adresu URL koncového bodu do uvedené části adresy URL. Poté kliknutím na tlačítko ‚Odeslat‘ odešlete požadavek.

Smazání hudby

Chcete-li odstranit hudební skladbu, musíme předat music id jako parametr.

To je ono!

Vytváření rozhraní

Pro náš frontend budeme používat rámec Vue:Nuxt.js.

Chcete-li vytvořit novou aplikaci Nuxt.js, otevřete svůj terminál a zadejte následující (s musicapp jako název aplikace, kterou budeme budovat):

$ npx create-nuxt-app musicapp

Během procesu instalace budeme dotázáni na několik otázek týkajících se nastavení projektu:

Po výběru toho všeho musíme chvíli počkat, než bude projekt nastaven. Jakmile bude připraven, přejděte do /project složku a obsluhujte projekt následovně:

cd musicapp && npm run dev

Otevřete projekt v libovolném editoru kódu podle vašeho výběru a poté otevřete projekt v prohlížeči pomocí localhost:3000 .

Konfigurace Axios

Budeme používat axios k vytvoření požadavku HTTP na náš back-end server. Axios je již v našem projektu nainstalován, takže musíme nakonfigurovat baseURL - na náš backend server.

Chcete-li to provést, otevřete nuxt.config.js soubor v root a přidejte baseURL v axios objekt.

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

Vytváření Správce hudby

Nastavení uživatelského rozhraní

Začněme vyčištěním uživatelského rozhraní. Otevřete pages/index.vue soubor a odstraňte veškerý kód v něm pomocí následujícího:

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

Poté byste měli v prohlížeči vidět pouze „Ahoj“.

V root adresář, vytvořte /partials složku. Uvnitř /partials vytvořte navbar.vue soubor a přidejte následující kód:

<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" id="navbarNav">
          <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>

Poznámka :Komponentu budeme používat k procházení stránkami v naší aplikaci. Toto bude jen jednoduchá komponenta tvořená Bootstrapem navbar . Další informace naleznete v oficiální dokumentaci Bootstrap.

Dále definujeme vlastní rozvržení pro aplikaci. Otevřete /layouts složku, nahraďte kód v default.vue soubor s kódem níže.

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

Importujeme navbar do tohoto rozložení, což znamená, že všechny stránky v naší aplikaci budou mít navbar součást v něm. (Toto bude komponenta, ke které budou připojeny všechny ostatní komponenty v naší aplikaci.)

Poté byste měli ve svém prohlížeči vidět toto:

Nyní nastavíme uživatelské rozhraní pro našeho manažera. K tomu potřebujeme vytvořit /manager složky ve složce komponent a poté přidejte soubor do složky s názvem manager.vue .

Do tohoto souboru přidejte následující kód:

<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" id="customFile" />
                    <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>

Poznámka :Toto je pouze jednoduchá šablona Bootstrap pro přidávání hudby do naší aplikace. Formulář bude definovat šablonu tabulky, která bude obsahovat seznam všech skladeb, které lze nalézt v naší databázi.

Po definování této komponenty ji musíme zaregistrovat v /pages složku pro inicializaci směrování.

Nuxt.js nemá soubor „router.js“ jako Vue.js. Pro směrování používá složku pages. Další podrobnosti naleznete na webu Nuxt.js.

Chcete-li komponentu zaregistrovat, vytvořte /manager složky v rámci /pages a vytvořte index.vue soubor. Potom do souboru umístěte následující kód:

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

Toto je komponenta, která se vykreslí v našem pages trasa.

Poté přejděte do prohlížeče a přejděte na /manager – měli byste vidět toto:

Výpis veškeré hudby

Pokračujme vytvořením funkce, která načte veškerou hudbu. Tato funkce bude zaregistrována ve vytvořeném háku životního cyklu, takže při každém vytvoření komponenty bude funkce volána.

Začněme vytvořením proměnné v vue instance, která pojme veškerou hudbu:

allmusic = [];
musicLoading: false,

Poté definujte getAllMusics a přidejte následující kód:

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

Dále se zaregistrujte ve vytvořeném háku životního cyklu:

created() {
    this.getAllMusics()
  }

Výstup dat

Nyní je čas na výstup všech skladeb na stůl, které jsme vytvořili dříve:

<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"
                style="width: 3rem; height: 3rem;"
                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>

Pamatujete si ten stůl, který jsme vytvořili dříve? No, budeme muset projít odezvou, kterou dostaneme zpět z našeho backendu, abychom vypsali veškerou hudbu přijatou zpět z databáze.

Přidání hudby

Chcete-li přidat novou skladbu, musíme odeslat požadavek HTTP na server back-end s podrobnostmi o hudbě. Chcete-li to provést, začněme úpravou formuláře a zpracováním nahraných souborů.

Do formuláře musíme přidat event posluchač, který bude naslouchat formuláři při jeho odeslání. Na input pole, přidáme v- model pro vazbu hodnoty na vstupní pole.

<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"
                  id="customFile"
                  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>

A sekce skriptů by měla vypadat takto:

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

Definujeme funkci, která odešle naší back-endové službě požadavek na vytvoření jakékoli nové hudby, která byla přidána do seznamu. Taky. potřebujeme napsat jednoduchou ověřovací funkci, která bude kontrolovat typ souboru, aby uživatelé mohli nahrávat pouze soubory s příponou .mp3 a .mp4 .

Je důležité definovat vypočítanou vlastnost, abyste se ujistili, že naše vstupní pole není prázdné. Potřebujeme také přidat jednoduchý validátor, který zajistí, že soubor, který se pokoušíme nahrát, je skutečně hudební soubor.

Pokračujme úpravou addMusic k odeslání požadavku na naši back-end službu. Ale než to uděláme, nejprve nainstalujme sweetalert což nám poskytne pěkné modální okno. Chcete-li to provést, otevřete svůj terminál a zadejte následující:

npm i sweetalert

Po instalaci balíčku vytvořte sweetalert.js soubor v /plugins složku a přidejte toto:

import Vue from 'vue';
import swal from 'sweetalert';

Vue.prototype.$swal = swal;

Poté plugin zaregistrujte v nuxt.config.js soubor uvnitř instance pluginu takto:

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

Nyní jsme úspěšně nakonfigurovali sweetalert v naší aplikaci, takže můžeme pokračovat a upravit addmusic funkce na toto:

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

Pojďme napsat jednoduchý skript, který bude přepínat formulář, tj. měl by se zobrazovat pouze tehdy, když chceme přidat novou hudbu.

Můžeme to udělat úpravou tlačítka „Přidat hudbu“ v tabulce, která zobrazuje veškerou hudbu, kterou lze nalézt:

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

Poté přidejte stav, který bude obsahovat stav formuláře v data vlastnost:

addState: false

Až to uděláme, pojďme definovat initForm funkce:

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

A pak přidejte v-if="addState" na div který má tvar:

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

Smazání hudby

Chcete-li odstranit hudbu, musíme zavolat na číslo delete koncový bod a předejte music id jako param. Přidejme click událost na tlačítko ‚Smazat‘, které spustí funkci k odstranění funkce:

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

delete bude vytvářet HTTP požadavek na naši back-end službu. Po získání ID hudby z deleteMusic funkce, přidáme ID do adresy URL, kterou používáme k odeslání požadavku. Toto specifikuje přesnou skladbu, která by měla být odstraněna z databáze.

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

S tím vším jsme právě vybudovali našeho hudebního manažera. Nyní je čas vytvořit hudební přehrávač.

Začněme vytvořením nové složky ve složce komponent s názvem /player . Poté vytvořte player.vue soubor v této složce a přidejte toto:

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

Dále importujme tuto komponentu do index.vue soubor v /pages složku. Nahraďte kód v index.vue soubor do tohoto:

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

Pojďme nakonfigurovat směrování v našem navbar komponentu umožňující směrování mezi našimi stránkami.

Pro směrování v aplikaci Nuxt.js nuxt-link se používá, poté, co jste zadali stránku pro tuto cestu do konkrétní instance. Upravme tedy kód v partials/navbar komponent k tomuto:

<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" id="navbarNav">
          <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>

Díky tomu můžeme procházet našimi stránkami pomocí navigační lišty.

Sestavení přehrávače

Než začneme, musíme rozšířit Webpack o načítání zvukových souborů. Zvukové soubory by měly být zpracovány pomocí file-loader . Tento zavaděč je již zahrnut ve výchozí konfiguraci Webpacku, ale není nastaven na zpracování zvukových souborů.

Chcete-li to provést, přejděte na nuxt.config.js a upravte build vznést námitku:

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

Dále napíšeme funkci, která získá všechny skladby a poté použije Audio konstruktor pro přehrání první skladby v allMusic pole.

Pro začátek si upravme player.vue soubor do tohoto:

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

Jakmile je soubor doručen, hudba se přehraje na pozadí a poté byste měli ve svém prohlížeči vidět toto:

Chcete-li zastavit hudbu, vše, co musíte udělat, je okomentovat await player.play() v initPlayer funkce.

Vytvoření uživatelského rozhraní přehrávače

Pojďme nyní definovat uživatelské rozhraní hudebního přehrávače nahrazením šablony v našem player.vue soubor s následujícím:

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

Poté přidejte následující styl do style sekce:

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

Po úpravě by měl přehrávač vypadat takto:

Přidání funkce Play

Pokračujeme zobrazením popisu hudby na stole. Chcete-li to provést, nahraďte tabulku níže uvedeným kódem:

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

Nechceme zobrazovat ikony ‚Přehrát‘ a ‚Pozastavit‘ současně. Místo toho chceme situaci, kdy se při přehrávání skladby zobrazí ikona ‚Pauza‘. Když je skladba pozastavena, měla by se zobrazit ikona přehrávání.

Abychom toho dosáhli, musíme nastavit isPlaying stav na false instance a poté pomocí této instance přepínat ikony. Poté k naší ikoně ‚Play‘ přidáme funkci.

isplaying:false

Poté upravte ikonu „Přehrát“ a „Pozastavit“ na následující:

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

S tím vším definujme play metoda:

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

Nejprve získáme aktuální skladbu a předáme ji do function parametr. Poté definujeme JavaScript Audio() instance. Dále zkontrolujeme, zda je skladba nulová:Pokud není, nastavíme this.current na skladbu, kterou jsme předali v parametru, a pak zavoláme Audio instance hráče. (Nezapomeňte také, že musíme nastavit isPlaying stav na true když hraje hudba.)

Přidání funkce pauzy

K pozastavení skladby použijeme Audio metoda pauzy. Potřebujeme přidat click události na ikonu pauzy:

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

A pak definujte funkci v methods instance:

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

Přehrávání skladby ze seznamu hudby

To je docela jednoduché na implementaci. Jediné, co musíme udělat, je přidat click událost, která změní song parametr v play metodu k písni, kterou jsme právě vytvořili.

Jednoduše upravte play tlačítko v tabulce seznamu hudby na toto:

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

A tady to máte!

Přidání další funkce

Chcete-li přidat další funkci, musíme index zvýšit o jednu. Chcete-li to provést, přidejte click událost na další ikonu:

@click="next"

A pak definujte prev funkce v methods instance:

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

Tato podmínka je zodpovědná za přehrání všech skladeb vždy, když byla přehrána poslední skladba v seznamu.

Přidání previous Funkce

Toto je ve skutečnosti opak následující funkce, takže přidejte click událost k předchozí funkci:

@click="prev"

Dále definujeme předchozí funkci:

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

Naše aplikace hudebního přehrávače je nyní dokončena!

Závěr

V tomto článku jsme se podívali na to, jak můžeme vytvořit hudebního manažera s Nuxt.js a Express.js. Cestou jsme viděli, jak Multer zjednodušuje proces zpracování nahrávání souborů a jak používat Mongoose k interakci bez databáze. Nakonec jsme použili Nuxt.js k vytvoření klientské aplikace, která jí dodává rychlý a svižný pocit.

Na rozdíl od jiných frameworků je vytváření aplikace s Nuxt.js a Express.js docela snadné a rychlé. Skvělá část na Nuxt.js je způsob, jakým spravuje vaše trasy a umožňuje vám lépe strukturovat vaše aplikace.

• Další informace o Nuxt.js naleznete zde.
• Zde máte přístup ke zdrojovému kódu na Github