• 基于 Spring boot + MyBatis 的在线音乐播放系统

    目录

        一、项目截图

        二、创建 SpringBoot 项目

    1、在 IDEA 中创建一个 SpringBoot 项目

    2、设置项目名称

    3、选择项目依赖

    4、选择项目存放路径，就可以创建出一个 SpringBoot 项目

    三、配置数据库和xml

    1、打开application.properties

    2、配置如下信息

    四、数据库设计

    五、工具包

    1、ResponseBodyMessage 类

    2、Constant 类

    3、数据加密

    1. MD5 加密

    MD5 的使用

    2. BCrypt 加密

    Bcrypt 的使用

    3. BCrypt加密与MD5加密的区别：

    六、配置拦截器

    1、创建 config 包，在 config 包中创建 LoginInterceptor 类

    2、在 config 包中创建 AppConfig 类

    七、实现登录模块

    1、登录功能的请求和响应设计

    2、创建 User 类

    3、创建对应的 Mapper 和 Controller

    1. 创建接口 UserMapper

    2. 创建 UserMapper.xml

    4、在 UserMapper 接口中新增 selectByName 方法

    5、创建 UserController 类

    6、登录成功测试

    7、前端代码

    八、实现注册模块

    1、注册功能的请求和响应设计

    2、在 UserMapper 接口新增方法

    3、UserMapper.xml 文件中添加代码

    4、在 UserController 类中添加 register 方法

    5、注册功能测试

    6、前端代码

    九、实现上传音乐模块

    1、上传音乐功能的请求和响应设计

    2、创建 Music 类

    3、创建接口 MusicMapper

    4、创建 MusicMapper.xml

    5、创建 MusicController 类

    6、上传音乐功能测试

    7、前端代码

    十、实现播放音乐模块

    1、播放音乐功能的请求和响应设计

    2、在 MusicController 类中添加 playMusic 方法

    3、播放音乐功能测试

    4、前端代码

    十一、实现删除音乐模块

    1、删除单个音乐

    1. 删除单个音乐的请求和响应设计

    2. 在 MusicMapper 接口中添加代码

    3. MusicMapper.xml 文件中添加代码

    4. 在 MusicController 类中添加 deleteByMusicId 方法

    5. 删除单个音乐功能测试

    6. 前端代码

    2、批量删除选中的音乐

    1. 批量删除选中的音乐的请求和响应设计

    2. 在 MusicController 类中添加 deleteSelMusic 方法

    3. 批量删除选中的音乐功能测试

    4. 前端代码

    十二、实现查询音乐模块

    1、查询音乐的请求和响应设计

    2、在 MusicMapper 接口中添加代码

    3、MusicMapper.xml 文件中添加代码

    4、在 MusicController 类中添加 findMusic 方法

    5、查询音乐功能测试

    1. 查询所有的音乐

    2. 模糊匹配，查询指定的音乐

    6、前端代码

    十三、实现收藏音乐模块

    1、收藏音乐的请求和响应设计

    2、创建 LoveMusic 类

    3、创建接口 LoveMusicMapper

    4、创建 LoveMusicMapper.xml

    5、创建 LoveMusicController 类

    6、收藏音乐功能测试

    7、前端代码

    十四、实现查询收藏的音乐模块

    1、查询收藏音乐的请求和响应设计

    2、在 LoveMusicMapper 接口中添加代码

    3、LoveMusicMapper.xml 文件中添加代码

    4、在 LoveMusicController 类中添加 findLoveMusic 方法

    5、查询收藏音乐功能测试

    1. 查询所有的收藏音乐

    2. 模糊匹配，查询指定的收藏音乐

    6、前端代码

    十五、实现取消收藏音乐模块

    1、取消(移除)收藏音乐的请求和响应设计

    2、在 LoveMusicMapper 接口中添加代码

    3、LoveMusicMapper.xml 文件中添加代码

    4、在 LoveMusicController 类中添加 removeLoveMusic 方法

    5、取消收藏音乐功能测试

    6、前端代码

    十六、完善删除音乐功能

    1、在 LoveMusicMapper 接口中添加代码

    2、LoveMusicMapper.xml 文件中添加代码

    3、调整 MusicController 类中的 deleteMusicByMusicId 和 deleteSelMusic 方法

    4、功能测试

    1. 查询已上传的音乐

     2. 查询已收藏的音乐

    3. 删除已上传的音乐（music 表中的数据）

    4. 上传的音乐删除后，收藏的音乐也会被删除

    一、项目截图

    二、创建 SpringBoot 项目

    1、在 IDEA 中创建一个 SpringBoot 项目

    2、设置项目名称

    3、选择项目依赖

    4、选择项目存放路径，就可以创建出一个 SpringBoot 项目

    三、配置数据库和xml

    1、打开application.properties

    2、配置如下信息

    1. #配置数据库
    2. spring.datasource.url=jdbc:mysql://127.0.0.1:3306/onlinemusic?characterEncoding=utf8&serverTimezone=UTC
    3. spring.datasource.username=你的用户名
    4. spring.datasource.password=你的密码
    5. spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    6.  
    7. #配置xml
    8. mybatis.mapper-locations=classpath:mybatis/**Mapper.xml
    9.  
    10. # 音乐上传后的路径
    11. music.local.path=E:/SaveMusic/(填写存放歌曲的路径)
    12.  
    13. #配置springboot上传文件的大小，默认每个文件的配置最大为15Mb，单次请求的文件的总数不能大于100Mb
    14. spring.servlet.multipart.max-file-size = 15MB
    15. spring.servlet.multipart.max-request-size=100MB
    16.  
    17. # 配置springboot日志调试模式是否开启
    18. debug=true
    19.  
    20. # 设置打印日志的级别，及打印sql语句
    21. #日志级别：trace,debug,info,warn,error
    22. #基本日志
    23. logging.level.root=INFO
    24. logging.level.com.example.onlinemusic.mapper=debug
    25. #扫描的包：druid.sql.Statement类和frank包
    26. logging.level.druid.sql.Statement=DEBUG
    27. logging.level.com.example=DEBUG

    四、数据库设计

    1. -- 创建数据库
    2. drop database if exists `onlinemusic`;
    3. create database if not exists `onlinemusic` character set utf8;
    4. -- 使用数据库
    5. use `onlinemusic`;
    6.  
    7. -- 用户表
    8. DROP TABLE IF EXISTS `user`;
    9. CREATE TABLE `user` (
    10. `userid` INT PRIMARY KEY AUTO_INCREMENT comment '用户id',
    11. `username` varchar(20) NOT NULL comment '用户名',
    12. `password` varchar(255) NOT NULL comment '密码'
    13. );
    14.  
    15. -- 歌曲表
    16. DROP TABLE IF EXISTS `music`;
    17. CREATE TABLE `music` (
    18. `musicid` int PRIMARY KEY AUTO_INCREMENT comment '歌曲id',
    19. `title` varchar(50) NOT NULL comment '歌曲名称',
    20. `singer` varchar(30) NOT NULL comment '歌手',
    21. `time` varchar(13) NOT NULL comment '上传歌曲时间',
    22. `url` varchar(1000) NOT NULL comment '存放歌曲的路径',
    23. `userid` int(11) NOT NULL comment '上传歌曲的用户'
    24. );
    25.  
    26. -- 歌曲收藏表
    27. DROP TABLE IF EXISTS `lovemusic`;
    28. CREATE TABLE `lovemusic` (
    29. `loveid` int PRIMARY KEY AUTO_INCREMENT comment '收藏歌曲的id',
    30. `user_id` int(11) NOT NULL comment '收藏歌曲的用户id',
    31. `music_id` int(11) NOT NULL comment '歌曲id'
    32. );

    五、工具包

    在 package com.example.musicserver 目录下创建一个 tools 包（工具包），在这个包中存放整个项目要使用的工具类。

    1、ResponseBodyMessage 类

    • 设计统一的响应体工具类，因为做任何操作时都需要响应，所以封装一个通用的响应工具类，这个工具类设计成一个泛型类。
    1. package com.example.onlinemusic.tools;
    2.  
    3. import lombok.Data;
    4.  
    5. @Data
    6. public class ResponseBodyMessage {
    7.     private int status; //状态码
    8.  
    9.     private String message; // 返回的信息（出错的原因等）
    10.  
    11.     private T data; // 返回给前端的数据（因为返回的数据类型不确定，可能是 String，boolea，int ...,因此使用泛型）
    12.  
    13.     public ResponseBodyMessage(int status, String message, T data) {
    14.         this.status = status;
    15.         this.message = message;
    16.         this.data = data;
    17.     }
    18. }

    2、Constant 类

    • 这个类用来存储不变的常量。 例如：设置 session 对象中的 key 值，key 是一个不变的字符串。
    • 如果在其他地方获取对应的 session 就可以通过这个类中的字符串进行获取。
    1. package com.example.onlinemusic.tools;
    2.  
    3. public class Constant {
    4.     public static final String USER_SESSION_KEY= "USERINFO_SESSION_KEY"; // 设置 session 中的 key 值
    5. }

    3、数据加密

    1. MD5 加密

    MD5是一个安全的散列算法，输入两个不同的明文不会得到相同的输出值，根据输出值，不能得到原始的明文，即其过程不可逆； 但是虽然不可逆，但是不是说就是安全的。因为自从出现彩虹表后，这样的密码也"不安全"。

    • 彩虹表：彩虹表就是一个庞大的、针对各种可能的字母组合预先计算好的哈希值的集合，不一定是针对MD5算法的，各种算法的都有，有了它可以快速的破解各类密码。越是复杂的密码，需要的彩虹表就越大，现在主流的彩虹表都是100G以上。

    更安全的做法是加盐或者长密码等做法，让整个加密的字符串变的更长，破解时间变慢。密码学的应用安全，是建立在破解所要付出的成本远超出能得到的利益上的。

    • 加盐的做法：盐是在每个密码中加入一些单词来变成一个新的密码，存入数据库当中。

    MD5 的使用

    （1）在 pom.xml 文件中添加依赖（添加到 标签内）

    2. <dependency>
    3. 	<groupId>commons-codecgroupId>
    4. 	<artifactId>commons-codecartifactId>
    5. dependency>
    6. <dependency>
    7. 	<groupId>org.apache.commonsgroupId>
    8. 	<artifactId>commons-lang3artifactId>
    9. 	<version>3.9version>
    10. dependency>

    （2）在 tools 包中创建 MD5Util 类

    1. package com.example.onlinemusic.tools;
    2.  
    3. import org.apache.commons.codec.digest.DigestUtils;
    4.  
    5. public class MD5Util {
    6.     // 定义一个固定的盐值
    7.     private static final String salt = "1j2a3v4a5"; // 盐值可以自定义
    8.  
    9.     public static String md5(String src) {
    10.         return DigestUtils.md5Hex(src);
    11.     }
    12.  
    13.     /**
    14.      * 第一次加密 ：模拟前端自己加密，然后传到后端
    15.      *
    16.      * @param inputPass
    17.      * @return
    18.      */
    19.     public static String inputPassToFormPass(String inputPass) {
    20.         String str = "" + salt.charAt(1) + salt.charAt(3) + inputPass
    21.                 + salt.charAt(5) + salt.charAt(6);
    22.         return md5(str);
    23.     }
    24.  
    25.     /**
    26.      * 第2次MD5加密
    27.      *
    28.      * @param formPass 前端加密过的密码，传给后端进行第2次加密
    29.      * @param salt     用户数据库当中的盐值
    30.      * @return
    31.      */
    32.     public static String formPassToDBPass(String formPass, String salt) {
    33.         String str = "" + salt.charAt(0) + salt.charAt(2) + formPass + salt.charAt(5)
    34.                 + salt.charAt(4);
    35.         return md5(str);
    36.     }
    37.  
    38.     /**
    39.      * 上面两个函数合到一起进行调用
    40.      *
    41.      * @param saltDB
    42.      * @return
    43.      * @paraminputPass
    44.      */
    45.     public static String inputPassToDbPass(String inputPass, String saltDB) {
    46.         String formPass = inputPassToFormPass(inputPass);
    47.         String dbPass = formPassToDBPass(formPass, saltDB);
    48.         return dbPass;
    49.     }
    50.  
    51.     public static void main(String[] args) {
    52.         System.out.println("对用户输入密码进行第1次加密：" + inputPassToFormPass("123456"));
    53.         System.out.println("对用户输入密码进行第2次加密：" + formPassToDBPass(inputPassToFormPass("123456"), salt));
    54.         System.out.println("对用户输入密码进行第2次加密：" + inputPassToDbPass("123456", salt));
    55.     }
    56. }

    运行结果

    不管运行多少次，这个密码是规定的。因为这里没有用随机盐值。当密码长度很大，盐值也是随机的情况下，密码的强度也加大了。破解成本也增加了。

    2. BCrypt 加密

    • Bcrypt 就是一款加密工具，可以比较方便地实现数据的加密工作。也可以简单理解为它内部自己实现了随机加盐处理 。
    • 使用MD5加密，每次加密后的密文其实都是一样的，这样就方便了MD5通过大数据的方式进行破解。
    • Bcrypt生成的密文是60位的，而MD5的是32位的，因此 Bcrypt 破解难度更大。

    Bcrypt 的使用

    （1）在 pom.xml 文件中添加依赖（添加到 标签内）

    2. <dependency>
    3. 	<groupId>org.springframework.securitygroupId>
    4. 	<artifactId>spring-security-webartifactId>
    5. dependency>
    6. <dependency>
    7. 	<groupId>org.springframework.securitygroupId>
    8. 	<artifactId>spring-security-configartifactId>
    9. dependency>

    （2）在springboot启动类添加下面的内容

    1. @SpringBootApplication(exclude =
    2. 		{org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration.class})

    （3）在 tools 包中创建 BCryptTest 测试类

    1. package com.example.onlinemusic.tools;
    2.  
    3. import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
    4.  
    5. public class BCryptTest {
    6.     public static void main(String[] args) {
    7.         //模拟从前端获得的密码
    8.         String password = "123456";
    9.         BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder();
    10.         String newPassword = bCryptPasswordEncoder.encode(password);
    11.         System.out.println("加密的密码为: "+newPassword);
    12.  
    13.          //使用matches方法进行密码的校验
    14.         boolean same_password_result = bCryptPasswordEncoder.matches(password,newPassword);
    15.  
    16.         //返回true
    17.         System.out.println("加密的密码和正确密码对比结果: "+same_password_result);
    18.         boolean other_password_result = bCryptPasswordEncoder.matches("987654",newPassword);
    19.  
    20.         //返回false
    21.         System.out.println("加密的密码和错误的密码对比结果: " + other_password_result);
    22.     }
    23. }

    运行结果（每次运行的生成的密码都不一样）

    • encode方法：对用户密码进行加密。
    • matches方法：参数一，待检验的未加密的密码 。参数二：从数据库中查询出的加密后密码 。

    3. BCrypt加密与MD5加密的区别：

    • BCrypt加密： 一种加盐的单向Hash，不可逆的加密算法，同一种明文（plaintext），每次加密后的密文都不一样，而且不可反向破解生成明文，破解难度很大。
    • MD5加密： 是不加盐的单向Hash，不可逆的加密算法，同一个密码经过hash的时候生成的是同一个hash值，在大多数的情况下，有些经过md5加密的方法将会被破解。
    • Bcrypt生成的密文是60位的。而MD5的是32位的。
    • 目前，MD5和BCrypt比较流行。相对来说，BCrypt比MD5更安全，但加密更慢。
    • 虽然BCrpyt也是输入的字符串+盐，但是与MD5+盐的主要区别是：每次加的盐不同（BCrpyt 中的盐值是随即生成的），导致每次生成的结果也不相同。无法比对！

    六、配置拦截器

    • 未登录的情况下拦截其他页面，登录成功后才可以访问其他界面

    1、创建 config 包，在 config 包中创建 LoginInterceptor 类

    1. package com.example.onlinemusic.config;
    2.  
    3. import com.example.onlinemusic.tools.Constant;
    4. import com.example.onlinemusic.tools.ResponseBodyMessage;
    5. import org.springframework.web.servlet.HandlerInterceptor;
    6.  
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9. import javax.servlet.http.HttpSession;
    10.  
    11. public class LoginInterceptor implements HandlerInterceptor {
    12.     @Override
    13.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    14.         HttpSession session = request.getSession(false);
    15.         if(session == null || session.getAttribute(Constant.USER_SESSION_KEY)==null){
    16.             return false;
    17.         }
    18.         return true;
    19.     }
    20. }

    2、在 config 包中创建 AppConfig 类

    1. package com.example.onlinemusic.config;
    2.  
    3. import org.springframework.context.annotation.Bean;
    4. import org.springframework.context.annotation.Configuration;
    5. import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
    6. import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    7. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    8.  
    9. @Configuration
    10. public class AppConfig implements WebMvcConfigurer {
    11.  
    12.     @Bean
    13.     public BCryptPasswordEncoder getBCryptPasswordEncoder(){
    14.         return  new BCryptPasswordEncoder();
    15.     }
    16.  
    17.     /**
    18.      * 添加拦截器
    19.      * @param registry
    20.      */
    21.     @Override
    22.     public void addInterceptors(InterceptorRegistry registry) {
    23.         // 登录之后才可以访问其他页面
    24.         LoginInterceptor loginInterceptor = new LoginInterceptor();
    25.         registry.addInterceptor(loginInterceptor).
    26.                 // 拦截所有的
    27.                 addPathPatterns("/**")
    28.                 //排除所有的JS
    29.                 .excludePathPatterns("/js/**.js")
    30.                 //排除images下所有的元素
    31.                 .excludePathPatterns("/images/**")
    32.                 .excludePathPatterns("/css/**.css")
    33.                 .excludePathPatterns("/fronts/**")
    34.                 .excludePathPatterns("/player/**")
    35.                 .excludePathPatterns("/login.html")
    36.                 .excludePathPatterns("/register.html")
    37.                 //排除登录和注册接口
    38.                 .excludePathPatterns("/user/login")
    39.                 .excludePathPatterns("/user/register");
    40.     }
    41. }

    七、实现登录模块

    1、登录功能的请求和响应设计

    1. 请求：
    2. {
    3.   post, // 使用 post 请求
    4.   /user/login // 请求路径
    5.   data:{ username, password } // 传入的数据
    6. }
    7.  
    8. 响应：
    9. {
    10.   "status": 200,
    11.    "message": "登录成功",
    12.    "data": {
    13.              "id": xxxxx,
    14.              "username": xxxxxx,
    15.              "password": xxxxxxxx
    16.    }
    17.  
    18. }
    19.  
    20. 响应设计字段解释：
    21. {
    22.   状态码为 200 表示成功，-200表示失败
    23.   状态描述信息，描述此次请求成功或者失败的原因
    24.   返回的数据，请求成功后，需要给前端的数据信息（返回用户id，用户名）
    25. }

    2、创建 User 类

    • 在 package com.example.musicserver.model 包中创建User类
    1. package com.example.onlinemusic.model;
    2.  
    3. import lombok.Data;
    4.  
    5. @Data
    6. public class User {
    7.     private int userId; // 用户id
    8.     private String username; // 用户名
    9.     private String password; // 密码
    10. }

    3、创建对应的 Mapper 和 Controller

    1. 创建接口 UserMapper

    • 在 package com.example.musicserver.mapper 包中创建 UserMapper 接口

    1. package com.example.onlinemusic.mapper;
    2.  
    3. import com.example.onlinemusic.model.User;
    4. import org.apache.ibatis.annotations.Mapper;
    5.  
    6. @Mapper
    7. public interface UserMapper {
    8.     User login(User loginUser);
    9. }

    2. 创建 UserMapper.xml

    • 在resource目录下，新建 mybatis 文件夹，新建 UserMapper.xml，在 UserMapper.xml 文件中添加配置。
    1. "1.0" encoding="UTF-8"?>
    2. mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    3. <mapper namespace="com.example.onlinemusic.mapper.UserMapper">
    4.     <select id="login" resultType="com.example.onlinemusic.model.User">
    5.         select * from user where username=#{username} and password=#{password}
    6.     select>
    7.  
    8.     <select id="selectByName" resultType="com.example.onlinemusic.model.User">
    9.         select * from user where username=#{username};
    10.     select>
    11.  
    12. mapper>

    4、在 UserMapper 接口中新增 selectByName 方法

    1. // 通过用户名查询用户是否存在（用户名是唯一的）
    2. User selectByName(String username);

    5、创建 UserController 类

    • 在 package com.example.musicserver.controller 包下，创建 UserController 类
    1. package com.example.onlinemusic.controller;
    2.  
    3. import com.example.onlinemusic.mapper.UserMapper;
    4. import com.example.onlinemusic.model.User;
    5. import com.example.onlinemusic.tools.Constant;
    6. import com.example.onlinemusic.tools.ResponseBodyMessage;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
    9. import org.springframework.web.bind.annotation.RequestMapping;
    10. import org.springframework.web.bind.annotation.RequestParam;
    11. import org.springframework.web.bind.annotation.RestController;
    12.  
    13. import javax.servlet.http.HttpServletRequest;
    14.  
    15. @RestController
    16. @RequestMapping("/user")
    17. public class UserController {
    18.     @Autowired
    19.     private UserMapper userMapper;
    20.  
    21.     // 使用 BCrypt 对密码进行加密
    22.     @Autowired
    23.     private BCryptPasswordEncoder bCryptPasswordEncoder;
    24.  
    25.     @RequestMapping("/login")
    26.     // 传入用户名和密码
    27.     public ResponseBodyMessage login(@RequestParam String username, @RequestParam String password, HttpServletRequest request){
    28.  
    29.         // 调用 UserMapper 接口
    30.         User user = userMapper.selectByName(username);
    31.  
    32.         // 判断是否登录成功
    33.         if(user != null){
    34.             System.out.println("登录成功"); // 可以在控制台中打印登录信息
    35.  
    36.             // 判断当前用户输入的密码(password) 与 数据库中查询到的密码(加密的密码，getPassword())是否匹配
    37.             boolean flag = bCryptPasswordEncoder.matches(password,user.getPassword());
    38.  
    39.             if(!flag){
    40.                 // 密码不匹配，登录失败
    41.                 return new ResponseBodyMessage<>(-200,"用户名或密码错误",user);
    42.             }
    43.  
    44.             // 如果登录成功就将信息写入到 session 中（在 session 中存储了一个用户信息对象,此后可以随时从 session 中将这个对象取出来进行一些操作）
    45.             request.getSession().setAttribute(Constant.USER_SESSION_KEY,user);
    46.             // 状态码为200,表示登录成功,并返回用户信息
    47.             return   new ResponseBodyMessage<>(200,"登录成功",user);
    48.         }else{
    49.             System.out.println("登录失败");
    50.             // 状态码为500,表示登录失败,并返回用户信息
    51.             return   new ResponseBodyMessage<>(-200,"用户名或密码错误",user);
    52.  
    53.         }
    54.     }
    55. }

    6、登录成功测试

    • 在数据库中插入一条数据，启动项目，使用 postman 进行测试。

    7、前端代码

    1.

    八、实现注册模块

    1、注册功能的请求和响应设计

    1. 请求：
    2. {
    3.   post, // 使用 post 请求
    4.   /user/register // 请求路径
    5.   data:{ username, password } // 传入的数据
    6. }
    7.  
    8. 响应：
    9. {
    10.   "status": 200,
    11.    "message": "注册成功",
    12.    "data": {
    13.              "id": xxxxx,
    14.              "username": xxxxxx,
    15.              "password": xxxxxxxx
    16.    }
    17.  
    18. }
    19.  
    20. 响应设计字段解释：
    21. {
    22.   状态码为 200 表示成功，-200表示失败
    23.   状态描述信息，描述此次请求成功或者失败的原因
    24.   返回的数据，请求成功后，需要给前端的数据信息（返回用户id，用户名）
    25. }

    2、在 UserMapper 接口新增方法

    1.     // 输入用户名和密码，注册账号
    2.     boolean insertInToValues(String username,String password);

    3、UserMapper.xml 文件中添加代码

    1.     <insert id="insertInToValues" >
    2.         insert into user(username,password)
    3.         values(#{username},#{password});
    4.     insert>

    4、在 UserController 类中添加 register 方法

    1.     /**
    2.      * 用户注册
    3.      * @param username
    4.      * @param password
    5.      * @return
    6.      */
    7.     @RequestMapping("/register")
    8.     public ResponseBodyMessage register(@RequestParam String username,@RequestParam String password) {
    9.         User user1 = userMapper.selectByName(username);
    10.         if(user1 != null) {
    11.             return new ResponseBodyMessage<>(-1,"当前用户已经存在",false);
    12.         }else {
    13.             String newPassword = bCryptPasswordEncoder.encode(password);
    14.             boolean flag = userMapper.insertInToValues(username,newPassword);
    15.             if(flag == true){
    16.                 return new ResponseBodyMessage<>(200,"注册成功",true);
    17.             }else{
    18.                 return new ResponseBodyMessage<>(-200,"注册失败",false);
    19.             }
    20.         }
    21.     }

    5、注册功能测试

    6、前端代码

    1.

    九、实现上传音乐模块

    1、上传音乐功能的请求和响应设计

    1. 请求：
    2. {
    3.     post, // 使用 post 请求
    4.     /music/upload // 请求路径
    5.     {singer，MultipartFile file}，//上传歌手，歌曲文件
    6. } 
    7.  
    8. 响应：
    9. {
    10.     "status": 200, 
    11.     "message": "上传成功！",
    12.     "data": true
    13. }
    14.  
    15. 响应设计字段解释：
    16. {
    17.   状态码为 200 表示成功，-200 表示失败
    18.   状态描述信息，描述此次请求成功或者失败的原因
    19.   返回的数据，请求成功后，需要给前端的数据信息，true 表示上传成功，false 表示上传失败
    20. }

    2、创建 Music 类

    • 在 package com.example.musicserver.model 包中创建 Music 类
    1. package com.example.onlinemusic.model;
    2.  
    3. import lombok.Data;
    4.  
    5. @Data
    6. public class Music {
    7.     private int musicId; // 歌曲id
    8.     private String title; // 歌曲名称
    9.     private String singer; //歌手
    10.     private String time; // 上传歌曲的时间
    11.     private String url; // 上传歌曲的路径
    12.     private int userId; // 上传歌曲的用户
    13. }

    3、创建接口 MusicMapper

    • 在 package com.example.musicserver.mapper 包中创建 MusicMapper接口
    1. package com.example.onlinemusic.mapper;
    2.  
    3. import org.apache.ibatis.annotations.Mapper;
    4.  
    5. @Mapper
    6. public interface MusicMapper {
    7.     /**
    8.      *  插入音乐
    9.      * @param title
    10.      * @param singer
    11.      * @param time
    12.      * @param url
    13.      * @param userId
    14.      * @return
    15.      */
    16.     int insert(String title,String singer,String time,String url,int userId);
    17.  
    18.     /**
    19.      *  查询歌曲名
    20.      * @param title
    21.      * @return
    22.      */
    23.     List selectBytitle(String title);
    24. }

    4、创建 MusicMapper.xml

    • 在 package resources.mybatis 下创建 MusicMapper.xml 文件，在 MusicMapper.xml 文件中添加配置。
    1. "1.0" encoding="UTF-8"?>
    2. mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    3. <mapper namespace="com.example.onlinemusic.mapper.UserMapper">
    4.  
    5.     <insert id="insert">
    6.         insert into music(title,singer,time,url,userId)
    7.         values(#(title),#(singer),#(time),#(url),#(userId));
    8.     insert>
    9.  
    10.     <select id="selectBytitle" resultType="com.example.onlinemusic.model.Music">
    11.         select * from music where title = #{title};
    12.     select>
    13.  
    14. mapper>

    5、创建 MusicController 类

    • 在 package com.example.musicserver.controller 包下，创建 MusicController 类
    1. package com.example.onlinemusic.controller;
    2.  
    3. import com.example.onlinemusic.mapper.LoveMusicMapper;
    4. import com.example.onlinemusic.mapper.MusicMapper;
    5. import com.example.onlinemusic.model.Music;
    6. import com.example.onlinemusic.model.User;
    7. import com.example.onlinemusic.tools.Constant;
    8. import com.example.onlinemusic.tools.ResponseBodyMessage;
    9. import org.apache.ibatis.binding.BindingException;
    10. import org.springframework.beans.factory.annotation.Autowired;
    11. import org.springframework.beans.factory.annotation.Value;
    12. import org.springframework.http.ResponseEntity;
    13. import org.springframework.web.bind.annotation.RequestMapping;
    14. import org.springframework.web.bind.annotation.RequestParam;
    15. import org.springframework.web.bind.annotation.RestController;
    16. import org.springframework.web.multipart.MultipartFile;
    17.  
    18. import javax.servlet.http.HttpServletRequest;
    19. import javax.servlet.http.HttpServletResponse;
    20. import javax.servlet.http.HttpSession;
    21. import java.io.File;
    22. import java.io.IOException;
    23. import java.nio.file.Files;
    24. import java.text.SimpleDateFormat;
    25. import java.util.Date;
    26. import java.util.List;
    27.  
    28.  
    29. @RestController
    30. @RequestMapping("/music")
    31. public class MusicController {
    32.  
    33.     // 在配置文件中添加歌曲路径
    34.     @Value("${music.local.path}")
    35.     private String SAVE_PATH;
    36.  
    37.     @Autowired
    38.     private MusicMapper musicMapper;
    39.  
    40.     @Autowired
    41.     private LoveMusicMapper loveMusicMapper;
    42.  
    43.     /**
    44.      *  上传音乐
    45.      *  请求路径：/music/upload
    46.      * @param singer 上传歌手
    47.      * @param file 上传歌曲
    48.      * @param request 请求，验证是否登录
    49.      * @return 返回true表示上传成功，返回false表示上传失败
    50.      */
    51.     @RequestMapping("/upload")
    52.     public ResponseBodyMessage insertMusic(@RequestParam String singer, @RequestParam ("filename")MultipartFile file, HttpServletRequest request, HttpServletResponse response){
    53.  
    54.         // 1. 检查是否登录
    55.         HttpSession session = request.getSession(false);
    56.         if(session == null || session.getAttribute(Constant.USER_SESSION_KEY)==null){
    57.             System.out.println("没有登录");
    58.             return  new ResponseBodyMessage<>(-200,"请登录后再进行上传",false);
    59.         }
    60.  
    61.         // 2. 获取的是文件的完整名称，包括文件名称+文件拓展名
    62.         String fileNameAndType = file.getOriginalFilename();
    63.  
    64.         // 3. 查询数据库中是否存在当前要上传的音乐（歌曲名+歌手）
    65.         /**
    66.          *  获取标题（标题不包含后缀.mp3）
    67.          *  使用 lastIndexOf 从后向前找第一个 .
    68.          */
    69.         int index = fileNameAndType.lastIndexOf(".");
    70.         String title = fileNameAndType.substring(0,index);
    71.  
    72.         // 使用 list 存放歌曲，获取歌曲名
    73.         List list = musicMapper.selectBytitle(title);
    74.         if(list != null){
    75.             for(Music music : list){
    76.                 // 判断当前上传的歌曲+歌手在数据库中是否存在，如果存在则上传失败（歌曲名+歌手 不能重复）
    77.                 if(music.getSinger().equals(singer)){
    78.                     return new ResponseBodyMessage<>(-200,"上传失败，数据库中存在此歌曲，不能重复上传",false);
    79.                 }
    80.             }
    81.         }
    82.  
    83.         // 2. 数据上传到服务器
    84.  
    85.         // 上传文件路径
    86.         String path = SAVE_PATH+fileNameAndType;
    87.  
    88.         // 上传文件
    89.         File dest = new File(path);
    90.         if(!dest.exists()){
    91.             //如果路径不存在就创建目录
    92.             dest.mkdir();
    93.         }
    94.         try {
    95.             // 将接收到的文件传输到给定目标路径
    96.             file.transferTo(dest);
    97.         } catch (IOException e) {
    98.             e.printStackTrace();
    99.             return new ResponseBodyMessage<>(-200,"上传失败，服务器出现问题",false);
    100.         }
    101.  
    102.         // 3. 判断上传的文件是否为mp3文件（判断是否存在 TAG 字符）
    103.         File file1 = new File(path);
    104.         byte[] bytes = null;
    105.         try {
    106.             bytes = Files.readAllBytes(file1.toPath());
    107.             if(bytes == null){
    108.                 return new ResponseBodyMessage<>(-200,"上传失败，文件不存在",false);
    109.             }
    110.             String str = new String(bytes);
    111.             if(!str.contains("TAG")){
    112.                 file1.delete();
    113.                 return new ResponseBodyMessage<>(-200,"上传的文件不是mp3文件",false);
    114.             }
    115.         } catch (IOException e) {
    116.             e.printStackTrace();
    117.             return new ResponseBodyMessage<>(-200,"上传失败，服务器出现问题",false);
    118.         }
    119.  
    120.         // 4. 将数据上传到数据库中（1. 准备数据      2. 调用 insert）
    121.  
    122.  
    123.         /**
    124.          *  获取 userId
    125.          * 登录成功后将用户信息写到 session 中，通过 session 中key值(Constant.USERINFO) 就可以获取到对应的 value 值(用户信息)
    126.          */
    127.         User user = (User)session.getAttribute(Constant.USER_SESSION_KEY);
    128.         // 获取用户Id
    129.         int userId = user.getUserId();
    130.  
    131.         /**
    132.          *  url 的作用： 播放音乐->发送 http 请求
    133.          */
    134.         String url = "/music/get?path="+title; // 将 url 存入数据库时不用加后缀 .mp3，在取数据的时候加一个后缀就可以了
    135.  
    136.         /**
    137.          *  获取上传的时间
    138.          *  将获取的时间格式化为：年-月-日 的形式
    139.          */
    140.         SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
    141.         String time = simpleDateFormat.format(new Date());
    142.  
    143.         // 插入数据
    144.         try {
    145.             int ret = musicMapper.insert(title,singer,time,url,userId);
    146.             if(ret == 1){
    147.                 // 数据插入成功
    148.                 // 这里应该跳转到音乐列表页面
    149.                 response.sendRedirect("/list.html");
    150.                 return new ResponseBodyMessage<>(200,"数据库上传成功",true);
    151.             }else{
    152.                 // 数据插入失败
    153.                 return new ResponseBodyMessage<>(-200,"数据库上传失败",false);
    154.             }
    155.         }catch (BindingException | IOException e){
    156.             // 数据库上传失败，将上传到文件夹中的数据删除
    157.             dest.delete();
    158.             e.printStackTrace();
    159.             return new ResponseBodyMessage<>(-200,"数据库上传失败",false);
    160.         }
    161.     }
    162.  
    163.     /**
    164.      *  播放音乐
    165.      *  请求路径：/music/get?get=xxx.mp3
    166.      * @param path
    167.      * @return
    168.      */
    169.         @RequestMapping("/get")
    170.         public ResponseEntity<byte[]> playMusic(@RequestParam String path) {
    171.         File file = new File(SAVE_PATH+path);
    172.         byte[] bytes = null;
    173.             try {
    174.                 bytes  = Files.readAllBytes(file.toPath()); // 将文件路径中的文件以字节的形式读取，放到 bytes 数组中
    175.                 if(bytes == null){
    176.                     // 如果没有读取的文件，则返回状态码 400
    177.                     return ResponseEntity.badRequest().build();
    178.                 }
    179.                 // 成功读取到文件
    180.                 return ResponseEntity.ok(bytes);
    181.             } catch (IOException e) {
    182.                 e.printStackTrace();
    183.             }
    184.             // 如果没有读取的文件，则返回状态码 400
    185.             return ResponseEntity.badRequest().build();
    186.     }
    187.  
    188.     /**
    189.      * 删除单个音乐
    190.      * 请求路径：/music/delete?musicId=x
    191.      * @param musicId
    192.      * @return
    193.      */
    194.     @RequestMapping("/delete")
    195.     public ResponseBodyMessage deleteMusicByMusicId(@RequestParam String musicId){
    196.         /**
    197.          * 1. 检查待删除的音乐是否存在
    198.          * 2. 如果存在要删除的音乐
    199.          *      1. 删除数据库中的数据
    200.          *      2. 删除服务器上的数据
    201.          */
    202.         // 检查待删除的音乐是否存在
    203.         Music music = musicMapper.findMusicById(Integer.parseInt(musicId));
    204.         if(music == null){
    205.             System.out.println("在控制台打印日志：没有要删除的音乐id");
    206.             return new ResponseBodyMessage<>(-200,"要删除的音乐不存在",false);
    207.         }else{
    208.             // 调用 musicMapper 接口中的 deleteMusicById 方法删除数据库中的数据
    209.            int ret = musicMapper.deleteMusicById(Integer.parseInt(musicId));
    210.  
    211.            if(ret == 1){
    212.                // 成功删除数据库中的数据
    213.                /*int index = music.getUrl().lastIndexOf("=");
    214.                String fileName = music.getUrl().substring(index+1);*/
    215.  
    216.                String fileName = music.getTitle();
    217.                // 根据存放音乐的路径删除服务器中的数据
    218.                File file = new File(SAVE_PATH+fileName+".mp3");
    219.                System.out.println("在控制台打印日志：当前音乐的路径："+file.getPath());
    220.                 //对删除服务器中的数据进行判断
    221.                if(file.delete()){
    222.                    // 删除成功
    223.                    return new ResponseBodyMessage<>(200,"音乐删除成功",true);
    224.                }else{
    225.                    return new ResponseBodyMessage<>(-200,"服务器中的音乐删除失败",false);
    226.                }
    227.            }else{
    228.                return new ResponseBodyMessage<>(-200,"数据库中的音乐删除失败",false);
    229.            }
    230.         }
    231.     }
    232.  
    233.     /**
    234.      *  批量删除选中的音乐
    235.      *  请求路径：/music/deleteSel
    236.      * @param musicId
    237.      * @return
    238.      */
    239.     @RequestMapping("/deleteSel")
    240.     public ResponseBodyMessage deleteSelMusic(@RequestParam("musicId[]") List musicId) {
    241.         System.out.println("在控制台打印日志：所有音乐的 Id："+musicId);
    242.         int sum = 0; // 统计删除的音乐
    243.         for (int i = 0; i < musicId.size(); i++) {
    244.             Music music = musicMapper.findMusicById(musicId.get(i));
    245.             if (music == null) {
    246.                 System.out.println("没有要删除的音乐id");
    247.                 return new ResponseBodyMessage<>(-200, "要删除的音乐不存在", false);
    248.             }
    249.             int ret = musicMapper.deleteMusicById(musicId.get(i));
    250.             if (ret == 1) {
    251.                 // 成功删除数据库中的数据
    252.                 String fileName = music.getTitle();
    253.                 // 根据存放音乐的路径删除服务器中的数据
    254.                 File file = new File(SAVE_PATH + fileName + ".mp3");
    255.                 System.out.println("当前音乐的路径：" + file.getPath());
    256.                 //对删除服务器中的数据进行判断
    257.                 if (file.delete()) {
    258.                     // 成功删除一条数据，sum 就加上 ret（数据库中成功删除）
    259.                     sum += ret;
    260.                 } else {
    261.                     return new ResponseBodyMessage<>(-200, "服务器中的音乐删除失败", false);
    262.                 }
    263.             }else{
    264.                 return new ResponseBodyMessage<>(-200,"数据库中的音乐删除失败",false);
    265.             }
    266.         }
    267.         if(sum == musicId.size()){
    268.             // 选中的数据全部删除成功
    269.             System.out.println("在控制台打印日志：选择中的歌曲删除成功");
    270.             return new ResponseBodyMessage<>(200,"音乐删除成功",true);
    271.         }else{
    272.             System.out.println("在控制台打印日志：选择中的歌曲删除失败");
    273.             return new ResponseBodyMessage<>(-200,"音乐删除失败",false);
    274.         }
    275.     }
    276.  
    277.     /**
    278.      *  查询音乐
    279.      * @param musicName
    280.      * @return
    281.      */
    282.     @RequestMapping("/findmusic")
    283.     public ResponseBodyMessage> findMusic(@RequestParam(required = false) String musicName){
    284.         List musicList = null;
    285.         if(musicName != null){
    286.             // 模糊查询，根据歌曲名查询指定的歌曲
    287.             musicList = musicMapper.findMusicByName(musicName);
    288.         }else{
    289.             // 查询所有的音乐
    290.             musicList = musicMapper.findMusic();
    291.         }
    292.         // 查询成功，返回查询到的音乐信息
    293.         return new ResponseBodyMessage<>(200,"查询成功",musicList);
    294.     }
    295. }

    6、上传音乐功能测试

    7、前端代码

    1.     <div class="upload-container">
    2.         <form method="post" enctype="multipart/form-data" action="/music/upload">
    3.             <div class="upload-dialog">
    4.                 <strong>上传本地音乐strong>
    5.                 <em>XiaoXiangYeYu's music upload_musicem>
    6.                 <div class="row">
    7.                     <span>音乐span>
    8.                     <input type="file" id="file" name="filename" placeholder="上传歌曲" class="upload_txtbx"/>
    9.                 div>
    10.                 <div class="row">
    11.                     <span>歌手span>
    12.                     <input type="text" id="singer" name="singer" placeholder="请输入歌手名" class="upload_txtbx"/>
    13.                 div>
    14.                 <div class="row">
    15.                     <input type="submit" id="submit" value="上传歌曲" class="submit_btn"/>
    16.                 div>
    17.             div>
    18.         form>
    19.     div>

    十、实现播放音乐模块

    1、播放音乐功能的请求和响应设计

    1. 请求：
    2. {
    3.     get, // 使用 get 请求
    4.     /music/get?path=xxx.mp3 // 请求路径（数据库中存储的 url）
    5. } 
    6.  
    7. 响应：
    8. {
    9.     音乐数据本身的字节信息 // 服务器将数据以字节的形式返回给客户端，客户端获取到信息后就可以进行解析，然后播放音乐
    10. }

    2、在 MusicController 类中添加 playMusic 方法

    1.    /**
    2.      * 播放音乐
    3.      * 请求路径：/music/get?paht=xxx.mp3
    4.      * @param path
    5.      * @return
    6.      */
    7.         @RequestMapping("/get")
    8.         public ResponseEntity<byte[]> playMusic(@RequestParam String path) {
    9.         File file = new File(SAVE_PATH+path);
    10.         byte[] bytes = null;
    11.             try {
    12.                 bytes  = Files.readAllBytes(file.toPath()); // 将文件路径中的文件以字节的形式读取，放到 bytes 数组中
    13.                 if(bytes == null){
    14.                     // 如果没有读取的文件，则返回状态码 400
    15.                     return ResponseEntity.badRequest().build();
    16.                 }
    17.                 // 成功读取到文件
    18.                 return ResponseEntity.ok(bytes);
    19.             } catch (IOException e) {
    20.                 e.printStackTrace();
    21.             }
    22.             // 如果没有读取的文件，则返回状态码 400
    23.             return ResponseEntity.badRequest().build();
    24.     }

    3、播放音乐功能测试

    4、前端代码

    十一、实现删除音乐模块

    1、删除单个音乐

    1. 删除单个音乐的请求和响应设计

    1. 请求：
    2. {
    3.     post, // 使用 post 请求
    4.     /music/delete, // 请求路径
    5.     musicId // 要删除歌曲的 id
    6. } 
    7.  
    8. 响应：
    9. {
    10.     "status": 200,
    11.     "message": "删除成功！",
    12.     "data": true
    13. }
    14.  
    15. 响应设计字段解释：
    16. {
    17.   状态码为 200 表示成功，-200 表示失败
    18.   状态描述信息，描述此次请求成功或者失败的原因
    19.   返回的数据，请求成功后，需要给前端的数据信息，true 表示删除成功，false 表示删除失败
    20. }

    2. 在 MusicMapper 接口中添加代码

    1.     /**
    2.      * 通过音乐 Id 查询当前音乐是否存在
    3.      * @param musicId
    4.      * @return
    5.      */
    6.     Music findMusicById(int musicId);
    7.  
    8.     /**
    9.      * 通过当前音乐 Id 删除音乐
    10.      * @param musicId
    11.      * @return
    12.      */
    13.     int deleteMusicById(int musicId);

    3. MusicMapper.xml 文件中添加代码

    1.     <select id="findMusicById" resultType="com.example.onlinemusic.model.Music">
    2.         select * from music where musicid = #{musicid};
    3.     select>
    4.  
    5.     <delete id="deleteMusicById" parameterType="java.lang.Integer">
    6.         delete from music where musicid = #{musicid};
    7.     delete>

    4. 在 MusicController 类中添加 deleteByMusicId 方法

    1.     /**
    2.      * 删除单个音乐
    3.      * 请求路径：/music/delete?musicId=x
    4.      * @param musicId
    5.      * @return
    6.      */
    7.     @RequestMapping("/delete")
    8.     public ResponseBodyMessage deleteByMusicId(@RequestParam String musicId){
    9.         /**
    10.          * 1. 检查待删除的音乐是否存在
    11.          * 2. 如果存在要删除的音乐
    12.          *      1. 删除数据库中的数据
    13.          *      2. 删除服务器上的数据
    14.          */
    15.         // 检查待删除的音乐是否存在
    16.         Music music = musicMapper.findMusicById(Integer.parseInt(musicId));
    17.         if(music == null){
    18.             System.out.println("在控制台打印日志：没有要删除的音乐id");
    19.             return new ResponseBodyMessage<>(-200,"要删除的音乐不存在",false);
    20.         }else{
    21.             // 调用 musicMapper 接口中的 deleteMusicById 方法删除数据库中的数据
    22.            int ret = musicMapper.deleteMusicById(Integer.parseInt(musicId));
    23.  
    24.            if(ret == 1){
    25.                // 成功删除数据库中的数据
    26.                String fileName = music.getTitle();
    27.  
    28.                // 根据存放音乐的路径删除服务器中的数据
    29.                File file = new File(SAVE_PATH+fileName+".mp3");
    30.                System.out.println("在控制台打印日志：当前音乐的路径："+file.getPath());
    31.  
    32.                //对删除服务器中的数据进行判断
    33.                if(file.delete()){
    34.                    // 删除成功
    35.                    return new ResponseBodyMessage<>(200,"音乐删除成功",true);
    36.                }else{
    37.                    return new ResponseBodyMessage<>(-200,"服务器中的音乐删除失败",false);
    38.                }
    39.            }else{
    40.                return new ResponseBodyMessage<>(-200,"数据库中的音乐删除失败",false);
    41.            }
    42.         }
    43.     }

    5. 删除单个音乐功能测试

    6. 前端代码

    1.         function deleteInfo(obj){
    2.             console.log(obj);
    3.             $.ajax({
    4.                 url:"/music/delete",
    5.                 type:"POST",
    6.                 data:{
    7.                     "musicId":obj
    8.                 },
    9.                 dataType:"json",
    10.  
    11.                 success:function(data){
    12.                     console.log(data);
    13.                     if(data.data == true){
    14.                         alert("删除成功，重新加载当前页面");
    15.                         window.location.href = "list.html";
    16.                     }else{
    17.                         alert("删除失败");
    18.                     }
    19.                 }
    20.  
    21.             });
    22.         }

    2、批量删除选中的音乐

    1. 批量删除选中的音乐的请求和响应设计

    1. 请求：
    2. {
    3.     post, // 使用 post 请求
    4.     /music/deleteSel, // 请求路径
    5.     data:{
    6.        "id":musicId // 要删除的歌曲 id 的数组
    7.     } 
    8. } 
    9.  
    10. 响应：
    11. {
    12.     "status": 200,
    13.     "message": "批量删除成功！",
    14.     "data": true
    15. }
    16.  
    17. 响应设计字段解释：
    18. {
    19.   状态码为 200 表示成功，-200 表示失败
    20.   状态描述信息，描述此次请求成功或者失败的原因
    21.   返回的数据，请求成功后，需要给前端的数据信息，true 表示删除成功，false 表示删除失败
    22. }

    2. 在 MusicController 类中添加 deleteSelMusic 方法

    1.     /**
    2.      *  批量删除选中的音乐
    3.      *  请求路径：/music/deleteSel
    4.      * @param musicId
    5.      * @return
    6.      */
    7.     @RequestMapping("/deleteSel")
    8.     public ResponseBodyMessage deleteSelMusic(@RequestParam("musicId[]") List musicId) {
    9.         System.out.println("在控制台打印日志：所有音乐的 Id："+musicId);
    10.         int sum = 0; // 统计删除的音乐
    11.         for (int i = 0; i < musicId.size(); i++) {
    12.             Music music = musicMapper.findMusicById(musicId.get(i));
    13.             if (music == null) {
    14.                 System.out.println("没有要删除的音乐id");
    15.                 return new ResponseBodyMessage<>(-200, "要删除的音乐不存在", false);
    16.             }
    17.             int ret = musicMapper.deleteMusicById(musicId.get(i));
    18.             if (ret == 1) {
    19.                 // 成功删除数据库中的数据
    20.                 String fileName = music.getTitle();
    21.                 // 根据存放音乐的路径删除服务器中的数据
    22.                 File file = new File(SAVE_PATH + fileName + ".mp3");
    23.                 System.out.println("当前音乐的路径：" + file.getPath());
    24.                 //对删除服务器中的数据进行判断
    25.                 if (file.delete()) {
    26.                     // 成功删除一条数据，sum 就加上 ret（数据库中成功删除）
    27.                     sum += ret;
    28.                 } else {
    29.                     return new ResponseBodyMessage<>(-200, "服务器中的音乐删除失败", false);
    30.                 }
    31.             }else{
    32.                 return new ResponseBodyMessage<>(-200,"数据库中的音乐删除失败",false);
    33.             }
    34.         }
    35.         if(sum == musicId.size()){
    36.             // 选中的数据全部删除成功
    37.             System.out.println("在控制台打印日志：整体删除成功");
    38.             return new ResponseBodyMessage<>(200,"音乐删除成功",true);
    39.         }else{
    40.             System.out.println("在控制台打印日志：整体删除失败");
    41.             return new ResponseBodyMessage<>(-200,"音乐删除失败",false);
    42.         }
    43.     }
    44. }

    3. 批量删除选中的音乐功能测试

    4. 前端代码

    1.  $(function(){
    2.             $("#submit1").click(function(){
    3.                 var name = $("#exampleInputName2").val();
    4.                 load(name);
    5.                 // window.location.href = "findMusic?musicName="+name;
    6.             });
    7.  
    8.             $.when(load).done(function(){
    9.                 $("#delete").click(function(){
    10.                     var id = new Array(); // 音乐Id
    11.                     var i = 0; // 数组下标
    12.                     // 遍历checkbox
    13.                     $("input:checkbox").each(function(){
    14.                         // 如果被选中,this代表发生事件的dom元素，
    15.                         if($(this).is(":checked")){
    16.                             id[i] = $(this).attr("id");
    17.                             i++;
    18.                         }
    19.                     });
    20.                     console.log(id);
    21.  
    22.                     $.ajax({
    23.                         url:"/music/deleteSel",
    24.                         data:{
    25.                             "musicId":id
    26.                         },
    27.                         dataType:"json",
    28.                         type:"POST",
    29.  
    30.                         success:function(obj){
    31.                             if(obj.data == true){
    32.                                 alert("删除成功");
    33.                                 window.location.href = "list.html";
    34.                             }else{
    35.                                 alert("删除失败");
    36.                             }
    37.                         }
    38.                     });
    39.                 });
    40.             });
    41.  
    42.         });

    十二、实现查询音乐模块

    1、查询音乐的请求和响应设计

    此处查询需要满足两个功能：

    1. 支持模糊查询
    2. 支持传入参数为空，当参数为空时默认查询到所有的音乐
    1. 请求：
    2. {
    3.     get, // 使用 get 请求
    4.     /music/findmusic, // 请求路径
    5.     data:{musicName:musicName}, // 根据歌曲名进行查询
    6. } 
    7.  
    8. 响应：【不给musicName传参】// 如果不传参时默认查询到所有的音乐
    9. {
    10.     "status": 200,
    11.     "message": "查询到了歌曲的信息",
    12.     "data": [
    13.     {
    14.         "id": 19,
    15.         "title": "张靓颖 - 我的梦",
    16.         "singer": "张靓颖",
    17.         "url": "/music/get?path=张靓颖 - 我的梦",
    18.         "time": "2022-08-20",
    19.         "userid": 1
    20.     },
    21.     {
    22.         "id": 20,
    23.         "title": "纯音乐 - Victory",
    24.         "singer": "张三",
    25.         "url": "/music/get?path=纯音乐 - Victory",
    26.         "time": "2022-03-20",
    27.         "userid": 1
    28.     }]
    29. } 
    30.  
    31. 响应：【给musicName传参】// 如果传入参数返回指定查询的歌曲
    32. {
    33.     "status": 200,
    34.     "message": "查询到了歌曲的信息",
    35.     "data": [
    36.     {
    37.         "id": 19,
    38.         "title": "张靓颖 - 我的梦",
    39.         "singer": "张靓颖",
    40.         "url": "/music/get?path=张靓颖 - 我的梦",
    41.         "time": "2022-08-20",
    42.         "userid": 1
    43.     }]
    44. }
    45.  
    46. 响应设计字段解释：
    47. {
    48.   状态码为 200 表示成功
    49.   状态描述信息，描述此次请求成功
    50.   返回的数据，请求成功后给前端的数据信息，返回查询到的音乐信息（歌曲id、歌曲名、歌手、存放歌曲的路径、上传时间、上传用户的id）
    51. }

    2、在 MusicMapper 接口中添加代码

    1.     /**
    2.      * 查询所有的音乐
    3.      * @return
    4.      */
    5.     List findMusic();
    6.  
    7.     /**
    8.      * 模糊查询，根据歌曲名查询指定的歌曲
    9.      * @param musicName
    10.      * @return
    11.      */
    12.     List findMusicByName(String musicName);

    3、MusicMapper.xml 文件中添加代码

    1.     <select id="findMusic" resultType="com.example.onlinemusic.model.Music">
    2.         select * from music ;
    3.     select>
    4.  
    5.     <select id="findMusicByName" resultType="com.example.onlinemusic.model.Music">
    6.         select * from music where title like concat('%', #{musicName}, '%');
    7.     select>

    4、在 MusicController 类中添加 findMusic 方法

    1.     /**
    2.      *  查询音乐
    3.      * @param musicName
    4.      * @return
    5.      */
    6.     @RequestMapping("/findmusic")
    7.     public ResponseBodyMessage> findMusic(@RequestParam(required = false) String musicName){
    8.         List musicList = null;
    9.         if(musicName != null){
    10.             // 模糊查询，根据歌曲名查询指定的歌曲
    11.             musicList = musicMapper.findMusicByName(musicName);
    12.         }else{
    13.             // 查询所有的音乐
    14.             musicList = musicMapper.findMusic();
    15.         }
    16.         // 查询成功，返回查询到的音乐信息
    17.         return new ResponseBodyMessage<>(200,"查询成功",musicList);
    18.     }

    5、查询音乐功能测试

    1. 查询所有的音乐

    2. 模糊匹配，查询指定的音乐

    6、前端代码

    1.