Vueのシンプルな天気アプリ.js

40419 ワード

vue tutorial javascript beginners テキストリンク

こんにちは!
今日はVueを勉強しています.だから私は物事の完全な理解を得る最良の方法は、それらについての記事を書くことです
また、私はアプリを開発していたとき私は私が話をしようとしている不足情報を実現.
私はパブリックAPIを使用して私のペットプロジェクトVueのアプリを概説するつもりですWeatherbit そして、ちょうど都市に基づいて天気を取得します:温度と説明.
アプリは2つのビューがあります.
ホーム

アバウト

この記事のコードのすべてのストロークを記述するつもりはありません.反対に、私は建築のアーキテクチャとプロセスに焦点を当てます.

You might need to have a basic knowledge of HTML, CSS & JS, and also the concepts of Vue.js to get a full understanding of things that happen here.

私が使った技術

データを格納するためのVEEX.

APIからデータを取得するためのaxios.

アプリのスローをナビゲートするためのルータ.実際に、このプロジェクトでそれを使用する必要はありませんが、私はちょうどアクションでそれを見せたかった.

プロジェクトの生成と管理Vue CLI .
私は強く、この楽器を使用することをお勧めします.初心者に最適.

プロジェクトのアーキテクチャを見てみましょう.
So src フォルダには

src
│
├───assets # Stuff like images are stored here
│       logo.png
│
├── components # Independent "bricks" of app
│       weatherWidget.vue
│
├── services # Code that works with API. Axios gets data from API here
│       service.js
│
├── views # Views are like pages. Router navigates through them
│       About.vue
│       Home.vue
├── App.vue # Root Vue component
├── constants.js # Just some constants that I want to store
├── main.js # Core JS file that imports and mounts our app
├── router.js # Router config is here
├── store.js # Store management with Vuex

さあ、コードを詳しく調べましょう!

メイン.js🚩
からmain.js .main.js はプロジェクト全体のルートjavascriptファイルです.
ここでは、コアライブラリの設定とコンポーネントをインポートしているnew Vue インスタンスを使用してVueを使用するrouter and store .

import Vue from "vue"; // Vue lib
import App from "./App.vue"; // Our root component
import router from "./router"; // Router config
import store from "./store"; // Store config

import "normalize.css"; // Normalize.css lib to reset default styles

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app"); // Create Vue instance and mount it in index.html -> #app element

定数.js📄
これはAPIキーとURLが格納されている場所です.
REST APIから多くのデータを取り出すことができます.チェックするdocumentation 飛び込む.
このプロジェクトでは、私のホームシティーKyivのために現在の天気を得るつもりです.それで、APIリクエストのための質問とキーによるURLは以下のようですCURRENT_WEATHER .

const API_KEY = "b60f3577e8eb46f089853e2a9fd7d744";
const CURRENT_WEATHER = `https://api.weatherbit.io/v2.0/current?city=Kiev,UA&key=${API_KEY}`;

export { API_KEY, CURRENT_WEATHER }; // export constant to be able to use them in components

ルータjs🔀
ルータの設定.アプリは2つのビューがあります-ホームと約.それで、URLのようなものが欲しいです.https://app and https://app/about . 私はそれらを定義することができますrouter.js . すべての必要なすべてのページを指定することですroutes of Router インスタンス:パスを書き込み、ルートに名前を付け、既存のコンポーネントとリンクします.注意/about ビューは怠惰ロードされます.mode: "history" ルートがないことを意味します# URLで.この行がなければ、URLは以下のようになります.https://app/#route . でも忘れないでconfigure あなたのサーバーは、適切に歴史モードで動作するように.

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue"; // import components that you wish to became Routes

Vue.use(Router); // tell Vue to action with Router

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [ // All the routes are described here
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
});

ストア.js🗃️Store 管理.Store が含まれてグローバルデータ-アプリの状態.
ヒアstate アプリの設定とmutations & actions が定義されている.
簡単に言えば、作業のアルゴリズムStore は
私たちはaction ➡️ アクション・コールmutation ➡️ mutation 変更するstate注意:@ インimport pathはsrc フォルダ、ワークスペースのルート.

import Vue from "vue";
import Vuex from "vuex";

import service from "@/services/service.js"; // service.js fetch data from API. We will have a look at it in the next step.

Vue.use(Vuex); // tell Vue to action with Vuex

export default new Vuex.Store({
  state: { // define here data that you wish to store
    weather: {},
    dataIsRecived: false
  },
  mutations: { // change state from here
    UPDATE_WEATHER(state) {
      service
        .getWeather() // call the function from service.js that returns the data from API
        .then(response => { // if the response was get
          state.weather = response.data.data[0]; // set weather obj in state to real weather obj
          state.dataIsRecived = true; // mark that data was recived
          console.log(response); // and log it
        })
        .catch(error => { // if there was an error
          console.log("There was an error:", error.response); // log it
          state.dataIsRecived = false; // and mark that data wasn't recived
        });
    }
  },
  actions: { // call mutations that change the state here
    updateWeather(context) {
      context.commit("UPDATE_WEATHER");
    }
  }
});

