Dog 응용 프로그램: Javascript와 API를 결합하여 사용
7619 단어 apistutorialjavascript
네가 알아야 할 것은
우리는 이 강좌에서 무엇을 얻을 것인가
시작합시다.
소개
우선 HTTP 요청을 사용하여 공용 URL 노드와 통신합니다.우리가 사용할 HTTP 방법은 GET이며 자원을 검색합니다.React, Vue 등과 같은 프레임워크나 라이브러리 템플릿을 설치하지 않고 간단한 웹 응용 프로그램을 만드는 것이 목표이기 때문에 HTML, CSS, 자바스크립트를 사용할 것입니다.
우리의 업무 환경을 세우다
우리는 내가 선택한 vs 코드 편집기로 이 웹 응용 프로그램을 만들 것이다.원하는 다른 IDE를 사용할 수 있습니다.편집기를 열고 새 디렉터리에 색인을 만듭니다.html 및 아래 코드를 입력하십시오.
지수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>
풍격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;
}
}
실제 API에 연결
dogs ceo API를 살펴보고 개발자에게 무엇을 제공했는지 탐색하여 데이터를 검색하고 응용 프로그램의 클라이언트에서 사용할 수 있도록 합니다.
시작하려면 사이트 문서list all breeds로 이동하십시오.API 끝점의 URLhttps://dog.ceo/api/breeds/list/all이 표시됩니다.링크를 클릭하면 개 유형의 대상이 표시됩니다.
응용 프로그램.회사 명
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');
});
우리의 색인으로 돌아가다.html, 우리의 선택 라벨과 종류를 기억하세요.여기서 현재 이미지를 다른 이미지로 변경할 수 있도록 선택할 수 있는 드롭다운 메뉴를 만듭니다.
다음에 해야 할 일은 응답에서 JSON 본문 내용을 추출하는 것입니다. 우리는 JSON () 방법으로 약속을 되돌려줍니다. 이 약속은 단점에서 온 데이터로 이 요청의 응답을 해석합니다.
API 목록에서 끝 보기
대상을 쉽게 처리하기 위해서, 우리는 Object.keys() 을 사용하여 색인 0부터 순환할 수 있습니다.
for 순환에서, 우리는 API의 모든 개 품종을 열거하고, innerText를 사용하며, 마지막에 select 태그에 추가해서 API의 결과를 표시할 수 있는 옵션 태그를 만들 수 있습니다.
새 그림을 표시하기 위해 아래 목록에서 모든 그림을 변경할 수 있도록 이벤트 탐지기를 색인에 추가해야 합니다.html로 아래 목록의 옵션을 단독으로 변경합니다.
이 강좌의 마지막 단계는 함수를 만드는 것입니다. 밑에 있는 목록에서 이름을 선택할 때, 우선 마이크로 모뎀을 불러오고 우리의 스타일 설명에서 화면에 표시된 이미지를 삭제해야 합니다.css.여기에서 새 이미지를 가져오고 마이크로프로세서를 삭제하며 새 이미지를 블록 요소로 웹 응용 프로그램에 표시합니다.
결론
이 강좌를 읽으신 것을 축하합니다. 일반 JavaScript를 사용하여 HTTP 요청을 통해 API에 연결하는 방법을 설명합니다.이 방법을 더욱 잘 이해하고 이 방법을 사용하면 모든 공공 API를 쉽게 얻고 통신하여 데이터를 얻고 사이트에 표시할 수 있습니다.우리는 노드 같은 문제를 걱정할 필요가 없이 이 모든 것을 했다.js, 설치 패키지(npm), 웹 패키지 등.
이 강좌는 단지 간단한 순서에 따라 점진적인 지침일 뿐이니, 나는 네가 이것이 매우 유용하다고 생각하기를 바란다.나는 시정을 받아들이고 수시로 여러분과 나누고 싶습니다.
Reference
이 문제에 관하여(Dog 응용 프로그램: Javascript와 API를 결합하여 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/terieyenike/dog-app-using-javascript-with-an-api-j09텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
