The Weather

Posted afeige

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章

Lv1-Lesson005Small Talk about the Weather

环境初始化 Build and Install the Apache Thrift IDL Compiler Install the Platform Development Tools(代码片段

maven web项目的web.xml报错The markup in the document following the root element must be well-formed.(代码片段

What's the difference between @Component, @Repository & @Service annotations in Spring?(代码片段

RuntimeError: An attempt has been made to start a new process before the current process has...(代码片段

detectron2报AttributeError: Attribute ‘evaluator_type‘ does not exist in the metadata of dataset(代码片段