Vue implementiert eine kleine Wettervorhersageanwendung

Vue implementiert eine kleine Wettervorhersageanwendung

Dies ist eine Website, die ich nachgeahmt habe, als ich mir das Vue-Framework selbst beigebracht habe. Sie können die Wetterbedingungen einiger Städte überprüfen. Sie können einen Blick darauf werfen:

HTML Quelltext

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
  <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
  <title>Huanxin weiß</title>
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/index.css" />
</Kopf>

<Text>
  <div Klasse="wrap" id="App">
    <div class="Suchformular">
      <div class="logo"><p style="color: red;text-align: center; font-size: 64px;">Prüfen Sie das Wetter</p></div>
      <div Klasse="Formulargruppe">
        <input type="text" class="input_txt" placeholder="Bitte geben Sie das Wetter ein, das Sie abfragen möchten" v-model="city" @keyup.enter="queryWeather" />
        <button class="input_sub" @click="queryWeather">
          Suche</button>
      </div>
      <div Klasse="Hotkey">
        <!-- <a href="javascript:;" @click="clickSearch('Suche')">Suche</a>
          <a href="javascript:;" @click="clickSearch('Suche')">Suche</a>
          <a href="javascript:;" @click="clickSearch('Guangzhou')">Guangzhou</a>
          <a href="javascript:;" @click="clickSearch('Suche')">Suche</a> -->
        <a href="javascript:;" v-for="Stadt in hotCitys" @click="clickSearch(Stadt)">{{ Stadt }}</a>
      </div>
    </div>
    <ul class="Wetterliste">
      <li v-for="(Artikel, Index) in Prognoseliste" :key="Artikel.Datum" :style="{TransitionDelay:Index*100+'ms'}">
        <div Klasse="Infotyp">
          <span class="iconfont">{{ Artikel.Typ }}</span>
        </div>
        <div Klasse="info_temp">
          <b>{{ Artikel.niedrig}}</b>
          ~
          <b>{{ Artikel.hoch}}</b>

        </div>
        <div Klasse="info_date">
          <span>{{ Artikel.Datum }}</span>
        </div>
      </li>
    </ul>
  </div>
  <!-- Entwicklungsversion, einschließlich hilfreicher Befehlszeilenwarnungen -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- Axios-Onlineadresse bereitgestellt von der offiziellen Website-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <Skript>
    neuer Vue({
      el: "#app",
      Daten: {
        Stadt: "Wuhan",
        Prognoseliste: [],
        hotCitys: ["Peking", "Shanghai", "Guangzhou", "Shenzhen"]
      },
      Methoden: {
        AbfrageWetter() {
          diese.prognoseListe = [];
          Achsen
            .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
            .then(res => {
              konsole.log(res);
              diese.prognoseliste = res.data.data.prognose;
            })
            .catch(err => {
              console.log(fehler);
            })
            .finally(() => { });
        },
        clickSearch(Stadt) {
          diese.Stadt = Stadt;
          diese.queryWeather();
        }
      }
    });
  </Skript>
</body>

</html>

JS-Code

/*
  Anfrageadresse: http://wthrcdn.etouch.cn/weather_mini
  Anforderungsmethode: get
  Anfrageparameter: city (Städtename)
  Inhalt der Antwort: Wetterinformationen 1. Enter klicken 2. Daten abfragen 3. Daten rendern */
 var app = new Vue({
     el:"#app",
     Daten:{
         Stadt:'',
         Wetterliste:[]
     },
     Methoden: {
         sucheWetter:funktion(){
            // console.log('Wetterabfrage');
            // konsole.log(diese.stadt);
            //Schnittstelle aufrufen//Speichern
            var das = dies;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
            .dann(Funktion(Antwort){
                // console.log(Antwort);
                Konsole.log(Antwort.Daten.Daten.Prognose);
                that.weatherList = Antwort.Daten.Daten.Prognose
            })
            .catch(Funktion(Fehler){})
         }
     },
 })

CSS-Datei für die Homepage

Körper{
    Schriftfamilie: „Microsoft YaHei“;   
}
.wickeln{
    Position: fest;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100 %;
    /* Hintergrund: radialer Farbverlauf(#f3fbfe, #e4f5fd, #8fd5f4); */
    /* Hintergrund:#8fd5f4; */
    /* Hintergrund: linearer Farbverlauf(#6bc6ee, #fff); */
    Hintergrund:#fff;

}
.Suchformular{
    Breite: 640px;
    Rand: 100px automatisch 0;
}
.logo img{
    Anzeige:Block;
    Rand: 0 automatisch;
}
.form_group{
    Breite: 640px;
    Höhe: 40px;
    Rand oben: 45px;
}
.input_txt{
   Breite: 538px;
   Höhe: 38px;
   Polsterung: 0px;
   schweben: links;
   Rand: 1px durchgezogen #41a1cb;
   Umriss: keiner;
   Texteinzug: 10px;
}

.input_sub{
    Breite: 100px;
    Höhe: 40px;
    Rand: 0px;
    schweben: links;
    Hintergrundfarbe: #41a1cb;
    Farbe: #fff;
    Schriftgröße: 16px;
    Umriss: keiner;
    Cursor: Zeiger;
    Position: relativ;
}
.input_sub.loading::vor{
    Inhalt:'';
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Hintergrund: URL ('../img/loading.gif');
}

.Hotkey{
    Rand: 3px 0 0 2px;
}

