날씨 응용 프로그램: Vue 및 Axios 사용
44290 단어 vuetutorialjavascript
나는 내가 정확한 것을 배웠는지 확인하기 위해 이 강좌를 쓰는 데 상당히 오랜 시간이 걸렸다.이것은 저의 personal blog의 교차 댓글입니다. 저는 당신이 이 강좌를 좋아하기를 바랍니다. 저는 당신의 피드백을 받기를 갈망합니다!
freecodecamp가 직면한 도전 중 하나는 weather app 구축이다.이 생각은 매우 간단하다.제공된 API에서 날씨 데이터를 가져와 온도를 섭씨 도에서 화씨 도로 변환하고 현재 날씨를 표시하는 함수를 구축합니다.
본고에서 나는 이 도전을 어떻게 완전히 해결하는지에 관한 연습을 쓰지 않겠지만, 만약 네가 무엇을 해야 할지 모른다면, 이것은 아마도 좋은 시작일 것이다.
Vue와 Axios를 OpenWeatherMap Api에 연결하여 한 도시(런던)에서 날씨 데이터를 얻고 보여주는 방법을 보여드리겠습니다.
OpenWeatherMap API
API에 연결하려면 API 키가 필요합니다. 그렇지 않으면 서버에서 연결 시도를 거부합니다.
this page에서 현재 날씨 데이터의
subscribe 버튼을 클릭하여 무료 API 키를 얻을 수 있습니다.API는 JSON 형식으로 데이터를 반환하지만 다음과 같은 기능을 제공하려면 다음과 같은 작업을 수행해야 합니다.
본고에서 나는 공제(섭씨도) 단위, 런던을 도시 이름으로 선포한다.API 링크는 다음과 같습니다.
http://api.openweathermap.org/data/2.5/weather + ?q=London + &?units=metric + &APPID={API KEY}링크를 구분했기 때문에 API 끝에 파라미터를 추가하여 필요한 데이터를 얻는 방법을 볼 수 있습니다.API 링크의 모양:
http://api.openweathermap.org/data/2.5/weather?q=London&?units=metric&APPID={API KEY}링크 끝에 API 키를 추가하여 브라우저에 붙여넣으면 필요한 모든 데이터를 얻을 수 있습니다.지금 우리가 해야 할 일은 데이터를 Vue에 입력하는 것이다.Axios를 사용하여 날씨 데이터 가져오기
Javascript에서는 서로 다른 도구를 사용하여 API에서 데이터를 가져올 수 있습니다.본문에서 나는 axios를 사용한다.API에서 데이터를 가져오는 방식은 실제로 큰 변화가 없습니다.만약 네가 다른 도구를 사용한다면, 너는 어떤 문제도 있어서는 안 된다.
axios를 사용하려면
npm install axios을 실행하거나 CDN 링크 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>을 페이지에 추가할 수 있습니다.본문에서 저는 CDN 링크에서 온axios를 사용합니다.
작성해야 할 코드는 매우 간단합니다.우선, 우리는axios를 호출한 다음에 URL에서 get 요청을 실행합니다. 그리고 응답을 받거나 돌아올 때 오류를 포착합니다.
코드는 다음과 같습니다.
axios
.get(url)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
response.data을 얻었는지 알고 싶다면, 그 이유는 매우 간단합니다.response은 데이터뿐만 아니라 상태 코드, 헤더와 요청 유형도 되돌려줍니다.openweathermap URL을 사용하고 다른
console.log(response);을 추가한 다음 실행 코드를 볼 때 얻은 결과를 보십시오.Vue 응용 프로그램 만들기
나는 VueJs이나 그것을 어떻게 응용 프로그램을 만드는지 깊이 토론하지 않을 것이다.그러나 가장 기본적인 것은 Vue 대상을 div id로 터치하여 프로그램을 만드는 것이다.
Vue 응용 프로그램은 다음과 같습니다.
let weather = new Vue ({
el: "#app",
data: {
},
methods: {
}
})
el 매개 변수는 id 중div의 html입니다.이 div id는 일반적으로 app이라고 부르지만, 마음대로 이름을 지정할 수 있습니다. Vue 대상에서 el을 변경하기만 하면 됩니다.data 매개 변수는 응용 프로그램이 필요로 할 수 있는 모든 데이터를 포함하고 있으며, 보통 여기서 변수를 만들고 사용하거나 수정할 수 있습니다.이것도 VueJs가 HTML의 태그 {{name}}을 번역하기 위해 변수 이름을 얻으려고 시도한 곳이다.methods 매개 변수는 응용 프로그램을 사용할 때 호출할 수 있는 모든 함수를 지정하는 데 사용됩니다.VueJs를 사용하려면 명령
npm install vue을 사용하여 설치하거나 페이지에 CDN 링크 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>을 추가해야 합니다.만약 당신이 이 프레임워크에 대해 아무것도 모른다면, 나는 이 매우 빠르고 간단한 소개가 당신이 Vue를 이해하는 데 도움을 줄 수 있기를 바랍니다.
날씨 응용 프로그램 구축
이제 OpenWeatherMap API에 어떻게 연결하는지,axios를 어떻게 사용하는지, 그리고 Vue 응용 프로그램을 어떻게 만드는지 기본적인 지식을 습득했습니다. 날씨 응용 프로그램을 만드는 방법을 보여 드리겠습니다.
HTML 및 CSS
응용 프로그램의 HTML은 매우 기본적일 것이다.이 페이지에는 Vue가 사용할
id="app"을 포함하는 배경과 중심 div가 있습니다.이 div도 더 보기 위해 간단한 배경 그림을 가지고 있을 것이다.그러면 HTML 코드를 만드는 것부터 시작합시다.우리는 업무 웹 페이지를 가지기 위해
css과 js 파일을 가져올 것입니다. 또한 VueJs,axios와 응용 프로그램에서 사용할 두 가지 글꼴을 가져올 것입니다.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Weather App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:extra-light|Vast+Shadow" rel="stylesheet">
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
{{ variableName }} 형식을 사용합니다. variableName은 저희 Vuejs 응용 프로그램에서 사용하는 이름입니다.HTML은 세 부분으로 나뉩니다.왼쪽 상단에는 아이콘, 현재 날씨 및 날씨 설명이 표시됩니다.오른쪽 상단에는 하루의 최저와 최고 온도가 표시됩니다.마지막으로, 우리는 습도, 압력, 일출/일몰 시간과 풍속 등 아래에 다른 정보를 표시할 것이다.
data의 외관은 다음과 같습니다.<div id="app">
<div id="weather">
<img src="images/sunny.svg"> {{overcast}}
<span class="temperature">{{currentTemp}}°</span><br>
<span id="temp-values">Min {{minTemp}}° <br> Max {{maxTemp}}°</span>
</div>
<div id="info">
<img class="icon" :src=icon> {{sunrise}}
<img class="icon" src="images/sunset.svg"> {{sunset}}
<img class="icon" src="images/humidity.svg"> {{humidity}}
<img class="icon" src="images/pressure.svg"> {{pressure}}
<img class="icon" src="images/wind.svg"> {{wind}}
</div>
<div id="app"> 파일을 업데이트해서 페이지를 좀 더 좋아보이게 해야 합니다.주의: 제가 여기서 보여 드릴 코드는 응답이 없고 좀 거칠습니다.나는 일을 할 수 있는 더 좋은 방법이 있다고 확신하지만, 본 강좌에서는 그것을 할 수 있다.
주요했어css 파일
body {
background: #3d4869; /* Old browsers */
background: -moz-linear-gradient(#3d4869, #263048) fixed; /* FF3.6-15 */
background: -webkit-linear-gradient(#3d4869,#263048) fixed; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(#3d4869,#263048) fixed; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-repeat: no-repeat;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
text-shadow: 0px 0px 2px #000000;
color: #ffffff;
}
#app {
background: url(images/waves.svg) no-repeat;
width: 520px;
height: 170px;
position: absolute;
top: 35%;
left: 35%;
}
#weather {
padding: 15px;
vertical-align: middle;
}
.temperature {
font-family: 'Vast Shadow', cursive;
font-size: 40px;
vertical-align: top;
position: absolute;
left: 80px;
}
#temp-values {
text-align: right;
text-justify: distribute;
display: block;
position: relative;
top: -60px;
}
#info {
padding-left: 20px;
position: relative;
top: -20px;
}
.icon {
position: inherit;
top: 2px;
padding-left: 8px;
}
지수html 파일
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Weather App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:extra-light|Vast+Shadow" rel="stylesheet">
</head>
<body>
<div id="app">
<div id="weather">
<img src="images/sunny.svg"> {{overcast}}
<span class="temperature">{{currentTemp}}°</span><br>
<span id="temp-values">Min {{minTemp}}° <br> Max {{maxTemp}}°</span>
</div>
<div id="info">
<img class="icon" :src=icon> {{sunrise}}
<img class="icon" src="images/sunset.svg"> {{sunset}}
<img class="icon" src="images/humidity.svg"> {{humidity}}
<img class="icon" src="images/pressure.svg"> {{pressure}}
<img class="icon" src="images/wind.svg"> {{wind}}
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
참고: 날씨 응용 프로그램의 배경 및 아이콘으로 SVG 파일을 사용하므로 파일 here을 얻을 수 있습니다.
Vue
Vue와axios는 html 코드의 스크립트 태그를 통해 가져왔습니다. 이것은 우리가 응용 프로그램을 만들기 시작할 준비가 되어 있음을 의미합니다.
let weatherApp = new Vue ({
el: '#app',
data: {
},
methods: {
getWeather() {
},
}
beforeMount() {
this.getWeather();
}
});
main.css인div에 연결됩니다.Vue 응용 프로그램에서 우리는 app 객체에 필요한 모든 변수를 설명합니다. 이 변수는 API를 통해 얻은 정보를 채우는 데 사용됩니다.또한 우리는
data이라는 방법을 성명했습니다. 이 방법은 axios를 사용하여 OpenWeatherMap API에서 우리가 필요로 하는 모든 정보를 얻을 것입니다.우리는 날씨 응용 프로그램이 현재 날씨와 다른 날씨 정보를 표시하기를 희망합니다. 예를 들어 다음과 같습니다.
getWeather) 업데이트에 필요한 모든 변수를 선언합니다.VUEJ의 데이터 객체는 다음과 같습니다.
data: {
currentTemp: '',
minTemp: '',
maxTemp:'',
sunrise: '',
sunset: '',
pressure: '',
humidity: '',
wind: '',
overcast: '',
icon: ''
},
Axios를 사용하여 API 데이터 가져오기
Openweathermap API는 다음과 같은 JSON 응답을 반환합니다.
{
"coord": {
"lon": -0.13,
"lat": 51.51
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04d"
}
],
"base": "stations",
"main": {
"temp": 24.82,
"pressure": 1016,
"humidity": 51,
"temp_min": 23,
"temp_max": 27
},
"visibility": 10000,
"wind": {
"speed": 8.2,
"deg": 270
},
"clouds": {
"all": 75
},
"dt": 1534695600,
"sys": {
"type": 1,
"id": 5091,
"message": 0.003,
"country": "GB",
"sunrise": 1534654394,
"sunset": 1534706018
},
"id": 2643743,
"name": "London",
"cod": 200
}
{{variableName}} 방법을 구축할 것이다.이 방법은 다음과 같습니다.getWeather() {
let url = "http://api.openweathermap.org/data/2.5/weather?q=London&?units=metric&APPID={API KEY}";
axios
.get(url)
.then(response => {
this.currentTemp = response.data.main.temp;
this.minTemp = response.data.main.temp_min;
this.maxTemp = response.data.main.temp_max;
this.pressure = response.data.main.pressure;
this.humidity = response.data.main.humidity + '%';
this.wind = response.data.wind.speed + 'm/s';
this.overcast = response.data.weather[0].description;
this.icon = "images/" + response.data.weather[0].icon.slice(0, 2) + ".svg";
this.sunrise = new Date(response.data.sys.sunrise*1000).toLocaleTimeString("en-GB").slice(0,4);
this.sunset = new Date(response.data.sys.sunset*1000).toLocaleTimeString("en-GB").slice(0,4);
})
.catch(error => {
console.log(error);
})
}
getWeather 객체에 명시된 변수에 할당할 뿐입니다. 이것은 우리가 응용 프로그램의 어느 곳에서든 데이터를 사용할 수 있도록 합니다.주의, 우리는 일부 변수에 내용을 추가하고 있습니다.
data 변수에 이미지 폴더의 경로, 파일 이름, 파일 확장자를 추가했습니다.Vue가 실행되면 이미지의 icon을 src의 모든 값으로 변경합니다.파일 이름에 대해 우리는 API에서 가져온 문자열을 인덱스 0의 문자에서 인덱스 2의 문자로 자릅니다. 이것은 Openweathermap이 낮이든 밤이든 아이콘 이름을 바꾸기 때문입니다.
icon과 sunrise 시간은 유닉스 epoch 시간에 제시된 것이기 때문에 우리는 시간을 인류가 읽을 수 있는 형식으로 바꾸고 문자열을 잘라서 시간과 분만 얻을 수 있다.sunset 파일 및 Vue 응용 프로그램은 다음과 같이 해야 합니다.let weatherApp = new Vue({
el: '#app',
data: {
currentTemp: '',
minTemp: '',
maxTemp:'',
sunrise: '',
sunset: '',
pressure: '',
humidity: '',
wind: '',
overcast: '',
icon: ''
},
methods: {
getWeather() {
let url = "http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&APPID={Your API Key}";
axios
.get(url)
.then(response => {
this.currentTemp = response.data.main.temp;
this.minTemp = response.data.main.temp_min;
this.maxTemp = response.data.main.temp_max;
this.pressure = response.data.main.pressure;
this.humidity = response.data.main.humidity + '%';
this.wind = response.data.wind.speed + 'm/s';
this.overcast = response.data.weather[0].description;
this.icon = "images/" + response.data.weather[0].icon.slice(0, 2) + ".svg";
this.sunrise = new Date(response.data.sys.sunrise*1000).toLocaleTimeString("en-GB").slice(0,4);
this.sunset = new Date(response.data.sys.sunset*1000).toLocaleTimeString("en-GB").slice(0,4);
})
.catch(error => {
console.log(error);
});
},
},
beforeMount() {
this.getWeather();
},
});
main.js을 대체하고 페이지를 다시 불러옵니다. 현재 날씨 데이터를 포함하는 프로그램을 볼 수 있을 것입니다.결론
이 문장은 매우 길니, 나는 우선 네가 견지해 나가는 것에 감사해야 한다.API에서 axios와 Vue를 함께 사용하여 데이터를 가져오는 방법을 배웠으면 합니다.나는 지금 너에게 묻고 싶다. 너는 몇 가지 일을 더 명확하게 설명하고 싶니, 아니면 나에게 다른 일을 설명하게 하고 싶니?
마지막으로 API를 사용하여 만든 첫 번째 작업은 무엇입니까?
Reference
이 문제에 관하여(날씨 응용 프로그램: Vue 및 Axios 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/fabiorosado/weather-app-using-vue-and-axios-4ia6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
