cloud_music

cloud_music

Введение в проект

Это веб-приложение, имитирующее компьютерную часть NetEase Cloud Music. Оно построено на основе пользовательского интерфейса Vue + Element. Общий стиль страницы относительно прост. Основная часть веб-страницы аналогична открытию оконного приложения. Рабочий стол Windows Основная часть приложения представляет собой окно, доступ к которому можно получить, перетащив правый нижний угол, чтобы изменить размер окна. Хотя это может быть немного странно для веб-приложения, спроектированного таким образом, это не так. неосуществимо. Возможно, в будущем можно будет создать веб-рабочий стол, аналогичный облачному рабочему столу.

Кажется, это неплохая идея. Возможно, в будущем вы сможете попытаться создать такой веб-рабочий стол, предоставить базовую платформу для управления жизненным циклом каждого окна, а затем разработать веб-приложения на основе этой платформы и разместить свои собственные. веб-приложения на нем.

Серверная часть проекта

Серверная часть проекта основана на API версии NetEase Cloud Music NodeJS и полном интерфейсном документе проекта.

Страница документации интерфейса этого проекта больше не доступна. Я создал автономный документ, который вы можете скачать здесь.

Предварительный просмотр проекта

Некоторые страницы проекта еще не завершены, но основные страницы завершены, и проект будет постоянно обновляться и развертываться на моем NetEase Cloud Music (имитация)

Так как сервер является внутренним сервером, а разрешение доменного имени на внутренний хост требует регистрации, а пройти регистрацию я просто не могу, так как у меня нет прописки, то я могу получить к нему прямой доступ только по IP.

бегать

В этом разделе будет описано, как заставить этот проект работать правильно.

Подготовьте серверную часть

Клонируйте API-интерфейс версии NetEase Cloud Music NodeJS на локальном компьютере или сервере, чтобы завершить работу по инициализации.

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

Изменить порт сервера

Порт по умолчанию для запуска сервера — 3000. Если вы не хотите использовать порт 3000, вы можете использовать следующую команду: windows

 $ set PORT=4000

Под Mac/Linux

 $ 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

Этот проект содержит самописный плагин веб-пакета. Его функция заключается в автоматической загрузке собранных файлов на сервер после завершения сборки. Однако из-за конфигурации файла .env.local это может быть корректно только при сборке. мой компьютер. Найдите сервер и загрузите файл, чтобы он сообщал об ошибке при сборке на вашем компьютере, но на сборку проекта это не повлияет.

Если вы запускаете его локально, оставьте все конфигурации по умолчанию.

Начинайте быстро

В этой части вы познакомитесь с <Rendering/> , основным компонентом проекта. Этот компонент используется на большом количестве страниц проекта. Понимание того, как работает этот компонент, является важным способом понять большую часть его исходного кода. проект.

Компонент <Rendering/> отвечает за рендеринг всех данных в проекте, которые можно абстрагировать в формат Array<Object> . Проект содержит большое количество таких данных, таких как списки песен, списки исполнителей, списки альбомов, списки комментариев. и т. д. Данные, соответствующие формату Array<Object> .

А компонент <Rendering/> также возьмет на себя загрузку этих данных, обработку страниц и т. д. То, что вам нужно сделать, очень просто. Вам нужно всего лишь реализовать метод filling и передать его компоненту <Rendering/> реквизит.

начинать

Мы представим этот компонент через простую страницу в проекте.
Это страница классификации MV. При переключении различных тегов классификации на странице отображается соответствующий список 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 . нажимаются метки. Затем обновите соответствующие связанные свойства через v-model , а затем компонент <rendering/> со многими привязанными к нему реквизитами.

<rendering/> Подробности о компоненте

Кажется <component/> что <rendering/> <rendering/> имеет много реквизитов <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 я динамически передаю компонент CommonVideoMatrices для component через require([path]).default . component , и вы можете видеть, что я проксирую события внутри CommonVideoMatrices через v-on="$listeners" , что означает, что вы можете напрямую прослушивать событие $emit внутри CommonVideoMatrices на <rendering/>

