首页 > 其他分享 >【开源】基于Vue.js的音乐偏好度推荐系统的设计和实现

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

时间:2023-11-10 17:03:21浏览次数:52  
标签:Vue qw 推荐 音乐 js 开源 setting 模块 likeStr


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


一、摘要

1.1 项目介绍

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

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

1.2 项目录屏

https://www.bilibili.com/video/BV1Qh4y1f7Mo


二、系统设计

2.1 功能模块设计

2.1.1 音乐档案模块

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

2.1.2 我的喜好模块

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

2.1.3 每日推荐模块

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

2.1.4 通知公告模块

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

2.2 用例图设计

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

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

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

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

2.3 实体类设计

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

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

2.4 数据库设计

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

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

三、系统展示

3.1 登录注册

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

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

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

3.2 音乐档案模块

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

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

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

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

3.3 音乐每日推荐模块

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

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

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

3.4 通知公告模块

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

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

3.5 系统基础模块

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

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

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

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

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

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


四、样例代码

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. 必须了解使用本软件的风险,博主不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。

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


标签:Vue,qw,推荐,音乐,js,开源,setting,模块,likeStr
From: https://blog.51cto.com/u_16322671/8304740

相关文章

  • 请问以下JS代码在Node环境下的输出顺序是?
    请问以下JS代码在Node环境下的输出顺序是?Promise.resolve().then(()=>{console.log('p1');}).then(()=>{console.log('p2');})process.nextTick(()=>{console.log('n1');process.nextTick(()=>{console.log('......
  • Vue3(开发h5适配)
    在开发移动端的时候需要适配各种机型,有大的,有小的,我们需要一套代码,在不同的分辨率适应各种机型。因此我们需要设置meta标签<metaname="viewport"content="width=device-width,initial-scale=1.0">移动设备具有各种不同的屏幕尺寸和分辨率,例如智能手机和平板电脑。为了提供更好的......
  • 开源在线图片设计器,支持PSD解析、AI抠图等,基于Puppeteer生成图片
    自从我上次分享独立仿造稿定设计开发的图片编辑器到现在,不知不觉已过去一年时间了,期间我经历了裁员失业、面试找工作碰壁的窘境,寒冬之下一直没有很好地履行计划.....这些就放在日后谈吧。最近挤出时间来完善了这个编辑器项目,正式开源后在第一天就收获了上百个Star,这篇文章想向大家......
  • 深入探讨Vue.js核心技术及uni-app跨平台开发实践
    Vue.js是一款流行的JavaScript框架,用于构建交互性强、响应式的用户界面。而uni-app是一个基于Vue.js的跨平台应用开发框架,允许开发者使用Vue.js的语法编写一次代码,然后将其部署到多个平台,如iOS、Android、Web等。本文将深入探讨Vue.js的核心技术,并介绍如何利用uni-app进行跨平台实......
  • vue-cli-service vue.config.js配置 productionSourceMap与webpack中的devtool 关联详
    https://webpack.js.org/configuration/devtool/https://cli.vuejs.org/zh/config/#productionsourcemap https://github.com/vuejs/vue-cli/blob/f0f254e4bc81ed322eeb9f7de346e987e845068e/packages/%40vue/cli-service/lib/config/prod.js#L7 可以在源码中看到if(pro......
  • 请问以下JS代码的输出是? 935、 ['read', 'write']
    functionfather(){this.num=935;this.work=['read','write','listen'];}functionson(){}son.prototype=newfather();letson1=newson();letson2=newson();son1.num=117;son1.work.pop();console.log(son2.......
  • Vue3 路由查询参数更新后,执行更新方法
    import{ref,defineComponent,watch,getCurrentInstance}from"vue";import{useRoute}from'vue-router';exportdefaultdefineComponent({setup(){consttable=ref({key:'spec_id',......
  • vue+css实现的伪3d旋转罐+液位动态变化
    话不多说先看效果:设计思路:罐是做了三个位置(中=>左,左=>右,右=>中)的动画效果,每个罐轮流使用一次,来实现旋转的效果。中间的光亮做了个变形延迟。罐的透明效果是使用了三层,即最底层是粒子不透明图片,中层是液体组件,最上层是罐体png图片。都是用了绝对定位,请务必设置好位置。液体组......
  • Vue中 name 有什么作用?data 为什么是函数而不是对象?
    Vue中name有什么作用?项目使用keep-alive时,可搭配组件name进行缓存过滤DOM做递归组件时需要调用自身namevue-devtools调试工具里显示的组见名称是由vue中组件name决定的data为什么是函数而不是对象?组件中data是Vue的实例组件共享data属性,当......
  • 博客管理系统|基于SpringBoot+Vue+ElementUI付费博客系统的设计与实现
    作者主页:编程指南针作者简介:Java领域优质创作者、博客专家、特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助收藏点赞不迷路 关注作者有好处项目编号:BS-PT-089二,环境介绍语言环境:Java: jdk1.8数据库:Mysql......