標籤:alt btn orm lin client input html head idt
一、WebApp介紹1.初始介面
2.搜尋結果頁面
二、項目代碼1.項目目錄
--------app
----------app.component.ts
----------app.component.css
----------app.component.html
----------app.module.ts
2.app.component.html
1 <div class="content"> 2 <div> 3 <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> 4 </div> 5 <h2>{{title}}</h2> 6 <div> 7 <form class="form-inline"> 8 <div class="form-group"> 9 <label for="exampleInput">Address</label>10 <input type="text" class="form-control" id="exampleInput" placeholder="Please input the address" name="searchAddress">11 </div>12 <button type="button" class="btn btn-default" (click)="start()">Search</button>13 </form>14 </div>15 </div>16 <div class="data" *ngIf="begin">17 <table class="table table-striped">18 <thead>19 <tr>20 <th>日期</th>21 <th>天氣</th>22 <th>日間溫度</th>23 <th>夜間溫度</th>24 <th>氣壓值</th>25 <th>濕度</th>26 <th>天氣情況</th>27 </tr>28 </thead>29 <tbody>30 <tr *ngFor="let DL of DataList;let i=index;">31 <td>{{dateString[i]}}</td>32 <td>{{DL.weather[0].main}}</td>33 <td>{{DL.temp.day}}</td>34 <td>{{DL.temp.night}}</td>35 <td>{{DL.pressure}}</td>36 <td>{{DL.humidity}}</td>37 <td><img src="http://openweathermap.org/img/w/{{DL.weather[0].icon}}.png"/></td>38 </tr>39 </tbody>40 </table>41 </div>
3.app.component.ts
1 import { Component, OnInit } from ‘@angular/core‘; 2 import {HttpClient} from ‘@angular/common/http‘; 3 import ‘rxjs/add/operator/toPromise‘; 4 5 @Component({ 6 selector: ‘app-root‘, 7 templateUrl: ‘./app.component.html‘, 8 styleUrls: [‘./app.component.css‘] 9 })10 export class AppComponent{ 11 title = ‘A weather search App!‘;12 public http;13 Data:any;14 begin=false;//控制天氣結果清單是否出現15 searchAddress:string;//查詢方塊文本的變數聲明16 dateString:string[];//天氣結果清單的七個日期數組聲明17 DataList:any;//擷取到的資料列表變數聲明18 constructor(private Http:HttpClient) {19 this.http = Http;20 }21 now=new Date()//擷取目前時間22 GetDateStr(AddDayCount :number) {23 this.now.setDate(this.now.getDate()+AddDayCount);//擷取AddDayCount天后的日期24 let y = this.now.getFullYear();25 let m = this.now.getMonth()+1;//擷取當前月份的日期26 let d = this.now.getDate();27 return y+"年"+m+"月"+d+"日";28 }29 ngOnInit() {//在組件載入進來的時候就執行30 this.dateString=[this.GetDateStr(0),this.GetDateStr(1),this.GetDateStr(2),this.GetDateStr(3),this.GetDateStr(4),this.GetDateStr(5),this.GetDateStr(6)]31 }32 start(){//點擊查詢之後執行的函數33 this.searchAddress = (document.getElementsByName(‘searchAddress‘)[0] as HTMLInputElement).value;//擷取搜尋方塊裡面的文本34 if(this.searchAddress.length!=0){//如果搜尋方塊裡面的文本不為空白,那麼結果清單出現,並且發送請求35 this.begin=true; 36 this.http.get("http://api.openweathermap.org/data/2.5/forecast/daily?q="+this.searchAddress+"&mode=json&units=metric&cnt=7&appid=f12159c1f548ea9ab7b5ff1907b1df50")37 .subscribe((data) => {38 this.Data=data;39 this.DataList=this.Data.list; 40 },41 err => { });42 }else{//如果搜尋方塊裡面的文本為空白,那麼結果清單不出現,並且不發送請求43 alert("請輸入地址");44 } 45 } 46 }
4.app.component.css
1 .content{2 width: 340px;3 margin: 0 auto;4 }5 .data{6 width: 800px;7 margin: 0 auto;8 margin-top: 10px;9 }
ps:項目中的資料介面親測可用,大家可以玩玩項目代碼地址https://github.com/Nangxif/WeatherWebApp
一款查詢天氣的WebApp