.hotkey a{
    Schriftgröße: 14px;
    Farbe: Nr. 666;
    Polsterung rechts: 15px;
}
.Wetterliste{
    Höhe: 200px;
    Textausrichtung: zentriert;
    Rand oben: 50px;
    Schriftgröße: 0px;
}
.wetterliste li{
    Anzeige: Inline-Block;
    Breite: 140px;
    Höhe: 200px;
    Polsterung: 0 10px;
    Überlauf: versteckt;
    Position: relativ;
    Hintergrund: URL ('../img/line.png') rechts Mitte, keine Wiederholung;
    Hintergrundgröße: 1px 130px;
}

.wetterliste li:last-child{
    Hintergrund: keiner;
}

/* .wetterliste .col02{
    Hintergrundfarbe: rgba(65, 165, 158, 0,8);
}
.wetterliste .col03{
    Hintergrundfarbe: rgba(94, 194, 237, 0,8);
}
.wetterliste .col04{
    Hintergrundfarbe: rgba(69, 137, 176, 0,8);
}
.wetterliste .col05{
    Hintergrundfarbe: rgba(118, 113, 223, 0,8);
} */


.info_datum{
    Breite: 100 %;
    Höhe: 40px;
    Zeilenhöhe: 40px;
    Farbe: Nr. 999;
    Schriftgröße: 14px;
    links: 0px;    
    unten: 0px;    
    Rand oben: 15px;
}
.info_date b{
    schweben: links;
    Rand links: 15px;
}

.info_typ span{
    Farbe: #fda252;
    Schriftgröße: 30px;
    Zeilenhöhe: 80px;
}
.info_temp{
    Schriftgröße: 14px;  
    Farbe: #fda252;
}
.info_temp b{
    Schriftgröße: 13px;
}
.temp .iconfont {
    Schriftgröße: 50px;
  }

CSS-Datei zurücksetzen

Körper,ul,h1,h2,h3,h4,h5,h6{
    Rand: 0;
    Polsterung: 0;
}
h1,h2,h3,h4,h5,h6{
    Schriftgröße: 100 %;
    Schriftstärke: normal;
}
A{
    Textdekoration: keine;
}
ul{
    Listenstil: keiner;
}
img{
    Rand: 0px;
}

/* Schweben löschen, um Zusammenbruch des oberen Rands zu vermeiden*/
.clearfix:vorher,.clearfix:nachher{
    Inhalt:'';
    Anzeige:Tabelle;    
}
.clearfix:nach{
    klar: beides;
}
.clearfix{
    Zoom: 1;
}

.fl{
    schweben: links;
}
.fr{
    schweben: rechts;
}

Testergebnisse

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zur Verwendung von Vue zum Laden von Wetterkomponenten
  • Vue implementiert eine Wettervorhersagefunktion
  • So verwenden Sie webSocket zum Aktualisieren des Echtzeitwetters in Vue
  • Vue – Erste Schritte mit der Wettervorhersage

<<:  Detaillierte Erläuterung der MySQL-Replikationsprinzipien und praktischen Anwendungen

>>:  Der komplette Prozess der iptables-Regeln in Docker geht nach dem Neustart von iptables verloren

Artikel empfehlen

Detaillierte Erläuterung der Installation und Konfiguration des Redis- und phpredis-Erweiterungsvorgangs im Ubuntu 18.04-System

Dieser Artikel beschreibt, wie man Redis- und php...

CocosCreator-Tutorial für den Einstieg: Erstellen Sie Ihr erstes Spiel mit TS

Inhaltsverzeichnis Prämisse TypeScript vs. JavaSc...

Eine kurze Einführung in die Verwendung des Dezimaltyps in MySQL

Die in MySQL unterstützten Gleitkommatypen sind F...

So greifen Sie in Docker auf den lokalen Computer (Hostcomputer) zu

Frage Wie greife ich in Docker auf die lokale Dat...

Detaillierte Erklärung zum Anpassen des Linux-Befehlsverlaufs

Der Befehl „Bash History“ im Linux-System hilft d...

Warum wird UTF-8 in MySQL nicht empfohlen?

Ich bin kürzlich auf einen Fehler gestoßen, als i...

So setzen Sie das Root-Passwort in CentOS7 zurück

Beim Verschieben von Bausteinen treten verschiede...

Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)

Dieser Artikel enthält hauptsächlich Lösungen für...

Beheben Sie das Problem, dass nach der Installation von Centos7 in VMware kein Ping an das externe Netzwerk möglich ist

Beim Konfigurieren eines Clusters ist ein Problem...

MySQL-Datenbank implementiert OLTP-Benchmark-Test basierend auf Sysbench

Sysbench ist ein hervorragendes Benchmark-Tool, d...

Automatisierte Schnittstellentests mit Postman

Inhaltsverzeichnis Hintergrundbeschreibung Erstel...

Nginx implementiert dynamische und statische Trennung Beispielerklärung

Um das Parsen der Website zu beschleunigen, könne...

(MariaDB) Umfassende Erklärung der MySQL-Datentypen und Speichermechanismen

1.1 Übersicht über Datentypen Der Datentyp ist ei...

Implementierung der Nginx-Lastverteilung/SSL-Konfiguration

Was ist Lastenausgleich? Wenn ein Domänenname auf...

Verwenden Sie Nicht-Root-Benutzer, um Skriptvorgänge in Docker-Containern auszuführen

Nachdem die Anwendung in einen Container verpackt...