vue实战使用ajax请求后台数据(小白)

Posted 慕斯蛋糕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实战使用ajax请求后台数据(小白)相关的知识,希望对你有一定的参考价值。

vue实战使用ajax请求后台数据(小白)

前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它。

vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/234845

第一步:Axios的安装和引入

1.使用npm安装:

$npm install axios -S 

2.在vue项目公共文件(我这里是main.js文件)中引入:

import axios from "axios";

3.但是呢axios跟很多第三方模块不同的一点是它不能直接使用use方法,而是用下面这种方法:

Vue.prototype.$axios = axios;

4.这样呢在methods里用到的时候直接用this.$axios来调用它:

this.$axios.get(接口地址).then(function(respon){}).catch(function(error){})

  

 

第二步:axios.get(这次先讲get的实例,下一篇写用axios.post显现登录功能)

1.通过params选项来传递参数的格式是 axios.get(\'url\',{params:{key:value}}).then() ;

2.本次实例的axios请求后台数据代码:

//右边学员动态
        getbuyer: function () {
          this.$axios.get(this.GLOBAL.host+"/pub/api/v1/web/list_buyer",{
            params:{
              video_id:this.$route.query.video_id
            }
          }).then(res=>{
            var result = res.data;
            if (result.code == 0) {
              this.buyerArr = result.data;
            }
          })
        }

解析:

1)this.GLOBAL.host: 由于一个项目中会有很多次ajax请求,我们可以把域名封装在一个单独的模块中,然后用到的时候直接调用,操作代码如下:

首先:在main.js全局文件中import我们的封装模块global:

import Global from \'../static/config/global\'

然后:将上面的Global挂载到Vue.prototype:
Vue.prototype.GLOBAL = Global;

其次:host是在global.js模块中封装的域名:
const host = \'http://api.xdclass.net:8081\';

最后:在每次axios请求的时候,直接 this.GLOBAL.host+"后台接口地址"这样就可以了

2)params里面是请求接口时的参数,可以一个也可以多个,用“,”隔开;

3)我这个参数写法 this.$route.query.video_id ,意思是获取到当前页面地址栏中url参数名为video_id的参数值;

4).then中就是请求接口成功后要做的事情,res是responce的简写,就是成功后后台给我们返回的对象,数据就在这个对象里面;

5)this.buyerArr 是定义在data中的一个空数组,用来接收后台返回的数据

最后:一个简单的axios请求实例就写完了,在这里给新手们推荐一款软件Postman用来模拟请求后台数据,非常简单易用,也能更好的观察接口数据;下面是我的一个例子

 

  这个例子就这么多,下次就写post做登录的例子,大家也可以一起来:854讨论656前端的221各种问题和bug,一起学习一起进步;

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://www.cnblogs.com/nbb-hbb/

 

以上是关于vue实战使用ajax请求后台数据(小白)的主要内容,如果未能解决你的问题,请参考以下文章

Vue中使用Ajax与后台交互

解决Vue axios post请求,后台获取不到数据的问题方法

vue2.0项目实战--使用axios发送请求

使用$.ajax调用接口,返回登录页面,所以我想先用ajax将用户名密码传给登录接口。返回成功但没有记住登录

ajax实战:(ajax异步下载文件)请求二进制流进行处理

Vue结合后台的增删改案例