cloud_music

cloud_music

Projekteinführung

Dies ist eine Webanwendung, die die PC-Seite von NetEase Cloud Music imitiert. Sie basiert auf der Benutzeroberfläche von Vue + Element. Der Hauptteil der Webseite ähnelt dem Öffnen einer Fenster-App Der Hauptteil der Anwendung ist ein Fenster, auf das Sie durch Ziehen der unteren rechten Ecke zugreifen können, um die Fenstergröße zu ändern. Obwohl es als Webanwendung etwas seltsam sein mag, ist es das nicht Vielleicht lässt sich in Zukunft ein Web-Desktop entwickeln, ähnlich dem Gefühl eines Cloud-Desktops.

Das scheint eine ziemlich gute Idee zu sein. Vielleicht können Sie in Zukunft versuchen, einen solchen Web-Desktop zu erstellen, eine grundlegende Plattform zur Verwaltung des Lebenszyklus jedes Fensters bereitzustellen und dann auf dieser Plattform basierende Webanwendungen zu entwickeln und Ihre eigenen zu erstellen Webanwendungen darauf.

Projekt-Backend

Das Projekt-Backend stammt aus der NetEase Cloud Music NodeJS-Versions-API und dem vollständigen Schnittstellendokument des Projekts

Die Schnittstellendokumentationsseite dieses Projekts ist nicht mehr zugänglich. Ich habe ein Offline-Dokument erstellt, das Sie hier herunterladen können.

Projektvorschau

Es gibt noch einige Seiten des Projekts, die noch nicht abgeschlossen sind, aber die Hauptseiten wurden fertiggestellt und das Projekt wird kontinuierlich aktualisiert und auf meiner NetEase Cloud Music bereitgestellt (Nachahmung).

Da es sich bei dem Server um einen inländischen Server handelt und die Auflösung des Domainnamens zum inländischen Host eine Registrierung erfordert und ich die Registrierung einfach nicht bestehen kann, weil ich keine Aufenthaltserlaubnis habe, kann ich nur direkt über IP darauf zugreifen.

laufen

In diesem Abschnitt wird beschrieben, wie dieses Projekt ordnungsgemäß funktioniert

Backend vorbereiten

Klonen Sie die NetEase Cloud Music NodeJS-Versions-API auf die lokale oder den Server, um die Initialisierungsarbeiten abzuschließen

 $ git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
$ npm install

Server-Port ändern

Der Standardport für den Serverstart ist 3000. Wenn Sie Port 3000 nicht verwenden möchten, können Sie den folgenden Befehl verwenden: Windows

 $ set PORT=4000

Unter Mac/Linux

 $ PORT=4000

Start-up

 $ cd NeteaseCloudMusicApi
$ node app.js

Frontend (dieses Projekt)

Klonen Sie dieses Projekt auf lokal oder auf dem Server, um die Initialisierungsarbeiten abzuschließen

 $ git clone https://github.com/ColorlessWin/cloud_music.git
$ npm install

Ändern Sie die Serveradresse und den Port

Die Standardserveradresse des Projekts ist http://localhost und der Port ist 3000 Wenn Sie ihn ändern müssen, erstellen Sie eine neue .env.local Datei im Stammverzeichnis dieses Projekts und notieren Sie die folgenden Schlüssel-Wert-Paare .

 VUE_APP_HOST=/*这里填你的服务器地址（需要加http或https前缀）*/
VUE_APP_PORT=/*这里填你的服务器端口*/
/**
 * 示例
 * VUE_APP_HOST=https://webservices.fun
 * VUE_APP_PORT=80
 */

ausführen oder erstellen

 $ npm run serve
$ npm run build

Dieses Projekt enthält ein selbst geschriebenes Webpack-Plugin. Seine Funktion besteht darin, die erstellten Dateien nach Abschluss des Builds automatisch auf den Server hochzuladen. Aufgrund der Konfiguration der .env.local Datei kann dies jedoch nur beim Erstellen korrekt sein Suchen Sie den Server und laden Sie die Datei hoch, damit beim Erstellen auf Ihrem Computer ein Fehler gemeldet wird. Dies hat jedoch keine Auswirkungen auf die Erstellung des Projekts

Wenn Sie es nur lokal ausführen, behalten Sie einfach alle Konfigurationen als Standard bei.

Legen Sie schnell los

In diesem Teil lernen Sie <Rendering/> kennen, eine Kernkomponente des Projekts. Diese Komponente wird auf vielen Seiten des Projekts verwendet. Um den Großteil des Quellcodes zu verstehen, ist es wichtig zu verstehen, wie diese Komponente funktioniert Projekt.

Die <Rendering/> Komponente ist für die Darstellung aller Daten im Projekt verantwortlich, die in Array<Object> -Format abstrahiert werden können. Das Projekt verfügt über eine große Menge solcher Daten, wie z. B. Songlisten, Sängerlisten, Albumlisten, Kommentarlisten usw. usw. Daten, die dem Array<Object> -Format entsprechen.

