Vue实现音乐网站

项目功能

以vue2.0为开发基石，实现手机端音乐网站，功能丰富，主要实现如下
——页面渲染
——推荐页面
——歌手列表
——酷炫播放器
——歌手详情
——滑动分页
——音乐点播
——音乐分享

项目结构

项目部分代码

// 填充歌曲信息 控制歌曲播放
computed: {
  cdCls() {
    return this.playing ? 'play' : 'pause'
  },
  playIcon() {
    return this.playing ? 'icon-pause' : 'icon-play'
  },
  miniIcon() {
    return this.playing ? 'icon-pause-mini' : 'icon-play-mini'
  },
  disableCls() {
    return this.songReady ? '' : 'disable'
  },
  percent() {
    return this.currentTime / this.currentSong.duration
  },
  iconMode() {
    return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'
  },
  ...mapGetters([
    'fullScreen',
    'playing',
    'currentIndex'
  ])
},
watch: {
  currentSong(newSong, oldSong) {
    // 当列表没有歌曲时 直接return
    if (!newSong.id) return

    if (newSong === oldSong) {
      return
    }

    // 防止歌词切换跳动
    if (this.currentLyric) {
      this.currentLyric.stop()
    }
    clearTimeout(this.timer)
    this.timer = setTimeout(() => {
      this.$refs.audio.play()
      this.getLyric()
    }, 1000)
  },
  playing(newPlaying) {
    const audio = this.$refs.audio
    this.$nextTick(() => {
      newPlaying ? audio.play() : audio.pause()
    })
  }
},

环境搭建

初始化环境参考：利用vue-cli搭建vue项目框架

后台数据库：MySQL/mangoDB

项目运行

npm install，npm run dev

访问地址：localhost:8080

项目截图

相关源码

（9.99元——打赏后评论或者备注留言，例如：”已支持，your_email@xxx.com，music”）

一年365天，希望各位看官达人多多支持，打赏后将及时发送源码或者视频资源，操作如下