018Day----获取网易云音乐的数据

最新推荐文章于 2024-04-21 15:38:24 发布

码小白的求学之路

最新推荐文章于 2024-04-21 15:38:24 发布

阅读量431

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/yanxiaona111/article/details/108741749

版权

一，创建文件

样式如下：走一步创建一步
在这里插入图片描述

二，先写html界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/index.css"> -->
    <script data-main="js/main.js" src="js/libs/require.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    .list img{
        width: 100px;
        height: 100px;
        float: left;
    }
    .list{
        margin: 20px;
        width: 300px;
        min-height: 400px;
        border:1px solid #999;
    }
    .list li{
        overflow: hidden;
        margin-bottom: 20px;
    }
    #audio{
        outline: none;
    }
</style>
<body>
   
        <h3>网易云音乐列表</h3>
        <audio id="audio" src="" controls autoplay></audio>
        
        <ul class="list"> 
            <li> 
                <img src="" alt="">
                <p>三黄鸡三你的话</p>
            </li>
        </ul>
   
</body>
</html>

三，再配置在main.js里

//该方法可以通过搜 requirejs 里获取

//配置

requirejs.config({
    baseUrl:'js/',
    paths:{
        jquery:'libs/jquery-1.12.4.min',
        index:'app/index',
        http:'app/http',
        musicList:'app/musicList',
        config:'app/config'
    }
})
//挂载
requirejs(['index'],function(index){});

四，开始进行网络请求 --在http.js里请求

//网络请求 
define(['jquery'],function($){
        function httpRequest(type,url,params,callback){
            $.ajax({
                type:type,
                url:url,
                data:params,
                success:function(res){
                    //函数的返回结果   回调  此函数在index.js 里
                   callback(res);
                }
            
            })

        }
        return httpRequest;
});

五，在config.js里设置公共配置

//公共的配置 参数地址
define({
    host:'http://iwenwiki.com',
    port:':3000',
    newSong:'/personalized/newsong',//推荐音乐列表
    songUrl:'/song/url',//音乐Url
    
    //

    //

    //
})

六，在index.js里获取

define(['http','musicList','config'],function(http,musicList,config){
    //网络请求 http://iwenwiki.com:3000/personalized/newsong
    var url=config.host+config.port+config.newSong
    http('get',url,{},callback)
    function callback(res){
        console.log(res.result);
        var arr=res.result;
        musicList.setDom(arr);
    }

    // http()

    //http()
})

七，musiclist.js里渲染数据

define(['jquery','http','config'],function($,http,config){
    function setDom(arr){
        var str='';
        for(var i=0;i<arr.length;i++){
            str+=`<li data-id='${arr[i].id}'>
                    <img src="${arr[i].picUrl}" alt="">
                    <p>${arr[i].name}</p>
                </li>`;
        }
        //渲染
        $(".list").html(str);
        //点击播放音乐---
        $(".list li").click(function(){
           //点击播放音乐
            var songId=$(this).attr('data-id');
            var url=config.host+config.port+config.songUrl;
            http('get',url,{id:songId},function(res){
                // console.log(res.data[0].url);
                $('#audio').attr('src',res.data[0].url)
            })
        })

    }

    return {
        setDom:setDom
    }
})