SpringBoot+vue仿网易云音乐网站（四）- 系统设计及技术实现

最新推荐文章于 2024-07-25 22:44:17 发布
最新推荐文章于 2024-07-25 22:44:17 发布
阅读量2.3k 收藏 27
点赞数 2
分类专栏： 音乐网站 文章标签： spring boot vue.js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44764019/article/details/122860786
版权

一、概述

针对每一个功能点，写出我的系统设计，以及具体的实现，其实写程序不难，主要是设计，设计出来了，遇到不会的，要知道自己想怎么做，想要实现什么样的效果，再去百度或者询问，一步一步往下做，就能完成整个项目。

二、首页

1. 系统设计

在这里插入图片描述
首页的系统设计很简单，点击首页是，查询有效的轮播图，随机查询十个歌单和十个歌手，前端渲染。

2. 后端（Service层和Dao层略过）

轮播图没有什么特殊点，就查询有效的数据
Controller

    @GetMapping("/showSlide")
    public Result showSlide(){
        List<Slide> slides = slideService.showSlide();
        return Result.success(slides);
    }

Mapper.xml

    <select id="showSlide" resultMap="BaseSlideMap">
          select * from  slide where slide_valid=1
    </select>

    <resultMap id="BaseSlideMap" type="Slide">
        <result property="slideId" column="slide_id" />
        <result property="slideImg" column="slide_img" />
        <result property="slideAlbumId" column="slide_albumid" />
        <result property="slideValid" column="slide_valid" />
    </resultMap>

推荐歌手/歌单
controller

    //SingerController
    @GetMapping("/topSinger")
    public Result topSinger(){
        List<Singer> singerList=singerService.topSinger();
        return Result.success(singerList);
    }
	//ListsController
	@GetMapping("/topLists")
    public Result topLists(HttpServletResponse response){
        List<Lists> list=listsService.topLists();
        return Result.success(list);

    }

Mapper.xml

       <!--SingerMapper.xml -->
        <select id="topSinger" resultMap="BaseSingerMap">
              SELECT * FROM singer ORDER BY RAND() LIMIT 10;
        </select>
       <!--ListMapper.xml -->
    <select id="topLists" resultMap="BaseListsMap">
        SELECT * FROM lists ORDER BY RAND() LIMIT 10;
    </select>

3. 前端

home页面一加载时，就调用这个三个查询方法，再将数据渲染到视图中。
在这里插入图片描述
meunList是查询后的歌单数据，视图层渲染。
在这里插入图片描述

三、歌单页和歌手页

歌单歌手页实现方法一样，其实就是一个简单的分页查询。

1. 系统设计

在这里插入图片描述
一开始默认是全部歌手也就是不卡类型，当点击上方的类型时，再根据类型来查询。

2. 后端

Controller

   	//页面加载时，不卡类型
    @GetMapping("/allSinger")
    public Result querySingers(@RequestParam("pageNum")int pageNum,@RequestParam("pageSize") int pageSize){
       //先根据页码（页码刚加载时，都为1），和一页的个数查询出所有歌手
       //在sql中，这两个参数分别为起始下标，和数量，比如我要查询前十个，起始下标就是0，数量就是10
        List<Singer> singerList=singerService.queryAllSinger((pageNum-1)*pageSize,pageSize);
        //再查出总数量
        int count=singerService.countOfSinger();
        Map<String,Object> map = new HashMap<>();
        //然后将数据和数量放入Map，返回给前台
        map.put("list",singerList);
        map.put("totalSize",count);
        return Result.success(map);
    }

	//点击类型后，多加一个类型参数，分页方法如上
	    @GetMapping("/singerByType")
    public Result singerByType(@RequestParam("pageNum")int pageNum,
                               @RequestParam("pageSize") int pageSize,
                               @RequestParam("singerType") int singerType){
        List<Singer> singerList=singerService.querySingerByType((pageNum-1)*pageSize,pageSize,singerType);
        int count=singerService.countOfSingerByType(singerType);
        Map<String,Object> map = new HashMap<>();
        map.put("list",singerList);
        map.put("totalSize",count);
        return Result.success(map);
    }

SingerMapper.xml

<!--根据起始下标和数量查询所有歌手-->
 <select id="queryAllSinger" parameterType="int" resultMap="BaseSingerMap">
              select *  from singer limit #{startIndex},#{pageSize}
        </select>

        <resultMap id="BaseSingerMap" type="Singer">
            <result property="singerId" column="singer_id"/>
            <result property="singerName" column="singer_name"/>
            <result property="singerDetails" column="singer_details"/>
            <result property="singerPhoto" column="singer_photo"/>
        </resultMap>
<!--查询所有歌手的数量-->
        <select id="countOfSinger" resultType="int">
              select count(*) from singer
        </select>
<!--根据起始下标、数量和类型查询所有歌手-->
        <select id="querySingerByType" parameterType="int" resultMap="BaseSingerMap">
              select *  from singer where singer_type=#{singerType} limit #{startIndex},#{pageSize}
        </select>

3. 前端

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、用户主页

1. 系统设计

在这里插入图片描述
点击个人中心时，要查询自己的个人信息，粉丝和关注数量，以及自己创建或者收藏的歌单。这个页面同时还会用作我查看其他用户的主页，例如我查看用户“老胡”的主页，所以左侧还有一个按钮，如果是我本人的主页，显示编辑个人信息，是其他用户，再根据关注情况，显示相互关注、已关注、+关注。
在这里插入图片描述

2. 后端

UserController

    //根据Userid查询User信息
    @GetMapping("/userById")
    public Result userById(@RequestParam("userId") int userId){
        User user= userService.userById(userId);
        return Result.success(user);
    }

ListsController

	//根据userId查询创建的歌单
    @GetMapping("/listByUserId")
    public Result listByUserId(int userId){
        List<Lists> list=listsService.queryListsByUserId(userId);
        return Result.success(list);
    }
	//根据UserId查询收藏的歌单
    @GetMapping("/colListByUserId")
    public Result colListByUserId(int userId){
        List<Lists> list=listsService.colListsByUserId(userId);
        return Result.success(list);
    }

FansController

	//根据UserId查询关注的人的总数
    @GetMapping("/focusCount")
    public Result getFocusCount(@RequestParam("userId") int userId){
        int count = fansService.getFocusCount(userId);
        return Result.success(count);
    }
	//根据UserId查询粉丝的总数
    @GetMapping("/fansCount")
    public Result getFansCount(@RequestParam("userId") int userId){
        int count = fansService.getFansCount(userId);
        return Result.success(count);
    }
	//根据用户Id和我本人的Id查询，是不是我的关注者
	    @GetMapping("/userIsFocus")
    public Result userIsFocus(@RequestParam("userId") int userId,@RequestParam("myId")int myId){
        int count = fansService.userIsFocus(userId, myId);
        return Result.success(count);
    }
	//根据用户Id和我本人的Id查询，是不是我的粉丝
    @GetMapping("/userIsFans")
    public Result userIsFans(@RequestParam("userId") int userId,@RequestParam("myId")int myId){
        int count = fansService.userIsFans(userId, myId);
        return Result.success(count);
    }

FansMapper.xml
前面分析了粉丝表，主要字段，关注者Id，被关注者Id，和类型，一般情况下，歌手不可能关注别人，所有关注者Id只可能为用户，而被关注者可能为用户，也可能为歌手，所以再添加一个类型，来区分是歌手还是用户。

<!--根据UserId查询我的关注者 -->
    <select id="getMyFocus" resultMap="BaseFansMap">
        select *  from fans
        left join user on user_id = fans_focusid and fans_type = 1
        left join singer on fans_focusid=singer_id and fans_type = 2
        where fans_fansid =#{userId} ORDER BY fans_id desc
    </select>
<!--根据UserId查询我的粉丝，粉丝只可能是用户 -->
    <select id="getMyFans" resultMap="BaseFansMap">
        select *  from fans
        left join user on user_id = fans_fansid
        where fans_type = 1 and fans_focusid = #{userId} ORDER BY fans_id desc
    </select>
<!--根据UserId查询我的关注者总数 -->
    <select id="getFocusCount" resultType="int">
        select count(*)  from fans
        left join user on user_id = fans_focusid and fans_type = 1
        left join singer on fans_focusid=singer_id and fans_type = 2
        where fans_fansid =#{userId}
    </select>
<!--根据UserId查询我的粉丝总数 -->
    <select id="getFansCount" resultType="int">
        select count(*) from fans
        left join user on user_id = fans_fansid
        where fans_type = 1 and fans_focusid = #{userId}
    </select>
	<!--根据用户Id和我的Id查询是否为我的粉丝 -->
    <select id="userIsFans" resultType="int">
        select count(*) from fans where fans_type = 1 and fans_fansid =#{userId} and fans_focusid =#{myId}
    </select>
	<!--根据用户Id和我的Id查询是否为我的关注者 -->
    <select id="userIsFocus" resultType="int">
        select count(*) from fans where fans_type = 1 and fans_fansid =#{myId} and fans_focusid =#{userId}
    </select>

