cloud_music

cloud_music

프로젝트 소개

NetEase Cloud Music의 PC 측면을 모방한 웹 애플리케이션입니다. Vue + Element UI를 기반으로 제작되었습니다. 웹 페이지의 본체는 창 앱을 여는 것과 유사하게 디자인되었습니다. 응용 프로그램의 본체는 창이며 오른쪽 하단 모서리를 드래그하여 창 크기를 변경할 수 있습니다. 이렇게 디자인된 웹 응용 프로그램으로서는 다소 이상할 수 있지만 그렇지 않습니다. 아마도 미래에는 클라우드 데스크탑과 비슷한 느낌의 웹 데스크탑이 파생될 수도 있을 것입니다.

꽤 좋은 아이디어인 것 같습니다. 아마도 미래에는 이러한 웹 데스크탑을 구축하고 각 창의 수명주기를 관리하는 기본 플랫폼을 제공한 다음 이 플랫폼을 기반으로 웹 애플리케이션을 개발하고 자신의 것을 넣을 수 있습니다. 그것에 웹 응용 프로그램.

프로젝트 백엔드

프로젝트 백엔드는 NetEase Cloud Music NodeJS 버전 API와 프로젝트의 전체 인터페이스 문서에서 나옵니다.

이 프로젝트의 인터페이스 문서 페이지에 더 이상 액세스할 수 없습니다. 여기에서 다운로드할 수 있는 오프라인 문서를 생성했습니다.

프로젝트 미리보기

프로젝트 중 아직 완료되지 않은 페이지가 있지만 메인 페이지는 완료되었으며 프로젝트는 지속적으로 업데이트되어 내 NetEase Cloud Music에 배포됩니다(모방).

서버가 국내 서버이고, 국내 호스트로의 도메인 이름 확인을 위해서는 등록이 필요하고, 거주 허가가 없어 등록을 그냥 통과할 수 없기 때문에 IP를 통해서만 직접 접속이 가능합니다.

달리다

이 섹션에서는 이 프로젝트를 올바르게 작동시키는 방법을 설명합니다.

백엔드 준비

NetEase Cloud Music NodeJS 버전 API를 로컬 또는 서버에 복제하여 초기화 작업을 완료합니다.

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

서버 포트 수정

서버 시작을 위한 기본 포트는 3000입니다. 포트 3000을 사용하지 않으려면 다음 명령을 사용할 수 있습니다.

 $ set PORT=4000

맥/리눅스에서

 $ PORT=4000

시작하다

 $ cd NeteaseCloudMusicApi
$ node app.js

프런트엔드(본 프로젝트)

초기화 작업을 완료하려면 이 프로젝트를 로컬 또는 서버에 복제하세요.

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

서버 주소 및 포트 수정

프로젝트의 기본 서버 주소는 http://localhost 이고 포트는 3000 입니다. 수정이 필요한 경우 이 프로젝트의 루트 디렉터리에 새 .env.local 파일을 생성하고 다음 키-값 쌍을 적어둡니다. .

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

실행 또는 빌드

 $ npm run serve
$ npm run build

이 프로젝트에는 자체 작성된 webpack 플러그인이 포함되어 있습니다. 해당 기능은 빌드가 완료된 후 빌드된 파일을 서버에 자동으로 업로드하는 것입니다. 그러나 .env.local 파일 구성으로 인해 빌드할 때만 정확할 수 있습니다. 내 컴퓨터에서 서버를 찾아 파일을 업로드하면 컴퓨터에서 빌드할 때 오류가 보고되지만 프로젝트 빌드에는 영향을 미치지 않습니다.

로컬에서 실행하는 경우 모든 구성을 기본값으로 유지하세요.

빨리 시작하세요

이 부분에서는 프로젝트의 핵심 구성 요소인 <Rendering/> 을 소개합니다. 이 구성 요소는 프로젝트의 많은 페이지에서 사용됩니다. 이 구성 요소의 작동 방식을 이해하는 것은 이 소스 코드의 대부분을 이해하는 중요한 방법입니다. 프로젝트.

