基于SpringBoot的online_music_player(前端设计_音乐模块CURD)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情 

查询音乐逻辑

核心代码逻辑:

  <script type="text/javascript">
       $(function(){
            load();
       });
       //musicName可以传参,也可以不传
       function load(musicName){
            $.ajax({
                url:"/music/findMusic",//指定路径
                type:"get",
                data:{"musicName":musicName},
                dataType:"json", //设置服务器返回json数据
                success:function(body){//回调函数
                    console.log(body);
                    var s = ''; 
                    var data = body.data;//数组!
                    for(var i = 0;i<data.length;i++){
                        var musicUrl = data[i].url+'.mp3';
                        s += '<tr>';
                            s += '<th> <input id="'+data[i].id+'"type="checkbox"> </th>';
                            s += '<td>' + data[i].title + '</td>';
                            s += '<td>' + data[i].singer + '</td>';
                            s +='<td > <button class="btn btn-primary" onclick="playerSong(''+musicUrl+'')" >播放歌曲</button>' +
                               '</td>';                                                                                             
                            s +='<td > <button class="btn btn-primary" onclick="deleteInfo('+ data[i].id + ')" >删除</button>' +
                                '&nbsp;'+'<button class="btn btn-primary" onclick="loveInfo('+ data[i].id + ')" > 喜欢</button>'+
                              '</td>';
                        s +=  '</tr>';
                    }
                    $("#info").html(s);//把拼接好的页面放在info的id下
                }
            });
       }
    </script>

验证结果:

上传音乐逻辑

核心代码逻辑

<form method="post" enctype="multipart/form-data" action="/music/upload">
    文件上传：<input type="file" name="filename"/>
    歌手名: <label>
    <input type="text" name="singer" placeholder="请输入歌手名"/>
    </label>
    <input type="submit" value="上传"/>
</form>

验证结果:

播放音乐

<!--嵌入播放器!-->
<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>

  //播放音乐
       function playerSong(obj) {
        console.log(obj)
        var name = obj.substring(obj.lastIndexOf('=')+1);
        //obj:播放地址 name:歌曲或者视频名称 0:播放开始时间 false:点击后自动播放
        SewisePlayer.toPlay(obj,name,0,true);
      }

验证结果:

删除音乐逻辑

 //删除音乐
      function deleteInfo(obj){
        console.log(obj);
        $.ajax({
            url:"/music/delete",
            type:'post',
            dataType:"json",
            data:{"id":obj},
            success:function(body){
                console.log(body);
                if(body.data==true){
                    //删除成功!
                    alert("删除成功!");
                    window.location.href = "list.html";
                }else{
                    alert("删除失败!");
                }
            }
        });
      }

验证结果:

查询歌曲逻辑

  $(function(){
        $('#submit1').click(function(){
            var name = $("#exampleInputName2").val();
            load(name);
        });
      });

验证结果: