项目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,一经查实,立即删除!

相关文章

SpringBoot集成FTP

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

蛋白质亚细胞定位预测(生物信息学工具-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…

# 从浅入深 学习 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…

mysql按季度统计数据

最近遇到按表里得交付时间换成季度取统计&#xff0c;如下&#xff1a; select sp.Id,sp.title,QUARTER(sp.expected_delivery_time) dateStr,CONCAT(DATE(MIN(sp.expected_delivery_time)),至,DATE(MAX(sp.expected_delivery_time))) dateStr2,sp.DemandType,sp.IndustryGrou…

centos7安装mysql5.7笔记

1 配置yum仓库 1.1更新密钥 #更新密钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022 1.2 下载使用wget命令下载MySQL的repo文件 #下载使用wget命令下载MySQL的repo文件 wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 2 使用…

鸿蒙系列--第一个程序HelloWorld

一、下载安装 下载DevEco Studio&#xff08;https://developer.huawei.com/consumer/cn/deveco-studio/&#xff09;并安装 二、创建第一个鸿蒙应用 Next Compile SDK&#xff1a;鸿蒙SDK版本 Mode&#xff1a;ArkTS的声明式开发范式与类Web 开发范式&#xff0c;官方主推S…

二维码如何调整样式?美化二维码生成器的用法

美化二维码功能是一个很常用的二维码编辑功能&#xff0c;一般用来修改二维码颜色、添加logo、更高码点、设置容错率等设置&#xff0c;可以通过简单的步骤将普通的黑白二维码调整成其他的样式。那么美化二维码生成器的使用方法是什么样的呢&#xff1f;下面就让小编来给大家讲…

哈希和布隆过滤器

哈希 布隆过滤器 一致性哈希