项目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";}}});})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/912.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

玄子Share-揭开5G神秘面纱

玄子Share-揭开5G神秘面纱 移动通信发展历程 在移动通信领域&#xff0c;常听到3G、4G的术语 G是Generation的简写&#xff0c;每一个G&#xff0c;都代表了移动通信的一个发展阶段&#xff0c;也是一个时代移动通信技术从 20 世纪 80 年代诞生开始&#xff0c;历经这 30 多…

SpringBoot集成FTP

1.加入核心依赖 <dependency><groupId>commons-net</groupId><artifactId>commons-net</artifactId><version>3.8.0</version></dependency> 完整依赖 <dependencies><dependency><groupId>org.springfra…

深度学习配置环境AllInOne

总结深度学校ubuntu环境配置 目录 0.前提工作0. nvidia驱动安装1.CudaTookits安装2. cuDNN安装3.conda安装3.0 conda基本概念3.1 系统python版本确认3.2 miniconda安装3.3 ~~conda迁移~~3.4 附4.pytorch安装5. git安装5.1 git命令行安装5.2 git-gui安装0.前提工作 安装顺序:n…

蛋白质亚细胞定位预测(生物信息学工具-017)

直奔主题&#xff0c;下面这张表图怎么制作&#xff0c;一般都是毕业论文hh&#xff0c;蛋白质的亚细胞定位如何预测&#xff1f; 01 方法 https://wolfpsort.hgc.jp/ #官网小程序&#xff0c;简单好用&#xff0c;不用R包&#xff0c;python包&#xff0c;linux程序&#x…

微服务使用SockJs+Stomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑(一)

大家好&#xff0c;我是程序员大猩猩。 之前几篇文章&#xff0c;我们讲了Spring Cloud Gateway的轻量级实现&#xff0c;Nginx的配置概念与实现&#xff0c;如以下往期文章。 轻量级的Spring Cloud Gateway实践&#xff0c;实现api和websocket转发轻松实现Nginx的HTTP与WebS…

基于Springboot+Vue的Java项目-网上超市系统开发实战(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

平衡二叉树(后序遍历,力扣110)

解题思路&#xff1a;采取后序遍历的好处是先遍历节点得到高度&#xff0c;然后再判断高度差是否大于一&#xff0c;如果是的话就返回-1&#xff0c;不是就返回两高度中较大的高度加一就是父节点的高度 具体代码如下&#xff1a; class Solution { public: int travel(TreeN…

图搜索算法详解

图搜索算法是一系列用于遍历图结构的算法&#xff0c;图是由节点&#xff08;也称为顶点&#xff09;和连接这些节点的边组成的数据结构。这些算法在众多领域都有应用&#xff0c;例如社交网络分析、路径规划、数据挖掘和推荐系统等。以下是图搜索算法的详解&#xff1a; 基本…

springboot+PageHelper在多数据源的情况下,数据库方言乱套怎么解决?

web项目必然会涉及到数据分页&#xff0c;而PageHelper是个不错的插件&#xff0c;能方便不少事。 在最近的一个项目中&#xff0c;需要聚合多方数据&#xff0c;就涉及到配置多数据源&#xff08;各方使用的不是一种类型的数据库&#xff09;&#xff0c;开始以为正常配置就好…

# 从浅入深 学习 SpringCloud 微服务架构(三)注册中心 Eureka(2)

从浅入深 学习 SpringCloud 微服务架构&#xff08;三&#xff09;注册中心 Eureka&#xff08;2&#xff09; 段子手168 1、搭建 EurekaServer 注册中心&#xff0c;使用 Eureka 的步骤&#xff1a; 1&#xff09;搭建 EurekaServer 创建工程&#xff0c;导入依赖坐标&…

论文阅读-Multiple Targets Directed Greybox Fuzzing (Hongliang Liang,2024)

标题: Multiple Targets Directed Greybox Fuzzing (Hongliang Liang,2024) 作者: Hongliang Liang, Xinglin Yu, Xianglin Cheng, Jie Liu, Jin Li 期刊: IEEE Transactions on Dependable and Secure Computing 研究问题: 发现局限性&#xff1a;之前的定向灰盒测试在有…

“中医显示器”是人体健康监测器

随着科技的进步&#xff0c;现代医学设备已经深入到了人们的日常生活中。然而&#xff0c;在这个过程中&#xff0c;我们不应忘记我们的医学根源&#xff0c;中医。我们将中医的望、闻、问、切四诊与现代科技相结合&#xff0c;通过一系列的传感器和算法将人体的生理状态以数字…

部署Hyperledger Fabric测试区块链网络

一. 快速启动区块链测试网络 启动Fabric虚拟机 将 fabric-samples.zip 拷贝进虚拟机 ubzip fabric-samples.zip 解压并重命名为fabric-samples mv fabric-samples-main fabric-samples 拷贝bin和config目录 cd fabric-samples cp ~/fabric/bin bin -r cp ~/fabric/config …

圣地亚哥 Toler 小学利用School AI帮助每个学生都有自己的聊天机器人,提高学习兴趣和效率

圣地亚哥 Toler 小学利用 AI 程序 SchoolAI 平台为学生创建个性化的聊天机器人&#xff0c;帮助他们更好地学习和提问。这个 AI 程序让学生可以在几秒钟内得到问题的答案&#xff0c;激发了他们提出更多问题的好奇心。 管理、调节和指导学生如何通过任务控制使用人工智能。 当…

Linux程序的地址空间,进程终止

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 算法 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 一.程序的地址空间 1.1程序的地址空间的引入 我们知道frok可以创建…

【SpringBoot实战篇】获取用户详细信息

1 明确需求 1需要获取用户详细信息 2 接口文档 1基本信息 2请求参数 无 3 响应数据 响应数据类型&#xff1a;application/json 响应参数说明&#xff1a; 响应数据样例 3 思路分析 1用户名在请求头里获取 4 开发 4.1 控制器usercontroller GetMapping("/userInfo")p…

实用软件与高效工具汇总(持续更新...)

名人说&#xff1a;莫愁千里路&#xff0c;自有到来风。 ——钱珝 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、软件1、文件搜索类2、截图贴图类3、软件卸载类4、录屏gif类5、护眼调光类6、流程绘图类7、图片…

怎么压缩图片200k以下?压缩图片到指定大小

在工作中&#xff0c;会遇到在某些系统要上传照片&#xff0c;但是对于上传的照片大小有限制&#xff0c;比如限制大小不能超过200KB等&#xff0c;而外业拍摄的照片往往会超过限制的大小&#xff0c;那么这时就需要对照片进行压缩。尤其是我们在面对大量图片需要处理的时候&am…

面试经典150题——跳跃游戏 II

面试经典150题 day10 题目来源我的题解方法一 动态规划方法二 贪心 题目来源 力扣每日一题&#xff1b;题序&#xff1a;45 我的题解 方法一 动态规划 动态规划&#xff0c;当j位置可达i位置时&#xff1a;dp[i]Math.min(dp[i],dp[j]1); 时间复杂度&#xff1a;O( n 2 n^2 n…

【Linux开发 第五篇】vi和vim

vi和vim Linux系统会内置Vi编辑器 Vim具有程序编辑的能力&#xff0c;可以看作是Vi的增强版本&#xff0c;可以主动的以字体颜色辨别语法的正确性&#xff0c;方便程序设计 三种模式 正常模式&#xff1a;vim打开一个文档就直接进入一般模式&#xff0c;可以进行复制&#x…