小项目----音乐在线播放器

目录

音乐播放器

项目功能：

项目框架：

项目的创建很重要:

数据库设计

在idea中配置数据库和xml

一.登录板块设计

1创建User类

2创建UserMapper和Controller接口

3.实现登录

4加密设置

5实现加密登录

二.上传音乐模块设计

1上传音乐的请求和响应

2创建MusicController类

3测试上传​编辑

4实现数据库上传

三.播放音乐设计

1请求和响应设计

2添加get方法

四.删除音乐模块设计

1删除单个音乐

2批量删除选中音乐

五.查询音乐模块设计

1请求和响应设计

2MusicMapper新增方法

3配置MusicMapper.xml

4MusicController新增方法

六.收藏/移除音乐模块设计

1添加音乐到lovemiusic

2查询喜欢的音乐

3移除收藏音乐

4完善删除音乐

七.前端页面实现

1登录界面

2上传界面

3音乐列表页面

4收藏页面

5配置拦截器

---

音乐播放器

实现一个小项目，在线音乐服务器

准备工作:idea(代码编写),apifox/postman(接口调试,我用的前者),一颗不怕出错的心

项目功能：

1、登录

2、上传音乐

3、删除指定音乐

4、查询音乐

5、收藏音乐

7、移除收藏

项目框架：

后端：

前端：

数据库：

首先实现后端方面的代码

用idea创建一个springboot项目,名称为musicserver---开发工具选择：SpringBootDevTools，Lombok，SpringWeb，Mybatis，MySql.

项目的创建很重要:

代码还没开始写,连项目都创建出错岂不是很难受

创建项目可能会遇到pom.xml报错,大概率是网络原因,一些包没有下载成功.特别注意maven的配置,建议仓库用内置,镜像用阿里云

设置好还是出错就去maven仓库官网下载报错的包,复制到自己的仓库,然后在pom.xml中修改合适的版本即可

数据库设计

创建数据库musicserver，建表user，music，lovemusic、

-- 数据库
drop database if exists `musicserver`;
create database if not exists `musicserver` character set utf8;
-- 使用数据库
use `musicserver`;

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("sg","$2a$10$Bs4wNEkledVlGZa6wSfX7eCSD7wRMO0eUwkJH0WyhXzKQJrnk85li");
-- 这是加密后的密码,后文会提到
INSERT INTO user(username,password)
VALUES("sg1","123456");
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
);
​
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
);

在idea中配置数据库和xml

application.properties

#配置数据库
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/musicserver?characterEncoding=utf8&serverTimezone=UTC
spring.datasource.username=root
#填你mysql的密码
spring.datasource.password=
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语句
#音乐的上传路径
music.local.path=/自己规定路径即可/local/music
#日志级别：trace,debug,info,warn,error
#基本日志
logging.level.root=INFO
logging.level.com.example.musicserver.mapper=debug
#扫描的包：druid.sql.Statement类和frank包
logging.level.druid.sql.Statement=DEBUG
logging.level.com.example=DEBUG
​
​
​

一.登录板块设计

登录肯定是用户登录，所以应该有一个User类，根据SpringBoot框架，应该有对应的UserMapper和Controller接口来操作User；此外，这些User的信息都应该存储到数据库中，再根据Spring的IOC思想，我们应该运用Mybatis的知识，配置好相应的xml文件

1创建User类

为了方便管理，创建好包com.example.musicserver.model

package com.example.musicserver.model;
import lombok.Data;
@Data
public class User {
    private int id;
    private String username;
    private String password;
}

2创建UserMapper和Controller接口

2.1新建mapper包

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

2.2配置UsserMapper.xml文件

resources目录-->mybatis-->UserMapper.xml

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

3.实现登录

3.1登录的请求和响应

请求：
{
    post,
    /user/login
    data:{username,password}
}
响应：
{
    "status": 0,
    "message": "登录成功",
    "data": {
    "id": xxxxx,
    "username": xxxxxx,
    "password": xxxxxxxx
    }
}

3.2响应体的具体设计,封装成一个类

musicserver下新建tools包,创建ResponseBodyMessage类

import lombok.Data;
​
@Data
public class ResponseBodyMessage <T> {
    private int status;
    private String message;
    private T data;
​
    public ResponseBodyMessage(int status, String message, T data) {
        this.status = status;
        this.message = message;
        this.data = data;
    }
}
​

tools下新建Constant类,存储后续用到的session请求常量,避免拼写错误带来的报错

