【开源】基于Vue.js的音乐偏好度推荐系统的设计和实现

$项目编号：S012，文末获取源码。$

---

一、摘要

1.1 项目介绍

基于Vue+SpringBoot+MySQL 的音乐偏好度推荐系统，包含了音乐档案模块、我的喜爱配置模块、每日推荐模块和通知公告模块，还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块，音乐偏好度推荐系统基于角色的访问控制，给普通用户、音乐管理员使用，可将权限精确到按钮级别，您可以自定义角色并分配权限，系统适合设计精确的权限约束需求。

互联网的高速发展下，人民群众下载网络资源更加方便，不同类型的音乐在网络上得到广泛传播。与此同时人们想在网络上找到自己喜欢的歌曲，也变得困难。旧的音乐推荐系统以天为单位进行推荐，无法高效率地根据偏好度为用户推荐音乐。本文主要研究的是网络音乐的偏好度推荐系统，使用 Vue 开发前端部分，使用Spring Boot开发后端部分，使用MySQL作为数据库。本系统使用字符串来仿真模拟音乐数据，运用算法，根据用户在不同时间段的音乐喜好配置来推荐相应类型的音乐数据，达到网络音乐的偏好度推荐功能。

1.2 项目录屏

---

二、系统设计

2.1 功能模块设计

2.1.1 音乐档案模块

音乐档案模块是对音乐相关的信息进行管理，其中包括音乐名称、轻音乐值、摇滚音乐值、流行音乐值、爵士乐值、古典乐值、创建人、创建时间等，可以通过此模块对音乐档案进行添加、编辑更新、删除、查询操作。

2.1.2 我的喜好模块

我的喜好模块是用于用户配置自己的预约喜好，实现更精确的音乐推荐。我的喜好模块分为早中晚三个时间段，字段包括用户ID、用户姓名、早上喜爱、下午喜爱、晚上喜爱、备注、创建人、创建时间等，用户可以在此模块配置自己的音乐喜好。

2.1.3 每日推荐模块

每日推荐模块是网络音乐的偏好度推荐系统的核心，系统会根据用户的喜好配置，在不同时间段推荐用户相应的音乐，每日推荐数据由系统实时生成，不做数据持久化存储，所以没有数据库表。

2.1.4 通知公告模块

网络音乐的偏好度推荐系统中设计了通知公告模块，用于向用户推送一些通知，如系统停服维护、推荐算法公示、系统使用说明等信息，能够让用户更容易的使用该系统。通知公告的字段包括通知ID、通知标题、通知内容、附件、发布人、发布时间、备注、发布状态等，系统管理员可以发布通知公告，普通用户可以浏览查询通知公告信息。

2.2 用例图设计

用户角色用例图如下图所示。

管理员角色的用例图如下图所示。

2.3 实体类设计

2.4 数据库设计

三、系统展示

3.1 登录注册

3.2 音乐档案模块

3.3 音乐每日推荐模块

3.4 通知公告模块

3.5 系统基础模块

---

四、样例代码

4.1 修改单条歌曲喜爱配置

@RequestMapping(value = "/setMySetting", method = RequestMethod.POST)
@ApiOperation(value = "修改单条歌曲喜爱配置")
public Result<MusicSetting> setMySetting(@RequestParam String like1,@RequestParam String like2,@RequestParam String like3){User currUser = securityUtil.getCurrUser();MusicSetting setting = iMusicSettingService.getById(currUser.getId());if(setting == null) {return ResultUtil.error("配置不存在");}setting.setLike1(like1);setting.setLike2(like2);setting.setLike3(like3);iMusicSettingService.saveOrUpdate(setting);return ResultUtil.success();
}

4.2 音乐推荐

@RequestMapping(value = "/getList", method = RequestMethod.GET)
@ApiOperation(value = "推荐10首歌")
public Result<List<Music>> getList(@RequestParam int h){User currUser = securityUtil.getCurrUser();MusicSetting setting = iMusicSettingService.getById(currUser.getId());if(setting == null) {return ResultUtil.error("你的配置不存在");}int hour = Calendar.getInstance().get(Calendar.HOUR_OF_DAY);String likeStr = "";if(h > 0) {hour = h;}if(hour > 5 && hour < 11) {// 6点到11点likeStr = setting.getLike1();} else if(hour > 10 && hour < 18) {// 11点到18点likeStr = setting.getLike2();} else {likeStr = setting.getLike3();}QueryWrapper<Music> qw = new QueryWrapper<>();if(Objects.equals("轻音乐",likeStr)) {qw.orderByDesc("value1");} else if(Objects.equals("摇滚音乐",likeStr)) {qw.orderByDesc("value2");} else if(Objects.equals("流行音乐",likeStr)) {qw.orderByDesc("value3");} else if(Objects.equals("爵士乐",likeStr)) {qw.orderByDesc("value4");} else if(Objects.equals("古典乐",likeStr)) {qw.orderByDesc("value5");}qw.last("limit 10");return new ResultUtil<List<Music>>().setData(iMusicService.list(qw));
}

4.3 通知查询

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询通知")
public Result<IPage<Message>> getByPage(@ModelAttribute Message message ,@ModelAttribute PageVo page){QueryWrapper<Message> qw = new QueryWrapper<>();if(!ZwzNullUtils.isNull(message.getTitle())) {qw.like("title",message.getTitle());}if(!ZwzNullUtils.isNull(message.getContent())) {qw.like("content",message.getContent());}if(!ZwzNullUtils.isNull(message.getUserName())) {qw.like("user_name",message.getUserName());}IPage<Message> data = iMessageService.page(PageUtil.initMpPage(page),qw);return new ResultUtil<IPage<Message>>().setData(data);
}

---

五、免责说明

• 本项目仅供个人学习使用，商用授权请联系博主，否则后果自负。
• 博主拥有本软件构建后的应用系统全部内容所有权及独立的知识产权，拥有最终解释权。
• 如有问题，欢迎在仓库 Issue 留言，看到后会第一时间回复，相关意见会酌情考虑，但没有一定被采纳的承诺或保证。

下载本系统代码或使用本系统的用户，必须同意以下内容，否则请勿下载！

1. 出于自愿而使用/开发本软件，了解使用本软件的风险，且同意自己承担使用本软件的风险。
2. 利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和博主无关，博主对此不承担任何责任。
3. 在任何情况下，对于因使用或无法使用本软件而导致的任何难以合理预估的损失（包括但不仅限于商业利润损失、业务中断与业务信息丢失），博主概不承担任何责任。
4. 必须了解使用本软件的风险，博主不承诺提供一对一的技术支持、使用担保，也不承担任何因本软件而产生的难以预料的问题的相关责任。