<Rendering/> 구성 요소는 Array<Object> 형식으로 추상화할 수 있는 프로젝트의 모든 데이터를 렌더링하는 역할을 합니다. 프로젝트에는 노래 목록, 가수 목록, 앨범 목록, 댓글 목록, 등 Array<Object> 형식을 따르는 데이터입니다.

그리고 <Rendering/> 구성 요소는 이러한 데이터 로드, 페이징 처리 등도 담당합니다. 수행해야 할 작업은 매우 간단합니다. filling 메서드를 구현하고 이를 <Rendering/> 구성 요소에 전달하기만 하면 됩니다. 소품.

시작

프로젝트 내 간단한 페이지를 통해 이 컴포넌트를 소개하겠습니다.
이것은 MV 분류 페이지입니다. 다른 분류 태그를 전환하면 해당 페이지 하단에 간단한 페이징 기능도 표시됩니다. 이러한 기능을 편리하게 구현하기 위해 <Rendering/> 사용하는 방법을 알아보겠습니다.

이 페이지를 먼저 시도해 보세요.

하단 페이지 매김

이 페이지의 소스 코드 부분의 일반적인 구조를 살펴보겠습니다.

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

주의가 필요하지 않은 일부 내용은 여기에 접혀 있습니다. 전체 소스 코드는 여기를 참조하세요.

페이지의 템플릿 부분은 비교적 간단하다는 것을 알 수 있습니다. 첫 번째는 세 가지 <simple-radio/> 구성 요소입니다. 해당 레이블은 data 에 정의된 세 가지 Label 배열을 통해 렌더링됩니다. 그런 다음 v-model 통해 해당 바인딩 속성을 업데이트하고 많은 props가 바인딩된 <rendering/> 구성 요소를 업데이트합니다.

<rendering/> 구성요소 세부정보

<rendering/> 에는 props가 많은 것 같지만 그렇지 않습니다. <rendering/> 에는 props가 2개뿐이고 다른 props는 내부 <component/> 및 <pagination/> 에 전달됩니다.

< 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/> 소스 코드 조각, 주의가 필요하지 않은 일부 내용은 여기에서 삭제되었습니다. 전체 소스 코드는 여기를 참조하세요.

<pagination/> 은 페이징 구성 요소로, 상호 작용을 제공하기 위해 페이징 구성 요소를 렌더링하고 데이터 로드를 관리합니다.
<component/> component 소품을 통해 전달한 구성 요소를 로드하는 역할을 합니다. 이 MV 페이지에서는 require([path]).default 통해 CommonVideoMatrices 구성 요소를 component 에 동적으로 전달합니다. component 사용하면 v-on="$listeners" 통해 CommonVideoMatrices 내부 이벤트를 프록시하는 것을 볼 수 있습니다. 이는 <rendering/> 에서 CommonVideoMatrices 내부의 $emit 이벤트를 직접 들을 수 있다는 의미입니다.

CommonVideoMatrices 는 실제로 이 페이지에 데이터를 표시하는 역할을 담당하며 내부적으로 datas ( datas 항상 Array<Object> 형식의 데이터여야 함) 페이지 datas 통해 렌더링합니다.

프로젝트에는 CommonVideoMatrices 디자인과 유사한 구성 요소가 많이 있습니다. 모두 datas prop을 통해 자체 데이터를 렌더링합니다. <rendering src/cmoponents/content/tracks <rendering/> 에는 datas prop을 포함하는 구성 요소 하나만 전달할 수 있습니다 . src/cmoponents/content/tracks 및 src/component/content/matrices 아래에 있습니다.

<Pagination/> 페이지에 페이징 구성 요소를 렌더링하여 상호 작용을 제공합니다.

이 페이징 구성 요소는 total 속성을 제공하는 경우에만 렌더링됩니다. 그렇지 않으면 렌더링되지 않지만 <Pagination/> 에 대한 자세한 내용은 소스 코드를 참조하세요.

데이터 로딩

