基于springboot的在线音乐播放系统

目录
简 介 1
D BMS及辅助软件 1
创 建数据库 2
添 加数据 3
查 询 4
普通查询 8
更 新sql 20
删 除sql 20
删除记录 20
视 图 22
使 用数据库的应用系统设计报告 25
意 向应用 25
需 求分析 25
3. 管理员能对网站的一切数据进行修改 25
开 发环境 25
功 能设计 26
项目结构 27
客户端 27
Mapper 层 / DAO 层（dao、mapper 目录下） 29
Service 层（service 目录下） 29
Controller 层（controller 目录下） 29
数 据库设计与实现 30
E-R图 30
数据字典设计（表设计） 30
实体类 30
联系类 38
数据库交互设计 43
使用mybatis后的数据库操作 44
系 统部署 44
前端 44
系 统使用手册 46
管理员端 46
用户端 47

意 向应用
在线音乐网站
需 求分析
根据自己使用经历，以及对QQ音乐，网易云音乐等考察。现总结出有一下的结论
1.应将用户分为两种，一种是对网站进行维护的管理员，另一种是对网站进行日常使用的客户（消费 者）
2.网站应有的数据有：歌手数据集，歌曲数据，歌单数据，用户对歌曲的操作数据，用户对歌单的操 作数据
3.管理员能对网站的一切数据进行修改
4.用户对歌曲的操作数据主要是收藏，点赞，播放，下载，评论。歌单则有评论、
开 发环境
系统架构：B/S
开发语言：JAVA + JS
IDE：IDEA IJ + VSCODE + DATAGRIP
技术栈

名称 技术
前端 VUE2.0 + Element UI
后端 Spring Boot + MySql + mybatis

import { getSongOfSingerName, getCollectionOfUser } from '../api/index'
import { mapGetters } from 'vuex'

const mixin = {
  computed: {
    ...mapGetters([
      'userId',
      'loginIn'
    ])
  },
  methods: {
    // 提示信息
    notify(title, type) {
      this.$notify({
        title: title,
        type: type
      })
    },
    // 获取图片信息
    attachImageUrl(srcUrl) {
      return srcUrl ? this.$store.state.configure.HOST + srcUrl || '../assets/img/user.jpg' : ''
    },
    attachBirth(val) {
      let birth = String(val).match(/[0-9-]+(?=\s)/)
      return Array.isArray(birth) ? birth[0] : birth
    },
    // 得到名字后部分
    replaceFName(str) {
      let arr = str.split('-')
      return arr[1]
    },
    // 得到名字前部分
    replaceLName(str) {
      let arr = str.split('-')
      return arr[0]
    },
    // 播放
    toplay: function (id, url, pic, index, name, lyric) {
      this.$store.commit('setId', id)
      this.$store.commit('setListIndex', index)
      this.$store.commit('setUrl', this.$store.state.configure.HOST + url)
      this.$store.commit('setpicUrl', this.$store.state.configure.HOST + pic)
      this.$store.commit('setTitle', this.replaceFName(name))
      this.$store.commit('setArtist', this.replaceLName(name))
      this.$store.commit('setLyric', this.parseLyric(lyric))
      if (this.loginIn) {
        this.$store.commit('setIsActive', false)
        getCollectionOfUser(this.userId)
          .then(res => {
            for (let item of res) {
              if (item.songId === id) {
                this.$store.commit('setIsActive', true)
                break
              }
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 解析歌词
    parseLyric(text) {
      let lines = text.split('\n')
      let pattern = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g
      let result = []

      // 对于歌词格式不对的特殊处理
      if (!(/\[.+\]/.test(text))) {
        return [[0, text]]
      }

      while (!pattern.test(lines[0])) {
        lines = lines.slice(1)
      }

      lines[lines.length - 1].length === 0 && lines.pop()
      for (let item of lines) {
        let time = item.match(pattern) // 存前面的时间段
        let value = item.replace(pattern, '') // 存歌词
        for (let item1 of time) {
          let t = item1.slice(1, -1).split(':')
          if (value !== '') {
            result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value])
          }
        }
      }
      result.sort(function (a, b) {
        return a[0] - b[0]
      })
      return result
    },
    // 搜索音乐
    getSong() {
      if (!this.$route.query.keywords) {
        this.$store.commit('setListOfSongs', [])
        return
      }
      getSongOfSingerName(this.$route.query.keywords)
        .then(res => {
          if (!res.length) {
            this.$store.commit('setListOfSongs', [])
            this.notify('系统暂无该歌曲', 'warning')
          } else {
            this.$store.commit('setListOfSongs', res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}

export default mixin