tags: Vue.js ItIron2020

前言

昨天我們完成了整個app的架構與樣式，今天我們就要來處理剩下的邏輯問題，只要之前vue的東西都有聽懂的話，這真的只是小菜一碟而已~! 馬上就開始吧!

利用fetch請求資料

首先我們要到openweathermap.org的網站看一下我們等等要用的api，由於我們要查詢的是即時的天氣資訊，請你點選Current Weather Data的部分，你應該會看到以下的畫面。

畫面中你可以看到，基本上我們只需要

1. Api key
2. Base url
3. city name

這幾個參數就可以完成我們的request，我們先做個簡單的測試吧!
這邊我們將利用js的fetch方法請求資料，若你偏好axios我自然也是完全不反對的~!
我們需要一開始有個基本的畫面顯示，所以先將要查詢的城市隨便給一個城市名稱，讓畫面有資料能顯示。請你將你的script部分加入以下的程式碼

export default {
  name: 'App',
  data() {
    return {
      api_key: process.env.VUE_APP_WEATHER_KEY,
      base_url: 'https://api.openweathermap.org/data/2.5/',
      query: 'Taichung',
      weather: {},
      date: ''
    }
  },
  methods: {
    async fetchWeather() {
      const data = await fetch(`${this.base_url}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
      console.log(await data.json())
    }
  },
  created() {
    this.fetchWeather()
  }
}

你會看到像是這樣的回傳結果

{
"coord": {
    "lon": 121.53,
    "lat": 25.05
},
"weather": [
    {
    "id": 803,
    "main": "Clouds",
    "description": "broken clouds",
    "icon": "04d"
    }
],
"base": "stations",
"main": {
    "temp": 23.72,
    "feels_like": 26.98,
    "temp_min": 22.78,
    "temp_max": 25,
    "pressure": 1017,
    "humidity": 94
},
"visibility": 8000,
"wind": {
    "speed": 2.6,
    "deg": 170
},
"clouds": {
    "all": 75
},
"dt": 1602206131,
"sys": {
    "type": 1,
    "id": 7949,
    "country": "TW",
    "sunrise": 1602193749,
    "sunset": 1602235970
},
"timezone": 28800,
"id": 1668341,
"name": "Taipei",
"cod": 200
}

在這一大包資料中，我們感興趣的只有main & weather兩包物件!不過為了之後的方便起見，我們暫時還是先將整包資料存下來吧! 注意到我們在data的部分有增加了weather變數，在取完資料後請把回傳的data存進weather供我們日後操作!

 methods: {
    async fetchWeather() {
      const data = await fetch(`${this.base_url}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
      this.weather = await data.json()
    }
  }

修改我們的template，動態呈現資料

現在我們知道回傳的資料是什麼樣子，簡單的動工一下將之前寫死的template根據資料去修改吧! 還記得我們已經將請求到的資料存在weather變數嗎? 接著就是在template中使用這些資料囉! 大致上要修改的有

1. 從name屬性取出城市名稱
2. 從main屬性中取出溫度
3. 從weather.main中取中天氣

<div class="weather-wrap" v-if="weather.main">
    <div class="location-box">
      <div class="location">{{ weather.name }}</div>
      <div class="date">Octorber 8th 2020</div>
    </div>
    <div class="weather-box">
      <div class="temperature">{{ Math.round(weather.main.temp) }}°C</div>
      <div class="weather">{{ weather.weather[0].main }}</div>
    </div>
</div>

日期的部分我們等一下再處理，到這個階段畫面就可以顯示我們取得的資料，一切看起來都很不錯~!

處理顯示日期

接著我們要處理的部分是日期的顯示，有個輕便的小套件我們已經在專案一開始就安裝了，就是那個小小的dayjs，一些使用方法可以詳閱官方文件。 請你在script的一開始引入這個套件以及一些進階的plugin

import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
dayjs.extend(advancedFormat)

我們的目標是出現 月份(英文字母)、日期(帶尾巴的那種1st、2nd)、以及年份，由於這個資料會隨著每次開啟的日期變動，我們這邊用一個computed屬性來處理，請在你的程式碼中增加以下的東西

computed: {
    currentDate() {
      return dayjs().format(`MMMM Do YYYY`)
    },
},

同時不要忘了修改上方的template

<div class="weather-wrap" v-if="weather.main">
    <div class="location-box">
      <div class="location">{{ weather.name }}</div>
      <div class="date">{{ currentDate }}</div> // 修改這裡
    </div>
    <div class="weather-box">
      <div class="temp">{{ Math.round(weather.main.temp) }}°C</div>
      <div class="weather">{{ weather.weather[0].main }}</div>
    </div>
</div>

這樣畫面上就會有美美的日期囉!

實作搜尋功能

搜尋功能其實相當的簡單，我們要注意的只有幾件事情

1. 輸入值要與我們data中的query變數雙向綁定
2. 按下Enter時要重新fetch資料

就這樣而已! 請你將input的部分做以下的修改

<div class="search-box">
    <input
      type="text"
      class="search-bar"
      placeholder="Search....."
      v-model="query"
      @keyup.enter="fetchWeather"
    />
</div>

光是這樣就可以讓你的程式碼順利運作囉:D

動態綁定class

我們最後一步要作的事情就是根據查詢到的溫度顯示對應的背景圖片，我們在之前已經寫好了warm class，接著我們只要判斷目前weather內的溫度是否大於16度就好囉!
請將app的部分作以下的改寫

<div id="app" :class="weather.main && weather.main.temp > 16 ? 'warm' : ''">

因為台中是個溫暖的好地方，你會發現畫面也瞬間變為暖暖的色調囉!

到這邊我們就完成全部的功能了，沒騙你吧~真的很簡單! 別忘了commit我們的變更，以便之後的發布囉!

git add .
git commit -m "finished project"

結語

我們利用了三天的時間，從事前準備、架構與樣式到最終的邏輯處理，簡簡單單的就完成了一個天氣app，內容其實稱不上多，就只是個小試身手而已，不過能自己寫一個vue app感覺還是很不錯的對吧? 之後你可以利用我們之前教的部屬方式將這個app發布出去!
這系列是起自這個網路教學，在之後的練習中，我只是在語法&套件的選擇上作了點修改，本質上還是與這個教學相同的! 教學的內容對於初學者來說我認為相當的不錯! 大家有興趣的話也可以看看該教學影片，裡面的步驟會再更詳細一些! 可以的話也記得給作者一個讚:D

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D