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

最新推荐文章于 2024-05-26 17:08:16 发布
最新推荐文章于 2024-05-26 17:08:16 发布
阅读量836 收藏 4
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41841658/article/details/115279789
版权

一、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展现三部分功能：回车查询、点击链接查询、点击搜索查询；每次得到查询结果后会看控制台的输出内容

 

Wu_967
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
10 使用Vue+axios+Vuex实现登录后前端数据本地化存储实战
xingyu_qie的专栏
04-03 7632
本文重点讲述Vuex的实战使用
07 基于Vue+Less+axios封装+ElementUI搭建项目底层支撑实战
xingyu_qie的专栏
03-20 3886
本小节包括Less的安装，可能会遇到的问题，安装后的初步验证；axios的安装，初步使用，以及基于内聚性和耦合性做一些封装以及功能拆解；ElementUI的安装，验证等等
b站黑马的Vue快速入门案例代码——【axios+Vue2】天知道（天气信息查询功能）
weixin_72322475的博客
12-16 3068
b站黑马的Vue快速入门案例代码——【axios+Vue2】天知道（天气信息查询功能）。！！！该案例需要更换原代码接口为本文新接口，在{{}}中根据新接口也要进行修改，才能在页面渲染数据成功。
vue入门--基础命令+axios+案例练习
鸢尾_的博客
05-13 858
vue入门--基础命令+axios+案例练习
网络应用：axios基本使用、axios+vue使用案例和源代码
weixin_49555741的博客
05-14 724
目录 1.axios 基础使用 2. axios+vue 1.axios 基础使用 功能强大的网络请求库 导包：<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 语法： axios.get(地址).then(function(response){},function(err){}) axios.post(地址).then(function(response){},fu...
Vue+axios基础项目实战——天知道（天气预报查询应用）
fy03164598的博客
03-01 2501
一、分析项目的业务逻辑 回车查询 按下回车 查询数据 渲染数据 点击查询 点击搜索或点击城市标签 查询数据 渲染数据 二、基础静态页面实现 1. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, ini..
vue+axios天气查询——天知道效果展示及源码分析
qq_45654741的博客
02-27 470
使用vue制作城市的天气查询 <!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">
elementui+axios+springboot+vue
m0_65294164的博客
04-19 241
Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架(部分使用,不是全家桶)。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。vue是一款简单的mvvm（model-view-viewmodel）框架。
Springboot + Vue + Mybatis-plus + Axios 实现数据库的增删改查
最新发布
2401_83017604的博客
05-26 1003
该案例作者也是跟着b站的博主一步一步操作的，其中有很多代码的含义我也没能彻底理解SpringBoot+Vue前后端分离实现数据增删改查教学（mybatis-plus版）_哔哩哔哩_bilibili案例涉及的技术 SpringBoot+Mybatis-Plus+Vue+Axios，需要提前学习前端的基础知识，node、js、dom编程等才能深入理解该案例的各代码的具体含义最后每篇分享：遇见你，就像跋山涉水遇见一轮明月，以后天黑心伤，就问那天借一点月光——《天堂旅行团》
vue+vuex+vueRouter+axios+element.zip
08-12
在“vue+vuex+vueRouter+axios+element.zip”这个项目中，开发者结合了Vue的核心特性与其他重要的库和工具，构建了一个功能完备的前端应用。 Vue Router 是Vue.js的官方路由管理器，它允许我们通过URL来控制应用的...
结合Vue+axios+SpringBoot开发的用户管理系统
12-15
综上所述，"结合Vue+axios+SpringBoot开发的用户管理系统"是一个涵盖前端开发、后端开发、数据库操作和API设计的综合项目，对于学习和掌握现代Web开发技术具有很高的实践价值。通过这个项目，开发者可以深入理解前后...
Vue+axios+WebApi+NPOI导出Excel文件实例方法
10-16
【Vue+axios+WebApi+NPOI导出Excel文件实例方法】 在开发中，有时我们需要实现从前端将数据导出为Excel文件供用户下载。在这个过程中，Vue.js作为前端框架，axios作为HTTP库，WebApi作为后端接口，NPOI作为.NET平台...
专栏：Vue3.0 + Typescript + axios + bootstrap +原始注释博客专栏作品
01-31
使用Axios进行数据获取 使用vue-router进行路由重组 使用Vuex进行数据管理 代码中包含清晰注释，方便阅读 文章内容支持markdown格式 如何运行 git clone cd栏 npm安装 npm install bootstrap @ next npm运行发球 ...
四、VUE基础——记事本案例（小黑记事本）
qq_41841658的博客
03-27 2448
一.分析记事本需要的功能 记事本新增事件 记事本删除事件 记事本统计事件（统计记事本中事件的数量） 记事本清空事件 记事本隐藏事件 二.记事本案例功能实现 1.新增功能 (1).步骤 写好样式后，生成列表结构(v-for和数组) 获取用户输入(v-model) 按下回车键，新增数据(v-on.enter添加数据) (2).代码实例 <!DOCTYPE html> <html lang="en"> <he.
七、VUE基础——悦听音乐播放器案例（vue+axios）
qq_41841658的博客
04-06 2109
在b站看完vue教程的悦听音乐播放器案例，有很大的收获，这里自己总结一下，由于之前不太理解弹性盒子的知识，又去b站看了另一位老师的课，也将其所给的资源下载下来发布在博客中：弹性盒子flex 首先对界面功能进行分析，从上到下是搜索栏、主体部分、音频播放进度条；其中主体部分昨从到右分为音乐播放列表、黑胶碟片的歌曲图片、留言列表。 一、功能总结 歌曲搜索：输入歌曲的相关内容按回车键搜索数据；具体步骤为按下回车-->查询数据-->渲染数据 歌曲播放 歌曲封面 歌曲评论 播放动画 mv
三、VUE基础——v-指令（下）
qq_41841658的博客
03-23 602
6.v-if指令 (1).要点 v-if指令的作用是根**据表达式的真假切换元素的显示状态** 其本质是**通过操纵dom元素来切换显示状态** v-if表达式为true，元素存在于dom树中，为false，从dom树中移除 显示状态要频繁切换使用v-show，反之使用v-if，**前者的切换只改变display属性，消耗小；后者的切换直接将元素在dom树中删除** **(2).代码实例** (2).代码实例 <!DOCTYPE html> &l...
二、VUE基础——v-指令（上）
qq_41841658的博客
03-23 429
1.v-text指令 (1).要点： v-text指令用于设置标签的文本内容(textContent) v-text会替换全部的内容，使用插值表达式{{}}可以替换指定内容，一般使用插值表达式较为方便！ (2).代码实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
vue2.0+axios+elementUI实现增删改查
06-10
好的，我可以为您提供一些参考。您可以按照以下步骤来实现： 1. 首先确保您已经安装了Vue、Axios和Element UI等必要的依赖。 2. 在Vue中创建一个组件，命名为“List”，包含以下元素： - 一个表格用于展示数据 - 一个“新增”按钮 - 一个“编辑”按钮 - 一个“删除”按钮 3. 在组件中定义一个data对象，用于存储数据，并将其绑定到表格中。 4. 使用Axios发送HTTP请求，从后端获取数据，并将其存储在data对象中。 5. 实现“新增”功能，点击“新增”按钮弹出一个对话框，输入相关信息后，使用Axios发送HTTP请求，将数据添加到后端，并更新表格。 6. 实现“编辑”功能，点击“编辑”按钮弹出一个对话框，显示当前选中的数据信息，并允许用户修改信息。使用Axios发送HTTP请求，更新后端数据，并更新表格。 7. 实现“删除”功能，点击“删除”按钮弹出一个确认对话框，确认后使用Axios发送HTTP请求，删除后端数据，并更新表格。 以上是大致的实现步骤，具体实现细节还需要根据您的后端API接口进行调整。希望对您有所帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值