vue2.0 axios前后端数据处理

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据。

前言:

使用 cnpm 安装 axios

cnpm install axios -S

安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入

为了解决这个问题,是在引入 axios 之后,修改原型链具体的实施请往下看~

改写原型链

首先在 main.js 中引入 axios

import axios from ‘axios‘

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题

Vue.prototype.$ajax = axios

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令

methods: {
  but_ajax() {
    this.$ajax({
      method: ‘post‘,
      url: ‘http://192.168.0.113:8080/llhb/m/requirement/allCategor‘,
      params: {                    //需要发送的数据
        name: ‘zhangwenwu2‘,
        age: ‘15‘
      }
   })
   //请求成功后执行then          如果直接在里面访问 this,无法访问到 Vue 实例,this指向发生了变化。建议使用箭头函数,下面有讲
   .then(function (response) {
        console.log(response);   //处理后台返回的数据
     }) 

   //请求失败后执行catch

   .catch(function(err){
        console.log(err)
     })

}

附录:配置 axios

上面封装的方法中,使用了 axios 的三个配置项,实际上只有 url 是必须的,完整的 api 可以参考使用说明

为了方便,axios 还为每种方法起了别名,比如上面的 saveForm 方法等价于:

axios.post(‘/user‘, context.state.test02)

完整的请求还应当包括 .then 和 .catch

.then(function(res){
  console.log(res)
})
.catch(function(err){
  console.log(err)
})

当请求成功时,会执行 .then,否则执行 .catch

这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例,this指向发生了变化。

这时只要添加一个 .bind(this) 就能解决这个问题,或者使用箭头函数即可

.then(function(res){
  console.log(this.data)
}.bind(this))
.then((res) => {
  console.log(this.data)
})

原文地址:https://www.cnblogs.com/wcn123456/p/9675957.html

时间: 2024-10-31 14:54:07

vue2.0 axios前后端数据处理的相关文章

前后端数据处理+数据展示分页

ContentType数据编码格式(前后端数据传输) Urlencoded格式(form表单测试) 对应的数据格式是:name=Jason&password=555 后端获取数据:request.POST 前端使用form表单传输文件 后端显示格式还是key=value对应形式,只显示传输的文件名 form-data(enctype="multipart/form-data") Form表单传输文件编码格式 后端获取文件格式数据:request.FILES 后端获取普通键值对数

Vue小项目二手书商城:(二)axios前后端数据交互

一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就不再维护vue-resourse,推荐使用axios. 2.在axios取到数据前要先写一下路由接口,不同版本vue-cli建的文件目录有一点不一样. 我用的是vue2.5.2,写路由接口是在build文件夹下的某文件,以下分别列出高版本和低版本写法: ①2.5.2版本 文件里加上这些程序: devServer里加上: ②低版本 文件里加上这些程序: 二.使

全程真实数据对接 带你从0开发前后端分离的企业级上线项目

<ignore_js_op> 第1章 课程介绍(2018配套教程:电商前端+电商后端+电商权限管理系统课程)本章中会先让大家了解课程整体情况,然后手把手带大家做一些开发前的准备工作.后台管理系统测试账号和密码(切勿修改,导致其他同学体验不了)        账号:admin 密码:admin (Java一期课程ID:96,Java二期进阶课程ID:162,权限系统课程:ID:149,http://coding.imooc.com/class/XXX.html ,访问时将前面网站中的XXX换成.

Vue-CLI项目-axios模块前后端交互(类似ajax提交)

08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$route.params.pk || this.$route.query.pk

vue前后端分离

axios前后端交互 安装 一定要安装到`项目目录下 cnpm install axios 配置 在main.js中配置 //配置axios import axios from 'axios' Vue.prototype.$axios = axios; 在组件中发送ajax请求 created(){ //发送axios请求 this.$axios({ url:this.$settings.base_url+'/cars/', method:'get', params:{ } }).then(re

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║ Vue前篇:ES6初体验 &amp; 模块化

缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很感兴趣,嗯~~这一块确实挺枯燥的,不能直接拿来代码跑一下那种,不过还是得说下去,继续加油吧!如果大家对昨天的小demo练习的话,相信现在已经对JS的面向对象写法很熟悉了,如果嵌套字面量定义函数,如何使用this关键字指向.今天呢,主要说一下ES6中的一些特性技巧,然后简单说一下模块化的问题,好啦,开始今天的讲

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

系列教程一目录:.netcore+vue 前后端分离 系列教程二目录:DDD领域驱动设计 系列教程三目录:Nuxt.js TiBug系统 系列教程四目录:VueAdmin 后台管理系统 系列教程五目录:IdentityServer4 授权服务器 本文梯子 前言 零.今天要完成实战1中的红色部分 一.常见的 Vue 表单提交是如何设计的? 1.表单.按钮等在一个组件内 2.按钮在父组件.表单在单独的子组件内 二.通过 $emit 修改父组件数据 1.在原来代码里 About.vue 修改成 For

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║实战二:初探SSR服务端渲染(个人博客二)

缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大家增加点儿学习的动力,每天提醒下,完全没有提纲或者安排说明什么的,就是按照我自己学的方向走,正好发现了一个规律就是:每一个系列正好是 1 个引子 + 12 篇正文,不知道大家对这个有没有感觉,大家可能看到我的头像就知道了,哈哈,其实我是一个红迷,正好这里机缘巧合,两个系列都形成了这样的,我自私的给自