项目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 播放音乐

这里播放歌曲，我们采用开源的播放控件：
码云地址：https://gitee.com/jackzhang1204/sewise-player
GitHub地址：https://github.com/jackzhang1204/sewise-player
最后无法播放
经检查是由于url存放失误

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>//获取框内的idif( $(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";}}});})