cloud_music

cloud_musique

Présentation du projet

Il s'agit d'une application Web imitant le côté PC de NetEase Cloud Music. Elle est construite sur la base de Vue + Element UI. Le style général de la page est relativement simple. Le corps principal de la page Web est conçu pour être similaire à l'ouverture d'une application de fenêtre. le bureau Windows. Le corps principal de l'application est une fenêtre, accessible en faisant glisser le coin inférieur droit pour modifier la taille de la fenêtre. Bien qu'il puisse être un peu étrange qu'une application Web soit conçue comme ceci, ce n'est pas le cas. irréalisable. Peut-être qu'un bureau Web pourra être dérivé à l'avenir, semblable à la sensation d'un bureau cloud.

Cela semble être une très bonne idée. Peut-être qu'à l'avenir, vous pourrez essayer de créer un tel bureau Web, fournir une plate-forme de base pour gérer le cycle de vie de chaque fenêtre, puis développer des applications Web basées sur cette plate-forme et créer la vôtre. applications Web dessus.

Back-end du projet

Le backend du projet provient de l'API de la version NetEase Cloud Music NodeJS et du document d'interface complet du projet

La page de documentation de l'interface de ce projet n'est plus accessible. J'ai généré un document hors ligne, que vous pouvez télécharger ici.

Aperçu du projet

Il y a encore quelques pages du projet qui ne sont pas terminées, mais les pages principales sont terminées, et le projet sera continuellement mis à jour et déployé sur mon NetEase Cloud Music (imitation)

Étant donné que le serveur est un serveur national et que la résolution du nom de domaine vers l'hôte national nécessite un enregistrement, et comme je ne peux tout simplement pas réussir l'enregistrement parce que je n'ai pas de permis de séjour, je ne peux y accéder directement qu'en utilisant IP.

courir

Cette section décrira comment faire fonctionner correctement ce projet

Préparer le back-end

Clonez l'API de la version NetEase Cloud Music NodeJS sur le serveur local ou sur le serveur pour terminer le travail d'initialisation.

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

Modifier le port du serveur

Le port par défaut pour le démarrage du serveur est 3000. Si vous ne souhaitez pas utiliser le port 3000, vous pouvez utiliser la commande suivante : windows

 $ set PORT=4000

Sous Mac/Linux

 $ PORT=4000

démarrer

 $ cd NeteaseCloudMusicApi
$ node app.js

Front-end (ce projet)

Clonez ce projet sur local ou sur serveur pour terminer le travail d'initialisation

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

Modifier l'adresse et le port du serveur

L'adresse du serveur par défaut du projet est http://localhost et le port est 3000 Si vous devez le modifier, créez un nouveau fichier .env.local dans le répertoire racine de ce projet et notez les paires clé-valeur suivantes .

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

exécuter ou construire

 $ npm run serve
$ npm run build

Ce projet contient un plug-in webpack auto-écrit. Sa fonction est de télécharger automatiquement les fichiers construits sur le serveur une fois la construction terminée. Cependant, en raison de la configuration du fichier .env.local , il ne peut être correct que lors de la construction. mon ordinateur. Recherchez le serveur et téléchargez le fichier. Il signalera donc une erreur lors de la construction sur votre ordinateur, mais cela n'affectera pas la construction du projet.

Si vous l'exécutez uniquement localement, conservez simplement toutes les configurations par défaut.

Commencez rapidement

Cette partie vous présentera <Rendering/> , un composant central du projet. Ce composant est utilisé dans un grand nombre de pages du projet. Comprendre le fonctionnement de ce composant est un moyen important de comprendre la plupart du code source de ce projet. projet.

Le composant <Rendering/> est responsable du rendu de toutes les données du projet qui peuvent être résumées au format Array<Object> . Le projet contient une grande quantité de ces données, telles que des listes de chansons, des listes de chanteurs, des listes d'albums, des listes de commentaires, etc. etc. Données conformes au format Array<Object> .

Et le composant <Rendering/> prendra également en charge le chargement de ces données, le traitement de la pagination, etc. Ce que vous avez à faire est très simple. Il vous suffit d'implémenter une méthode filling et de la transmettre au composant <Rendering/> via. accessoires.

commencer

Nous présenterons ce composant à travers une simple page du projet.
Il s'agit d'une page de classification MV. En changeant de balises de classification, la page vous montrera la liste MV correspondante. Il y a également une fonction de pagination simple en bas. Voyons comment utiliser <Rendering/> pour implémenter facilement ces fonctions

Vous pouvez d'abord essayer cette page

Pagination du bas

Jetons un coup d'œil à la structure générale de la partie code source de cette page.

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

Certains contenus qui ne nécessitent pas d'attention sont repliés ici. Pour le code source complet, veuillez consulter ici.

Vous pouvez voir que la partie modèle de la page est relativement simple. Le premier est constitué des trois composants <simple-radio/> . Leurs fonctions sont très simples. Les étiquettes correspondantes sont rendues via les trois tableaux Label définis dans data . les étiquettes sont cliquées. Ensuite, mettez à jour les propriétés liées correspondantes via v-model , puis un composant <rendering/> avec de nombreux accessoires qui y sont liés.

<rendering/> Détails du composant

Il semble que <rendering/> ait beaucoup d'accessoires, mais ce n'est pas le cas. <rendering/> n'a que 2 accessoires, et les autres accessoires seront transmis à son <component/> et à sa <pagination/> internes.

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

