предисловие
В области передовых технологий мы можем лично почувствовать, что скорость технологических обновлений и изменений очень высока, поэтому инженерам необходимо время от времени обращать внимание и изучать некоторые новые технологии и новые стандарты.
Поскольку технологический стек, отвечающий за рабочий проект, является относительно отсталым по сравнению с отраслью, поэтому для самостоятельной разработки музыкального веб-приложения вы можете попробовать некоторые новые технологические стеки или изучить некоторые конкретные направления для изучения.
Время разработки проекта с конца года по настоящее время.Разрабатывается с перерывами с использованием времени после работы.Основные функции примерно завершены.Далее будут добавлены некоторые новые функции одна за другой, и код будет постоянно оптимизироваться.Я также сделаю запись и резюме здесь.
Информация о проекте
стек технологий
- vue: vue 2.6, vue-маршрутизатор, vuex, vue-сервер-рендерер
- webpack: webpack 4, webpack-dev-middleware, webpack-hot-middleware
- node: экспресс 4
- test: карма 4, мокко, sinon-chai, vue/test-utils, eslint
Общая структура
Бэкенд API используетNeteaseCloudMusicApi, предоставляет множество интерфейсов и поддерживает междоменное взаимодействие CORS.
Проект разделен на две части, а именно интерфейс, такой как javascript, css, img, компоненты и т. д.; и сервер, который отвечает за ответ на запрос и рендеринг на стороне сервера, поэтому общая структура проекта показано на рисунке:
Техническая реализация
Проект только начал использовать vue-cli для инициализации, и готовый опыт избавил меня от множества утомительных процессов, и я мог начать разработку напрямую.
состояние входа
Вход пользователя — это первая проблема, которую необходимо решить, поскольку многие интерфейсы полагаются на состояние входа пользователя. В итоге API-сервис и проект разбиты на два поддомена:
163api.domain.cn // api
163music.domain.cn // 项目
Однако позже было обнаружено, что после успешного запроса интерфейса входа пользовательский файл cookie не мог быть записан в браузер, и было обнаружено, что домен в файле cookie был установлен на субдомен API, что привело к163music.domain.cnКуки ниже не читается, но после отладки обнаруживается, что интерфейс не устанавливает домен при установке куки, решение - добавить конфигурацию proxy_cookie_path в nginx, а домен добавить в куку как .domain. cn, то в Cookies можно нормально читать под другими поддоменами (замена домена была задана в начале, но она не вступит в силу):
// nginx.conf
server {
listen 80;
server_name 163api.domain.cn;
location / {
proxy_pass http://127.0.0.1:3000/;
proxy_cookie_path ~^(.+)$ "$1; domain=domain.cn";
}
}
webpack
В начале проекта все настолько гармонично и может развиваться счастливо. Было решено добавить ssr, когда разработка и среднесрочные функции были завершены. vue-cli 3 — это пользовательская конфигурация веб-пакета, которую можно реализовать через файл конфигурации vue.config.js.После добавления конфигурации, связанной с ssr, ее можно успешно собрать и упаковать, но я надеюсь, что код можно будет перезагрузить в режиме реального времени. и горячая замена модуля. В противном случае эффективность разработки будет относительно низкой. Затем, попробовав некоторые решения по модернизации (много усилий), я все еще чувствовал, что это не очень гибко для реализации, и решил перестроить среду Orz.
Основная конфигурация веб-пакета должна ссылаться на vue-cli, основную ссылку на код узла.Официальная демоверсия, когда код пишется и пытается запуститься, результат конечно... полноэкранная красная ошибка.
Поскольку официальная демонстрация использует веб-пакет 3, некоторые конфигурации необходимо обновить, а некоторые зависимости также необходимо обновить при обновлении версии и так далее. Но хорошая новость заключается в том, что подсказки об ошибках в основном точны, например:
// 需要提供 mode 选项
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
// 配置迁移，需要使用新配置选项
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
Также могут отсутствовать различные загрузчики и необходимо установить различные зависимости. Убедившись, что процесс сборки идет нормально, вы можете открыть браузер, чтобы увидеть эффект, но вы обнаружите эту ошибку:
window is not defined.
Причина в том, что плагин карусели содержит окно, но в среде узла нет такой глобальной переменной, поэтому возникает эта ошибка. Или при доступе к другим встроенным объектам браузера также будут возникать подобные ошибки, поэтому вам необходимо убедиться, что код и плагины могут нормально работать в среде узла. Поскольку сам плагин карусели поддерживает режим ssr, он может нормально работать после изменения кода.
В итоге в проекте четыре конфига вебпака и два скрипта сборки. В среде разработки с программным обеспечением промежуточного слоя webpack-dev и промежуточным программным обеспечением webpack-hot для обеспечения горячей загрузки кода. При сборке рабочей среды, поскольку я хочу четко видеть ошибки и предупреждения, а также хочу посчитать время, затраченное на сборку, я вытаскиваю скрипт сборки.
build
├── build-production.js // 生产环境构建脚本
├── setup-dev-server.js // 开发环境构建脚本
├── webpack.base.config.js // 基本配置
├── webpack.client.config.js // 客户端配置
├── webpack.server.config.js // 服务端配置
└── webpack.test.config.js // 测试配置
игрок
Воспроизведение музыки является наиболее важной основной функцией.Нижний слой использует тег аудио и отслеживает события canplay, timeupdate и end элемента тега для расчета продолжительности, обновления текущего хода воспроизведения и воспроизведения следующей песни соответственно. Поскольку проигрыватель может поддерживать «фоновое» воспроизведение, поместите проигрыватель в корневой компонент и сделайте его скрытым, чтобы структура dom выглядела следующим образом:
<div id="app">
<!-- audio -->
<player></player>
<transition :name="transitionName">
<router-view class="component"></router-view>
</transition>
<footBox></footBox>
</div>
Синхронизация данных компонентов заключается в использовании vuex, таких как статус воспроизведения, общая продолжительность песни, текущий ход воспроизведения и т. д. Когда песня заканчивает воспроизведение, необходимо воспроизвести следующую песню.Здесь eventBus используется для запуска событий, что более подходит для подобного рода сцены.
Когда пользователь открывает страницу воспроизведения, я хочу, чтобы музыка воспроизводилась автоматически, независимо от того, входит ли пользователь с другого портала или обновляется напрямую. Автовоспроизведение запускается методом play(). С первым проблем нет, но второй вызовет ошибку при его вызове. Ошибка означает, что пользователю необходимо выполнить операцию жеста, прежде чем ее можно будет воспроизвести. Затем я попробовал решение имитации щелчка и отключения звука. Позже я обнаружил, что это все еще недействительно в хроме. Позже я почувствовал, что хром делает правильную вещь. Контроль над веб-сайтом должен быть передан пользователю, чтобы пользователь мог знать, что случилось со страницей, вместо того, чтобы позволить пользователю найти, какая страница в куче вкладок Издавал странный звук.
Обновление будет воспроизводиться автоматически после входа на страницу воспроизведения из плейлиста, спасибо за решение.
модульный тест
Модульное тестирование также является одной из функций раннего планирования. Оно началось со ссылки на некоторые проекты с открытым исходным кодом для сборки. Окончательный выбор - карма + мокко + синон-чай (Официальная демоверсия). Процесс сборки состоит в том, чтобы пересечь реку, чувствуя камни, и также сообщалось о некоторых ошибках, таких как: сбой зависимости установки, ошибка файла конфигурации, отсутствие зависимых плагинов и т. д., и то только после завершение строительства, что обнаружено, что есть ещеофициальная документация. Следует сказать, что cli действительно экономит разработчикам много работы по настройке и строительству.После завершения строительства можно написать варианты использования в соответствии с официальными документами.Согласно примерам в официальных документах, можно охватить большинство сценариев, например, имитация просмотра, рендеринг в браузере, клики пользователей и т. д. Но в то же время я также обнаружил проблему.Если код проекта часто меняется, предыдущие тестовые случаи также могут нуждаться в переписывании.Я хочу знать, как вы справляетесь или думаете об этом в проекте?
Вышеупомянутое является небольшой частью проблем, возникающих в процессе разработки, и большинство описаний проблем и решений в процессе здесь не будут обсуждаться.Если у вас есть какие-либо проблемы, пожалуйста, отправьте мне личное сообщение или электронное письмо, чтобы связаться со мной. .
Суммировать
- В процессе разработки проекта я также ссылался и использовал множество отличных проектов с открытым исходным кодом, которые помогли мне быстро освоить реализации некоторых функций и предоставили API-интерфейсы бэк-энда, иначе у меня не было бы вдохновения для разработки этого проекта;
- В экосистеме Vue есть богатые и подробные официальные документы и активное сообщество, и в основном все возникающие проблемы могут быть решены, и это здорово;
- В начале проекта это может быть просто идея, промелькнувшая в мозгу.Оглядываясь назад на опыт разработки за последние несколько месяцев, на самом деле жизнь относительно насыщенная и страстная, но немного шероховатая. потребление 😂;
- Наконец, я знаю, что в проекте еще много недостатков.Если вы обнаружите какие-либо проблемы или у вас есть лучшие идеи, пожалуйста, в вопросе или пр. Если вы считаете, что проект имеет ценность для справки и обучения, вы можетеgithubНажмите на звездочку, спасибо~
использованная литература
use nginx to add Domain to a Set-Cookie
Cookies on localhost with explicit domain