cloud_music

música_nube

Introducción del proyecto

Esta es una aplicación web que imita el lado de PC de NetEase Cloud Music. Está construida en base a Vue + Element UI. El estilo general de la página es relativamente simple. El cuerpo principal de la página web está diseñado para ser similar a abrir una aplicación de ventana. el escritorio de Windows. El cuerpo principal de la aplicación es una ventana, a la que se puede acceder arrastrando la esquina inferior derecha para cambiar el tamaño de la ventana. Aunque puede ser un poco extraño que una aplicación web esté diseñada así, no lo es. Inviable. Quizás en el futuro se pueda derivar un escritorio web, similar a la sensación de un escritorio en la nube.

Parece una idea bastante buena. Tal vez en el futuro se pueda intentar construir un escritorio web de este tipo, proporcionar una plataforma básica para administrar el ciclo de vida de cada ventana y luego desarrollar aplicaciones web basadas en esta plataforma y crear las suyas propias. aplicaciones web en él.

back-end del proyecto

El backend del proyecto proviene de la API de la versión NodeJS de NetEase Cloud Music y el documento de interfaz completo del proyecto.

Ya no se puede acceder a la página de documentación de la interfaz de este proyecto. Generé un documento sin conexión, que puedes descargar desde aquí.

Vista previa del proyecto

Todavía hay algunas páginas del proyecto que no se han completado, pero las páginas principales se han completado y el proyecto se actualizará e implementará continuamente en mi NetEase Cloud Music (imitación).

Dado que el servidor es un servidor nacional y la resolución del nombre de dominio al host nacional requiere registro, y debido a que no puedo aprobar el registro porque no tengo un permiso de residencia, solo puedo acceder a él directamente usando IP.

correr

Esta sección describirá cómo hacer que este proyecto funcione correctamente.

preparar el backend

Clone la API de la versión NetEase Cloud Music NodeJS en el local o en el servidor para completar el trabajo de inicialización

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

Modificar el puerto del servidor

El puerto predeterminado para el inicio del servidor es 3000. Si no desea utilizar el puerto 3000, puede utilizar el siguiente comando: windows

 $ set PORT=4000

En Mac/Linux

 $ PORT=4000

puesta en marcha

 $ cd NeteaseCloudMusicApi
$ node app.js

Front-end (este proyecto)

Clona este proyecto al local o al servidor para completar el trabajo de inicialización.

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

Modificar la dirección y el puerto del servidor

La dirección del servidor predeterminada del proyecto es http://localhost y el puerto es 3000 Si necesita modificarlo, cree un nuevo archivo .env.local en el directorio raíz de este proyecto y escriba los siguientes pares clave-valor .

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

ejecutar o construir

 $ npm run serve
$ npm run build

Este proyecto contiene un complemento de paquete web escrito por usted mismo. Su función es cargar automáticamente los archivos creados en el servidor una vez completada la compilación. Sin embargo, debido a la configuración del archivo .env.local , solo puede ser correcto cuando se compila. mi computadora. Busque el servidor y cargue el archivo, de modo que informará un error al compilar en su computadora, pero esto no afectará la compilación del proyecto.

Si solo lo está ejecutando localmente, mantenga todas las configuraciones predeterminadas.

Comience rápidamente

Esta parte le presentará <Rendering/> , un componente central del proyecto. Este componente se utiliza en una gran cantidad de páginas del proyecto. Comprender cómo funciona este componente es una forma importante de comprender la mayor parte del código fuente. proyecto.

El componente <Rendering/> es responsable de representar todos los datos del proyecto que se pueden abstraer en formato Array<Object> . El proyecto tiene una gran cantidad de dichos datos, como listas de canciones, listas de cantantes, listas de álbumes, listas de comentarios, etc. etc. Datos conformes al formato Array<Object> .

Y el componente <Rendering/> también se hará cargo de la carga de estos datos, el procesamiento de paginación, etc. Lo que tienes que hacer es muy simple. Solo necesitas implementar un método filling y pasarlo al componente <Rendering/> accesorios.

comenzar

Introduciremos este componente a través de una página simple en el proyecto.
Esta es una página de clasificación de MV. Al cambiar diferentes etiquetas de clasificación, la página le mostrará la lista de MV correspondiente. También hay una función de paginación simple en la parte inferior. Veamos cómo usar <Rendering/> para implementar convenientemente estas funciones.

Puedes probar esta página primero.

Paginación inferior

Echemos un vistazo a la estructura general de la parte del código fuente de esta página.

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

Parte del contenido que no requiere atención se incluye aquí. Para obtener el código fuente completo, consulte aquí.

Puede ver que la parte de la plantilla de la página es relativamente simple. El primero son los tres componentes <simple-radio/> Sus funciones son muy simples. Las etiquetas correspondientes se representan a través de las tres matrices de etiquetas definidas en data . Se hace clic en las etiquetas. Luego actualice las propiedades vinculadas correspondientes a través de v-model y luego un componente <rendering/> con muchos accesorios vinculados.

<rendering/> Detalles del componente

Parece que <rendering/> tiene muchos accesorios, pero no es el caso, <rendering/> solo tiene 2 accesorios, y otros accesorios se pasarán a su <component/> y <pagination/> internos.

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

