The Weather
后台：
<?php
//接受查询的城市
$city = $_GET['city'];
//连接redis
$redis = new redis();
$redis->connect("127.0.0.1","6379");
//选择redis数据库
$redis->select(1);
//获取是否已经查询过（生命周期为半小时）
$res= $redis->Get("$city");
//进行判断
if(!empty($res)){
//将redis存储的数据转换为json
$new_datas=unserialize($res);
//反馈给前台存储在redis中的数据
echo json_encode($new_datas);
}else {
//数据来源
$url = "http://api.map.baidu.com/telematics/v2/weather?location=" . $city . "&ak=自己的AK(自行获取)&output=json";
//获取数据
$data = file_get_contents($url);
//转换为数组
$results = json_decode($data, true);
//反馈的结果
if ($results['error'] == '-3') {
echo "-3";
die;
}
//返回主体信息（错误信息，状态，当前查询城市）
$new_data[] = [
'error' => $results['error'],//返回错误信息
'status' => $results['status'],//返回状态
'currentCity' => $results['currentCity'],//返回查询的城市
];
//获取日期（week），最低温度（low）,最高温度（high）
foreach ($results['results'] as $k => $v) {
//截取字符串
// $new_data['week'][]=substr($v['date'],0,6);
$new_data['low'][] = rtrim(substr($v['temperature'], 0, 4), '~');//最低温度
$new_data['high'][] = ltrim(rtrim(substr($v['temperature'], 4, 5), '℃'),'~');//最高温度
};
//获取详细信息
foreach ($results['results'] as $k => $v) {
$new_data['results'][$k] = [
'date' => $v['date'],//日期
'dayPictureUrl' => $v['dayPictureUrl'],//白天温度图片
'nightPictureUrl' => $v['nightPictureUrl'],//夜晚温度图片
'wind' => $v['wind'], //风级
'temperature' => $v['temperature'], //温度范围
];
}
//serialize转换方便存储数据
$new_datas = serialize($new_data);
//存储查询出来的数据
$redis->set("$city", "$new_datas");
//设置生命周期（半个小时）
$time = 1*60*30;
$redis->expire("$city","$time");
//反馈给前台新查询数据
echo json_encode($new_data);
} ?>
前台：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>查询天气情况</title>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<center>
<table>
<tr>
<td>输入要查询的城市：</td>
<td><input type="text" name="city" id="city"></td>
<td align="center" colspan="2"><input id="btn" type="button" value="查询"></td>
</table>
<div id="container" style="width: 600px;height:400px;"></div>
</center>
<script>
// 简单进行一些输入判断
$("#city").blur(function() {
var city = $("#city").val();
var reg = /^[\u4e00-\u9fa5]+$/;
if(city==""){
alert("输入框不能为空");
return false;
}else if(city.length>30){
alert("长度不能超过30");
return false;
}else if(!reg.test(city)){
alert("请输入正确的地址");
return false;
}else{
return true;
}
});
//点击按钮查询
$("#btn").click(function(){
var city = $("#city").val();
$.get(
"./cityweather.php?city="+city,
function(data) {
if(data==''){
//没有数据
alert("没有此城市信息");
} else if(data=='-2') {
//获取不到当前城市的信息
alert("请输入要查询的城市名称");
} else if(data=='-3'){
//没有这个城市
alert("对不起，没有您想要的");
}else {
var res = JSON.parse(data);
var date=[];
var low=[];
var high=[];
for(var i=0;i<res.results.length;i++){
//日期
date[i] = res['results'][i]['date'];
//最低温度
low[i]=parseInt(res['low'][i]);
//最高温度
high[i]=parseInt(res['high'][i]);
}
// 图表配置
var options = {
chart: {
type: 'line'
},
title: {
text: '温度变化范围' // 标题
},
subtitle: {
text: '搜索城市:'+res[0].currentCity
},
xAxis: {
categories: date // x 轴分类
},
yAxis: {
title: {
text: '温度' // y 轴标题
}
},
series: [{ // 数据列
name: '最高气温', // 数据列名
data: high // 数据
}, {
name: '最低气温',
data: low
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
}
});
});
</script>
</body>
</html>
我给的是背景，自己打的才叫天下。
The Weather的更多相关文章
- [整理]Android开发（二）-Weather App
private class WeatherData{ private String _weatherDescription; private Integer _currentTemperature; ...
- Windows 10 Weather App无法正常显示解决方法
Weather动态磁贴显示Washington(不知是否和我的region设置有关系),打开应用却停留在输入需要搜索的天气.根据提示输入"Shanghai, China"并单击搜索 ...
- Java hour 52 Weather
采用jetty 后,默认的welcome-file-list 配置失效了,直接跳转到了struts2 的control 中去了. <welcome-file-list> <welco ...
- Java Hour 49 保存和查询历史的Weather
吾一直坚信,是需求的不断变化推动了架构的不断演变. 新的需求 能够查看指定日期的Weather,因为客户想要比较昨天和今天的天气情况,所以需要能够查询历史数据的功能. 1 能保存当前的天气到数据库 2 ...
- Java Hour 43 Weather ( 12 ) - 杭州 Show
终于从fastjson 的阴影中走出来了,接下去就是显示一个完整的天气信息了. 43.1 Weather Show 首先增加Model 中的属性. public class Weatherinfo { ...
- Java Hour 37 Weather ( 10 )
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 36 Weather 从失败的地方爬起来 在jsp 中,使用EL 表 ...
- Java Hour 32 Weather ( 5 ) struts2 – Action class
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 32 Struts2 Action 1 将action 映射到 ac ...
- Java Hour 29 Weather ( 2 ) Maven
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 29 Weather 界面 数据源采用上次取得的杭州天气的json. ...
- Java Hour 21 Weather
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 本文作者Java 现经验约为21 Hour,请各位不吝赐教. 继续心情不佳,那 ...
- PYTHON WEATHER
小玩一下python强大的库文件,调api获取天气情况 #coding:utf-8 import urllib import json content = urllib.urlopen('http:/ ...
随机推荐
- 第一个博客——python通过值传递函数参数
功能:银行账户计算利率(python实现) 部分代码: def addInterest(balance, rate): newBalance = balance * (1 + rate) balanc ...
- web在线智能四则运算挑战赛
本网站主要针对小学生,是一个智能在线学习和测试平台,平台有精美炫酷的网页,和可靠的数据,主要特色,自动出题.验证码机制.非空检测.正则匹配不同年级同学而出不同难度的题目,在线结算.时间控制,时间一到自 ...
- 4 Django应用 第3部分（视图部分）
接着昨天写的那篇笔记,今天继续学习DJango中的内容.这一章主要是介绍Django中的视图部分. 4.1视图理念 4.2编写第一个视图 4.3编写更多的视图 4.4给视图编写功能 4.5render ...
- 【转】Win32程序中调用ActiveX控件
#include "stdafx.h" #include <iostream> #include <windows.h> #include <comd ...
- wc语法
统计当前目录下的所有文件行数: wc -l * 当前目录以及子目录的所有文件行数: find . * | xargs wc -l 可以把*改成所要匹配的文件,例如Java文件,*.java这样就只统 ...
- JS的异步操作
异步操作: 1.定时器都是异步操作 2.事件绑定都是异步操作 3.AJAX中一般我们都采用异步操作 4.回调函数可以理解为异步 同步:一次只能完成一个任务,如果多个任务就必须排队,先前面一个任务再执行 ...
- 如何在Linux下添加函数库
如何为Linux增加库一． 静态库在Linux下的静态库是以.a为后缀的文件.1． 建静态库h1.c 源文件#include<stdio.h>void hello1(){printf(“t ...
- 印象笔记无法连服务器（internet explore的问题）
https://www.zhihu.com/question/20214497?sort=created
- # 20175120 2018.3.10 《Java程序设计》第2周学习总结
## 教材学习内容总结第二章内容1.标识符第一个字符不能是数字字符不能是关键字和true\false\null2.8个基本数据类型boolean int byte short long float d ...
- Arcmap查找孤路
本文将介绍如何查出孤路——如下图红色框中的路: 方法一:使用拓扑检查 1. 使用merge,将所有道路合并到一个图层.注意,不能先分图层进行拓扑检查,因为本不是孤路的数据可能会被挑出来. 2. 对合并 ...