public class Constant {
    public static final String USERINFO_SESSION_KEY = "USERINFO_SESSION_KEY";
}
//使用枚举也行

3.3创建UserController类

musicserver下新建controller包

@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(userInfo == null) {
          return new ResponseBodyMessage<>(-1,"用户名或者密码错误",user);
        } else {
          request.getSession().setAttribute("Constant.USERINFO_SESSION_KEY",user);
          return new ResponseBodyMessage<>(0,"登录成功",user);
        }
    }
}

运行MusicServerApplication.java

测试接口,点击发送

响应返回:"登录成功"即为成功

失败的话看返回的状态码,自己的mysql有没有启动,idea和mysql连接上没有

4加密设置

BCrypt加密:在pom.xml中添加依赖

<!-- 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>

在MusicServerApplication中添加

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

这是因为在SpringBoot中，默认的Spring Security生效了的，此时的接口都是被保护的，我们需要通过验证才能正 常的访问。此时通过上述配置，即可禁用默认的登录验证

5实现加密登录

5.1在UserMapper中新增方法

 User selectByName(String username);

5.2UserMapper.xml添加配置

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

5.3修改UserController类

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserMapper userMapper;
  //修改的地方//
    @Autowired
    private BCryptPasswordEncoder bCryptPasswordEncoder;

    @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("登录失败");
            return new ResponseBodyMessage<>(-1,"error",user);
        } else {
          //修改的地方//
            boolean flag = bCryptPasswordEncoder.matches(password, user.getPassword());
            if(!flag) {
                return new ResponseBodyMessage<>(-1,"error",user);
            }
            System.out.println("登录成功");
            request.getSession().setAttribute(Constant.USERINFO_SESSION_KEY,user);
            return new ResponseBodyMessage<>(0,"success",user);
        }
}

5.4创建AppConfig类

musicserver下新建config包

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

@Configuration：表明当前类是一个配置类，被注解的类内部包含有一个或多个被@Bean注解的方法，用于构建bean定义，初始化Spring容器。

@Bean注解：用于告诉方法，产生一个Bean对象，然后这个Bean对象交给Spring管理。产生这个Bean对象的方法Spring只会调用一次，随后这个Spring将会将这个Bean对象放在自己的IOC容器中。

SpringIOC 容器管理一个或者多个bean，这些bean都需要在@Configuration注解下进行创建，在一个方法上使用@Bean注解就表明这个方法需要交给Spring进行管理

5.5验证加密登录

把刚才的username改为sg,你就会发现也可以登录成功了

二.上传音乐模块设计

1上传音乐的请求和响应

请求：
{
    post,
    /music/upload
    {singer，MultipartFile file}，
} 
响应：
{
    "status": 0,
    "message": "上传成功！",
    "data": true
}

在model包下创建Music类,属性根据数据库的music表可知

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

2创建MusicController类

@RestController
@RequestMapping("/music")
public class MusicController {
    //将路径封装到配置文件
    @Value("${music.local.path}")
    private String SAVE_PATH;

    @RequestMapping(value = "/upload")
    public ResponseBodyMessage<Boolean> insertMusic(@RequestParam String singer,
                                                    @RequestParam("filename") 
                                                    MultipartFile file,
                                                    HttpServletRequest req,
                                                    HttpServletResponse resp) throws IOException {
        //没有session不创建
        HttpSession httpSession = req.getSession(false);
        //检查是否登录
        if (httpSession == null || httpSession.getAttribute(Constant.USERINFO_SESSION_KEY) == null) {
            System.out.println("没有登录！");
            return new ResponseBodyMessage<>(-1, "没有登录！", false);
        }


        //上传到服务器
        String filenameAndType = file.getOriginalFilename();//xxx.mp3
        
        String path = SAVE_PATH + "/" + filenameAndType;
        File dest = new File(path);
        System.out.println("dest:=>" + dest.getPath());

        if (!dest.exists()) {
            dest.mkdir();
        }
        try {
            file.transferTo(dest);//上传文件到目标
            return new ResponseBodyMessage<>(0,"服务器上传成功！",true);
        } catch (IOException e) {
            e.printStackTrace();
            
        }
        return new ResponseBodyMessage<>(-1,"上传失败！",false);
    }
}
    

自己要规定一个路径来上传音乐,与application.properties音乐上传路径一致即可

3测试上传

4实现数据库上传

4.1定义MusicMapper接口

在mapper包下

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

4.2定义MusicMapper.xml

mybatis下

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.musicserver.mapper.MusicMapper">
  <insert id=