1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script src="http/index.js"></script>
  8. </head>
  9. <body>
  10.     <script>
  11.         httpBanner(res=>{
  12.             console.log(res)
  13.         })
  14.         httpList(res=>{
  15.             console.log(res);
  16.         })
  17.     </script>
  18. </body>
  19. </html>

http：

index.js

var baseUrl   ="http://192.168.4.18:3000/"
function ajax({
    url,
    method = "get",
    success
}){
   var xhr =  new XMLHttpRequest();
   xhr.open(method,url=baseUrl+url,true);
   xhr.send();
   xhr.onreadystatechange = function(){
       if(xhr.readyState == 4 && xhr.status == 200){
           var result = JSON.parse(xhr.responseText);
           success(result)
       }
   }
}


/* banner的http为例 */

 function httpBanner(callback){
     ajax({
         url:"banner",
         success:res=>{
            callback(res)
         }
     })
 }

 function httpList(callback){
     ajax({
         url:"top/playlist?cat=华语",
         success:res=>{
             callback(res);
         }
     })
 }

render.js

window.onload = function () {
    var listUrl = "top/playlist?cat=华语";
    var bannerUrl  = "banner"
    /* 发送列表页的http */
    ajax({
        url:listUrl,
        success: res => {
            handleListHttpData(res)
        }
    })

    function handleListHttpData(res) {
        var { playlists } = res;
        var results = playlists.slice(0, 8);
        var musics = [];
        results.forEach(item => {
            var { name, coverImgUrl, playCount } = item;
            playCount = handleNum(playCount);
            musics.push({
                name,
                coverImgUrl,
                playCount
            })
        })
        musics.forEach((value,index)=>{
            var template = `
            <div>
                <img src=${value.coverImgUrl} alt="">
                <div class="opcity">
                    <i class="iconfont icon-erji"></i>
                    <em>${value.playCount}</em>
                    <a href="#"><i class="iconfont icon-bofang1" style="color: #ccc;"></i></a>
                </div>
                <p><a href="#">${value.name}</a></p>
             </div>
           `
           $(".hot-content").append(template);
        })

    }

    /* banner发送http */
   ajax({
       url:bannerUrl,
       success:res=>{
           handleBannerHttpData(res)
       }
   })

   function handleBannerHttpData(res){
       var {banners} = res;
       console.log(banners)
       banners.forEach(item=>{
           var template = `
           <img src=${item.imageUrl}>
           `
           $('#list').append(template);
       })
   }
}

search.js

window.onload = function () {

    $("#btn").click(function () {
        $(".container").html("");
        var value = $("#input").val();
        var url = `search?keywords=${value}&type=10`;
        ajax({
            url,
            success: res => {
                handleData(res)
            }
        })
    })

    function handleData(res) {
        var albums = res.result.albums
        albums.forEach(item => {
            var template = `
                    <div>
                        <img src=${item.blurPicUrl}>
                        <a href="#" class="title">${item.name}</a>
                        <p class="name">${item.artist.name}</p>
                    </div>
                `
            $(".container").append(template)
        })
    }
}

utils.js

function handleNum(num){
    if(num>=100000000){
        return Math.floor(num/100000000)+"亿"
    }else if(num>10000){
        return Math.floor(num/10000)+"万"
    }
    return num;
}