【springboot+vue音乐推荐系统的设计与实现】

springboot+vue音乐推荐系统的设计与实现——毕业设计

课题名称

一站式中国风音乐平台的设计与实现

课题意义

在科技迅速发展以及生活水平普遍提高的当下，人们对精神文化生活的需求也越来越高。近些年，中国风音乐非常流行，一站式中国风音乐平台能够提供海量的音乐资源，满足不同人群的小众音乐风格； 其次，一站式中国风音乐平台可以推动国风音乐产业的发展，提供音乐人、创作人入驻创作，为音乐创作者提供更广阔的展示空间。

课题任务

本课题旨在设计一个一站式中国风音乐平台，实现平台具体需求，提升用户体验。
本课题的主要内容大致分为一下几点：
（1）查阅相关资料，学习Java语言、Vue语言以及常用框架，学习前后端分离、数据库等相关知识。
（2）技术选型，选择适合构建用户界面、处理业务逻辑、数据管理技术以及合适的数据库系统；设计系统，主要包含用户模块、音乐模块、创作者模块和推荐模块设计等。
（3）进行系统各个模块的详细设计实现。
（4）完成开发后测试系统功能的可用性，修改迭代至预期效果。

摘要

摘　　要

随着中国风音乐的兴起和互联网技术的发展，越来越多的用户希望能够方便地获取自己喜欢的中国风音乐。然而，现有的音乐推荐平台往往无法满足用户以及创作者对中国风音乐的个性化需求。针对这一问题，本课题决定设计一个集一站式、中国风音乐资源整合、个性化推荐于一体的一站式的中国风音乐平台，满足小众用户和音乐人的个性化需求。
本系统通过协同过滤算法来实现个性化，协同过滤技术主要可以划分为两大类，基于用户和基于项目的协同过滤，其核心思想是基于一系列兴趣相同的用户或项目进行推荐。本文对比两类算法，最终选择采用了基于用户的杰卡德相似性算法实现系统推荐功能。
在此基础上，本文介绍了基于Web的一站式中国风音乐推荐平台的设计与实现。系统采用流行的Java和Vue语言，以B/S架构、MVC模式、框架技术以及MySQL数据库为基础，实现了整个平台的功能需求。
经过对测试案例的评价，发现该系统的总体功能表现优秀，已经实现了系统的需求功能，并且能够在一定程度上有效地推荐出用户可能会感兴趣的内容，基本上实现了系统设计的预期目标。

关键词：音乐推荐系统；一站式；协同过滤；杰卡德相关系数；相似性度量；

目录

目　　录
第一章 绪论 1
一、研究背景和意义 1
二、课题研究现状 1
(一)国内发展现状 1
(二)国外发展现状 2
三、研究目标及主要工作 2
四、论文组织结构 3
第二章 系统相关技术介绍 4
一、B/S架构 4
二、MVC模式 6
三、Vue.js和Element-UI 7
四、Spring Boot框架 7
五、MyBatis框架 8
六、Redis 8
七、MySQL数据库 9
八、本章小结 9
第三章 协同过滤算法的研究 10
一、基于用户(User-based)的协同过滤算法 10
二、基于物品(Item-based)的协同过滤算法 11
三、相似性度量方法 13
(一)余弦相似度 13
(二)调整的余弦相似度 13
(三) Pearson相关系数 14
(四) Jaccard相似度 14
四、对比与分析 14
五、本章小结 15
第四章 一站式中国风平台需求分析和系统设计 16
一、系统可行性分析 16
(一)技术可行性 16
(二)经济可行性 16
(三)社会可行性 16
二、系统需求分析 16
(一)系统功能需求 16
(二)系统性能需求 19
(三)系统数据需求 19
三、系统总体设计 20
(一)总体架构设计 20
(二)推荐模块设计 21
(三)数据库设计 22
四、本章小结 25
第五章 系统实现与测试 26
一、系统前台客户端模块实现 26
(一)游客模块 26
(二)普通用户模块 29
(三)音乐人用户模块 34
二、系统后台模块实现 34
(一)登录功能的实现 34
(二)管理功能的实现 34
三、协同过滤算法的实现 35
四、系统测试 37
(一)测试方法 37
(二)测试过程 38
五、本章小结 39
第六章 总结和展望 40
参考文献 41
致　　谢 42

