Java项目--网页版音乐播放器(Spring Boot 后端逻辑)

编程入门行业动态更新时间:2024-10-26 06:26:53

一. 数据库设计

user 表

music 表

lovemusic表

二. 配置数据库

三. 登录模块设计

创建User类

创建Mapper

四. 实现登录逻辑

用户请求报文

响应报文

编辑

密码加密

五. 上传音乐模块

服务器上传

数据库上传

六. 播放音乐模块

七. 删除音乐模块

删除单个音乐:

批量删除音乐

八. 查找音乐模块

九. 收藏音乐模块

十. 收藏音乐查询模块

十一. 取消收藏音乐模块

删除的一些细节

本篇博客带大家做一个网页版的音乐播放器项目

技术栈主要是SSM框架, 基本的创建项目就不写了, 直接上正题.

一. 数据库设计

我们的音乐播放器, 需要有登录注册功能, 所以 user 表不可少

其次, 还需要一个音乐库, 作为我们的首页内容

最后, 每个用户都有自己喜欢的音乐, 这是最后一个表

用户和音乐是多对多的关系, 用户可以喜欢多个音乐, 音乐可以被很多人喜欢

user 表

User 表基础就是一个自增主键id, 一个用户名和一个密码

这里密码我们需要加密, 所以给较长的空间.

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
    `id` INT PRIMARY KEY AUTO_INCREMENT,
    `username` varchar(20) NOT NULL,
    `password` varchar(255) NOT NULL
);
INSERT INTO user(username,password)
VALUES("zhangsan","$2a$10$Bs4wNEkledVlGZa6wSfX7eCSD7wRMO0eUwkJH0WyhXzKQJrnk85li");

music 表

音乐同样要一个自增编号, 还需要名称, 歌手, 上传时间, 用于找到音乐的存储位置

最后标识一下这首音乐上传的用户

DROP TABLE IF EXISTS `music`;
    CREATE TABLE `music` (
    `id` int PRIMARY KEY AUTO_INCREMENT,
    `title` varchar(50) NOT NULL,
    `singer` varchar(30) NOT NULL,
    `time` varchar(13) NOT NULL,
    `url` varchar(1000) NOT NULL,
    `userid` int(11) NOT NULL
);

lovemusic表

我们还需要一个表来表示用户喜欢的音乐

DROP TABLE IF EXISTS `lovemusic`;
CREATE TABLE `lovemusic` (
    `id` int PRIMARY KEY AUTO_INCREMENT,
    `user_id` int(11) NOT NULL,
    `music_id` int(11) NOT NULL
);

二. 配置数据库

在 application.properites 文件下来配置文件

填入以下内容:

#配置数据库
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/musicserver?characterEncoding=utf8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=989811
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