위에서는 <Rendering/> 구성 요소의 내부 구조와 일부 세부 정보를 소개합니다. 적어도 우리는 component 소품을 통해 <Rendering/> 이 이 datas 요소를 렌더링하는 데 도움이 되는 구성 요소를 전달할 수 있다는 것을 알고 있습니다. 하지만 누가 이 구성 요소를 제공합니까? datas prop은 어떤 방법을 통해 데이터를 전달합니까?
그러면 <Rendering/> 구성 요소 내에 또 다른 소품이 filling 집니다.

소품: 채우기

다른 props와 달리 filling 함수를 전달해야 합니다. 이 함수 는 필요할 때 자동으로 호출되며 Promise를 반환하는 데 필요합니다.
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' ] )
        } )
    } )
  }
}

이 함수는 <rendering/> 에 매개변수로 전달되고 그 내부는 <pagination/> 에 전달되며 언제 호출할지 결정합니다.
mvs(area, type, order, offset, limit) 백엔드 mv 데이터에 대한 인터페이스입니다. 처음 세 매개변수는 페이징에 사용되는 mv, offset 및 limit 유형을 결정하는 데 사용됩니다.

<pagination/> 으로 페이지에 렌더링된 페이징 구성 요소를 클릭하면 내부적으로 채우기 메서드가 호출되고 일부 매개 변수는 mvs 인터페이스에서 페이징 매개 변수로 사용되며 인터페이스 데이터가 반환될 때 확인을 통해 전달됩니다. 성공적으로 <pagination/> 내부로 데이터를 캐싱하고, <Rendering/> 통해 CommonVideoMatrices 에 데이터를 전달하여 정상적으로 렌더링이 가능하도록 합니다.

페이지가 처음 로드될 때도 Filling이 호출됩니다.

반응형 로딩

사용자가 다른 태그나 카테고리를 선택한 후에도 페이지에서 새 데이터를 다시 로드해야 한다는 것을 알 수 있습니다. <simple-radio/> 의 클릭 이벤트를 수신한 다음 어떤 방식으로든 <pagination/> 호출을 알리는 것을 생각할 수 있습니다. 충전 방법이 데이터를 업데이트합니까?
필요하지 않습니다! ! 이 기능을 구현하는 더 간단한 방법이 있습니다.

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

unique 결국 <pagination/> 에 전달됩니다.
area type order 그들은 모두 v-model 통해 세 가지 다른 <simple-radio/> 에 바인딩됩니다.

<rendering/> 구성 요소에 unique 소품을 추가하고 데이터 업데이트에 응답하는 데 사용되는 값을 전달하면 됩니다. 값이 unique 변경 사항에 전달되면 이는 매우 유용할 것입니다. 예를 들어 이 시나리오에서는 재생 목록의 ID가 변경되면 새 재생 목록 데이터가 다시 로드됩니다. 이때 ID를 unique 전달하고 ID가 변경되면 새 노래를 채우는 방법만 구현하면 됩니다. 단일 데이터가 자동으로 로드됩니다.

이 페이지에서는 <Rendering/> 사용하는 것이 매우 편리하다는 것을 알 수 있습니다. 이 페이지를 작성할 때 데이터 수집 방법 및 논리에 대해 생각하지 않고 CommonVideoMatrices 의 내용에만 집중할 수 있습니다. loading... 애니메이션 효과가 표시됩니다. 이 효과도 <Rendering/> 에 의해 완료되지만 여기에 표시된 코드 조각에서는 이 부분이 간소화되었습니다.

사실 백엔드가 동일한 유형의 데이터를 다른 장소에서 다른 데이터 구조로 반환하는 문제를 해결하기 위해 사용되는 adapter 라는 것이 있지만 여기서는 소개하지 않겠습니다.

결론

이것은 초보자를 위한 프로젝트입니다. 프론트엔드/Vue를 처음 접하고 프로젝트 실습을 찾을 수 없는 일부 학생들에게 영감과 참고 자료가 되기를 바랍니다. 이 부분을 읽고 나면 이 프로젝트의 소스 코드 일부를 더 명확하게 이해할 수 있습니다.