一、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 340px; 3 margin: 0 auto; 4 } 5 .data{ 6 800px; 7 margin: 0 auto; 8 margin-top: 10px; 9 }