0.加入攔截器
之后就不用對用戶是否登錄進行判斷了
0.1 定義攔截器
0.2 注冊攔截器?
生效
1.上傳音樂的接口設計
請求：
{
post,
/music/upload
{singer，MultipartFile file}，
}
響應：
{
"status": 0,
"message": "上傳成功！",
"data": true
}
Java如何判斷一個文件是否為真實的MP3文件_判斷一個文件是否是mp3 文件-CSDN博客
流程：前端進行相關的文件操作-再將上傳的文件存入數(shù)據(jù)庫?
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 {
@Autowired
private 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();//創(chuàng)建File 對象代表的目錄
}else{
return Result.fail(Constant.RESULT_CODE_FAIL,"你已經(jīng)上傳了該文件");
}
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,違規(guī)文件刪除成功");
}
return Result.fail(Constant.RESULT_CODE_FAIL,"上傳的文件不是MP3,違規(guī)文件刪除失敗");
}
//將獲取的信息存入數(shù)據(jù)路
//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,"文件信息上傳數(shù)據(jù)庫失敗");
}
return Result.success(true);
}
}
其中判斷了所傳文件是否為MP3文件?
1.2 后端測試?
1.當傳送的文件不是mp3
2. 上傳文件成功
?1.3 前端測試
form表單數(shù)據(jù)的提交與獲取_form表單的提交以及數(shù)據(jù)獲取-CSDN博客
1.form表單提交
2.ajax異步提交表單數(shù)據(jù)
js獲取表單中input的文件，通過ajax發(fā)送給后臺_獲取表input信息js傳給后臺-CSDN博客?
前后端交互之使用ajax方法實現(xiàn)form表單的提交_ajax form-CSDN博客（重點）
Ajax向后臺傳入File類型參數(shù) - 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("你已經(jīng)上傳了該文件");
}else if(result!=null&&result.data!=null&&result.status==-3){
alert("上傳的文件不是MP3,違規(guī)文件刪除成功");
}else if(result!=null&&result.data!=null&&result.status==-5){
alert("上傳的文件不是MP3,違規(guī)文件刪除失敗");
}else if(result!=null&&result.data!=null&&result.status==-6){
alert("文件信息上傳數(shù)據(jù)庫失敗");
}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 出現(xiàn)問題?
關于jQuery ajax 狀態(tài)碼status為0，一直返回error_jquery1102019932023357764328_1711959324301({"statu-CSDN博客
2.查詢音樂模塊設計
思路：
跳轉過去是無參進行展示，此時頁面展示的是所有音樂，當搜索框輸入字符會顯示特定的音樂
此處查詢需要滿足幾個功能：
1. 支持模糊查詢
2. 支持傳入?yún)?shù)為空
請求：
{
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 后端測試
文章來源：http://www.zghlxwxcb.cn/news/detail-854226.html
?2.4 前端頁面測試
文章來源地址http://www.zghlxwxcb.cn/news/detail-854226.html
到了這里，關于項目7-音樂播放器2（上傳音樂+查詢音樂+攔截器）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![[MAUI 項目實戰(zhàn)] 手勢控制音樂播放器（三）： 動畫](https://imgs.yssmx.com/Uploads/2024/01/405550-1.gif)
![[MAUI 項目實戰(zhàn)] 手勢控制音樂播放器（二）： 手勢交互](https://imgs.yssmx.com/Uploads/2024/01/404099-1.gif)
![[MAUI 項目實戰(zhàn)] 手勢控制音樂播放器（四）：圓形進度條](https://imgs.yssmx.com/Uploads/2024/01/407733-1.gif)
![[MAUI 項目實戰(zhàn)] 手勢控制音樂播放器（一）： 概述與架構](https://imgs.yssmx.com/Uploads/2024/01/408807-1.gif)
