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

这篇具有很好参考价值的文章主要介绍了项目7-音乐播放器2(上传音乐+查询音乐+拦截器)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

0.加入拦截器

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

0.1 定义拦截器

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器

0.2 注册拦截器 

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器

生效

1.上传音乐的接口设计

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

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

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

1.1 后端代码

MAPPER

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器

service

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器 

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();//创建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

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器

2. 上传文件成功

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器

 1.3 前端测试

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

1.form表单提交

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器

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 后端代码 

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器 项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器

 2.2 后端测试

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器

 2.4 前端页面测试

项目7-音乐播放器2(上传音乐+查询音乐+拦截器),java,前端,服务器文章来源地址https://www.toymoban.com/news/detail-854226.html

到了这里,关于项目7-音乐播放器2(上传音乐+查询音乐+拦截器)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 完整实例项目:使用python自制音乐播放器~

    今天使用python的pygame等模块制作了一个简单的音乐播放器,实现了很多好玩的功能,在这里和大家一起分享!这是笔者的第二篇博客,也是正式的完成一个小项目,希望获得大家的支持~ 暂停、继续播放、调整声音大小、上一曲下一曲调整、无限制追加音乐(但需要下载音乐

    2024年02月11日
    浏览(40)
  • [MAUI 项目实战] 手势控制音乐播放器(三): 动画

    @ 目录 吸附动画 确定位置 平移动画 回弹动画 使用自定义缓动函数 多重动画 点击动画 项目地址 上一章节我们创建了手势容器控件PanContainer,它对拖拽物进行包装并响应了平移手势和点击手势。 拖拽物现在虽然可以响应手势操作,但视觉效果较生硬,一个优秀的设计要求

    2023年04月09日
    浏览(38)
  • Qt项目实战:MP3音乐播放器

      首先通过打开文件,获取文件夹下mp3文件的名字,将其存入QTableWidget控件下,通过双击QTableWidget空间中的内容,播放相应的mp3音乐文件,同时通过使用QMediaPlaylist来实现上一首,下一首的功能。   widget.h widget.cpp main.cpp 本文福利, 莬 费领取Qt开发学习资料包、技术视频,

    2024年02月06日
    浏览(50)
  • [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互

    @ 目录 原理 交互实现 容器控件 手势开始 手势运行 手势结束 使用控件 拖拽物 创建pit集合 项目地址 定义一个拖拽物,和它拖拽的目标,拖拽物可以理解为一个平底锅(pan),拖拽目标是一个坑(pit),当拖拽物进入坑时,拖拽物就会被吸附在坑里。可以脑补一下下图: 你

    2023年04月08日
    浏览(50)
  • [MAUI 项目实战] 手势控制音乐播放器(四):圆形进度条

    @ 目录 关于图形绘制 创建自定义控件 使用控件 创建专辑封面 项目地址 我们将绘制一个圆形的音乐播放控件,它包含一个圆形的进度条、专辑页面和播放按钮。 使用MAUI的绘制功能,需要Microsoft.Maui.Graphics库。 Microsoft.Maui.Graphics在不同的目标平台上使用一致的API访问本机图形

    2023年04月09日
    浏览(46)
  • [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构

    这是一篇系列博文。请关注我,学习更多.NET MAUI开发知识! [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构 [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互 [MAUI 项目实战] 手势控制音乐播放器(三): 动画 [MAUI 项目实战] 手势控制音乐播放器(四):圆形进

    2023年04月09日
    浏览(33)
  • 开源小项目 - 基于无源蜂鸣器实现的音乐播放器

    目录 一、音乐简谱相关知识 1、音符 2、音调 3、识读简谱 1. 找到简谱中C调的音符对应的蜂鸣器频率(确定音调对应的频率) 2. 确定蜂鸣器演奏一拍所需的时间(即确定一个音调对应的节拍数) 3.创建结构体确定一个音符所需的两个属性(音调频率、节拍数) 4.将《两只老虎

    2024年03月10日
    浏览(48)
  • 【无标题】单片机小项目———音乐播放器(keil+protues)

    刚学完单片机的朋友可以看一看。 主要功能: 1.播放音乐 2.切歌 3.显示歌曲数 仿真:  代码: #includeREG52.H //#define sound_amount 5  sbit play_up=P1^0;        sbit play_down=P1^1;    sbit pause=P1^2;        sbit speaker=P3^1;      unsigned char timer0h,timer0l,time,n; unsigned char music_num;    unsigned int

    2024年02月11日
    浏览(46)
  • 【AT89C52单片机项目】音乐播放器的设计

    实验目的 用51系列单片机设计一个可以切歌的音乐播放器。 实验仪器 AT89C52单片机。 音乐播放模块。 设计要求 采用重装定时器计数方式1的初值来实现发出不同频率的声音,通过控制延时长度来实现不同的节拍,之后将音乐数据表填入,即可实现音乐播放。 可通过功能按键

    2024年02月16日
    浏览(80)
  • 开源音乐播放器!

    导读 音乐是生活的一部分。维基百科关于音乐发展历史的文章有这样一段不错的描述说:“全世界所有的人们,包括哪怕是最孤立、与世隔绝的部落,都会有自己的特色音乐……”好吧,我们开源人就构成了一个部落。我建议我们的“音乐形式”应该包括开源音乐播放器。

    2024年02月08日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包