系统实现与测试

一.系统前台客户端模块实现

以游客、普通用户以及音乐人三种角色分别展示客户端所实现的功能。
(一)游客模块
（1）用户注册功能的实现
游客用户在使用本系统时，点击注册按钮，如图5.1和图5.2所示输入用户名、账号、兴趣口味（选填）、密码以及电话号码等信息，提交注册请求。对用户输入的注册信息进行前后端的验证，确保输入的信息格式正确、完整，并符合要求（如账户不可重复、密码的复杂度要求等）。在游客成功注册后，向用户显示注册成功的提示信息，直接跳转到登录页面。

图5.1 用户注册功能页面一实现图

图5.2 用户注册功能页面二实现图

（2）歌曲操作功能的实现
在未注册时，对游客开放了查看信息和操作歌曲功能，游客可以浏览和查看网站上的各种信息，但无法进行个性化的操作和功能。可查看信息包含网站首页、歌单、歌手、排行榜；歌曲操作功能包含了搜索歌曲、播放歌曲、下载歌曲功能。这样的设计让游客在不注册账号的情况下浏览网站的基本内容，以便吸引他们成为注册用户。
信息界面的展示主要由前端Vue语言实现，通过Vue的组件化开发方式将各种信息模块化，如轮播图展示、推荐歌单等，实现信息的动态展示和交互功能，给游客带来流畅、直观的用户体验。歌曲操作功能则调用后端的接口实现，因此下面主要介绍歌曲操作的功能实现。

1. 歌曲播放功能
   前端使用Vue框架构建音乐播放器界面，向后端服务器发送HTTP请求获取音乐文件，后端接收到请求后根据返回相应的音乐文件，返回给客户端，并使用HTML5的Audio标签进行音乐播放控制，然后通过Vue组件更新播放器界面的状态，如播放进度和歌曲信息。

2. 歌曲下载功能
   客户端提供下载按钮，用户点击按钮触发调用接口，向服务发送下载请求，后端返回相应的歌曲文件，前端接收到响应后通过浏览器的下载功能将音乐文件保存到用户本地文件系统。
   部分Vue代码及具体效果如下和图5.3所示：
   <audio id=“player”
   :src=“url”
   controls = “controls”
   preload = “true”
   @canplay=“startPlay”
   @ended=“ended”
   >
   
   down(url) {
   download(url)
   .then(res => {
   let content = res.data;
   let eleLink = document.createElement(‘a’);
   eleLink.download = ${this.musicInfo.songName}-${this.musicInfo.singer.singerName}.mp3;
   eleLink.style.display = ‘none’;
   let blob = new Blob([content]);
   eleLink.href = URL.createObjectURL(blob);
   document.body.appendChild(eleLink);
   eleLink.click();
   document.body.removeChild(eleLink);
   })
   .catch(err => {
   console.log(err);
   })
   }
   
   图5.3 歌曲播放、下载功能实现图