Extrait de code source <Rendering/> , certains contenus qui ne nécessitent pas d'attention ont été supprimés ici. Pour le code source complet, veuillez voir ici.

<pagination/> est un composant de pagination. Il est responsable du rendu d'un composant de pagination pour fournir une interaction et est également responsable de la gestion du chargement des données.
<component/> est responsable du chargement des composants que vous transmettez via le component prop. Dans cette page MV, je passe dynamiquement un composant CommonVideoMatrices à component via require([path]).default . component et vous pouvez voir que je proxy les événements dans CommonVideoMatrices via v-on="$listeners" , ce qui signifie que vous pouvez directement écouter l'événement $emit dans CommonVideoMatrices sur <rendering/>

CommonVideoMatrices est responsable du rendu d'une liste d'affichage MV réelle. Il est en fait responsable de l'affichage des données sur cette page. Il accepte en interne un accessoire de datas ( datas doivent toujours être des données au format Array<Object> ) et les restitue via la page datas .

Il existe de nombreux composants dans le projet qui sont similaires à la conception CommonVideoMatrices . Ils src/cmoponents/content/tracks tous leurs propres données via un accessoire datas . Un seul composant contenant datas peut être transmis dans <rendering/> src/cmoponents/content/tracks et sous src/component/content/matrices

<Pagination/> affichera un composant de pagination sur la page pour fournir une interaction

Ce composant de pagination ne sera rendu que lorsque vous fournirez le prop total . Sinon, il ne sera pas rendu, mais vous pourrez toujours gérer le chargement des données. Pour plus de détails sur <Pagination/> vous pouvez consulter le code source.

Chargement des données

Ce qui précède présente la structure interne et quelques détails du composant <Rendering/> . Au moins, nous savons que grâce component prop, nous pouvons y passer un composant contenant datas <Rendering/> nous aidera à restituer ce composant, mais qui donnera ce composant datas transmet les données, par quelle méthode ?
Cela fait apparaître un autre filling d'accessoires dans le composant <Rendering/> .

Accessoire : remplissage

Contrairement aux autres accessoires, filling vous devez lui transmettre une fonction . Cette fonction sera utilisée pour charger des données. Elle sera automatiquement appelée en cas de besoin et est nécessaire pour renvoyer une promesse.
Nous pouvons voir comment cette fonction est implémentée dans la page MV

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

Cette fonction sera passée en paramètre à <rendering/> et ses éléments internes seront passés à <pagination/> et il décidera quand l'appeler.
mvs(area, type, order, offset, limit) est une interface pour les données mv back-end. Les trois premiers paramètres sont utilisés pour déterminer quel type de mv, offset et limit est utilisé pour la pagination.

Lorsque vous cliquez sur le composant de pagination affiché sur la page par <pagination/> , la méthode de remplissage est appelée en interne et certains paramètres sont transmis. Ces paramètres sont utilisés comme paramètres de pagination par l'interface mvs et sont transmis via la résolution lorsque les données de l'interface sont renvoyées. avec succès. À l'intérieur de <pagination/> , les données seront mises en cache cette fois et les données seront transmises à CommonVideoMatrices via <Rendering/> afin que les données puissent être restituées normalement.

Le remplissage sera également appelé lors du premier chargement de la page.

Chargement réactif

Vous pouvez voir que notre page doit également recharger de nouvelles données après que l'utilisateur a sélectionné d'autres balises ou catégories. Vous pouvez penser à écouter l'événement de clic de <simple-radio/> puis à notifier <pagination/> d'une manière ou d'une autre. La méthode de remplissage met à jour les données ?
Pas besoin ! ! Nous avons un moyen plus simple d'implémenter cette fonction

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

unique sera finalement transmis à <pagination/>
order type area Ils sont tous liés à trois <simple-radio/> différents via v-model

J'ai juste besoin d'ajouter un accessoire unique sur le composant <rendering/> et de lui transmettre une valeur qui est utilisée pour répondre aux mises à jour des données. Lorsque la valeur est transmise à des modifications unique , le remplissage sera souvent appelé. rencontre Dans ce scénario, par exemple, lorsque l'identifiant de la playlist est modifié, les nouvelles données de la playlist sont rechargées. À ce stade, il suffit de transmettre l'identifiant à unique et d'implémenter une méthode de remplissage. Lorsque l'identifiant change, la nouvelle chanson. seront automatiquement chargés.

Vous pouvez voir que <Rendering/> est très pratique à utiliser dans cette page. Lors de la rédaction de cette page, nous ne pouvons nous concentrer que sur le contenu de CommonVideoMatrices sans penser à la méthode et à la logique d'acquisition des données. chargement. Un effet d'animation de chargement... sera affiché. Ceux-ci sont également complétés par <Rendering/> , mais cette partie a été rationalisée dans l'extrait de code présenté ici.

En fait, il existe une autre chose appelée adapter qui est utilisée pour résoudre le problème du backend renvoyant le même type de données à différents endroits mais avec des structures de données différentes, mais je ne le présenterai pas ici.

Conclusion

Il s'agit d'un projet pour les novices. J'espère qu'il pourra donner de l'inspiration et des références à certains étudiants qui sont nouveaux dans Front-end/Vue et qui ne trouvent aucune pratique de projet. De nombreux endroits du projet sont implémentés de cette manière. qu'après avoir lu cette partie, on peut avoir une compréhension plus claire d'une partie du code source de ce projet