The Weather
阿新 • • 發佈：2018-11-21
pan 地址 parse -s eight cat ltrim temp empty
後臺：
<?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