3. 前端

主要讲解下粉丝。
在这里插入图片描述
在这里插入图片描述

五、歌手、歌单、专辑详情页

1. 系统设计

先上图
歌手页：
在这里插入图片描述
在这里插入图片描述
歌手页，上面显示了歌手图片，个人信息，歌曲量，专辑量，歌曲列表，专辑列表，已经根据当前登录用户是否关注此歌手，显示已关注或关注。

歌单页：（歌单和专辑页结构一样，不讲解）
在这里插入图片描述
歌单页：显示歌单封面、歌单标题、歌单创建者头像、昵称，歌单创建时间、类型标签、歌曲量、播放量，简介，已经根据是否是自己创建的，显示修改图标，或者已收藏、收藏，同事点击收藏时，会加入到自己的收藏，变为已收藏，点击已收藏，会删除掉自己的收藏，变为收藏。其实可以看出歌手详情页的结构和歌单也是大同小异，就拿更复杂的歌单讲解。

2. 后端

ListController

    //根据歌单Id查询歌单信息,带有创建者信息
    @GetMapping("/listById")
    public Result listById(int listId){
        Lists list=listsService.userOfList(listId);
        //这里用redis实现了点击量的统计，后续介绍
        String key="list_"+listId;
        redisTemplate.opsForValue().increment(key);
        return Result.success(list);
    }
	//通过用户id和歌单id，判断此歌单是否收藏
    @GetMapping("/isCol")
    public Result isCol(@RequestParam("listId") int listId,@RequestParam("userId") int userId){
        int isCol=listsService.isCol(listId, userId);
        return Result.success(isCol);
    }
	//通过用户id和歌单id，将此歌单收藏
    @PostMapping("/addCol")
    public Result addCol(@RequestParam("listId") int listId,@RequestParam("userId") int userId){
        listsService.addCol(listId, userId);
        return Result.success();
    }
	//通过用户id和歌单id，将此歌单取消收藏
    @DeleteMapping("/delCol/{listId}/{userId}")
    public Result delCol(@PathVariable("listId") int listId,@PathVariable("userId") int userId){
        listsService.delCol(listId, userId);
        return Result.success();
    }

SongController

	//根据歌单Id查询所有歌曲
    @GetMapping("/songOfLists")
    public Result songByList(int listId){
        List<Song> songList=songService.querySongOfList(listId);
        return Result.success(songList);
    }

CommentsController

	//根据评论目标Id，和目标类型查询所有评论，歌单默认类型1，专辑为2，这里相当于传目标Id为此歌单Id，类型为1.
    @GetMapping("/allComments")
    public Result allComments(int commTargetId,int commType){
        List<Comments> list= commentsService.queryComments(commTargetId,commType);
        System.out.println(list);
        return Result.success(list);
    }