Und die <Rendering/> Komponente übernimmt auch das Laden dieser Daten, die Paging-Verarbeitung usw. Was Sie tun müssen, ist sehr einfach. Sie müssen nur eine filling implementieren und diese an die <Rendering/> Komponente übergeben Requisiten.

Start

Wir werden diese Komponente über eine einfache Seite im Projekt vorstellen.
Dies ist eine MV-Klassifizierungsseite. Durch Wechseln verschiedener Klassifizierungs-Tags wird auf der Seite die entsprechende MV-Liste angezeigt. Unten gibt es auch eine einfache Seitenfunktion. Sehen wir uns an, wie Sie <Rendering/> verwenden, um diese Funktionen bequem zu implementieren

Sie können diese Seite zunächst ausprobieren

Untere Paginierung

Werfen wir einen Blick auf die allgemeine Struktur des Quellcodeteils dieser Seite.

< template >
    < span >地区：</ span >
    < simple-radio :options = " areaLabel " v-model = " area " />   < br >
    
    < span >类型：</ span >
    < simple-radio :options = " typeLabel " v-model = " type " />   < br >
    
    < span >排序：</ span >
    < simple-radio :options = " orderLabel " v-model = " order " /> < br >
    
    < rendering
      class = " mvs "
      :component = " require('@/components/content/matrices/CommonVideoMatrices').default "
      :adapter = " adapter "
      :show-creator = " true "
    
      :total = " total "
      :filling = " filling "
      :unique = " area + type + order "
    />
</ template >

< script >
  import ...
  export default {
    name : " Mv " ,
    components : {LArea, Rendering, SimpleRadio},

    data () {
      return {
        total : - 1 ,
        area : '全部' ,
        type : '全部' ,
        order : '上升最快' ,
        areaLabel : [ '全部' , '内地' , '港台' , '欧美' , '日本' ],
        typeLabel : [ '全部' , '官方版' , '原声' , '现场版' , '网易出品' ],
        orderLabel : [ '上升最快' , '最热' , '最新' ],

        adapter : { ... }
      }
    },

    methods : {
      filling ( offset , limit , first_load ) { ... }
    }
  }
</ script >

Einige Inhalte, die keine Aufmerksamkeit erfordern, sind hier eingefügt. Den vollständigen Quellcode finden Sie hier.

Sie können sehen, dass der Vorlagenteil der Seite relativ einfach ist. Die ersten drei <simple-radio/> Komponenten sind sehr einfach. Die entsprechenden Beschriftungen werden über die drei in data definierten Label-Arrays gerendert Auf die Beschriftungen wird geklickt. Aktualisieren Sie dann die entsprechenden gebundenen Eigenschaften über v-model und anschließend über eine <rendering/> Komponente mit vielen daran gebundenen Requisiten.

<rendering/> Komponentendetails

Es scheint, dass <rendering/> viele Requisiten hat, aber das ist nicht der Fall. <rendering/> hat nur 2 Requisiten, und andere Requisiten werden an seine interne <component/> und <pagination/> übergeben

< template >
  < div >
    < component
      :is = " component "
      v-bind = " Object.assign(props, $attrs) "
      v-on = " $listeners "
    />

    < pagination
      v-model = " props.datas "
      v-on = " $listeners "
      v-bind = " $attrs "
      :filling = " filling "
    />
  </ div >
</ template >

< script >
  import Pagination from " @/components/common/Pagination " ;
  export default {
    name : " Rendering " ,
    components : {Pagination},
    props : {
      component : { type : [ Object , Function ], required : true },
      filling :   { type : Function , required : true },
    },
    data () {
      return {
        props : {
          datas : [],
        }
      }
    }
  }
</ script >

<Rendering/> Quellcode-Snippet, einige Inhalte, die keine Aufmerksamkeit erfordern, wurden hier gelöscht. Den vollständigen Quellcode finden Sie hier

<pagination/> ist eine Paging-Komponente. Sie ist für die Darstellung einer Paging-Komponente zur Bereitstellung von Interaktion verantwortlich und ist auch für die Verwaltung des Ladens von Daten verantwortlich.
<component/> ist für das Laden der Komponenten verantwortlich, die Sie über die component übergeben. Auf dieser MV-Seite übergebe ich dynamisch eine CommonVideoMatrices component über require([path]).default . component und Sie können sehen, dass ich die Ereignisse in CommonVideoMatrices über v-on="$listeners" vertrete, was bedeutet, dass Sie das $emit Ereignis in CommonVideoMatrices beim <rendering/> direkt abhören können

CommonVideoMatrices ist für die Darstellung einer tatsächlichen MV-Anzeigeliste verantwortlich. Es akzeptiert intern eine datas ( datas sollten immer Daten im Array<Object> -Format sein) und stellt sie über die datas dar

Es gibt viele Komponenten im Projekt, die dem CommonVideoMatrices -Design ähneln. Sie rendern alle src/cmoponents/content/tracks eigenen Daten über eine datas . In <rendering/> kann nur datas Komponente übergeben werden src/cmoponents/content/tracks und unter src/component/content/matrices

