<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
.container{
width: 80%;
margin: 0 auto;
border:1px solid #cccccc;
border-radius: 10px;
padding: 40px;
}
table{
margin-top: 40px;
}
</style>
<body>
<div class="container">
<form class="form-inline">
<label for="city">请选择城市:</label>
<input type="text" class="form-control" id="city" placeholder="请选择城市" v-model="city">
<button type="button" class="btn btn-primary" v-on:click="search">查询</button>
</form>
<table class="table table-bordered">
<thead>
<tr>
<th>城市</th>
<th>日期</th>
<th>温度</th>
<th>天气情况</th>
<th>风向</th>
</tr>
</thead>
<tbody>
<tr v-for="item in info">
<td>{{ city }}</td>
<td>{{ item.date }}</td>
<td>{{ item.temperature }}</td>
<td>{{ item.weather }}</td>
<td>{{ item.direct }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
new Vue({
el: '.container',
data () {
return {
info: null,
city: null
}
},
// mounted () {
//
// },
methods:{
search:function(){
_this = this;
axios
.get('http://www.1809A.com/api/Index/index/city/'+_this.city)
.then(function (response) {
_this.info = response.data.result.future;
_this.city = response.data.result.city;
})
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
}
})
</script>
</html>
api模块index控制器kuaidi方法
public function index()
{
// 查询天气预报
$city = input("city");
// 确定接口地址：
$url = "http://apis.juhe.cn/simpleWeather/query";
// 确定参数
$param = ['city'=>$city,'key'=>'7808686de93c14aae043ee1b8eb9916c'];
// 调用函数执行
$result = curl_request($url,true,$param);
// 判断结果
if(!$result){
echo "查询失败";
die;
}
// 成功
return $result;
}
