MVC控制器类的访问、参数解析、api接口数据获取并渲染

1.MVC控制器类的访问与参数解析

namespace demomvc;
class MoneyController
{
    public function shop($name,$ye)
    {
        return '商品:'. $name . ',优惠'. $ye. '元';
    }
}
echo $_SERVER['PATH_INFO'];
// 分割过滤成数组
$pathinfo = array_filter(explode('/',$_SERVER['PATH_INFO']));
// 解析控制器
$controller = __NAMESPACE__ .'\\' . array_shift($pathinfo) . 'Controller';
// 解析方法
$action = array_shift($pathinfo);
// 从url中解析出参数
printf('<pre>%s</pre>',print_r($pathinfo,true));
// 将参数保存在params数组中
$params = [];
for ($i = 0; $i<count($pathinfo);$i += 2) {
    if (isset($pathinfo[$i+1]))
    $params[$pathinfo[$i]] = $pathinfo[$i+1];
}
printf('<pre>%s</pre>',print_r($params,true));
echo '<hr>';
// 输出结果
echo call_user_func_array([(new $controller),$action],$params);

2.通过用户输入城市名查询天气并渲染出来

<?php
// 秘钥
$key = 'key';
// 请求地址
$url = 'http://apis.juhe.cn/simpleWeather/query?';
$serch = $_GET['serch'];
// var_dump($serch);
// 城市
$city = $serch;
// 构造查询参数
$query = http_build_query(['key'=>$key,'city'=>$city]);
// CURL:发起HTTP请求
$cx = curl_init();
// 设置请求的url完整地址
curl_setopt($cx,CURLOPT_URL,$url.$query);
// 设置请求类型为get
curl_setopt($cx,CURLOPT_HTTPGET,true);
// 去掉头信息
curl_setopt($cx,CURLOPT_HEADER,false);
// 默认是浏览器输出，只返回不输出
curl_setopt($cx,CURLOPT_RETURNTRANSFER,true);
$api = curl_exec($cx);
// echo $api;
curl_close($cx);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
    <style>
        table {
            color: #555;
            background-color: #efefef;
            border-collapse: collapse;
            width: 600px;
            text-align: center;
            margin: auto;
        }
        td {
            border: 2px solid #FFF;
            padding: 5px;
        }
        table caption {
            font-size: 1.2rem;
            margin-bottom: 15px;
        }
        table thead tr:first-of-type {
            background-color: darkturquoise;
            color: white;
        }
        #serch {
            text-align: center;
            padding: 20px;
        }
        #serch input {
            outline: none;
            border-radius: 10px;
            padding: 10px;
            border:1px solid lightcoral
        }
    </style>
</head>
<body>
<form action="" method="get" id="serch">
查询：<input type="text" name="serch"  value="" placeholder="请输入要查询的城市名" />
</form>
    <script>
        // 获取天气数据
        const obj = <?=$api?>;
        // 创建表格元素
        const table = document.createElement('table');
        // 创建表头:城市名+标题
        table.createCaption().textContent = obj.result.city + '天气预报';
        // 创建表头，并尾部添加新行，将参数填入
        const tr = table.createTHead().insertRow(-1);
        tr.insertCell(0).innerText = '日期';
        tr.insertCell(1).innerText = '气温';
        tr.insertCell(2).innerText = '雨雪';
        tr.insertCell(3).innerText = '风向';
        // 遍历未来几天天气对象数组
        obj.result.future.forEach(item=>{
            // 先生成一个新行，并插入到尾部
            const row = table.insertRow(-1);
            let date = new Date(Date.parse(item.date.replace(/-/g,'/')));
            // 组装成符合国人阅读习惯的格式
            let timeStr = `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
            // 遍历每一天的天气对象数组，并填充到生成的单元格中
            row.insertCell(0).innerText = timeStr;
            row.insertCell(1).innerText = item.temperature;
            row.insertCell(2).innerText = item.weather;
            row.insertCell(3).innerText = item.direct;
            // 将生成的插入到表格元素中
            table.appendChild(row);
        });
        // 将表格添加到页面中
        document.body.appendChild(table);
    </script>
</body>
</html>

1.MVC控制器类的访问与参数解析

2.通过用户输入城市名查询天气并渲染出来

更多相关文章

随机推荐