<Pagination/> rendert eine Paging-Komponente auf der Seite, um Interaktion bereitzustellen

Diese Paging-Komponente wird nur gerendert, wenn Sie die Eigenschaft total angeben. Andernfalls wird sie nicht gerendert, aber Sie können das Laden der Daten trotzdem verwalten. Weitere Informationen zu <Pagination/> finden Sie im Quellcode.

Daten werden geladen

Das Obige stellt die interne Struktur und einige Details der <Rendering/> <Rendering/> vor. Zumindest wissen wir, dass wir über component Requisite eine Komponente mit datas -Requisite übergeben können, die uns beim Rendern dieser Komponente hilft. Aber wer wird diese Komponente geben? datas leitet Daten weiter, mit welcher Methode?
Dadurch wird eine weitere filling innerhalb der <Rendering/> Komponente angezeigt.

Requisite: Füllung

Im Gegensatz zu anderen Requisiten müssen Sie ihm filling eine Funktion übergeben. Diese Funktion wird zum Laden von Daten verwendet. Sie wird bei Bedarf automatisch aufgerufen und ist erforderlich, um ein Versprechen zurückzugeben.
Wir können sehen, wie diese Funktion auf der MV-Seite implementiert wird

methods: {
  filling ( offset , limit , first_load ) {
    return new Promise ( resolve => {
      mvs ( this . area , this . type , this . order , offset , limit )
        . then ( result => {
          if ( first_load ) this . total = result [ 'count' ]
          resolve ( result [ 'data' ] )
        } )
    } )
  }
}

Diese Funktion wird als Parameter an <rendering/> übergeben und ihre Interna werden an <pagination/> übergeben und diese Funktion entscheidet, wann sie aufgerufen wird.
mvs(area, type, order, offset, limit) ist eine Schnittstelle für Back-End-MV-Daten. Die ersten drei Parameter werden verwendet, um zu bestimmen, welcher MV-Typ, offset und limit für das Paging verwendet werden.

Wenn auf die von <pagination/> auf der Seite gerenderte Paging-Komponente geklickt wird, wird die Füllmethode intern aufgerufen und einige Parameter werden von der mvs Schnittstelle als Paging-Parameter verwendet und bei der Rückgabe der Schnittstellendaten durch Auflösung übergeben Diesmal werden die Daten innerhalb von <pagination/> zwischengespeichert und über <Rendering/> an CommonVideoMatrices übergeben, sodass die Daten normal gerendert werden können.

Filling wird auch aufgerufen, wenn die Seite zum ersten Mal geladen wird.

Responsives Laden

Sie können sehen, dass unsere Seite auch neue Daten neu laden muss, nachdem der Benutzer andere Tags oder Kategorien ausgewählt hat. Sie können darüber nachdenken, das Klickereignis von <simple-radio/> abzuhören und dann <pagination/> Aufruf auf irgendeine Weise zu benachrichtigen. Füllmethode aktualisiert Daten?
Brauche nicht! ! Wir haben eine einfachere Möglichkeit, diese Funktion zu implementieren

 < rendering
  ...
  :unique =" area + type + order "
/>

unique wird schließlich an <pagination/> übergeben
area Sie sind alle über type order v-model an drei verschiedene <simple-radio/> gebunden

Ich muss nur eine unique Requisite zur <rendering/> Komponente hinzufügen und ihr einen Wert übergeben, der verwendet wird, um auf unique zu reagieren. Dies ist oft sehr nützlich Wenn sich in diesem Szenario beispielsweise die ID der Wiedergabeliste ändert, werden neue Wiedergabelistendaten neu geladen. Zu diesem Zeitpunkt müssen wir nur die ID an unique übergeben und eine Füllmethode implementieren Einzeldaten werden automatisch geladen.

Sie können sehen, dass die Verwendung von <Rendering/> auf dieser Seite sehr praktisch ist. Beim Schreiben dieser Seite können wir uns nur auf den Inhalt von CommonVideoMatrices konzentrieren, ohne über die Datenerfassungsmethode und -logik nachzudenken Wird geladen. Ein Loading...-Animationseffekt wird ebenfalls durch <Rendering/> angezeigt, dieser Teil wurde jedoch im hier gezeigten Codeausschnitt optimiert.

Tatsächlich gibt es eine andere Sache namens adapter , die verwendet wird, um das Problem zu lösen, dass das Backend an verschiedenen Orten denselben Datentyp, aber mit unterschiedlichen Datenstrukturen zurückgibt, aber ich werde es hier nicht vorstellen.

Abschluss

Dies ist ein Projekt für Anfänger. Ich hoffe, dass es einigen Studenten, die neu im Bereich Frontend/Vue sind und noch keine Projektpraxis finden, einige Inspiration und Hinweise geben kann dass Sie nach dem Lesen dieses Teils einen Teil des Quellcodes dieses Projekts besser verstehen können