cloud_music

cloud_music

Pengenalan proyek

Ini adalah aplikasi web yang meniru sisi PC dari NetEase Cloud Music. Ini dibangun berdasarkan Vue + Element UI. Gaya halaman keseluruhannya relatif sederhana. Bagian utama halaman web dirancang mirip dengan membuka aplikasi jendela desktop Windows. Bagian utama aplikasi adalah jendela, yang dapat diakses melalui Seret sudut kanan bawah untuk mengubah ukuran jendela. Meskipun mungkin agak aneh karena aplikasi web dirancang seperti ini, sebenarnya tidak mungkin desktop web dapat diturunkan di masa depan, mirip dengan desktop cloud.

Tampaknya ini ide yang cukup bagus. Mungkin di masa depan, Anda dapat mencoba membangun desktop web seperti itu, menyediakan platform dasar untuk mengelola siklus hidup setiap jendela, dan kemudian mengembangkan aplikasi web berdasarkan platform ini dan membuat aplikasi Anda sendiri. aplikasi web di dalamnya.

Bagian belakang proyek

Backend proyek berasal dari API versi NetEase Cloud Music NodeJS dan dokumen antarmuka proyek yang lengkap

Halaman dokumentasi antarmuka proyek ini tidak lagi dapat diakses. Saya membuat dokumen offline, yang dapat Anda unduh dari sini.

Pratinjau proyek

Masih ada beberapa halaman proyek yang belum selesai, tetapi halaman utama telah selesai, dan proyek akan terus diperbarui dan diterapkan di NetEase Cloud Music saya (imitasi)

Karena servernya adalah server domestik, dan resolusi nama domain ke host domestik memerlukan registrasi, dan karena saya tidak bisa lulus registrasi karena saya tidak punya izin tinggal, saya hanya bisa mengaksesnya langsung menggunakan IP.

berlari

Bagian ini akan menjelaskan bagaimana membuat proyek ini berjalan dengan baik

Siapkan bagian belakang

Kloning API versi NetEase Cloud Music NodeJS ke lokal atau server untuk menyelesaikan pekerjaan inisialisasi

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

Ubah port server

Port default untuk startup server adalah 3000. Jika Anda tidak ingin menggunakan port 3000, Anda dapat menggunakan perintah berikut: windows

 $ set PORT=4000

Di bawah Mac/Linux

 $ PORT=4000

rintisan

 $ cd NeteaseCloudMusicApi
$ node app.js

Front-end (proyek ini)

Kloning proyek ini ke lokal atau server untuk menyelesaikan pekerjaan inisialisasi

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

Ubah alamat dan port server

Alamat server default proyek ini adalah http://localhost dan portnya adalah 3000 Jika Anda perlu memodifikasinya, buat file .env.local baru di direktori root proyek ini dan tuliskan pasangan nilai kunci berikut .

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

menjalankan atau membangun

 $ npm run serve
$ npm run build

Proyek ini berisi plug-in webpack yang ditulis sendiri. Fungsinya adalah untuk secara otomatis mengunggah file yang dibuat ke server .env.local pembangunan selesai komputer saya. Temukan server dan unggah file, sehingga akan melaporkan kesalahan saat membangun di komputer Anda, tetapi ini tidak akan mempengaruhi pembangunan proyek

Jika Anda hanya menjalankannya secara lokal, biarkan semua konfigurasi sebagai default.

Mulailah dengan cepat

Bagian ini akan memperkenalkan Anda pada <Rendering/> , komponen inti dalam proyek. Komponen ini digunakan di banyak halaman dalam proyek. Memahami cara kerja komponen ini adalah cara penting untuk memahami sebagian besar kode sumbernya proyek.

Komponen <Rendering/> bertanggung jawab untuk merender semua data dalam proyek yang dapat diabstraksi ke dalam format Array<Object> . Proyek ini memiliki sejumlah besar data seperti daftar lagu, daftar penyanyi, daftar album, daftar komentar, dll. Data sesuai dengan format Array<Object> .