#配置xml
mybatis.mapper-locations=classpath:mybatis/**Mapper.xml

#配置springboot上传文件的大小，默认每个文件的配置最大为15Mb，单次请求的文件的总数不能大于100Mb
spring.servlet.multipart.max-file-size = 15MB
spring.servlet.multipart.max-request-size=100MB

# 配置springboot日志调试模式是否开启
debug=true

# 设置打印日志的级别，及打印sql语句
#日志级别：trace,debug,info,warn,error
#基本日志
logging.level.root=INFO
logging.level.example.musicsplayer.mapper=debug

#扫描的包：druid.sql.Statement类和frank包
logging.level.druid.sql.Statement=DEBUG
logging.level.example=DEBUG

三. 登录模块设计

创建User类

创建一个model包, 存放User

@Data 是 lombok 的一个注解, 加上这个我们就不用写Getter和Setter方法了

@Data
public class User {
    private int id;
    private String username;
    private String password;
}

创建Mapper

创建一个mapper包, 用来存放数据库操作接口

初步内容:

@Mapper
public interface UserMapper {
    User login(User user);
}

再在resources下创建mybatis包, 放置mybatis的配置文件和sql语句

配置内容:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis//DTD Mapper 3.0//EN" "http://mybatis/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.musicplayer.mapper.UserMapper">
    <select id="login" resultType="com.example.musicplayer.model.User">
        select * from user where username=#{username} and password=#{password}
    </select>
</mapper>

四. 实现登录逻辑

用户请求报文

建controller包:

写一个登陆的逻辑:

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserMapper userMapper;

    @RequestMapping("/login")
    public void login(@RequestParam String username,
                      @RequestParam String password){
        User userLogin = new User();
        userLogin.setUsername(username);
        userLogin.setPassword(password);

        User user = userMapper.login(userLogin);
        //如果两个数据都能查到, 就说明用户存在, 登录成功
        if (user != null){
            System.out.println("登陆成功!");
        }else {
            System.out.println("登陆失败!");
        }
    }
}

启动项目, 调试一下看能否登录成功

登录成功就说明没有问题了.

响应报文

先创建一个tools包，放我们的JSON响应报文类

在ResponseBodyMessage类中，就是我们的响应报文

@Data
public class ResponseBodyMessage <T> {

    private int status;//状态码(1成功, 0失败)

    private String message;//返回的信息

    private T data;//返回给前端的数据

    public ResponseBodyMessage(int status, String message, T data) {
        this.status = status;
        this.message = message;
        this.data = data;
    }
}

接着我们的登录的逻辑就可以改了，返回值改为返回报文

并在登录成功时创建一个会话

为了以后方便调取这个会话，写一个静态属性包装一下会话名字：

public class Constant {
    public static final String USERINFO_SESSION_KEY = "USERINFO_SESSION_KEY";
}

最后修改好的UserController：

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserMapper userMapper;

    @RequestMapping("/login")
    public ResponseBodyMessage<User> login(@RequestParam String username,
                                           @RequestParam String password,
                                           HttpServletRequest request){
        User userLogin = new User();
        userLogin.setUsername(username);
        userLogin.setPassword(password);

        User user = userMapper.login(userLogin);
        if (user != null){
            System.out.println("登陆成功!");
            request.getSession().setAttribute(Constant.USERINFO_SESSION_KEY, user);
            return new ResponseBodyMessage<>(1, "登陆成功！", userLogin);
        }else {
            System.out.println("登陆失败!");
            return new ResponseBodyMessage<>(0, "登陆失败！", userLogin);
        }
    }
}

我们还可以用 postman 抓个包：

密码加密

密码这块，我们肯定不能明文传输，否则抓个包就获取到了

我们这里采用 BCrypt 加密，它能够提供随机的盐值，不可逆，更加安全

先在 pom.xml 里添加 BCrypt 的依赖

<!-- security依赖包 （加密）-->
<dependency>
	<groupId>org.springframework.security</groupId>
	<artifactId>spring-security-web</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.security</groupId>
	<artifactId>spring-security-config</artifactId>
</dependency>

接着在启动类的注解上加一行：

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

	public static void main(String[] args) {
		SpringApplication.run(MusicplayerApplication.class, args);
	}

}

因为我们用BCrypt加密时，导入了一个spring-security框架

这个框架有自己的配置，我们需要忽略这些配置，所以启动时加上这一行

接下来开始进行BCrypt加密：

我们先添加一个查找用户名是否存在的方法, 因为密码被加密了

如果用户名存在我们就进行解密操作, 再匹配密码正确与否

@Mapper
public interface UserMapper {
    User login(User user);

    User selectByName(String username);
}

<select id="selectByName" resultType="com.example.musicplayer.model.User">
    select * from user where username=#{username}
</select>

接下来开始对 UserController 类修改

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    BCryptPasswordEncoder bCryptPasswordEncoder;

    @Autowired
    private UserMapper userMapper;

    @RequestMapping("/login")
    public ResponseBodyMessage<User> login(@RequestParam String username,
                                           @RequestParam String password,
                                           HttpServletRequest request){

        User user = userMapper.selectByName(username);

        if (user != null){
            boolean flag = bCryptPasswordEncoder.matches(password, user.getPassword());
            if (!flag){
                return new ResponseBodyMessage<>(0, "用户名或密码错误！", user);
            }
            System.out.println("登陆成功!");
            request.getSession().setAttribute(Constant.USERINFO_SESSION_KEY, user);
            return new ResponseBodyMessage<>(1, "登陆成功！", user);
        }else {
            System.out.println("登陆失败!");
            return new ResponseBodyMessage<>(0, "登陆失败！", user);
        }
    }
}

当然，为了方便起见，我们为加密类 BCryptPasswordEncoder 写一个注入：

创建 config 包，里面存放着很多 Bean

创建一个存放 Bean 的类，将加密类存放到 Spring 中

@Configuration
public class AppConfig {
    @Bean
    public BCryptPasswordEncoder getBCryptPasswordEncoder(){
        return new BCryptPasswordEncoder();
    }
}

这样以后需要使用该类时，直接注入即可。

接着使用Postman抓包测试：

五. 上传音乐模块

服务器上传

首先, 上传音乐肯定用 post

结束了用户模块, 我们需要一个音乐模块

@Data
public class Music {
    private int id;
    private String title;
    private String singer;
    private String time;
    private String url;
    private int userid;
}

接着写music的操作方法:

第一步: 用会话session检查是否登录

第二步: 指定文件保存路径, 并保存

@RestController
@RequestMapping("/music")
public class MusicController {

    @Value("${music.local.path}")
    private String SAVE_PATH;

    @RequestMapping("/upload")
    public ResponseBodyMessage<Boolean> insertMusic(String singer, @RequestParam("filename") MultipartFile file, HttpServletRequest request){
        //检查是否登录
        HttpSession session = request.getSession(false);
        if (session == null || session.getAttribute(Constant.USERINFO_SESSION_KEY) == null){
            return new ResponseBodyMessage<>(0, "请登录后上传", false);
        }

        String fileName = file.getOriginalFilename();// 获取文件名
        System.out.println("文件名: " + fileName);
        
        String path = SAVE_PATH + "/" + fileName;// 指定文件保存路径
        File destFile = new File(path);
        System.out.println("文件路径: " + destFile.getPath());
        
        if (!destFile.exists()){
            destFile.mkdirs();// 别少加了 s
        }
        
        try {
            file.transferTo(destFile);// 保存文件到指定路径
            return new ResponseBodyMessage<>(1, "上传成功", true);
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        return new ResponseBodyMessage<>(0, "上传失败", false);
    }
}

对于上面代码中的 SAVE_PATH, 我们可以写到配置文件中, 方便调用

#音乐上传后的路径
music.local.path=D:/player/musics/

数据库上传

涉及到数据库, 都用mybatis, 我们创建一个 MusicMapper 类

先写一个插入方法

@Mapper
public interface MusicMapper {
    int insert(String title, String singer, String time, String url, String userid);
}

    <insert id="insert">
        insert into music(title, singer, time, url, userid)
        values(#{title}, #{singer}, #{time}, #{url}, #{userid})
    </insert>

获取除后缀名的文件名:

int index = fileName.lastIndexOf(".");
String title = fileName.substring(0, index);

获取userid:

User user = (User)session.getAttribute(Constant.USERINFO_SESSION_KEY);
int userid = user.getId();

获取音乐url:

String url = "/music/get?path=" + title;

获取时间:

SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
String time = simpleDateFormat.format(new Date());

上传到数据库:

这里注意, 如果中间有问题没上传成功, 服务器需要把这个问题文件删除,

        try {
            int ret = 0;
            ret = musicMapper.insert(title, singer, time, url, userid);
            if (ret == 1){
                //可以跳转到音乐列表界面
                return new ResponseBodyMessage<>(1, "服务器上传成功", true);
            }else {
                return new ResponseBodyMessage<>(0, "服务器上传失败", false);
            }
        }catch (BindingException e){
            destFile.delete();
            e.printStackTrace();
            return new ResponseBodyMessage<>(0, "服务器上传失败", false);
        }

当然, 我们还能添加一个功能, 上传歌曲时, 我们可以判断是否重复上传了

在 MusicMapper 里添加一个select方法就行

Music music = musicMapper.selectSame(title, singer);
if (music != null){
    return new ResponseBodyMessage<>(0, "请勿重复上传", false);
}

六. 播放音乐模块

播放音乐的格式采用GET, 直接在URL中体现: /get?path=xxx.mp3

    @RequestMapping("/get")
    public ResponseEntity<byte[]> play(String path){
        File file = new File(SAVE_PATH + "/" + path);
        byte[] plays = null;
        try {
            // 找到路径下的文件进行读取
            plays = Files.readAllBytes(file.toPath());
            // 若未获取文件, 返回一个错误请求
            if (plays == null){
                return ResponseEntity.badRequest().build();
            }
            return ResponseEntity.ok(plays);// 正常播放
        } catch (IOException e) {
            e.printStackTrace();
        }
        return ResponseEntity.badRequest().build();
    }

ResponseEntity 对象是Spring对请求响应的封装. 它继承了HttpEntity对象，包含了Http的响应码
（httpstatus）、响应头（header）、响应体(body)三个部分。

如果是歌曲, 在抓包时可以看到, 字节码文件内有 TAG

七. 删除音乐模块

删除单个音乐:

首先, 请求响应设计:

根据传输的 id 来删除音乐

服务器先查找是否有此音乐, 再操作数据库删除, 最后返回响应报文

接着设计Mapper, 首先要根据id查找是否有此书:

接着删除:

再写后端代码:

    @RequestMapping("/delete")
    public ResponseBodyMessage<Boolean> deleteMusicById(@RequestParam String id){
        int deleteId = Integer.parseInt(id);//前端拿到的都是String类型的
        Music deleteMusic = musicMapper.findById(deleteId);
        if (deleteMusic == null){
            //System.out.println("无此id的音乐");
            return new ResponseBodyMessage<>(0, "删除失败, 没有您要删除的音乐", false);
        }

        int flag = musicMapper.deleteMusicById(deleteId);
        if (flag == 0){
            return new ResponseBodyMessage<>(0, "删除失败, 未知原因", false);
        }

        //别忘了删除本地文件
        String title = deleteMusic.getTitle();
        File file = new File(SAVE_PATH + "/" + title + ".mp3");
        //System.out.println("当前路径:" + file.getPath());
        if (file.delete()){
            return new ResponseBodyMessage<>(1, "删除成功", true);
        }
        return new ResponseBodyMessage<>(0, "本地音乐删除失败", false);
    }

最后用postman验证即可.

批量删除音乐

和删除单个音乐类似, 是不过传一个 id 数组进来删除

    @RequestMapping("/deletes")
    public ResponseBodyMessage<Boolean> deleteMusics(@RequestParam("id[]") List<Integer> id){
        System.out.println("id[]" + id);
        int sum = 0;
        for (int i = 0; i < id.size(); i++) {
            Music deleteMusic = musicMapper.findById(id.get(i));
            if (deleteMusic == null){
                //System.out.println("无此id的音乐");
                return new ResponseBodyMessage<>(0, "删除失败, 没有您要删除的音乐", false);
            }
            int ret = musicMapper.deleteMusicById(id.get(i));
            if (ret == 0){
                return new ResponseBodyMessage<>(0, "数据库音乐删除失败", false);
            }
            String title = deleteMusic.getTitle();
            File file = new File(SAVE_PATH + "/" + title + ".mp3");
            if (file.delete()){
                //这里不能return, 因为要删很多
                sum += ret;
            }else {
                return new ResponseBodyMessage<>(0, "本地音乐删除失败", false);
            }
        }
        if (sum == id.size()){
            return new ResponseBodyMessage<>(1, "所选全部音乐删除成功", true);
        }
        return new ResponseBodyMessage<>(0, "本地音乐删除失败", false);
    }

postman测试:

八. 查找音乐模块

查找的方式就是模糊查询

在参数为空时, 默认返回所有音乐

开始写Mapper:

一个是参数为空, 查找全部音乐:

另一个是用户传入以音乐名, 根据音乐名查找歌曲:

MusicController 逻辑:

    @RequestMapping("/find")
    public ResponseBodyMessage<List<Music>> findMusic(@RequestParam(required = false) String musicName){
        List<Music> musicList = null;
        if (musicName != null){
            musicList = musicMapper.findMusicByName(musicName);
        }else {
            musicList = musicMapper.findMusic();
        }
        return new ResponseBodyMessage<>(0, "查询到了所有音乐", musicList);
    }

postman验证:

九. 收藏音乐模块

协议设计:

收藏音乐逻辑:

查询此音乐是否被收藏过, 如果没有, 则在收藏表中插入此数据.

Mapper设计:

Controller设计:

    @RequestMapping("/insert")
    public ResponseBodyMessage<Boolean> insertLoveMusic(HttpServletRequest request,
                                                        @RequestParam String musicId) {
        // 检查是否登录
        HttpSession session = request.getSession(false);
        if (session == null || session.getAttribute(Constant.USERINFO_SESSION_KEY) == null){
            return new ResponseBodyMessage<>(0, "请登录后上传", false);
        }
        /*
            注意, userId可以通过session获取, 不用前端传参
         */
        User user = (User) session.getAttribute(Constant.USERINFO_SESSION_KEY);
        int userId = user.getId();

        // 检查是否重复收藏
        Music music = loveMusicMapper.findLoveMusic(userId, Integer.parseInt(musicId));
        if (music != null){
            return new ResponseBodyMessage<>(0, "请勿重复收藏", false);
        }

        // 插入音乐
        if (loveMusicMapper.insertLoveMusic(userId, Integer.parseInt(musicId))){
            return new ResponseBodyMessage<>(1, "收藏成功", true);
        }
        return new ResponseBodyMessage<>(0, "收藏失败", false);
    }

