六、VUE基础——axios+vue(天知道案例)

一、vue+axios结合使用获取随机笑话

在vue中使用axios发送请求,这里使用的是get请求方法,也可以使用post方法

1.步骤

  • 导入vue和axios,这两个引入的先后顺序无所谓,但是一定要保证在开始写vue代码之前引入
  • 使用v-on绑定click事件,在p标签中显示获取的笑话内容
  • 在vue中写获取笑话的逻辑,即使用axios.get().then()方法获取随机笑话

 

2.代码实例

<!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>Document</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>   <!--引入axios-->

</head>
	
	<body>
		<div id="app">
		   <input type="button" value="get请求"  @click=getjoke>
           <p>{{joke}}</p>
		</div>
		<script>
			/*
                接口1:随机获取一条笑话
                请求地址:https://autumnfish.cn/api/joke
                请求方法:get
                请求参数:无
                响应内容:随机的一条笑话
            */
            var app=new new Vue({
                el:"#app",
                data :{
                    joke:"lalal",
                },
                methods:{
                    getjoke:function(){
                        var that=this;
                        axios.get("https://autumnfish.cn/api/joke").then(function(response){
                            console.log(response.data);  //控制台打印
                            console.log(this.joke)  //此时在控制台打印this.joke不是lalal,而是undefined,说明this指代的对象变了,所以不能直接把response.data中的值赋给this.joke,需要在函数外先保存this,这里把this的值赋给that
                            that.joke=response.data;
                        },
                        function(err){
                            console.log(err)  //发生错误再控制台打印错误信息
                        })
                    }
                }
            }) 
		</script>
	</body>
</html>

 

3.要点提示

  • axios回调函数中的this已经改变,无法访问到data中的数据
  • 把this保存起来,回调函数中直接使用保存的this即可
  • 和本地应用的最大区别就是改变了数据来源,本地应用中数据来源于vue中的data,数据是本地的;而采用axios发送请求后,数据的来源是回调函数返回的数据

 

4.执行结果

 

二、天知道案例

1.功能介绍

  • 回车查询
  • 点击查询

2.功能实现

(1).步骤

  • 设计样式;
  • 回车查询:使用v-on给文本框设置按下键盘回车( @keyup.enter)查询天气事件;并且使用v-model双向绑定city数据;利用table标签来显示数据,其中使用v-for生成td或者th列表显示数据;
  • 在Vue中使用创建方法查询天气( weatherquery());使用axios.get回调方法获取数据;获取到数据后将数据赋给保存天气数据的数组(weathercontent[]);
  • 点击链接查询:使用v-for生成a标签列表;使用v-on给a标签设置点击(@click)事件;创建方法(changeWeather())实现点击链接查询;在方法中将形参赋值给this.city,由于之前文本框已经进行了双向绑定,这时候将a标签中的城市名称文本值传入方法中即可实现文本框的值随着city值的变化;并且在方法内部调用weatherquery()实现查询;
  • 点击“搜索”按钮查询:使用v-on给button设置点击(@click)事件;创建方法(cbtnchangeWeather())实现点击按钮查询;在方法内部调用weatherquery()实现查询;

 

(2).要点

  • 在weatherquery()中,axios回调函数中this指向变了,所以需要定义一个额外的变量保存一份
  • 使用回调函数返回的数据比较复杂时,获取数据需要注意层级结构
  • 使用自定义参数可以让代码的复用性更高
  • 在vue的methods方法内部,可以通过this .方法名(参数)来调用其他方法

 

(3).代码实例

<!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>Document</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>   <!--引入axios-->
    <style>
        .header{
            margin-top: 100px;
            text-align: center;
            color:rgb(150, 185, 125) ;
        }
        .search{
            width: 100%;
            height: 40px;
        }
        .searchinput{
            width: 30%;
            height: 100%;
            margin-left: 35%;
            float: left;
        }
        .searchbtn{
            float: left;
        }
        .search-footer{
            width: 100%;
            margin-left: 35%;
        }
        .search-footer a{
            color:rgb(200,200, 200);
            text-decoration: none;
        }
        .weather-show{
            width: 100%;
            margin-left: 23%;
            line-height: 50px;
            margin-top: 30px;
        }
        .firstline th{
            width:150px;
            text-align: center;
            color: rgb(255, 164, 90);
            padding-left:10px;
            font-size: 30px;
        }
        .secondlline td{
            text-align: center;
            width:150px;
            color: rgb(255, 164, 90);
        }
        .thirdlline td{
            text-align: center;
            color:rgb(200,200, 200);
        }
    

    </style>
</head>
	
	<body>
		<div id="app">
		   <div class="header">
                <h2>天知道</h2>
           </div>
          
            <div class="search">
                   <div class="searchinput">
                        <input type="text " class="form-control" placeholder="请输入查询的天气" @keyup.enter="weatherquery" v-model="city">
                   </div>
                   <div class="searchbtn">
                        <input type="button" class="btn btn-success" value="搜索" @click="btnchangeWeather">
                   </div>
            </div>
            <div class="search-footer">
                <a href="javascipt:"  v-for="item in cities" @click="changeWeather(item)">{{item}}&nbsp;</a>
                <!-- <a href="Javascipt:void()" @click="changeWeather('北京')">北京</a> -->
               
            </div>
            
            <div class="weather-show">
                 <table>
                     <tr class="firstline">
                         <th v-for="item in weathercontent">{{item.type}}</th>  <!--response中的type表示天气类型-->
                     </tr>
                     <tr class="secondlline">
                         <td v-for="item in weathercontent">{{item.high+"~"+item.low}}</td>   <!--response中的high表示最高气温,low表示最低气温-->
                     </tr>
                     <tr class="thirdlline">
                         <td v-for="item in weathercontent">{{item.date}}</td>  <!--response中的date表示日期-->
                     </tr>
                 </table>
            </div>
         </div>
           
           
		<script>
            var app=new new Vue({
                el:"#app",
                data:{
                   city:'',   //城市名
                   weathercontent:[],   //记录返回的天气信息
                   cities:['北京','上海','广州','深圳'],
                },
                methods: {
                    weatherquery:function(){  //回车查询天气
                        var that=this;   //由于this指代的对象会变化,所以在这里用that提前保存this
                        axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)   //请求地址和参数
                        .then(function(response){
                            console.log(response);   //再控制台输出response返回的内容,可以看到response.data.data.forecast才返回的天气的详细内容
                            that.weathercontent=response.data.data.forecast;
                        },
                        function(err){
                            console.log(err);
                        })
                },
                    changeWeather:function(p1){   //点击快捷键查询天气
                        console.log(p1);   //输出pa,看传入的参数对不对
                        this.city=p1;    //将传入的参数赋给city,这样就改变了data中定义的city,会改变所有使用city的地方
                        console.log(this.city);   
                        this.weatherquery();
                    },
                    btnchangeWeather:function(){  //点击搜索按钮查询天气
                        console.log(this.city);
                        this.weatherquery();
                    }
                }
                   
            })
		</script>
	</body>
</html>

(4).结果

gif展现三部分功能:回车查询、点击链接查询、点击搜索查询;每次得到查询结果后会看控制台的输出内容

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值