基于Vue+Python+Django+MySQL实现的音乐推荐系统

我就是我 2023-10-13 08:43 36阅读 0赞

[源码下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/87972157  
[源码下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/87972157

音乐推荐系统是一个非常重要的应用程序，它可以帮助用户发现他们喜欢的音乐，并提供个性化的推荐。在这个数字化时代，人们对于音乐的需求越来越高，而音乐推荐系统可以为用户提供更好的音乐体验，同时也可以帮助音乐平台吸引更多的用户。

Vue是一个流行的JavaScript框架，它可以用于构建高效的Web应用程序。Python是一种广泛使用的编程语言，它有着丰富的库和工具，可以用于各种任务，包括数据分析和机器学习。Django是一个基于Python的Web框架，它可以用于构建高效的Web应用程序，并提供了很多有用的功能，例如安全性、数据库访问和缓存等。MySQL是一个流行的关系型数据库管理系统，它可以用于存储和管理大量的数据。

通过结合Vue、Python、Django和MySQL，可以构建一个高效的音乐推荐系统。使用网易云API可以获取大量的音乐数据，包括歌曲、歌手、专辑等信息，这些数据可以用于训练机器学习模型，从而为用户提供更加准确的推荐。此外，使用Django可以方便地管理数据库，并保证系统的安全性和稳定性。通过Vue可以构建一个高效的Web界面，使用户可以方便地浏览和搜索音乐，并获得个性化的推荐。

因此，构建一个基于Vue、Python、Django和MySQL的音乐推荐系统具有非常重要的意义。它可以帮助用户发现更多的音乐，提供更加个性化的推荐，并提高音乐平台的用户满意度和收益。

后端使用的是Python的Django框架，前端使用的是Vue，数据库为MySQL

实现思路

*  利用网易云API获取部分数据
 *  基于标签进行歌单详情页的推荐、歌曲详情页的推荐、歌手详情页的推荐
 *  基于用户的协同过滤算法给用户推荐用户、个用户推荐歌曲
 *  基于物品的协同过滤算法给用户推荐歌手
 *  基于内容的推荐算法给用户推荐歌单
 *  个性化排行榜
 *  为你推荐（不同用户行为不同看到的为你推荐也不同）
 *  我的足迹，展示用户在站内的行为

后端依赖

*  Python版本为3.6
 *  Python包和对应的版本在MusicRecSys/MusicRec/z-others/files/requirement.txt文件中
 *  安装依赖为 pip install -r requirement.txt

前端说明

*  依赖Node.js，版本为10.13

运行说明

*  mysql新建musicrec数据库，将MusicRecSys/MusicRec/z-others/files/musicrec.sql 文件导入
 *  修改 MusicRecSys/MusicRec/MusicRec/settings.py 文件中的ALLOWED\_HOSTS为本地IP地址和本地mysql配置信息
 *  修改 MusicRecSys/MusicRec-Vue/config/index.js 中的 serverUrl
 *  修改 MusicRecSys/MusicRec-Vue/src/assets/js/linkBase.js 中的 serverUrl
 *  进入 MusicRecSys/MusicRec 执行python manage.py runserver 0.0.0.0:8000
 *  进入 MusicRecSys/MusicRec-Vue 执行npm install / npm run dev
 *  浏览器输入 http://127.0.0.1:8001 访问

相关说明

*  后台访问地址：http://127.0.0.1:8000/admin/ (admin，admin)
 *  Navicat 破解版 （链接：https://pan.baidu.com/s/1dYtKQxnoSZywuRfgCOfPRQ 提取码：qw8k）
 *  git lfs 上传管理大文件
    
     *  执行 git lfs install 开启lfs功能
     *  使用 git lfs track 命令进行大文件追踪 例如git lfs track “\*.png” 追踪所有后缀为png的文件
     *  使用 git lfs track 查看现有的文件追踪模式
     *  提交代码需要将gitattributes文件提交至仓库. 它保存了文件的追踪记录
     *  提交后运行git lfs ls-files 可以显示当前跟踪的文件列表
     *  将代码 push 到远程仓库后（git lfs push），LFS 跟踪的文件会以『Git LFS』的形式显示:
     *  clone 时 使用’git clone’ 或 git lfs clone均可

<template>
      <div class="newsContent">
        <new-header @onGetnews="returnMain" :active="CateId"></new-header>
        <div v-if="CateId == '2'" class="mainNews animated zoomIn" style="animation-duration:1s;animation-delay:0s">
          <div class="imgdesc">
            <img :src="datas.pl_img_url"/>
          </div>
          <div class="smalltitle">
            <h3 class="newsTitle">{
        {
        datas.pl_name}}</h3>
            <span class="newsAttribute">
              <i>作者：{
        {
        datas.pl_creator}}</i>
              <i>所属标签：{
        {
        datas.pl_tags}}</i>
            </span>
            <span class="newsAttribute">
              <i>评论次数：{
        {
        datas.pl_comment_num}}</i>
              <i>收藏人数：{
        {
        datas.pl_follow_num}}</i>
              <i>分享人数：{
        {
        datas.pl_share_num}}</i>
            </span>
            <span class="newsAttribute">
              <i>收录歌曲：{
        {
        datas.pl_songs_num}}</i>
              <i>收听次数：{
        {
        datas.pl_listen_num}}</i>
            </span>
            <span class="newsAttribute">
              <i>创建时间：{
        {
        datas.pl_create_time}}</i>
            </span>
            <span class="newsAttribute">
              <i>更新日期：{
        {
        datas.pl_update_time}}</i>
            </span>
          </div>
          <div class="news">介绍：{
        {
        datas.pl_desc}}</div>
          <audio id="audio"></audio>
          <ul class="songlist">
            <li class="songtitle" >
              <span>歌曲名称</span>
              <span>歌手名称</span>
              <span>播放状态</span>
            </li>
            <li v-for="item in datas.pl_songs" :key="item.song_id"  :class="playing == item.song_id ? 'song oksong' :'song'" @click="musicDesc({
        'id':item.song_id, 'cateid': '3'})">
              <span>{
        {
        item.song_name}}</span>
              <span v-if="item.song_sing_name">{
        {
        item.song_sing_name}}</span>
              <span v-else>未知歌手</span>
              <span v-if="playing != item.song_id" @click="playMusic({
        url:'../../static/music.m4a', id:item.song_id})">已暂停</span>
              <span @click="playMusic({
        url:'../../static/music.m4a', id:item.song_id})" v-else>播放中</span>
            </li>
          </ul>
        </div>
        <div v-if="CateId == '3'" class="mainNews animated zoomIn" style="animation-duration:1s;animation-delay:0s">
          <div class="imgdesc">
            <img src="../assets/img/music.png"/>
          </div>
          <div class="smalltitle">
            <h3 class="newsTitle">{
        {
        datas.song_name}}</h3>
            <span class="newsAttribute">
              <i>作者：{
        {
        datas.song_sing}}</i>
            </span>
            <span class="newsAttribute">
              <i>评论次数：{
        {
        datas.song_hot_comments}}</i>
              <i>热评次数：{
        {
        datas.song_total_comments}}</i>
            </span>
            <span class="newsAttribute">
              <i>创建时间：{
        {
        datas.song_publish_time}}</i>
            </span>
          </div>
          <h4 class="line">歌词</h4>
          <div class="news" v-html="datas.song_lysic"></div>
        </div>
        <div v-if="CateId == '4'" class="mainNews animated zoomIn" style="animation-duration:1s;animation-delay:0s">
          <div class="imgdesc singimg">
            <img :src="datas.sing_url"/>
          </div>
          <div class="smalltitle singsmalltitle">
            <h3 class="newsTitle">{
        {
        datas.sing_name}}</h3>
            <span class="newsAttribute">
              <i>专辑数：{
        {
        datas.sing_album_num}}</i>
              <i>歌曲数：{
        {
        datas.sing_music_num}}</i>
              <i>MV数：{
        {
        datas.sing_mv_num}}</i>
            </span>
          </div>
          <h4 class="line">系统录入单曲</h4>
          <ul class="songlist">
            <li class="songtitle" >
              <span>歌曲名称</span>
              <span>歌手名称</span>
              <span>播放状态</span>
            </li>
            <li v-for="item in datas.sing_songs" :key="item.song_id"  :class="playing == item.song_id ? 'song oksong' :'song'" @click="musicDesc({
        'id':item.song_id, 'cateid': '3'})">
              <span>{
        {
        item.song_name}}</span>
              <span>{
        {
        item.song_publish_time}}</span>
              <span v-if="playing != item.song_id" @click="playMusic({
        url:'../../static/music.m4a', id:item.song_id})">已暂停</span>
              <span @click="playMusic({
        url:'../../static/music.m4a', id:item.song_id})" v-else>播放中</span>
            </li>
          </ul>
        </div>
        <div v-if="CateId == '5'" class="mainNews animated zoomIn" style="animation-duration:1s;animation-delay:0s">
          <div class="imgdesc">
            <img :src="datas.u_img_url"/>
          </div>
          <div class="smalltitle">
            <h3 class="newsTitle">{
        {
        datas.u_name}}</h3>
            <span class="newsAttribute">
              <i>出生日期：{
        {
        datas.u_birthday}}</i>
              <i v-if="datas.u_gender === 0">性别：保密</i>
              <i v-else-if="datas.u_gender === 1">性别：男</i>
              <i v-if="datas.u_gender === 1">性别：女</i>
            </span>
            <span class="newsAttribute">
              <i>座右铭：{
        {
        datas.u_sign}}</i>
            </span>
            <span class="newsAttribute">
              <i>所属标签：{
        {
        datas.u_tags}}</i>
            </span>
          </div>
          <h4 class="line">创建的歌单</h4>
          <ul class="lists">
            <li class="titles" >
              <span>歌单图标</span>
              <span>歌单名称</span>
              <span>创建时间</span>
            </li>
            <li v-for="item in datas.u_playlist" :key="item.pl_id" @click="musicDesc({
        'id':item.pl_id, 'cateid': '2'})">
              <span>
                <img :src="item.pl_img_url" />
              </span>
              <span >{
        {
        item.pl_name}}</span>
              <span>{
        {
        item.pl_create_time}}</span>
            </li>
          </ul>
        </div>
        <div class="mainRight animated fadeInRight" style="animation-duration:1s;animation-delay:0.5s">
          <h3 class="hotTitle">相似推荐</h3>
          <ul class="relists">
            <li v-for="item in oneComment" :key="item.id" class="relist" @click="musicDesc({
        'id':item.id,'cateid':item.cate})">
              <img :src="item.img_url"/>
              <p class="recreater">{
        {
        item.creator}}</p>
              <p class="rename">{
        {
        item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    import {
        getplaylist, getsonglist, getsinglist, getuserlist} from '../assets/js/api'
    import newHeader from '../components/newHeader.vue'
    export default {
        
      name: 'news',
      data () {
        
        return {
        
          // 共同
          oneComment: {
        },
          CateId: '',
          // 列表
          datas: {
        },
          // music
          playing: ''
        }
      },
      components: {
        
        'new-header': newHeader
      },
      methods: {
        
        getNews: function (option) {
        
          this.loading('加载中。。。')
          option.username = this.$store.state.vuexlogin.userName
          if (this.CateId === '2') {
        
            getplaylist(option).then((res) => {
        
              this.$layer.closeAll()
              if (!res.code) {
        
                this.$children[0].layout()
              } else {
        
                res.data[0].pl_create_time = this.timeFormat(res.data[0].pl_create_time)
                res.data[0].pl_update_time = this.timeFormat(res.data[0].pl_update_time)
                this.oneComment = res.data[0].pl_rec
                this.datas = res.data[0]
              }
            }, (err) => {
        
              this.$layer.msg('小主稍等，紧急恢复中。。。')
            })
          } else if (this.CateId === '3') {
        
            getsonglist(option).then((res) => {
        
              this.$layer.closeAll()
              if (!res.code) {
        
                this.$children[0].layout()
              } else {
        
                res.data[0].song_publish_time = this.timeFormat(res.data[0].song_publish_time)
                this.oneComment = res.data[0].song_rec
                res.data[0].song_lysic = this.returnline(res.data[0].song_lysic, '\\\\n', '<br/>')
                this.datas = res.data[0]
              }
            }, (err) => {
        
              this.$layer.msg('小主稍等，紧急恢复中。。。')
            })
          } else if (this.CateId === '4') {
        
            getsinglist(option).then((res) => {
        
              this.$layer.closeAll()
              if (!res.code) {
        
                this.$children[0].layout()
              } else {
        
                this.oneComment = res.data[0].sing_rec
                res.data[0].sing_songs.forEach((item) => {
        
                  item.song_publish_time = this.timeFormat(item.song_publish_time)
                })
                this.datas = res.data[0]
              }
            }, (err) => {
        
              this.$layer.msg('小主稍等，紧急恢复中。。。')
            })
          } else if (this.CateId === '5') {
        
            getuserlist(option).then((res) => {
        
              this.$layer.closeAll()
              if (!res.code) {
        
                this.$children[0].layout()
              } else {
        
                this.oneComment = res.data[0].u_rec
                res.data[0].u_playlist.forEach((item) => {
        
                  item.pl_create_time = this.timeFormat(item.pl_create_time)
                })
                this.datas = res.data[0]
              }
            }, (err) => {
        
              this.$layer.msg('小主稍等，紧急恢复中。。。')
            })
          }
        },
        returnMain: function (option) {
        
          this.$router.push({
        name: 'home', params: option})
        },
        musicDesc: function (opt) {
        
          console.log(opt)
          this.$router.push({
        
            name: 'one',
            query: {
        cateid: opt.cateid, id: opt.id}
          })
          this.$router.go(0)
        },
        playMusic: function (opt) {
        
          var audio = document.getElementById("audio")
          audio.crossOrigin = 'anonymous'
          audio.src = opt.url
          if (this.playing === opt.id) {
        
            this.playing = ''
            audio.pause()
          } else {
        
            this.playing = opt.id
            audio.play()
          }
        }
      },
      mounted () {
        
        var Id = this.getUrlparams(window.location.href).id
        var cateid = this.getUrlparams(window.location.href).cateid
        this.CateId = cateid + ''
        this.getNews({
        'id': Id})
      }
    }
    </script>
    
    <style lang="less" scoped>
      @baseColor:#20a0ff;
      #ellies(@n){
        
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: @n;
        -webkit-box-orient: vertical;
        white-space: nowrap;
      }
      .newsContent{
        
        width: 100%;
        box-sizing: border-box;
        padding: 2% 8%;
        overflow: auto;
        .mainNews{
        
          width: 70%;
          float: left;
          padding: 20px;
          box-sizing: border-box;
          padding-top: 0;
          margin-top:20px;
          .smalltitle{
        
            width: 50%;
            min-width: 340px;
            display: inline-block;
            vertical-align: top;
            .newsTitle{
        
              font-size: 20px;
              line-height: 36px;
              margin: 10px 0;
              font-weight: 600;
            }
            .newsAttribute{
        
              display: block;
              font-size: 12px;
              color:#999;
              height:18px;
              padding: 3px;
              i{
        
                display: inline-block;
                margin-left:25px;
                &:first-child{
        
                  margin-left: 0;
                }
              }
            }
          }
          .imgdesc{
        
            display: inline-block;
            width: 150px;
            vertical-align: bottom;
            margin-right: 20px;
            img{
        
              width: 150px;
              height: 150px;
              border-radius: 80px;
            }
          }
          .singimg{
        
            display: block;
            margin:auto;
          }
          .singsmalltitle{
        
            display: block;
            width: 100%;
            text-align: center;
          }
          .news{
        
            color: #666;
            font-size: 14px;
            line-height: 25px;
            text-space: 2px;
            box-sizing: border-box;
            margin-top:10px;
          }
          .line{
        
            margin:10px 0;
            padding: 5px;
            box-sizing: border-box;
            background: #eee;
            color: #666;
          }
          .songlist{
        
            width: 100%;
            margin-top:15px;
            .song{
        
              height: 40px;
              line-height: 40px;
              color: #666;
              cursor: pointer;
              span{
        
                display: inline-block;
                #ellies(1);
                font-size: 12px;
              }
              span:first-child{
        
                width: 40%;
                min-width: 360px;
                font-size: 14px;
              }
              span:nth-child(2){
        
                width: 30%;
                min-width: 180px;
                font-size: 14px;
              }
              &:hover{
        
                color: @baseColor;
              }
            }
            .oksong{
        
              color: @baseColor;
            }
            .songtitle{
        
              height: 40px;
              line-height: 40px;
              color: #000;
              span{
        
                display: inline-block;
                #ellies(1);
                font-size: 12px;
              }
              span:first-child{
        
                 width: 40%;
                 min-width: 360px;
                 font-size: 14px;
               }
              span:nth-child(2){
        
                width: 30%;
                min-width: 180px;
                font-size: 14px;
              }
            }
          }
          .lists{
        
            img{
        
              width: 120px;
              height: 120px;
              border-radius: 5px;
            }
            li{
        
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin-top:20px;
              &:hover{
        
                color: @baseColor;
              }
            }
          }
        }
      .mainRight{
        
        width:30%;
        float:right;
        &>h3{
        
            width:100%;
            padding: 10px;
            margin-top:15px;
            background: #dfdfdfdf;
            vertical-align: middle;
            box-sizing: border-box;
          }
        .hotTitle{
        
          font-size: 18px;
          padding: 5px;
          color: #333;
          margin-bottom: 10px;
        }
        .relists{
        
          margin-top:20px;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          .relist{
        
            width: 30%;
            box-sizing: border-box;
            padding: 5px;
            color: #333;
            cursor: pointer;
            margin-bottom: 15px;
            &:hover{
        
              color: @baseColor;
            }
            .recreater{
        
              font-size: 12px;
              color: #666;
              line-height: 14px;
              margin-bottom: 5px;
              margin-top: 5px;
              #ellies(1)
            }
            .rename{
        
              font-size: 14px;
              line-height: 16px;
              #ellies(1)
            }
            img{
        
              width: 100%;
            }
          }
          .singlists{
        
            width: 20%;
          }
          .onelist{
        
            width: 100%;
            color:#666;
            margin:5px 0;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            &:hover{
        
              color:@baseColor;
            }
            .onetime,.onename{
        
              #ellies(1);
              display: inline-block;
              box-sizing: border-box;
              padding: 0 10px;
            }
          }
        }
      }
      }
    
    </style>

[源码下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/87972157  
[源码下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/87972157

[Link 1]: https://download.csdn.net/download/sheziqiong/87972157