项目7-音乐播放器2(上传音乐+查询音乐+拦截器)

0.加入拦截器

之后就不用对用户是否登录进行判断了

0.1 定义拦截器

0.2 注册拦截器 

生效

1.上传音乐的接口设计

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

Java如何判断一个文件是否为真实的MP3文件_判断一个文件是否是mp3 文件-CSDN博客

流程:前端进行相关的文件操作-再将上传的文件存入数据库 

1.1 后端代码

MAPPER

service

 

controller

package com.example.demo.controller;import com.example.demo.config.Result;
import com.example.demo.constatnts.Constant;
import com.example.demo.mapper.MusicMapper;
import com.example.demo.model.User;
import com.example.demo.service.MusicService;
import com.example.demo.utils.IsMp3;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpSession;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;@RestController
@RequestMapping("/music")
public class MusicController {@Autowiredprivate MusicService musicService;@RequestMapping("/upload")public Result uploadMusic(String singer, @RequestParam MultipartFile file, HttpSession httpSession)throws IOException{String fileNameFull=file.getOriginalFilename();String path = Constant.SAVE_PATH +fileNameFull;File dest=new File(path);if(!dest.exists()){//判断File对象描述的文件是否真实存在dest.mkdir();//创建File 对象代表的目录}else{return Result.fail(Constant.RESULT_CODE_FAIL,"你已经上传了该文件");}try {file.transferTo(dest);//上传文件到目标} catch (IOException e) {e.printStackTrace();}//判断是否为MP3格式if(!IsMp3.isMp3(dest)){Path deltePath = Paths.get(path);boolean result = Files.deleteIfExists(deltePath);if(result){return Result.fail(Constant.RESULT_CODE_FAIL,"上传的文件不是MP3,违规文件删除成功");}return Result.fail(Constant.RESULT_CODE_FAIL,"上传的文件不是MP3,违规文件删除失败");}//将获取的信息存入数据路//1.文件名字,存取的是.MP3之前的文件,左开右闭String musictitle=fileNameFull.substring(0,fileNameFull.lastIndexOf("."));//2.user_id,从session中获取Integer user_id=((User)httpSession.getAttribute(Constant.USERINFO_SESSION_KEY)).getUserId();Integer factor=musicService.insertMusic(musictitle,singer,path,user_id);if(factor<1){return Result.fail(Constant.RESULT_CODE_FAIL,"文件信息上传数据库失败");}return Result.success(true);}}

其中判断了所传文件是否为MP3文件 

1.2 后端测试 

1.当传送的文件不是mp3

2. 上传文件成功