3. 搜索功能
   搜索功能涵盖了对歌曲、歌单和歌手的搜索，前端界面接收用户输入，后端基于Name字段进行搜索逻辑，最终将结果返回给前端展示，以提供用户方便快捷的歌曲搜索体验。
   (二)普通用户模块
   （1）用户登录功能的实现
   在用户登录过程中，首先判断用户是否输入账号和密码，如果都为空，则尝试使用cookie自动登录。如果存在相应的cookie，则从cookie中获取账号和密码，并调用userService的login方法验证用户身份。如果验证通过，则返回用户信息以及用户的歌曲列表，表示自动登录成功；否则返回错误信息，表示自动登录失败。如果用户输入了账号和密码，则直接调用userService的login方法验证用户身份。如果验证通过，则返回用户信息以及用户的歌曲列表，并设置cookie以便下次自动登录；否则返回错误信息，表示用户名或密码错误。
   功能实现界面和具体代码如下所示：
   
   图5.4 用户登录功能实现图

   @GetMapping(“/login”)
   public Result login(@RequestParam(“account”) String account,
   @RequestParam(“password”) String password,
   HttpServletResponse response,HttpServletRequest request){
   Map<String,Object> map = new HashMap<>();
   if(“”.equals(account) && “”.equals(password)){
   Cookie[] cookies = request.getCookies();
   System.out.println(“使用cookie自动登录”);
   String cookieAccount=“”;
   String cookiePassword=“”;
   if(cookies !=null && cookies.length>0){
   for (Cookie cookie:cookies) {
   System.out.println(“遍历cookie：”+ cookie.getName());
   if (“account”.equals(cookie.getName())) {
   cookieAccount=cookie.getValue();
   }else if(“password”.equals(cookie.getName())){
   cookiePassword=cookie.getValue();
   }
   }
   User user=userService.login(cookieAccount,cookiePassword);
   List songList = songService.querySongOfUser(user.getUserId());
   map.put(“user”,user);
   map.put(“list”,songList);
   System.out.println(“自动登录成功”);
   return Result.success(“200”,“Cookie自动登录成功”,map);
   }else{
   return Result.error(“105”,“cookie已经过期，自动登录失败！”);
   }
   }else{
   User user=userService.login(account,password);
   if(user!=null){
   List songList = songService.querySongOfUser(user.getUserId());
   map.put(“user”,user);
   map.put(“list”,songList);
   Cookie cookie1=new Cookie(“account”,account);
   cookie1.setMaxAge(606024);
   response.addCookie(cookie1);
   Cookie cookie2=new Cookie(“password”,password);
   cookie2.setMaxAge(606024);
   response.addCookie(cookie2);
   return Result.success(map);
   }else{
   return Result.error(“104”,“用户名或密码错误”);
   }
   }
   }
   （2）歌曲歌单操作功能的实现
   普通用户在游客歌曲操作功能的基础上，新增了评论和收藏功能，查看信息模块增加了个人中心页面。同时，拥有了操作歌单的权限，允许普通用户新建、编辑和删除自己的歌单。
   具体界面实现以及操作歌单部分后端接口代码如下所示：
   

图5.5 个人中心功能实现图

/**

• 创建歌单
  /
  @PostMapping(“/addSongList”)
  public Map addSongList(@RequestBody Lists lists){
  Map map = listsService.addSongList(lists);
  return map;
  }
  /*
• 修改歌单
  */
  @PostMapping(“/updateSongList”)
  public Map updateSingerInfo(@RequestBody Lists lists){
  Map map = listsService.updateSongList(lists);
  return map;
  }

/**

• 删除歌单
  */
  @GetMapping(“/deleteASongList”)
  public Map deleteASongList(int id){
  Lists lists = listsService.selectSongListById(id);
  Map map = listsService.deleteSongList(id);
  if(lists != null && !“收藏”.equals(lists.getListType())){
  String oldFilePath = lists.getListImg();
  if(oldFilePath != null && !“”.equals(oldFilePath)) {
  File oldFile = new File(Consts.FILE_PATH + oldFilePath);
  oldFile.delete();
  }
  }
  map.put(Consts.CODE, “1”);
  map.put(Consts.MESSAGE, “删除成功”);
  return map;
  }
  （3）音乐人入驻功能的实现。
  注册平台的普通用户进行音乐人认证入驻。其主要流程为填写入驻申请、提交审核、后台管理员审核、审核结果通知、入驻成功或失败处理等步骤。普通用户通过填写入驻申请并提交审核，平台管理员对其提交的信息进行审核，审核通过后成为绑定音乐人用户，否则可以根据拒绝原因进行修改和重新提交申请。
  (三)音乐人用户模块
  （1）个人资料、歌曲、专辑管理功能的实现。
  音乐人用户作为普通用户的子用例，拥有普通用户的所有基本功能，如浏览歌曲、创建歌单、收藏喜爱的歌曲等。由于其身份绑定歌手ID，因此又具有额外的音乐人资料编辑、歌曲管理和专辑管理等功能。

二、系统后台模块实现