CommonVideoMatrices отвечает за отображение фактического списка отображения MV. Он фактически отвечает за отображение данных на этой странице. Он внутренне принимает реквизиты datas ( datas всегда должны быть данными в формате Array<Object> ) и отображает их через страницу datas .

В проекте есть много компонентов, похожих на дизайн CommonVideoMatrices . Все они визуализируют свои собственные данные через свойство datas . Только один компонент, содержащий свойство datas может быть передан в <rendering/> Эти компоненты расположены в src/cmoponents/content/tracks и в src/component/content/matrices

<Pagination/> будет отображать компонент подкачки на странице для обеспечения взаимодействия.

Этот компонент подкачки будет отображаться только тогда, когда вы предоставите prop total . В противном случае он не будет отображаться, но вы все равно сможете управлять загрузкой данных. Для получения более подробной информации о <Pagination/> вы можете просмотреть исходный код.

Загрузка данных

Вышеуказанное знакомит с внутренней структурой и некоторыми деталями компонента <Rendering/> . По крайней мере, мы знаем, что через свойство component мы можем передать в него компонент, содержащий datas <Rendering/> которое поможет нам визуализировать этот компонент. но кто даст этот компонент? datas prop передает данные, каким методом?
Это вызовет еще одно filling реквизита в компоненте <Rendering/> .

Реквизит: наполнение

В отличие от других реквизитов, filling ему необходимо передать функцию . Эта функция будет использоваться для загрузки данных. Она будет автоматически вызываться при необходимости и необходима для возврата обещания.
Мы можем увидеть, как эта функция реализована на странице 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/> и переданы в CommonVideoMatrices через <Rendering/> чтобы данные можно было отобразить в обычном режиме.

Заполнение также будет вызываться при первой загрузке страницы.

Адаптивная загрузка

Вы можете видеть, что нашей странице также необходимо перезагрузить новые данные после того, как пользователь выберет другие теги или категории. Вы можете подумать о том, чтобы прослушать событие щелчка <simple-radio/> и затем каким-либо образом уведомить вызов <pagination/> . Метод заполнения обновляет данные?
Не нужно! ! У нас есть более простой способ реализовать эту функцию.

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

unique в конечном итоге будет передан в <pagination/>
order type area Все они привязаны к трем различным <simple-radio/> через v-model

Мне просто нужно добавить unique свойство в компонент <rendering/> и передать ему значение, которое будет использоваться для реагирования на обновления данных. Когда значение передается на unique изменения, будет вызываться заполнение. Это часто бывает очень полезно. В этом сценарии, например, при изменении идентификатора списка воспроизведения перезагружаются новые данные списка воспроизведения. На этот раз нам нужно только передать идентификатор unique и реализовать метод заполнения. При изменении идентификатора создается новая песня. будут автоматически загружены отдельные данные.

Вы можете видеть, что <Rendering/> очень удобно использовать на этой странице. При написании этой страницы мы можем сосредоточиться только на содержимом CommonVideoMatrices , не задумываясь о методе и логике получения данных. Фактически, данные на этой странице. loading. Будет отображен эффект анимации загрузки... Они также выполняются с помощью <Rendering/> , но эта часть была упрощена в показанном здесь фрагменте кода.

На самом деле, есть еще одна вещь, называемая adapter , которая используется для решения проблемы, когда серверная часть возвращает данные одного и того же типа в разных местах, но с разными структурами данных, но я не буду о ней здесь рассказывать.

Заключение

Это проект для новичков. Я надеюсь, что он может вдохновить и дать ссылку некоторым студентам, которые плохо знакомы с интерфейсом/Vue и не могут найти практики в проектах. Я считаю, что многие места в проекте реализованы таким образом. что после прочтения этой части можно будет иметь более четкое представление о части исходного кода этого проекта.