一、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='/images/loading.gif' data-original="data:image/svg+> 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='/images/loading.gif' data-original="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

关键词：web