(一)登录功能的实现
后台登录功能是管理人员登录系统的入口，管理员需要输入账号和密码进行身份验证。输入凭据后，系统将其发送到后端进行验证，如果验证通过，则生成并返回一个身份验证令牌。前端接收到令牌后将其存储在本地，然后跳转到后台管理界面。如果身份验证失败，系统将返回相应的错误信息。
(二)管理功能的实现
后台管理员系统功能包括对用户、歌手、歌单、专辑、歌曲、评论、轮播图、类别标签等内容进行管理和维护。管理员可以对用户信息进行查看、编辑和删除；对歌手信息进行审核管理；对歌单进行创建、编辑、删除等操作；对专辑进行管理；对歌曲进行上传、编辑、删除等操作；对评论进行审核、删除等操作；对轮播图进行添加、编辑、删除等操作；以及对类别标签进行管理等。
后台管理功能均已实现，选取部分功能界面和代码进行展示。
（1）用户管理功能的实现。如图5.6所示。

图5.6 后台用户管理功能实现图

（2）歌手审核功能的实现。
管理员在查看待审核歌手列表，对歌手进行审核操作。点击“审核”按钮时，弹出包含歌手信息的弹窗，管理员可以在弹窗中查看歌手的详细信息，并选择通过或不通过审核。点击“审核通过”按钮或“审核不通过”按钮后，向后端发送请求，更新歌手的审核状态，并根据操作结果刷新歌手列表。

图5.7 后台歌手审核功能实现图

三、协同过滤算法的实现

推荐模块分为热门推荐和个性化推荐，热门推荐根据歌曲被收藏的次数计算，个性化推荐基于用户的协同过滤算法，使用Jaccard相似性度量方法计算，最终生成推荐列表。
个性化推荐功能的具体逻辑实现和部分代码实现如下：

1. 获取所有用户和歌曲的关联信息，本系统关联信息是用户收藏的歌曲列表。
2. 创建一个用户推荐的HashMap，以用户ID为键，对应的歌曲ID列表为值。
3. 遍历所有的用户收藏信息，并将其添加到用户推荐的HashMap中。
4. 获取当前登录用户的收藏歌曲列表，并将其转换为HashSet集合，方便进行集合运算。
5. 遍历用户推荐HashMap中的每个用户，计算与当前登录用户的相似度。通过计算Jaccard相似度，找到相似度最高的用户。
6. 根据相似度最高的用户推荐未收藏过的歌曲，构建推荐歌曲列表。
7. 若推荐歌曲数量不足10首，则根据用户的兴趣标签补充歌曲。首先根据用户的兴趣标签查询符合用户兴趣的歌曲，然后随机补充热门歌曲。
8. 返回推荐结果，包括推荐歌曲列表和相似度信息。
   // Jaccard 相似性度量方法计算用户之间相似度代码：
   for (int key : userRecommend.keySet()) {
   if (key == recommendUserId) {
   continue;
   }
   List thisRecommend = userRecommend.get(key);
   HashSet thisRecommendSet = new HashSet<>(thisRecommend);
   HashSet intersection = new HashSet<>(myRecommendSet);
   intersection.retainAll(thisRecommendSet);
   HashSet union = new HashSet<>(myRecommendSet);
   union.addAll(thisRecommendSet);
   if (union.size() == 0) {
   continue;
   } else {
   double ratio = (double) intersection.size() / union.size();
   if (ratio > maxValue) {
   maxValue = ratio;
   maxId = key;
   }
   }
   }
   // 冷启动问题代码：
   if (songs.size()<10){
   int count = 10-songs.size();
   Random r = new Random();
   User user= userService.userById(recommendUserId);
   String userStyle = user.getUserStyle();
   List song=songService.querySongOfUserStyle(userStyle);
   List song1= (List) songService.getRankSong().get(“data”);
   for (int i =0; i < count; i++) {
   int rand = r.nextInt(song1.size());
   if (i<song.size() && !songs.contains(song.get(i))) {
   songs.add(song.get(i));
   }
   else if(!songs.contains(song1.get(rand))) {
   songs.add(song1.get(rand));
   }
   else {
   i–;
   }
   }
   }