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等之类的事情。
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » Dog App:将Javascript与API结合使用
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。