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>

  

我给的是背景,自己打的才叫天下。

posted @ 2018-11-21 11:38  杨宇飞  阅读(411)  评论(0编辑  收藏  举报