axios+vue整合和小demo

最新推荐文章于 2023-02-14 15:49:33 发布

Ajekseg

最新推荐文章于 2023-02-14 15:49:33 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 html 文章标签： redis 缓存 java

本文链接：https://blog.youkuaiyun.com/Ajekseg/article/details/123344152

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

html

46 篇文章

订阅专栏

本文介绍了一个axios与vue结合的小型演示项目，包括如何处理axios中回调函数的this问题，以及实现了三种查询功能：回车查询、点击搜索和直接查询热门城市。项目代码分别展示了HTML和main.js的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <h1>
            {{ joke }}
        </h1>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vue = new Vue({
            el: "#app",
            data: {
                joke: ""
            },
            methods: {
                getJoke: function () {
                    let that = this;
                    axios.get("https://autumnfish.cn/api/joke")
                        .then(function (response) {
                            console.log(response);
                            that.joke = response.data;
                        }, function (err) {
                            console.log(err);
                        })
                }
            }
        })
    </script>

注意：

axios回调函数中的this已经改变，无法访问到data中的数据
可以通过在还没有使用axios时，使用一个变量将this存储起来。

天知道小demo

在这里插入图片描述
说明：

1.输入框输入城市回车查询功能
2.输入框输入城市点击搜索查询功能
3.点击热门城市直接查询功能

在这里插入图片描述

HTML:

<div id="app">
        <h1>天知道</h1>
        <input type="text" v-model="city" placeholder="请输入要查询天气的城市" @keyup.enter="serchWeath(city)">
        <input type="button" value="搜索" @click="serchWeath"> <br>
        <a href="#" @click="getWeath('深圳')">深圳</a>
        <a href="#" @click="getWeath('北京')">北京</a>
        <a href="#" @click="getWeath('杭州')">杭州</a>
        <a href="#" @click="getWeath('上海')">上海</a>
        <div v-for="(item,index) in weathList">
            <h4>{{ item.type }}</h4>
            <h6>{{item.low}} ~ {{item.high}}</h6>
            <h5>{{ item.date}}</h5>
        </div>
</div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/main.js"></script>

main.js

let vue = new Vue({
    el: "#app",
    data: {
        city: "",
        weathList: []
    },
    methods: {
        serchWeath: function () {
            let that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city)
                .then(function (response) {
                    console.log(response);
                    that.weathList = response.data.data.forecast;
                })
        },
        getWeath: function (city) {
            this.city = city;
            this.serchWeath();
        }
    }
});

效果：
在这里插入图片描述