项目7-音乐播放器3(删除模块+播放音乐模块设计)

1.播放音乐模块设计

1.1 请求响应设计

请求:

{

get,

/music/get?path=xxx.mp3

}

响应:

{

音乐数据本身的字节信息

}

1.2 后端代码

  1. Files.readAllBytes(String path) : 读取文件中的所有字节,读入内存 ,参数path是文件的路径

1.3 后端测试

后续经检查,上面返回的是错误的,应当是下面这样

1.3.1 测试请求是否收到对应响应

根据上述请求获取一个音乐文件:

可以明显看到有TAG标签
获取一个图片伪造的mp3文件:没有TAG标签

1.4 前后端交互

1.4.1 播放音乐

1.4.2 url的问题(重点)

在mysql存放的url有问题

1.4.3 前端代码的问题

//3.播放音乐
    @RequestMapping("/get")
    public ResponseEntity<byte[]> get(String musicTitle){
        String fullpath=Constant.SAVE_PATH+musicTitle;
        File file = new File(fullpath);
        byte[] bytes = new byte[0];
        byte[] a = null;
        try {
            a = Files.readAllBytes(file.toPath());
            if(a == null) {
                return ResponseEntity.badRequest().build();
            }
            return ResponseEntity.ok(a);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return ResponseEntity.badRequest().build();
    }

1.4.4 后端代码

<!-- 嵌入播放器 -->

<div style="width: 180px; height: 140px; position:absolute; bottom:10px; right:10px">

<script type="text/javascript" src="player/sewise.player.min.js"></script>

<script type="text/javascript">

SewisePlayer.setup({

server: "vod",

type: "mp3",

//这里是默认的一个网址

videourl:"http://jackzhang1204.github.io/materials/where_did_time_go.mp3",

skin: "vodWhite",

//这里需要设置false

autostart:"false",

});

</script>

</div>

写该函数的操作

2. 删除音乐模块设计(删除一个文件)

删除操作,用动态sql做

请求:

{

post,

/music/delete,

id

}

响应:

{

"status": 0,

"message": "删除成功!",

"data": true

}

//1.文件的删除

//2.sql库的删除

2.1 后端代码

MAPPER

SERVICE

controller

2.2 后端接口测试

测试成功!!!

2.3 前后端交互

 function deleteInfo(obj){
            $.ajax({
                url: "/music/singleDelete",
                type: "post",
                data: {
                    "musicId": obj
                },
                success: function(result){
                    if(result!=null&result.data!=null&result.status==200){
                        alert("删除音乐文件成功");
                        location.href="list.html";
                    }else{
                        alert("删除文件失败!!!")
                    }
                },
                error: function(error){
                    if(error!=null&&error.status==401){
                        alert("请登录用户");
                        location.href = "login.html";
                    }
                }

            });
        }

2.4 前端测试

测试成功!!!

3.批量删除

3.1 后端代码

mapper

对应的xml

service

controller

3.2 后端测试

1.什么也不删除

2.删除的id找不到

3.删除多个文件

测试成功!!!

3.3.需要注意的地方

3.4 前端代码

$.when(load).done(function () {
                $("#delete").click(function(){
                var i=0;
                var musicId=[];
                // var ids=[];
                // $("input:checkbox[name='selectBook']:checked").each(function () {
                //     ids.push($(this).val());//像数组添加元素
                // });
                // var idstr=ids.join(',');//将数组元素连接起来以构建一个字符串 
                // console.idstr;
                $("input:checkbox").each(function(){
                    //如果被选中,this代表发生事件的dom元素,<input>
                    //获取框内的id
                    if( $(this).is(":checked")) {
                        // //1.
                        musicId[i] = $(this).attr("id");//整型形式
                        //2.
                        // musicIdString = $(this).attr("id");//整型形式
                        // musicId[i]=parseInt(musicIdString);
                        i++;
                    }
                });
                console.log(musicId);
                $.ajax({
                    type: "get",
                    // url: "music/delete?ids="+idstr,
                    url: "music/delete",
                    data:{
                        "ids": musicId
                    },
                    // contentType: "application/json",
                    dataType: "json",  
                    success: function(result){
                        console.log(result);
                        if(result!=null&result.data!=null&result.status==200){
                            alert("删除音乐文件成功");
                            location.href="list.html";
                        }else{
                            alert("删除音乐文件失败");
                                
                        }
                        return;
                    },
                    error: function(error){
                        if(error!=null&&error.status==401){
                            alert("请登录用户");
                            location.href = "login.html";
                        }else{
                            alert(JSON.stringify(error));
                            location.href = "list.html";
                        }
                    }
                });
            })
相关推荐
小白不太白9501 分钟前
设计模式之 模板方法模式
java·设计模式·模板方法模式
Tech Synapse3 分钟前
Java根据前端返回的字段名进行查询数据的方法
java·开发语言·后端
xoxo-Rachel10 分钟前
(超级详细!!!)解决“com.mysql.jdbc.Driver is deprecated”警告:详解与优化
java·数据库·mysql
乌啼霜满天24912 分钟前
JDBC编程---Java
java·开发语言·sql
色空大师24 分钟前
23种设计模式
java·开发语言·设计模式
闲人一枚(学习中)25 分钟前
设计模式-创建型-建造者模式
java·设计模式·建造者模式
2202_7544215442 分钟前
生成MPSOC以及ZYNQ的启动文件BOOT.BIN的小软件
java·linux·开发语言
蓝染-惣右介1 小时前
【MyBatisPlus·最新教程】包含多个改造案例,常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段
java·数据库·tomcat·mybatis
小林想被监督学习1 小时前
idea怎么打开两个窗口,运行两个项目
java·ide·intellij-idea