Dan komponen <Rendering/> juga akan mengambil alih pemuatan data ini, pemrosesan paging, dll. Yang harus Anda lakukan sangat sederhana. Anda hanya perlu menerapkan metode filling dan meneruskannya ke komponen <Rendering/> alat peraga.

awal

Kami akan memperkenalkan komponen ini melalui halaman sederhana dalam proyek.
Ini adalah halaman klasifikasi MV. Dengan mengganti tag klasifikasi yang berbeda, halaman tersebut akan menampilkan daftar MV yang sesuai. Ada juga fungsi paging sederhana di bagian bawah. Mari kita lihat cara menggunakan <Rendering/> untuk mengimplementasikan fungsi-fungsi ini dengan mudah

Anda dapat mencoba halaman ini terlebih dahulu

Penomoran halaman bawah

Mari kita lihat struktur umum bagian kode sumber halaman ini.

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

Beberapa konten yang tidak memerlukan perhatian terlipat di sini. Untuk kode sumber selengkapnya, silakan lihat di sini.

Anda dapat melihat bahwa bagian templat halaman ini relatif sederhana. Yang pertama adalah tiga komponen <simple-radio/> . Fungsinya sangat sederhana. Label yang sesuai dirender melalui tiga array Label yang ditentukan dalam data , dan ketika label diklik Kemudian perbarui properti terikat yang sesuai melalui v-model , dan kemudian komponen <rendering/> dengan banyak props yang terikat padanya.

<rendering/> Detail komponen

Tampaknya <rendering/> memiliki banyak props, tetapi tidak demikian. <rendering/> hanya memiliki 2 props, dan props lainnya akan diteruskan ke <component/> dan <pagination/> internalnya.

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

Cuplikan kode sumber <Rendering/> , beberapa konten yang tidak perlu diperhatikan telah dihapus di sini. Untuk kode sumber selengkapnya, silakan lihat di sini

<pagination/> adalah komponen paging. Bertanggung jawab untuk merender komponen paging untuk menyediakan interaksi dan juga bertanggung jawab untuk mengelola pemuatan data.
<component/> bertanggung jawab untuk memuat komponen yang Anda lewati melalui prop component . Di halaman MV ini, saya secara dinamis meneruskan komponen CommonVideoMatrices ke component melalui require([path]).default . component dan Anda dapat melihat bahwa saya memproksi peristiwa di dalam CommonVideoMatrices melalui v-on="$listeners" , yang berarti Anda dapat langsung mendengarkan peristiwa $emit di dalam CommonVideoMatrices di <rendering/>

CommonVideoMatrices bertanggung jawab untuk merender daftar tampilan MV yang sebenarnya. Ia sebenarnya bertanggung jawab untuk menampilkan data di halaman ini. Ia secara internal menerima prop datas ( datas harus selalu berupa data dalam format Array<Object> ) dan merendernya melalui halaman datas

Ada banyak komponen dalam proyek yang mirip dengan desain CommonVideoMatrices . Semuanya merender datanya sendiri src/cmoponents/content/tracks prop datas . Hanya satu komponen yang berisi prop datas yang dapat diteruskan di <rendering/> src/cmoponents/content/tracks di bawah src/component/content/matrices

<Pagination/> akan merender komponen paging pada halaman untuk menyediakan interaksi

Komponen halaman ini hanya akan dirender saat Anda menyediakan prop total . Jika tidak, komponen halaman ini tidak akan dirender, namun Anda masih dapat mengatur pemuatan data. Untuk detail lebih lanjut tentang <Pagination/> Anda dapat melihat kode sumber.

Memuat data

