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

在这里插入图片描述

$\color{red}{项目编号：S012，文末获取源码。}$

一、摘要
- 1.1 项目介绍
- 1.2 项目录屏
二、系统设计
- 2.1 功能模块设计
- - 2.1.1 音乐档案模块
  - 2.1.2 我的喜好模块
  - 2.1.3 每日推荐模块
  - 2.1.4 通知公告模块
- 2.2 用例图设计
- 2.3 实体类设计
- 2.4 数据库设计
三、系统展示
- 3.1 登录注册
- 3.2 音乐档案模块
- 3.3 音乐每日推荐模块
- 3.4 通知公告模块
- 3.5 系统基础模块
四、样例代码
- 4.1 修改单条歌曲喜爱配置
- 4.2 音乐推荐
- 4.3 通知查询
五、免责说明

一、摘要

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);
}