музыкальный сайт vue-music

внешний интерфейс JavaScript Vue.js Vuex

После изучения vueJS я всегда хотел сделать проект, чтобы тренироваться, выбирать и выбирать, или быть облачной музыкой NetEase, во время которого я столкнулся с множеством ям, и постепенно принял идею компонентизации vue и преобразования из Dom операция использования данных для управления представлением. И позаимствовал (перенес) исходники elementUI на некоторые базовые компоненты (но elementUI действительно хорош)

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

  • Vue.js
  • Vuex
  • Vue-router
  • axios
  • BinaryifyПредоставляемый API В нем я также знаю способ передачи данных между компонентами в разных сценариях (проп родитель-потомок, брат EventBus, несколько компонентов совместно используют vuex)

функция завершена

  • титульная страница
  • Функция проигрывателя -- предыдущая песня, следующая песня, пауза и другие функции
  • Отображение плейлиста/страница сведений
  • Отображение альбома / страница сведений
  • Отображение певца / страница сведений
  • Список песен
  • Единая страница сведений
  • Комментарий

Запуск проекта

npm istall 

npm run dev

// 在163Api文件路径下启动

node app.js

возникшие проблемы

  1. Громоздкий вызов API, потому что используется много интерфейсов API, если вы хотите писать один за другим, это слишком избыточно.статьяПосле этого я решительно использовал метод прокси.
import axios from 'axios';

axios.defaults.baseURL = `http://localhost:3000`

export const api = new Proxy({}, {
  get(target, prop){
    let method = /^[a-z]+/g.exec(prop)[0];
    let path = prop
              .substring(method.length)
              .replace(/([A-Z])/g, '/$1')
              .replace(/(\$)([a-z]+)/g, '?$2=')
              .toLowerCase();
    return function(data = "", options = {}, and=false){
      let url = `${path}${data}`;
      if(and){
        for(let [key, value] of Object.entries(options)){
          url += `&${key}=${value}`;        
        }
      } 
      return axios({ method, url })
    }
  } 
})
  1. При проектировании общего проекта всем советую при построении проекта лучше всего заранее спланировать поток данных и взаимодействие различных компонентов, иначе будет много лишнего кода, и он будет будет очень проблематично изменить позже.
  2. Компоненты разделяют состояние.В настоящее время наиболее часто используемые методы передачи данных в vue включают props, EventBus и vuex, чтобы использовать их в соответствии с различными сценариями приложений.
  3. Что касается проблем с производительностью, оценка 37 в тесте Lighthouse для Chrome, несомненно, является безоговорочной. Я изучу соответствующие знания по оптимизации производительности в будущем и приму во внимание проблемы с производительностью в будущих обновлениях.

адрес проекта

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

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

Категории