030-Spotify登录解析

最新推荐文章于 2024-05-18 10:03:02 发布

Lich Howger

最新推荐文章于 2024-05-18 10:03:02 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/qq_33781658/article/details/103189102

版权

Spotify

<body>
<a href="" id="login">Click here to login</a>
<script>
    // Function to ensure parameters used in request are encoded correctly
    var encodeParameters = function (params) {
        // join all key value pairs and store in an array
        var strArray = [];
        // Object.keys() gives us all the keys in the object so we can iterate over them
        Object.keys(params).forEach(function (key) {
            // combine the key with it's value with an "=" between, and store in the array
            var paramString =
                encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
            strArray.push(paramString);
        });
        // join everything in the array together with "&" between each string
        return strArray.join("&");
    };

    //spotify登录url
    var base_url = "https://accounts.spotify.com/authorize";

    //参数
    var params = {
        client_id: "61e2e7efa4ac4b65875fa92df8cd382a",
        response_type: "token",
        redirect_uri:
            "http://scm2mjc.pages.cs.cf.ac.uk/cmt112-examples/3-2/spotify/login/main.html",
        show_dialog: true,
        scope: "playlist-modify-public"
    };

    //通过encodeParameters把参数拼接起来
    //然后拼接到base_url的后面,变成完整请求url
    var query_url = base_url + "?" + encodeParameters(params);
    console.log(query_url);

    //querySelector取得id为#login的元素
    var login_link = document.querySelector("#login");

    //将请求url设置给login元素
    login_link.href = query_url;
</script>
</body>

第二个

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>My Awesome Spotify App</title>
    <style>
        body {
            display: flex;
            font-size: 1.5em;
        }

        #output {
            flex: 1 0 70%;
        }

        #popularity {
            flex: 1 0 30%;
        }

        #popularity-number {
            font-size: 6em;
        }
    </style>
</head>

<body>
<div id="output">
    <ol></ol>
</div>
<div id="popularity">
    <p>This track's popularity is:</p>
    <p><span id="popularity-number"></span></p>
</div>
<script>
    console.log(window.location);

    // Function to ensure parameters used in request are encoded correctly
    var encodeParameters = function (params) {
        // join all key value pairs and store in an array
        var strArray = [];
        // Object.keys() gives us all the keys in the object so we can iterate over them
        Object.keys(params).forEach(function (key) {
            // combine the key with it's value with an "=" between, and store in the array
            var paramString = encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
            strArray.push(paramString);
        });
        // join everything in the array together with "&" between each string
        return strArray.join("&");
    }

    var extractParameters = function () {
        // find the contents of the address bar (window.location) after the '#' symbol
        var query = window.location.hash.substring(1);
        // split at the "&" to break up the query
        var params = query.split("&");

        var return_data = {};
        for (var i = 0; i < params.length; i++) {
            // split at the "=" to separate key from value
            var keyvalue = params[i].split('=');
            return_data[keyvalue[0]] = keyvalue[1];
        }
        return return_data;
    }

    //处理一下response
    var processResponse = function (items) {
        console.log(items);

        //通过querySelector取得id为output的元素中的ol元素
        var list = document.querySelector('#output ol');

        //遍历items
        for (let i = 0; i < items.length; i++) {

            //创建元素li
            var list_item = document.createElement('li');

            //创建文字
            var text_item = document.createTextNode(items[i].track.name + ' - ' + items[i].track.artists[0].name);

            //添加mouseenter事件
            list_item.addEventListener('mouseenter', function () {
                var popularity = items[i].track.popularity;
                console.log(popularity);
                var pop_span = document.querySelector('#popularity-number');
                pop_span.innerHTML = popularity;
            });

            list_item.appendChild(text_item);
            list.appendChild(list_item);
        }
    }

    //取出参数
    var params = extractParameters();
    console.log(params);
    var access_token = params['access_token'];

    //拼接url
    var base_url = 'https://api.spotify.com/v1/me/player/recently-played';
    var query_params = {
        limit: 50
    }
    var query_url = base_url + '?' + encodeParameters(query_params);

    //请求
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', query_url);
    xhttp.setRequestHeader('Authorization', 'Bearer ' + access_token);
    xhttp.addEventListener('load', function () {
        var response = JSON.parse(this.response);
        processResponse(response.items);
    });
    xhttp.send();

</script>
</body>
</html>

现在来另外一个例子

先写一个简单的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="style.css"/>
    <title>Document</title>
</head>

<body>
<div id="input">
    <form>
        <label for="search_term">Enter a name to search for: <input type="text" id="search_term"/> </label>
        <input type="button" id="search_button" value="Search"/>
    </form>
</div>
<div id="output"></div>
<script src="api.js"></script>
</body>
</html>

一个表单form

里面是一个input-text和一个button

然后是css

body {
    font-family: "Montserrat", "Helvetica Nueue", Helvetica, Arial, sans-serif;
    font-size: 2em;
}

#input {
    width: 70%;
    text-align: center;
    margin: auto;
}

input[type="text"] {
    border: 2px solid #ccc;
    border-radius: 5px;
}

input[type="text"]:focus {
    border-color: #333;
}

input[type="button"] {
    background-color: #eee;
    border: 0 none;
    cursor: pointer;
    border-radius: 5px;
    font-family: "Montserrat", "Helvetica Nueue", Helvetica, Arial, sans-serif;
    font-size: 1em;
}

然后是js

let submitButton = document.getElementById("search_button");
submitButton.addEventListener('click', function () {
    let search_term = document.getElementById("search_term").value;
    console.log(search_term);
})

现在是最简单的布局和方法

点击search_button,就取得search_term的值

然后我们来写请求

const makeAPIQuery = function(search_term) {
    let rootURL = "https://api.punkapi.com/v2/beers";

    let params = {
        beer_name: search_term
    };

    let queryURL = rootURL + "?" + encodeParameters(params);
    console.log(queryURL);

    let xhttp = new XMLHttpRequest();
    xhttp.addEventListener("load", processResponse);
    xhttp.open("GET", queryURL);
    xhttp.send();
};

然后处理一下response

const processResponse = function() {
    let response = JSON.parse(this.response);
    console.log(response);
};

看下完整代码

const encodeParameters = function (params) {
    var strArray = [];
    Object.keys(params).forEach(function (key) {
        var paramString = encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
        strArray.push(paramString);
    });
    return strArray.join("&");
};

const makeAPIQuery = function (search_term) {
    let rootURL = "https://api.punkapi.com/v2/beers";

    let params = {
        beer_name: search_term
    };

    let queryURL = rootURL + "?" + encodeParameters(params);
    console.log(queryURL);

    let xhttp = new XMLHttpRequest();
    xhttp.addEventListener("load", processResponse);
    xhttp.open("GET", queryURL);
    xhttp.send();
};

const processResponse = function () {
    let response = JSON.parse(this.response);
    console.log(response);
};

let submitButton = document.getElementById("search_button");
submitButton.addEventListener('click', function () {
    let search_term = document.getElementById("search_term").value;

    if (search_term) {
        makeAPIQuery(search_term);
    }
})

点击按钮发送请求

看下结果

Lich Howger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
030-Spotify登录解析

Spotify<body><a href="" id="login">Click here to login</a><script> // Function to ensure parameters used in request are encoded correctly var encodeParame...
复制链接

扫一扫