サービス/サービス.js🛎️
APIとのコミュニケーションAxios が使用されます.約束ベースのHTTP要求はWeatherBitに行き、現在の天気についての本当のデータを取得します.

import axios from "axios";
import { CURRENT_WEATHER } from "@/constants"; // URL with queries and API key

const apiClient = axios.create({ // create promise
  baseURL: CURRENT_WEATHER,
  withCredentials: false, // CORS
  headers: { // some HTTP headers
    Accept: "application/json",
    "Content-Type": "application/json"
  }
});

export default {
  getWeather() { // function that is used in store.js 👆
    return apiClient.get();
  }
};

次は何ですか.
実際に今、私たちはVueコンポーネントを記述し、それらの中のすべてのものを使用するすべてを持っています.
だからそれをしましょう!

アプリ.Vue
ルートvueコンポーネント.
ルータは、ホームへのリンクとビューについてNavbarを加えるために、ここで使用されます.

<template>
  <div id="app"> // root
    <div class="nav"> // navbar
      <router-link to="/" class="nav__link">Home</router-link>
      <router-link to="/about" class="nav__link">About</router-link>
    </div>
    <router-view /> // router views will be rendered here
  </div>
</template>

<style lang="scss"> // some styles 🖍️
  @import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400&display=swap&subset=cyrillic');

  body {
    font-family: 'Montserrat', sans-serif;
    max-height: 100vh;
  }

  a {
    color: #153B50;
    text-decoration-color: rgba($color: #153B50, $alpha: 0.5);
    transition: all 0.3s ease;

    &:hover {
      text-decoration-color: #153B50;
    }
  }

  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .nav__link {
    &:not(:last-child) {
      margin-right: 15px;
    }
  }
</style>

プロフィール.Vue
プレースホルダを持つビュー.

<template>
  <div class="about">
    <p>Thanks <a href="https://www.weatherbit.io/">Weatherbit</a> for public API!</p>
  </div>
</template>

<style lang="scss" scoped> // some styles 🖍️
  .about {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
</style>

プロフィール.Vue
WeatherWidget Vueコンポーネントを持つビュー.
次の部分でそれを見てください.

<template>
  <div class="home">
    <weatherWidget />
  </div>
</template>

<script>
import weatherWidget from '@/components/weatherWidget.vue'; // import component

export default {
  name: "home",
  components: { // and register it
    weatherWidget
  }
}
</script>

<style lang="scss" scoped> // some styles 🖍️
  .home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
</style>

コンポーネント.Vue
それで、魔法はここで起こります.
我々はすべての気象データを取得し、コンポーネントでそれをレンダリングする準備ができている.
私たちが今しなければならないのはdispatch 店action (これは、サービスを呼び出し、APIからのデータをキャッチする突然変異を呼び出しますstate ).
ライフサイクルフックcreated コールupdateWeather action . それから我々は持っているcomputed property 状態と成分の間の反応性を節約する天気.
最後に、計算されたプロパティをコンポーネントに補間する必要があります.
また、ある種のプリローダがあります.時dataIsRecived 州の支柱はfalse SVGスピナーは回転してデータを待つ.

<template>
  <div>
    <div v-if="this.$store.state.dataIsRecived" class="weather-widget"> // widget itself
      <p class="weather-widget__city">{{ weather.city_name }}</p>
      <h2 class="weather-widget__temp">{{ weather.temp }}<span>°C</span></h2>
      <p class="weather-widget__status">{{ weather.weather.description }}</p>
    </div>
    <div v-else class="weather-widget"> // preloader
      <img src="spinner.svg" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    computed: {
      weather() {
        return this.$store.state.weather // gets weather state from Vuex store
      }
    },
    created() {
      this.$store.dispatch("updateWeather"); // dispatch "updateWeather" when component is created
    }
  }
</script>

<style lang="scss" scoped> // some styles 🖍️
  .weather-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #429EA6;
  }

  .weather-widget__city {
    font-size: 20px;
    margin: 0;
  }

  .weather-widget__temp {
    display: flex;
    align-items: flex-start;
    color: #16F4D0;
    font-size: 200px;
    font-weight: 200;
    margin: 0;

    span {
      font-size: 30px;
      font-weight: 400;
      margin-top: 35px;
    }
  }

  .weather-widget__status {
    font-size: 20px;
    margin: 0;
  }
</style>