postman验证:

十. 收藏音乐查询模块

此模块与第八块类似

同样需要模糊查询和传参为空返回全部音乐

Mapper设计:

由于lovemusic表内只有ID字段, 所以需要多表查询, 根据userId来查

    <select id="findLoveMusicById" resultType="com.example.musicplayer.model.Music">
        select m.* from lovemusic lm, music m where lm.music_id=m.id and user_id=#{userId}
    </select>

    <select id="findLoveMusicByNameAndId" resultType="com.example.musicplayer.model.Music">
        select m.* from lovemusic lm, music m where lm.music_id=m.id and user_id=#{userId}
        and m.title like concat('%', #{musicname}, '%')
    </select>

Controller设计:

    @RequestMapping("/findlovemusic")
    public ResponseBodyMessage<List<Music>> findLoveMusic(
            @RequestParam(required = false) String musicName,
            HttpServletRequest request){
        // 检查是否登录
        HttpSession session = request.getSession(false);
        if (session == null || session.getAttribute(Constant.USERINFO_SESSION_KEY) == null){
            return new ResponseBodyMessage<>(0, "请登录后查找", null);
        }

        //获取UserId
        User user = (User) session.getAttribute(Constant.USERINFO_SESSION_KEY);
        int userId = user.getId();

        //检查是否传参
        List<Music> musicList = null;
        if (musicName == null){
            musicList = loveMusicMapper.findLoveMusicById(userId);
        }else {
            musicList = loveMusicMapper.findLoveMusicByNameAndId(musicName, userId);
        }
        return new ResponseBodyMessage<>(1, "查询到了所有的歌曲信息", musicList);
    }

最后postman验证:

十一. 取消收藏音乐模块

请求与响应模块:

Mapper设计:

Controller设计:

    @RequestMapping("/deletelovemusic")
    public ResponseBodyMessage<Boolean> deleteLoveMusic(
            HttpServletRequest request,
            @RequestParam String id){
        // 检查是否登录
        HttpSession session = request.getSession(false);
        if (session == null || session.getAttribute(Constant.USERINFO_SESSION_KEY) == null){
            return new ResponseBodyMessage<>(0, "请登录后查找", null);
        }

        //获取UserId
        User user = (User) session.getAttribute(Constant.USERINFO_SESSION_KEY);
        int userId = user.getId();

        int musicId = Integer.parseInt(id);
        boolean reg = loveMusicMapper.deleteLoveMusic(userId, musicId);
        if (reg){
            return new ResponseBodyMessage<>(1, "取消收藏音乐成功", true);
        }
        return new ResponseBodyMessage<>(0, "取消收藏音乐失败", false);
    }

postman验证:

删除的一些细节

注意, 不仅有一个lovemusic表, 还有一个music总表

在删除总表的音乐后, lovemusic表内的数据也要删除

所以在此要更改一下:

首先, 添加一个根据音乐ID删除的逻辑:

更改MusicController:

if (file.delete()){
    // 同步删除收藏音乐表内的数据
    loveMusicMapper.deleteLoveMusicById(deleteId);
    return new ResponseBodyMessage<>(1, "删除成功", true);
}

if (file.delete()){
    loveMusicMapper.deleteLoveMusicById(id.get(i));
    sum += ret;
}else {
    return new ResponseBodyMessage<>(0, "本地音乐删除失败", false);
}