Высококачественная мобильная облачная музыка NetEase Vue front-end проект

Vue.js

стек технологий

Vue + Vue-Router + Vuex + Webpack + Axios

Клонируйте его сейчас и проверьте!

Адрес на гитхабе:GitHub.com/cat-walk/wood…

Адрес развертывания проекта:meiyun.info

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

внешний интерфейс

  1. Установить зависимости
npm install
  1. начать проект
npm run serve

задняя торцевая часть

Адрес на гитхабе:GitHub.com/binary ifengyun/N…

См. документацию по внутренним операциям.



Интерфейс и функциональный дисплей

На главной странице отображаются баннеры и рекомендуемые плейлисты, нажмите, чтобы войти в рейтинг

Интерфейс воспроизведения песни поддерживает синхронизацию хода воспроизведения, избранную или нелюбимую текущую песню.

Нажатие трех кнопок слева от баннера и таблицы лидеров не дает никакого эффекта (´▽｀), у меня нет времени писать эти...


Реализована функция входа

После входа в систему вы можете отобразить свой аватар и псевдоним, а также войти в свой личный центр, на страницу «Моя», где вы можете просмотреть свою любимую музыку и недавно воспроизведенную музыку.


Модуль поиска: популярные запросы, история поиска, поисковые подсказки


Структура проекта

PS:

  1. Галочка - завершенный контент, теперь, кроме модификации личной информации, другие функции этого проекта завершены.

  2. Выделенная жирным шрифтом часть шрифта является компонентом, и она не будет выделена снова жирным шрифтом, когда тот же компонент используется во второй раз (т. е. при повторном использовании компонента) для идентификации.

  • 1. Модуль боковой панели

    • Отображение личной информации (аватар, никнейм)
      • Изменение личной информации
    • Кнопка входа
      • модуль входа

  • 2. Модуль музыкальных рекомендаций(Домашняя страница)

    • Карусельный баннерный модуль
    • Вход в таблицу лидеров
      • Модуль таблицы лидеров
        • Модуль сведений о плейлисте
          • Модуль управления воспроизведением: реализует функцию избранных/нелюбимых песен и реализует функцию добавления к недавно воспроизведенным песням.
    • Рекомендуемый модуль плейлиста
      • Модуль сведений о плейлисте
        • Модуль управления воспроизведением: реализует функцию избранных/нелюбимых песен и реализует функцию добавления к недавно воспроизведенным песням.

  • 3. Модуль персонального центра

    • Недавно воспроизведенная песня
      • Модуль отображения недавно воспроизведенных песен
        • Модуль управления воспроизведением: реализует функцию избранных/нелюбимых песен и реализует функцию добавления к недавно воспроизведенным песням.
    • Моя любимая запись
      • Модуль сведений о плейлисте
        • Модуль управления воспроизведением: реализует функцию избранных/нелюбимых песен и реализует функцию добавления к недавно воспроизведенным песням.

  • 4. Модуль поиска

    • модуль окна поиска
      • Модуль результатов поиска
        • Модуль управления воспроизведением: реализует функцию избранных/нелюбимых песен и реализует функцию добавления к недавно воспроизведенным песням.
    • Популярные поисковые модули
      • Модуль результатов поиска
        • Модуль управления воспроизведением: реализует функцию избранных/нелюбимых песен и реализует функцию добавления к недавно воспроизведенным песням.
    • Модуль истории поиска (общий компонент с популярным модулем поиска)
      • Модуль результатов поиска
        • Модуль управления воспроизведением: реализует функцию избранных/нелюбимых песен и реализует функцию добавления к недавно воспроизведенным песням.


спецификация кода

Используя EsLint, спецификация lint использует спецификацию кода js от airbnb.

Настройте ESLint + Airbnb + Vue в VSCode



Технические решения



Известные проблемы проекта

Функция любимой песни

  1. После нажатия кнопки любимой песни иногда возникает определенная задержка (0,5 ~ 5 с, в зависимости от ситуации в сети), прежде чем сбор будет успешным.

    Эта проблема может быть вызвана кэшированием данных NetEase Cloud в фоновом режиме. (Эта мысль не двигала мозгом, кашель кашель (´▽｀)

  2. Поскольку троттлинг и защита от сотрясений не были выполнены, при слишком интенсивном нажатии кнопки избранного функция избранного/неизбранного может не сработать.

воспроизвести страницу песни

  1. Из-за ряда сложных проблем, если вы входите на страницу управления песней через интерфейс поиска, обложка отсутствует, лениво загружается только изображение по умолчанию.
  2. Вращающееся изображение обложки иногда мерцает при воспроизведении музыки
  3. ** Если вы включили песню и не можете ее воспроизвести, возможно, вам придется заплатить за воспроизведение песни, вы можете изменить ее. **Подсказки, требующие оплаты для игры, со временем будут оптимизированы.

Боковая панель (реализована плагином Vue-Slideout, =====> горшок для сброса :))

  1. На странице «Моя» (и на некоторых других страницах) кнопка вызова боковой панели не может быть нажата.

  2. На некоторых страницах, которым не нужна функция боковой панели, функция исходящей боковой панели не отключена.

  3. Боковую панель можно закрыть только временно смахнув влево, еще не реализовано нажатие на пустое место для закрытия боковой панели

ios сторона

  1. так какОговорено, что аудиотег не может воспроизводиться автоматически под iOS.,следовательно,В среде iOS при первом воспроизведении музыки необходимо нажать паузу, а затем нажать кнопку воспроизведения, так что вы можете.
  2. Воспроизведение иногда перезапускается после нажатия на нижнюю панель управления музыкой

Опыт и урожай написания этого проекта будут отправлены на мой Github после завершения, это не должно быть голубем.



Спасибо

Большое спасибо бэкенд-провайдеруBinaryify, интерфейс очень стабильный, и документация идеальна

Большое спасибоCaiJinyc, я многому научился из его проекта

  1. GitHub.com/CAI Джин однажды/Ву…
  2. GitHub.com/binary ifengyun/N…
Категории