Dog App：将Javascript与API结合使用

作为开发人员的一个非常重要的方面是连接到API，以从名为JSON的资源中获取数据，该资源代表Javascript Object Notation。JSON的一些常见用例包括：

储存资料
生成数据结构以供用户在您的应用程序上输入
将数据从服务器传输到客户端。它主要是来回连接。客户端到服务器以及服务器到服务器。
配置和验证数据（GET，POST，PATCH，PUT，DELETE）

在本教程中，我们将使用纯JavaScript制作一个非常简单的Web应用程序，该应用程序将从API检索信息并将其显示在客户端页面上。

你需要知道的

HTML / CSS的基本知识。
JavaScript的基础知识。
使用DOM API。
通过API使用JSON和JavaScript对象的基本知识。

我们将从本教程中获得什么

构建一个可以显示各种狗的工作应用。
从其API提取新的狗图像之前，请显示加载微调框。
从API获取数据。

它看起来像这样。

让我们开始吧。

介绍

首先，我们将利用HTTP请求与可公开访问的URL端点进行通信。我们将使用的HTTP方法是GET，它检索资源。由于我们的目标是创建一个简单的Web应用程序，而无需安装任何框架或库样板（例如React，Vue等），因此我们将使用HTML，CSS和JavaScript。

建立我们的工作环境

我们将使用我选择的编辑器vs代码创建此Web应用程序。您可以使用任何其他您愿意使用的IDE。打开编辑器，并在新目录中创建index.html并在下面添加以下代码。

index.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" />
    <title>Dogs API</title>
  </head>
  <body>
    <main>
      <div class="container">
        <header>
          <h1>Dog Viewer</h1>
          <select class="breeds"></select>
        </header>
      </div>
      <div class="img-container">
        <div class="container">
          <div class="spinner">
            🐶
          </div>
          <img
            src="http://placecorgi.com/260/180"
            class="dog-img show"
            alt="friendly and intimate - man's best friend"
          />
        </div>
      </div>
    </main>
  </body>
</html>

通过上面的代码，我们的应用程序将更加专注于JavaScript和API，以使其与DOM一起使用。为了美化结构化CSS，了解CSS flexbox很重要，因为您可以复制代码。

style.css

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

main {
  height: 100vh;
  width: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  padding: 5px 40px 0;
}

main .container header h1 {
  font-family: Nunito;
  font-size: 1.5rem;
}

main .container header select {
  font-size: 1.2rem;
  padding: 5px;
  font-family: Poppins;
  text-transform: capitalize;
}

main .img-container {
  width: 100%;
  margin-top: 5%;
  padding: 2em 0;
}

/* animation for the dog spinner */
main .img-container .spinner {
  font-size: 50px;
  animation: spin 2s linear infinite;
  display: none;
}

main .img-container .dog-img {
  display: none;
  width: 80%;
  margin: 1em auto;
}

main .img-container .show {
  display: block;
}


/* rotate the dog spinner 360deg - keyframes */
@keyframes spin {
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}


/ * media query */

@media only screen and (min-width: 320px) {
  .container header {
    display: flex;
    flex-direction: column;
  }
  .container header h1 {
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 650px) {
  .container header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
  }
}

@media only screen and (min-width: 875px) {
  .container {
    max-width: 80%;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1600px) {
  .container {
    max-width: 70%;
    margin: 0 auto;
  }
}

现在我们有了HTML和CSS设置，是时候在项目目录中设置app.js了。

连接到实际的API

让我们来看看dogs ceo API，并探索它为开发人员提供的功能，使我们能够检索其数据并在应用程序的客户端上使用它。
首先，请转到网站文档上的所有品种列表。它将向我们显示API端点https://dog.ceo/api/breeds/list/all的URL 。单击链接将显示狗类型的对象。

app.js

const BREEDS_URL = 'https://dog.ceo/api/breeds/list/all';

const select = document.querySelector('.breeds');

fetch(BREEDS_URL)
  .then(res => {
    return res.json();
  })
  .then(data => {
    const breedsObject = data.message;
    const breedsArray = Object.keys(breedsObject);
    for (let i = 0; i < breedsArray.length; i++) {
      const option = document.createElement('option');
      option.value = breedsArray[i];
      option.innerText = breedsArray[i];
      select.appendChild(option);
    }
    console.log(breedsArray);
  });

select.addEventListener('change', event => {
  let url = `https://dog.ceo/api/breed/${event.target.value}/images/random`;
  getDoggo(url);
});

const img = document.querySelector('.dog-img');
const spinner = document.querySelector('.spinner');

const getDoggo = url => {
  spinner.classList.add('show');
  img.classList.remove('show');
  fetch(url)
    .then(res => {
      return res.json();
    })
    .then(data => {
      img.src = data.message;
    });
};

img.addEventListener('load', () => {
  spinner.classList.remove('show');
  img.classList.add('show');
});

我们在这里所做的第一件事是为API端点URL声明一个变量，该变量是一个常量，因为我们不希望在整个开发过程中对其进行更改。

回到我们的index.html，记住带有品种类别的select标签。在这里，我们将确保创建一个下拉菜单供用户选择，以使用另一个菜单更改当前图像。

接下来要做的是从响应中提取JSON正文内容，我们使用JSON（）方法，该方法向我们返回一个承诺，该承诺将使用来自端点的数据解析为对该请求的响应。

从品种API列表中查看端点

为了使使用该对象更容易，我们可以使用Object.keys（）将其转换为数组，以从索引0开始的方式对其进行循环。

然后在for循环中，我们可以创建一个选项标签，该标签将列出API中的所有犬种，然后使用innerText，最后将其附加到select标签中以显示API的结果。

为了能够从下拉菜单中更改每个图像以显示新图像，我们需要将事件监听器添加到index.html中的select标记中，以分别从下拉菜单中更改选项。

本教程的最后一步是创建一个函数，当您从下拉列表中选择一个名称时，它首先必须加载微调器，并从style.css中的声明中删除屏幕上显示的图像。从这里，它获取新图像并删除微调器，并将新图像作为块元素显示在我们的Web应用程序中。

结论

恭喜您完成了本教程，使用纯JavaScript通过HTTP请求连接到API。希望您应该有一个更好的理解，并且通过这种方法，您可以轻松地获取任何公共API并与之通信，以获取其数据以显示在网站上。我们完成了所有这些工作，而不必担心诸如Node.js，安装软件包（npm），webpack等之类的事情。

Dog App：将Javascript与API结合使用

你需要知道的

我们将从本教程中获得什么

介绍

建立我们的工作环境

连接到实际的API

结论

常见问题FAQ

IT 大叔普通

发表评论取消回复

IT人小站资源共享中心

WWW.ITXIAOZHAN.CN

关于会员

本站导航

精选内容

你需要知道的

我们将从本教程中获得什么

介绍

建立我们的工作环境

连接到实际的API

结论

常见问题FAQ

IT 大叔 普通

发表评论 取消回复

相关推荐

IT人小站资源共享中心

WWW.ITXIAOZHAN.CN

IT 大叔普通

发表评论取消回复