Dog App:将Javascript与API结合使用

作者 : IT 大叔 本文共4261个字,预计阅读时间需要11分钟 发布时间: 2020-09-19

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

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

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

你需要知道的

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

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

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

它看起来像这样。

Dog App:将Javascript与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列表中查看端点

Dog App:将Javascript与API结合使用插图(2)

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

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

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

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

结论

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

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » Dog App:将Javascript与API结合使用

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论