tp 天气Vue参考

<!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;

    }
巴特西

tp 天气Vue参考

最新文章

热门文章
