vue使用axios天气API练手教程-CFANZ编程社区

vue使用axios天气API练手教程

效果图展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
</head>
<style>
    li {
        list-style: none;
        float: left;
        padding: 20px;
    }
    ul li > div {
        border:1px solid #e5e6
    }
</style>

<body>
    <!-- 引入vue提供CDN的axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
    <div id="app">
        <h2>天气搜索--{{city}}</h2>
        <input v-model.trim="city" @keyup.enter="onEnter" type="text" placeholder="请输入你要查询的城市天气">
        <ul>
            <li v-for="item in list">
                <div>日期：{{item.date}}</div>              
                <div>最高温：{{item.high}}</div>
                <div>最低温：{{item.low}}</div>
                <div>风力：{{item.fengli}}</div>
                <div>风向：{{item.fengxiang}}</div>
                <div>雨势：{{item.type}}</div>
            </li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    city: "",
                    list: []
                }
            },
            methods: {
                onEnter() {
                    //axios.get()方法发送API请求，获取数据
                    axios.get('http://wthrcdn.etouch.cn/weather_mini?citykey=101280601')
                        .then( (res) => {
                            console.log(res.data);
                            //把获取到的数据给到list数组里面进行遍历
                            this.list = res.data.forecast;
                            console.log(this.list)
                        })
                            //是否发送错误请求
                        .catch( (err) => {
                            console.log(err);
                        });
                }

            },
        })
    </script>
</body>
</html>

  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

console.log(response.data.forecast);//我们就找到了有关天气未来5天的详情。

其他之于post和get方式请求详情网址：http://www.axios-js.com/zh-cn/docs/

0 条评论