Fragmento de código fuente <Rendering/> , aquí se ha eliminado parte del contenido que no necesita atención. Para obtener el código fuente completo, consulte aquí.

<pagination/> es un componente de paginación. Es responsable de representar un componente de paginación para proporcionar interacción y también es responsable de administrar la carga de datos.
<component/> es responsable de cargar los componentes que pasa a través de la propiedad component . En esta página MV, paso dinámicamente un componente CommonVideoMatrices para component a través de require([path]).default . component y puedes ver que represento los eventos dentro de CommonVideoMatrices a través de v-on="$listeners" , lo que significa que puedes escuchar directamente el evento $emit dentro de CommonVideoMatrices en <rendering/>

CommonVideoMatrices es responsable de representar una lista de visualización de MV real. En realidad, es responsable de mostrar datos en esta página. Acepta internamente un accesorio de datas ( datas siempre deben ser datos en formato Array<Object> ) y los representa a través de la página de datas .

Hay muchos componentes en el proyecto que son similares al diseño CommonVideoMatrices . Todos representan sus propios datos a través de un accesorio datas . Solo se puede pasar un componente que contiene datas en <rendering/> Estos componentes se encuentran en src/cmoponents/content/tracks y en src/component/content/matrices .

<Pagination/> representará un componente de paginación en la página para proporcionar interacción

Este componente de paginación solo se procesará cuando proporcione el total de propiedades. De lo contrario, no se procesará, pero aún puede administrar la carga de datos. Para obtener más detalles sobre <Pagination/> puede ver el código fuente.

Carga de datos

Lo anterior presenta la estructura interna y algunos detalles del componente <Rendering/> Al menos sabemos que a través de component , podemos pasarle un componente que contiene datas <Rendering/> que nos ayudará a representar este componente. pero ¿quién le dará este componente? datas pasa datos, ¿a través de qué método?
Esto abre otro filling de accesorios dentro del componente <Rendering/> .

Objeto: relleno

A diferencia de otros accesorios, filling debe pasarle una función . Esta función se usará para cargar datos. Se llamará automáticamente cuando sea necesario y se requiere que devuelva una Promesa.
Podemos ver cómo se implementa esta función en la página de 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' ] )
        } )
    } )
  }
}

Esta función se pasará como parámetro a <rendering/> y sus componentes internos se pasarán a <pagination/> y decidirá cuándo llamarla.
mvs(area, type, order, offset, limit) es una interfaz para datos mv de back-end. Los primeros tres parámetros se utilizan para determinar qué tipo de mv, offset y limit se utilizan para la paginación.

Cuando se hace clic en el componente de paginación representado en la página por <pagination/> , se llama internamente al método de llenado y se pasan algunos parámetros. Estos parámetros son utilizados como parámetros de paginación por la interfaz mvs y se pasan a través de resolución cuando se devuelven los datos de la interfaz. Con éxito en el interior de <pagination/> , los datos se almacenarán en caché esta vez y se pasarán a CommonVideoMatrices a través de <Rendering/> para que los datos se puedan representar normalmente.

También se llamará al relleno cuando la página se cargue por primera vez.

Carga responsiva

Puede ver que nuestra página también necesita recargar nuevos datos después de que el usuario selecciona otras etiquetas o categorías. Puede pensar en escuchar el evento de clic de <simple-radio/> y luego notificar <pagination/> de alguna manera. ¿El método de llenado actualiza los datos?
¡No es necesario! ! Tenemos una forma más sencilla de implementar esta función.

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

unique eventualmente se pasará a <pagination/>
order type area Todos están vinculados a tres <simple-radio/> diferentes a través de v-model

Solo necesito agregar un accesorio unique en el componente <rendering/> y pasarle un valor que se usa para responder a las actualizaciones de datos. Cuando el valor pasado a cambios unique , se llamará a relleno. En este escenario, por ejemplo, cuando se cambia la identificación de la lista de reproducción, se recargan nuevos datos de la lista de reproducción. En este momento, solo necesitamos pasar la identificación a unique e implementar un método de llenado. Cuando la identificación cambia, la nueva canción. Se cargarán automáticamente datos individuales.

Puede ver que <Rendering/> es muy conveniente de usar en esta página. Al escribir esta página, solo podemos centrarnos en el contenido de CommonVideoMatrices sin pensar en el método y la lógica de adquisición de datos. cargando. Se mostrará un efecto de animación cargando... Estos también se completan con <Rendering/> , pero esta parte se ha simplificado en el fragmento de código que se muestra aquí.

De hecho, hay otra cosa llamada adapter que se utiliza para resolver el problema del backend que devuelve el mismo tipo de datos en diferentes lugares pero con diferentes estructuras de datos, pero no lo presentaré aquí.

Conclusión

Este es un proyecto para principiantes. Espero que pueda brindar algo de inspiración y referencia a algunos estudiantes que son nuevos en front-end/Vue y no pueden encontrar ninguna práctica en el proyecto. Creo que muchos lugares del proyecto se implementan de esta manera. que después de leer esta parte, pueda tener una comprensión más clara de parte del código fuente de este proyecto.