[番外] 来个 Weather App (续)

前置作业-`HTML` & `CSS`

使用 Google 查 Weather App 会有很多很多的参考，练习不怕没有画面，挑一个喜欢的来复刻或是模仿！

画面的雏形:
demo

改为黄昏时间的查询　~~成为追光者~~

参考 code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sunset App</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <section class="search">
      <input type="text">
    </section>
    <section>
      <div class="info-container">
        <div class="info-item">
          <p class="time"> <img src="./img/sea.png" alt="sunset"> 18:30</p>
        </div>
        <div class="info-item">
          <p class="name">Taipei, TW</p>
          <p class="date">2021/09/26</p>
          <p class="des">多云</p>
        </div>
      </div>
    </section>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}
img {
  display: inline-block;
}

body {
  font-family: 'Noto Sans', sans-serif;
  font-size: 24px;
  background-image: url(./img/sunset_1127-3503.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  color: #fff;
  padding: 20px;
}

section {
  text-align: center;
}

.search {
  margin-bottom: 40px;
  
}

.search input {
  font-size: 20px;
  border-radius: 10px;
  line-height: 1.5;
  outline: none;
  padding:10px;
}

/* info */
.info-item {
  margin-bottom: 20px;
}

.info-item .time {
  font-size: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Vue 起来

`vue-cli` 建立专案

$ vue create sunset-app

产生专案架构
new project

将 HTML, CSS 以及图档搬进专案中

HTML & CSS --> src/App.vue
图档 --> src/assets

Vue 实体内容

data

包含 API 的URL, Key, 输入的城市以及回传的资料

  data () {
    return {
      apiKey: 'xxxxxxx',
      url: 'https://api.openweathermap.org/data/2.5/weather',
      searchCity: '', 
      weather: {} // 存 Response
    }
  }

methods

getWeather 打API

    getWeather (e) {
      if (e.key == "Enter") 
        fetch(`${this.url}?q=${this.searchCity}&units=metric&APPID=${this.apiKey}&lang=zh_tw`)
          .then(res => {
            return res.json();
          }).then(this.setResults);
      }
    },

setResults 存资料

 setResults(data) {
  this.weather = data;
  this.weather.sunset = this.convertTimestampToTime(data.sys.sunset);
 },

convertTimestampToTime 转换时间

convertTimestampToTime (timestamp) {
  timestamp = timestamp.length == 13 ? timestamp : timestamp*1000;
  let date = new Date(timestamp);
  return `${date.getHours()}:${date.getMinutes()}`;
}

模板绑定资料

搜寻框

<input 
    type="text" 
    v-model="searchCity"
    placeholder="搜寻地区"
    @keypress="getWeather"
>

显示结果

<div class="info-container" v-if="typeof weather.main != 'undefined'">
    <div class="info-item">
      <p class="time"> <img src="./assets/sea.png" alt="sunset"> {{weather.sunset}}</p>
    </div>
    <div class="info-item" >
      <p class="name">{{weather.name}}, {{weather.sys.country}}</p>
      <p class="des">{{weather.weather[0].description}}</p>
    </div>
</div>

<<: Day14－D3 的 Force 原力

>>: 那些被忽略但很好用的 Web API / 简易文字编辑器