ListMapper.xml

   <!--根据歌单Id查询歌单信息，包含创建者信息，用了一对一的复合查询-->
       <select id="userOfList" resultMap="UserListMap" parameterType="int">
       select * from lists l left join user u on l.list_userid=u.user_id where l.list_id=#{listId}
    </select>
    <resultMap id="UserListMap" type="Lists">
        <id property="listId" column="list_id"/>
        <result property="listTitle" column="list_title"/>
        <result property="listImg" column="list_img"/>
        <result property="listTime" column="list_time"/>
        <result property="listUserId" column="list_userid"/>
        <result property="listDetails" column="list_details"/>
        <result property="listType" column="list_type"/>
        <result property="listPlayNum" column="list_playnum"/>
        <association property="user" javaType="User">
            <id property="userId" column="user_id"/>
            <result property="userName" column="user_name" />
            <result property="userPhoto" column="user_photo" />
        </association>
    </resultMap>
	<!--通过用户id和歌单id，判断此歌单是否收藏 -->
    <select id="isCol" resultType="int">
        select count(*) from userlist where userlist_listid=#{listId} and userlist_userid = #{userId}
    </select>
	<!--通过用户id和歌单id，将此歌单收藏 -->
    <insert id="addCol">
        insert into userlist (userlist_listid,userlist_userid) value (#{listId},#{userId})
    </insert>
	<!--通过用户id和歌单id，将此歌单取消收藏 -->
    <delete id="delCol">
        delete from userlist where userlist_listid =#{listId} and userlist_userid = #{userId}
    </delete>

SongMapper.xml

因为歌手列表不光显示歌曲信息，还有歌手名，专辑名，所以采用一对一的复合查询
在这里插入图片描述

    <select id="querySongOfList" resultMap="SongMap" parameterType="int">
        select * from songlist sl  left join song s on s.song_id=sl.songlist_songid left join album a on s.song_album=a.album_id left join singer si on s.song_singer=si.singer_id where sl.songlist_listid=#{listId}
    </select>

    <resultMap id="SongMap" type="Song">
        <result property="songId" column="song_id"/>
        <result property="songName" column="song_name"/>
        <result property="songSinger" column="song_singer"/>
        <result property="songFilePath" column="song_filepath"/>
        <result property="songAlbum" column="song_album"/>
        <result property="songLyc" column="song_lyc"/>
        <association property="album" javaType="Album">
            <id property="albumId" column="album_id"/>
            <result property="albumName" column="album_name" />
            <result property="albumImg" column="album_img" />
        </association>
        <association property="singer" javaType="Singer">
            <id property="singerId" column="singer_id"/>
            <result property="singerName" column="singer_name"/>
        </association>
    </resultMap>

3. 前端

前端和用户主页很相似
在这里插入图片描述
在这里插入图片描述
收藏歌单，收藏歌曲，当前播放列表后面再写。

丿盆鱼宴
关注
  • 2
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
springboot＋vue实战（音乐网站）
07-03
可以当大作业或毕设，也可以自己听歌使用
基于Springboot+vue+mysql的音乐网系统设计与实现（源码）.zip
04-27
《基于Springboot+Vue+MySQL的音乐网系统设计与实现》 本项目是一个完整的音乐网系统，采用现代Web开发技术栈，包括Springboot后端框架、Vue.js前端框架以及MySQL数据库，旨在提供一个功能完善的音乐播放及管理平台...
基于Java+SpringBoot+Vue的在线音乐网站设计和实现
力挽狂澜的POWER
09-21 820
大数据时代下，数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求，利用互联网服务于其他行业，促进生产，已经是成为一种势不可挡的趋势。在音乐播放的要求下，开发一款整体式结构的在线音乐网站，将复杂的系统进行拆分，能够实现对需求的变化快速响应、系统稳定性的保障，能保证平台可持续、规模化发展的要求。
nodejs基于Vue的音乐网站的设计与实现
QQ3166678367的博客
06-04 323
随着时代变迁，网络时代的快速发展，音乐网站作为一种大众的在线网站服务，为绝大多数热爱音乐的网络用户提供了很大的便捷，让更多的用户有不同的选择。所以，为了让用户可以更方便快捷、安全地实现对歌名搜索去查找自己想要的歌曲，可以随时随地的试听和缓存音乐、将歌曲增加到自己的喜欢里、也有专门的网站留言板以供用户进行反馈从而实现网站的进一步完善，所以需要搭建一个自由度高、更安全的音乐网站。在纯粹的利益驱使下，一部分音乐网站追逐自身的利益，一昧的追逐当代年轻人喜欢的歌曲，因此造成了网络音乐资源类型内容结构的严重失衡。
毕业设计：基于Springboot + Vue仿网易云音乐网站（一）开源
热门推荐
weixin_44764019的博客
11-30 1万+
一、项目介绍。 最近自学了springboot、vue、redis等技术，为了巩固，决定自己做个小网站玩玩，把学到的东西都使用一下。 工具：Idea、Hbuilder X、Navicat、Xshell、Xftp。 环境：Jdk，Mysql，Redis、Node.js、 ..................
SpringBoot+vue仿网易云音乐网站（二）-数据库设计
weixin_44764019的博客
12-01 7092
一、需求分析 仿网易云，那么需求的话就照着网易云音乐来做了。 首先可以听歌，可以查看歌手，歌手又有对应的专辑，有用户，用户可以新建歌单，收藏歌单，歌单可以增删歌曲，用户还可以评论歌曲、专辑、歌单，还有粉丝功能，首页还有一个轮播图等…。 二、数据库设计详解 综合需求可以得出，共有以下11张表。 1). 歌曲表 2). 歌手表 3). 专辑表 4). 歌单表 5). 歌单歌曲表 6). 用户表 7). 用户收藏歌曲表 8). 用户收藏歌单表 9). 粉丝表 10). 评论表 11). 轮播图表 下面对每一张表做
基于 SpringBoot + VUE 【爱音乐管理系统】 平台设计与实现
JavaPub
05-21 1138
随着互联网的发展和多媒体技术的进步,音乐已经成为人们生活中不可或缺的一部分。音乐网站和音乐流媒体已经成为大多数人获取和欣赏音乐的主要平台。然而,现有的诸如QQ音乐、网易云音乐、酷狗音乐等音乐网站,主要面向普通听众,提供歌曲搜索、播放和推荐服务。本课题拟设计并开发一个面向“高端音乐发烧友”的音乐网站系统,除具备普通音乐网站的基本功能外,还提供更为丰富和深入的音乐内容和交互体验。用户可以在网站构建自己的音乐社区圈子,与志同道合的发烧友交流分享。
计算机毕业设计 | SpringBoot+vue移动端音乐网站 音乐播放器(附源码)
说书客
01-07 2370
本音乐网站的开发主要利用 VUE 框架开发前台和后台，后端接口用 Spring Boot + MyBatis 来实现，数据库使用的是 MySQL。项目功能：歌曲搜索，歌单分类，歌手分类，仿网易云音乐播放，音乐收藏，音乐评论，歌单管理，用户管理，歌单管理
Spring Boot + Vue 开发网易云，QQ音乐（附源码）！
码农code之路
05-21 1714
来源：segmentfault.com/a/1190000021376934前言虽然 B/S 是目前开发的主流，但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无...
java计算机毕业设计（附源码）仿网易云的音乐播放器（springboot+mysql+maven+论文)
and866的博客
04-18 354
首先，它能够为用户提供一个新的平台，让他们在现有的选择之外有更多样的选择，尤其是在当前市场中存在垄断趋势时，这种多样性显得尤为重要。最后，仿制的过程也是一种创新的开始，它为开发者提供了一个基础框架，在此基础上可以探索新功能、新理念，甚至可能诞生出超越原型产品的新形态，为整个音乐播放器市场带来新的活力和发展方向。仿网易云的音乐播放器，旨在借鉴其优秀的设计理念和用户体验，同时融入新的创意与功能，以适应不断变化的市场需求和用户的多样化需求。操作系统：win7以上，最好是win10。服务器：Tomcat7.0。
基于springboot+vue协同算法的java个性化音乐推荐系统
QQ58850198的博客
06-19 382
本个性化音乐推荐系统以springboot作为框架，b/s模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块：首页，个人中心，用户管理，歌曲类型管理，明星歌手管理，歌曲音乐管理，歌曲mv管理，系统管理等模块，通过这些模块的实现能够基本满足个性化音乐推荐的操作。首页：登录注册，轮播（管理员推荐内容），搜索功能，推荐歌曲（系统推荐）个人页面：喜欢的音乐，个人资料修改，发出的评论，密码修改。我喜欢的音乐页面：取消标记喜欢的音乐，播放功能。音乐文件的管理，包括添加，修改，删除，歌词管理。
基于Springboot+vue校园求职招聘系统设计和实现论文-基于Springboot+vue校园求职招聘系统设计和实现-论文
02-17
基于Springboot+vue校园求职招聘系统设计和实现论文-基于Springboot+vue校园求职招聘系统设计和实现-论文 论文： ！！！本文档只是论文参考文档！ 需要项目源码、数据库sql、开发文档、毕设咨询等，请私信联系~ ① ...
基于springboot+vue的商城管理系统源码+数据库（高分毕业设计）.zip
06-08
基于springboot+vue的商城管理系统源码+数据库（高分毕业设计）.zip 高分毕业设计项目，代码完整下载可用，纯手打高分毕业设计，也可作为期末大作业和课程设计，小白也可实战。 基于springboot+vue的商城管理系统...
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui）.zip
05-03
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：...
Java毕业设计选题推荐SpringBoot、Vue、JavaWeb毕设项目分享
初尘屿风的博客
02-22 1337
194份完美运行的优秀毕业设计，其中包含117份SpringBoot框架项目，JavaWeb和小程序项目32套，带配套论文的项目48套，价格便宜，团购有优惠
Spring boot 2.0 升级到 3.3.1 的相关问题 （五）
飞一站的博客
07-24 410
解决Spring boot 2.0 升级到3.3.1 版本的druid 配置和Redis配置不生效的问题。
Spring Boot 集成 Kafka
最新发布
Casual_Lei的博客
07-25 613
Spring Boot 与 Kafka 的集成使得消息队列的使用变得更加简单和高效。通过上述步骤，你可以轻松地配置 Kafka、实现生产者和消费者，并利用 Spring Boot 提供的强大功能来处理消息流。了解 Kafka 的高级特性（如事务和异步处理）能够帮助你更好地满足业务需求，确保系统的高可用性和数据一致性。
Spring boot 2.0 升级到 3.3.1 的相关问题 （六）
飞一站的博客
07-24 573
解决Spring boot 2.0 升级到3.3.1 版本的`BeanPostProcessor`警告问题。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值