Di atas memperkenalkan struktur internal dan beberapa detail komponen <Rendering/> . Setidaknya kita tahu bahwa melalui prop component , kita dapat meneruskan komponen yang berisi prop datas ke dalamnya. <Rendering/> akan membantu kita merender komponen ini. tapi siapa yang akan memberikan komponen ini Prop datas meneruskan data, melalui metode apa?
Ini memunculkan filling prop lain dalam komponen <Rendering/> .

Alat peraga: mengisi

Tidak seperti props lainnya, filling Anda perlu meneruskan suatu fungsi ke dalamnya. Fungsi ini akan digunakan untuk memuat data. Fungsi ini akan dipanggil secara otomatis saat diperlukan dan diperlukan untuk mengembalikan Janji.
Kita dapat melihat bagaimana fungsi ini diimplementasikan di halaman 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' ] )
        } )
    } )
  }
}

Fungsi ini akan diteruskan sebagai parameter ke <rendering/> dan internalnya akan diteruskan ke <pagination/> dan akan memutuskan kapan harus memanggilnya.
mvs(area, type, order, offset, limit) adalah antarmuka untuk data mv back-end. Tiga parameter pertama digunakan untuk menentukan jenis mv, offset dan limit yang digunakan untuk paging.

Ketika komponen paging yang dirender pada halaman oleh <pagination/> diklik, metode pengisian dipanggil secara internal dan beberapa parameter diteruskan. Parameter ini digunakan sebagai parameter paging oleh antarmuka mvs dan diteruskan melalui penyelesaian ketika data antarmuka dikembalikan berhasil. Di dalam <pagination/> , kali ini data akan di-cache, dan data akan diteruskan ke CommonVideoMatrices melalui <Rendering/> sehingga data dapat dirender secara normal.

Pengisian juga akan dipanggil saat halaman pertama kali dimuat.

Pemuatan responsif

Anda dapat melihat bahwa halaman kami juga perlu memuat ulang data baru setelah pengguna memilih tag atau kategori lain. Anda mungkin berpikir untuk mendengarkan acara klik <simple-radio/> dan kemudian memberi tahu panggilan <pagination/> dengan cara tertentu. Metode pengisian memperbarui data?
Tak perlu! ! Kami memiliki cara yang lebih sederhana untuk mengimplementasikan fungsi ini

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

unique pada akhirnya akan diteruskan ke <pagination/>
order type area Semuanya terikat pada tiga <simple-radio/> yang berbeda melalui v-model

Saya hanya perlu menambahkan prop unique pada komponen <rendering/> dan memberikannya nilai yang digunakan untuk merespons pembaruan data. Ketika nilai diteruskan ke perubahan unique , pengisian akan dipanggil pertemuan Dalam skenario ini, misalnya, ketika id playlist diubah, data playlist baru dimuat ulang. Saat ini, kita hanya perlu meneruskan id ke unique dan menerapkan metode pengisian akan dimuat secara otomatis.

Anda dapat melihat bahwa <Rendering/> sangat nyaman digunakan di halaman ini. Saat menulis halaman ini, kami hanya dapat fokus pada konten CommonVideoMatrices tanpa memikirkan metode dan logika akuisisi data memuat. Efek animasi memuat... akan ditampilkan. Ini juga diselesaikan oleh <Rendering/> , tetapi bagian ini telah disederhanakan dalam cuplikan kode yang ditampilkan di sini.

Faktanya, ada hal lain yang disebut adapter yang digunakan untuk menyelesaikan masalah backend yang mengembalikan tipe data yang sama di tempat berbeda tetapi dengan struktur data berbeda, tetapi saya tidak akan memperkenalkannya di sini.

Kesimpulan

Ini adalah proyek untuk pemula. Saya harap ini dapat memberikan inspirasi dan referensi bagi beberapa siswa yang baru mengenal front-end/Vue dan saya yakin tidak dapat menemukan praktik proyek apa pun bahwa setelah membaca bagian ini, Dapat memiliki pemahaman yang lebih jelas tentang bagian kode sumber proyek ini