一款查询天气的WebApp
来源:互联网 发布:什么叫网络 编辑:程序博客网 时间:2024/04/29 11:25
一、WebApp介绍
1.初始界面
2.搜索结果页面
二、项目代码
1.项目目录
--------app
----------app.component.ts
----------app.component.css
----------app.component.html
----------app.module.ts
2.app.component.html
<div class="content"><div><img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="></div><h2>{{title}}</h2><div><form class="form-inline"> <div class="form-group"> <label for="exampleInput">Address</label> <input type="text" class="form-control" id="exampleInput" placeholder="Please input the address" name="searchAddress"> </div> <button type="button" class="btn btn-default" (click)="start()">Search</button></form></div></div><div class="data" *ngIf="begin"><table class="table table-striped"><thead><tr><th>日期</th><th>天气</th><th>日间温度</th><th>夜间温度</th><th>气压值</th><th>湿度</th><th>天气情况</th></tr></thead><tbody><tr *ngFor="let DL of DataList;let i=index;"><td>{{dateString[i]}}</td><td>{{DL.weather[0].main}}</td><td>{{DL.temp.day}}</td><td>{{DL.temp.night}}</td><td>{{DL.pressure}}</td><td>{{DL.humidity}}</td><td><img src="http://openweathermap.org/img/w/{{DL.weather[0].icon}}.png"/></td></tr></tbody></table></div>
3.app.component.ts
import { Component, OnInit } from '@angular/core';import {HttpClient} from '@angular/common/http';import 'rxjs/add/operator/toPromise';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent{ title = 'A weather search App!'; public http; Data:any; begin=false;//控制天气结果列表是否出现 searchAddress:string;//查询框文本的变量声明 dateString:string[];//天气结果列表的七个日期数组声明 DataList:any;//获取到的数据列表变量声明 constructor(private Http:HttpClient) { this.http = Http; } now=new Date()//获取当前时间 GetDateStr(AddDayCount :number) { this.now.setDate(this.now.getDate()+AddDayCount);//获取AddDayCount天后的日期 let y = this.now.getFullYear(); let m = this.now.getMonth()+1;//获取当前月份的日期 let d = this.now.getDate(); return y+"年"+m+"月"+d+"日"; } ngOnInit() {//在组件加载进来的时候就执行 this.dateString=[this.GetDateStr(0),this.GetDateStr(1),this.GetDateStr(2),this.GetDateStr(3),this.GetDateStr(4),this.GetDateStr(5),this.GetDateStr(6)] } start(){//点击查询之后执行的函数 this.searchAddress = (document.getElementsByName('searchAddress')[0] as HTMLInputElement).value;//获取搜索框里面的文本 if(this.searchAddress.length!=0){//如果搜索框里面的文本不为空,那么结果列表出现,并且发送请求 this.begin=true; this.http.get("http://api.openweathermap.org/data/2.5/forecast/daily?q="+this.searchAddress+"&mode=json&units=metric&cnt=7&appid=f12159c1f548ea9ab7b5ff1907b1df50") .subscribe((data) => { this.Data=data; this.DataList=this.Data.list; }, err => { }); }else{//如果搜索框里面的文本为空,那么结果列表不出现,并且不发送请求 alert("请输入地址"); } } }
4.app.component.css
.content{width: 340px;margin: 0 auto;}.data{width: 800px;margin: 0 auto;margin-top: 10px;}
ps:项目中的数据接口亲测可用,大家可以玩玩
项目代码地址https://github.com/Nangxif/WeatherWebApp
阅读全文
0 0
- 一款查询天气的WebApp
- AJAX 的天气查询
- 简单的天气查询
- Nodejs 实现天气的查询
- 一款天气app的温度曲线图的实现
- 我的第一款iOS App: 极简天气 1.0
- Android 实践:做一款可用的天气 APP
- 天气查询
- 天气查询
- 查询天气
- 天气查询
- 天气查询
- 查询天气
- 查询天气
- 基于多线程Http服务器的查询天气
- 调用天气查询webservice服务的方法
- css实现一款漂亮的查询框
- 怎样在ios中的Safari内开发出一款类似native app一样的全屏webapp
- JAVA中关于set()和get()方法的理解及使用
- Ubuntu14.04 安装Android studio
- 74
- java动态代理详解
- NGUI Sprite(精灵的使用)
- 一款查询天气的WebApp
- java错误:找不到或无法加载主类
- 2.JVM运行时数据区域
- 剑指offer
- TP5中文名上传乱码,解决办法
- html评论中星星点亮的效果jquery代码
- C++STL系列 结构体运算符重载及优先队列的使用
- 设计模式-模板方法模式
- Shell脚本编程-分支与循环