 1.3 前端测试

form表单数据的提交与获取_form表单的提交以及数据获取-CSDN博客

1.form表单提交

2.ajax异步提交表单数据

js获取表单中input的文件,通过ajax发送给后台_获取表input信息js传给后台-CSDN博客 

前后端交互之使用ajax方法实现form表单的提交_ajax form-CSDN博客(重点)

Ajax向后台传入File类型参数 - EnjoyToday - 博客园 (cnblogs.com)(重点)

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><link rel="stylesheet" href="css/common.css">
</head>
<body>
<!--enctype="multipart/form-data"-->
<div><!-- 表单禁止提交 --><form id="form1" onsubmit="return false" action="##" enctype="multipart/form-data">文件上传:<input type="file" id="file" name="filename"/>歌手名: <label><input type="text" name="singer" id="singer" placeholder="请输入歌手名"/></label><input type="button" value="上传" id="submit" onclick="submitmessage()"/></form>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>    
<script>function submitmessage(){var formData = new FormData();formData.append('file', $('#file')[0].files[0]);formData.append('singer',$("#singer").val());$.ajax({type: "post",url: "/music/upload",processData: false,contentType: false,cache: false,data: formData,success: function(result){console.log(result);if(result!=null&&result.data==true&&result.status==200){alert("上传音乐成功");location.href="list.html"}else if(result!=null&&result.data!=null&&result.status==-8){alert("你已经上传了该文件");}else if(result!=null&&result.data!=null&&result.status==-3){alert("上传的文件不是MP3,违规文件删除成功");}else if(result!=null&&result.data!=null&&result.status==-5){alert("上传的文件不是MP3,违规文件删除失败");}else if(result!=null&&result.data!=null&&result.status==-6){alert("文件信息上传数据库失败");}else{alert("你上传的文件有误,请重新上传");}},//未登录的情况error: function(error){if(error!=null&&error.status==401){alert("请登录用户");location.href = "login.html";}else{location.href = "list.html";}}});}</script>
</html>

1.4 出现问题 

关于jQuery ajax 状态码status为0,一直返回error_jquery1102019932023357764328_1711959324301({"statu-CSDN博客

2.查询音乐模块设计

思路:

跳转过去是无参进行展示,此时页面展示的是所有音乐,当搜索框输入字符会显示特定的音乐

此处查询需要满足几个功能:
1. 支持模糊查询

2. 支持传入参数为空

请求:
{
get,
/music/findmusic,
data:{musicName:musicName},
}
响应:【不给musicName传参】
{
"status": 0,
"message": "查询到了歌曲的信息",
"data": [
{
"id": 19,
"title": "银河与星斗(女生版)",
"singer": "gaobo",
"url": "/music/get?path=银河与星斗(女生版)",
"time": "2022-03-28",
"userid": 3
},
{
"id": 20,
"title": "liu",
"singer": "qq",
"url": "/music/get?path=liu",
"time": "2022-03-28",
"userid": 3
}
]
}
响应:【给musicName传参】
{
"status": 0,
"message": "查询到了歌曲的信息",
"data": [
{
"id": 19,
"title": "银河与星斗(女生版)",
"singer": "lay",
"url": "/music/get?path=银河与星斗(女生版)",
"time": "2022-03-28",
"userid": 3
}
]
}

2.1 后端代码 

 

 2.2 后端测试

 2.4 前端页面测试

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

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

相关文章

单链表经典算法题分析

目录 一、链表的中间节点 1.1 题目 1.2 题解 1.3 收获 二、移除链表元素 2.1 题目 2.2 题解 2.3 收获 2.4递归详解 三、反转链表 3.1 题目 3.2 题解 3.3 解释 四、合并两个有序列表 4.1 题目 4.2 题解 4.3 递归详解 声明&#xff1a;本文所有题目均摘自leetco…

《手把手教你》系列基础篇(九十二)-java+ selenium自动化测试-框架设计基础-POM设计模式简介(详解教程)

1.简介 页面对象模型&#xff08;Page Object Model&#xff09;在Selenium Webdriver自动化测试中使用非常流行和受欢迎&#xff0c;作为自动化测试工程师应该至少听说过POM这个概念。本篇介绍POM的简介&#xff0c;接下来宏哥一步一步告诉你如何在你JavaSelenium3自动化测试…

13个Java基础面试题

Hi&#xff0c;大家好&#xff0c;我是王二蛋。 金三银四求职季&#xff0c;特地为大家整理出13个 Java 基础面试题&#xff0c;希望能为正在准备或即将参与面试的小伙伴们提供些许帮助。 后续还会整理关于线程、IO、JUC等Java相关面试题&#xff0c;敬请各位持续关注。 这1…

【ROS2】搭建ROS2-Humble + Vscode开发流程

【ROS2】搭建ROS2-Humble Vscode开发流程 文章目录 【ROS2】搭建ROS2-Humble Vscode开发流程1.基本环境配置2.搭建Vscode开发环境 1.基本环境配置 基本的环境配置包括以下步骤&#xff1a; 安装ROS2-Humble&#xff0c;可以参考这里安装一些基本的工具&#xff0c;可以参考…

nuxt3项目使用swiper11插件实现点击‘’返回顶部按钮‘’返回到第一屏

该案例主要实现点击返回顶部按钮返回至swiper第一个slide。 版本&#xff1a; "nuxt": "^3.10.3", "pinia": "^2.1.7", "swiper": "^11.0.7", 官方说明 swiper.slideTo(index, speed, runCallbacks) Run transit…

浅析MySQL 8忘记密码处理方式

对MySQL有研究的读者&#xff0c;可能会发现MySQL更新很快&#xff0c;在安装方式上&#xff0c;MySQL提供了两种经典安装方式&#xff1a;解压式和一键式&#xff0c;虽然是两种安装方式&#xff0c;但我更提倡选择解压式安装&#xff0c;不仅快&#xff0c;还干净。在操作系统…

【数据结构1-基本概念和术语】

这里写自定义目录标题 0.数据&#xff0c;数据元素&#xff0c;数据项&#xff0c;数据对项&#xff0c;数据结构&#xff0c;逻辑结构&#xff0c;存储结构1.结构1.1逻辑结构1.2存储结构1.2.1 顺序结构1.2.2链式结构 1.3数据结构1.3.1基本数据类型1.3.2抽象数据类型1.3.2.1一个…

Java SpringBoot基于微信小程序的高速公路服务区充电桩在线预定系统,附源码

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…

05节-51单片机-模块化编程

1.两种编程方式的对比 传统方式编程&#xff1a; 所有的函数均放在main.c里&#xff0c;若使用的模块比较多&#xff0c;则一个文件内会有很多的代码&#xff0c;不利于代码的组织和管理&#xff0c;而且很影响编程者的思路 模块化编程&#xff1a; 把各个模块的代码放在不同的…

STM32外设配置以及一些小bug总结

USART RX的DMA配置 这里以UART串口1为例&#xff0c;首先点ADD添加RX和TX配置DMA&#xff0c;然后模式一般会选择是normal&#xff0c;这个模式是当DMA的计数器减到0的时候就不做任何动作了&#xff0c;还有一种循环模式&#xff0c;是计数器减到0之后&#xff0c;计数器自动重…

Echats 引入地图(二) 之中国地图省份高亮

效果图&#xff1a; 代码&#xff1a; series: [{type: map,map: china,zoom: 1.2, // 地图放大aspectScale: 0.8, //地图宽高比例roam: true, //地图缩放、平移// 滚轮缩放的极限控制scaleLimit: {min: 0.5, //缩放最小大小max: 6, //缩放最大大小},itemStyle…

使用Android studio,安卓手机编译安装yolov8部署ncnn,频繁出现编译错误

从编译开始就开始出现错误&#xff0c;解决步骤&#xff1a; 1.降低graddle版本&#xff0c;7.2-bin --->>> 降低为 6.1.1-all #distributionUrlhttps\://services.gradle.org/distributions/gradle-7.2-bin.zip distributionUrlhttps\://services.gradle.org/di…

5.HC-05蓝牙模块

配置蓝牙模块 注意需要将蓝牙模块接5v,实测接3.3v好像不太好使的样子 首先需要把蓝牙模块通过TTL串口模块接到我们的电脑,然后打开我们的串口助手 注意,我们现在是配置蓝牙模块,所以需要进入AT模式,需要按着蓝牙模块上的黑色小按钮再上电,这时候模块上的LED灯以一秒慢闪一次…

性能工具之emqtt-bench BenchMark 测试示例

文章目录 一、前言二、典型压测场景三、机器准备四、典型压测场景1、并发连接2、消息吞吐量测试2.1 1 对 1&#xff08;示例&#xff09;2.2 多对1&#xff08;示例&#xff09;2.3 1对多&#xff08;示例&#xff09; 五、遇到的问题client(): EXIT for {shutdown,eaddrnotava…

IDM2024破解版 IDM软件破解注册序列号 idm教程 idm序列激活永久授权 Internet Download Manager网络下载加速神器

你是不是感觉下载东西资源的时候&#xff0c;下载的非常慢&#xff0c;即便是五十兆的光纤依旧慢、是不是想下载网页上的视频但不知如何进行下载……这些问题是否一直在困扰着您&#xff0c;今日小编特意我大家带来了这款IDM 2024破解版。 众所周知&#xff0c;IDM是一款功能强…

ChatGPT实用指南2024

随着ChatGPT技术的演进&#xff0c;越来越多的人开始在工作中利用此工具。以下是关于ChatGPT的实用指南&#xff0c;适合不太熟悉此技术的朋友参考。 一、ChatGPT概述 1. ChatGPT是什么&#xff1f; ChatGPT是基于OpenAI开发的GPT大型语言模型的智能对话工具。它能够通过自然语…

1.8.5 卷积神经网络近年来在结构设计上的主要发展和变迁——Inception-v4 和 Inception-ResNet

1.8.5 卷积神经网络近年来在结构设计上的主要发展和变迁——Inception-v4 和 Inception-ResNet 前情回顾&#xff1a; 1.8.1 卷积神经网络近年来在结构设计上的主要发展和变迁——AlexNet 1.8.2 卷积神经网络近年来在结构设计上的主要发展和变迁——VGGNet 1.8.3 卷积神经网络近…

oracle安装后报错ORA-01031: insufficient privileges

1.管理员身份打开CMD&#xff0c;输入net user查看计算机用户 2.键入"net localgroup ora_dba"查看ora_dba下的具体用户 3.键入"net localgroup ora_dba administrator /add"把本计算机用户都添加进ora_dba组下

接口测试——postman

一.下载与安装 https://www.getPostman.com/ 界面导航说明 二.get请求 第一个get请求 批量执行接口请求&#xff1a; 1. 右击run collection 2. 会出现runner标签页 携带参数的GET请求 所谓的查询参数&#xff0c;其实就是URL地址中问号&#xff08;?&#xff09;后面的部分…

使用Python进行自动化测试【第163篇—自动化测试】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 如何使用Python进行自动化测试&#xff1a;测试框架的选择与应用 自动化测试是软件开发过程…