使用Vue-axios进行数据交互的方法

目录
  • 1、安装axios
  • 2、axios的使用
  • 3、讲一下代理proxyTable的使用

1、安装axios

  • 打开cmd命令行工具
  • cd到项目目录
  • 输入以下命令
npm install axios

提示安装完成以后，打开main.js

输入以下代码:

import axios from 'axios'

接着在底下输入:

Vue.prototype.$axios = axios

配置就完事了

2、axios的使用

this.$axios({
        method: 'post',//交互方式
        url: '/api/ImgHandle',//url地址
        data: {page: page}//需要交互的数据
      }).then((res) => {
        console.log(res)//成功   res为返回的结果
      }).catch((error) => {
        console.log(error)//失败   打印异常
      })

3、讲一下代理proxyTable的使用

一般在开发时，地址都在本地，会出现跨域报错，报错示例如下:

Failed to load http://192.168.1.111:8888/console/good/front/classList:
 Response to preflight request doesn’t pass access control 
check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
 Origin ‘http://localhost:8081’ is therefore not allowed access. 
 If an opaque response serves your needs, 
 set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

如果后端不修改，那就前端操作修改一下:

  • 找到 config/index.js
  • 找到 proxyTable进行修改
 proxyTable: {
      '/api': {  //使用"/api"来代替"http://www.xxx.com/"
        target: 'https://www.xxx.com/', //源地址
        changeOrigin: true, //改变源
        pathRewrite: {
          '^/api': 'https://www.xxx.com/' //路径重写
        }
      }
    },

然后重新运行一下，即可生效，操作失败就再检查一下代码

到此这篇关于使用Vue-axios进行数据交互的方法的文章就介绍到这了,更多相关Vue-axios数据交互内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中axios的使用详解

    vue中axios的使用详解

    目录 1.选择什么网络模块 2.JSONP 3.axios的请求方式 4.axios框架的基本使用 1.新建vue项目 2.安装axios依赖 3.编写代码 4.请求结果 5.axios发送并发请求 方式1: 方式2 6.axios的配置 6.1.全局配置 6.2.常见的配置选项 总结 1.选择什么网络模块 2.JSONP 3.axios的请求方式 网络请求模拟:http://httpbin.org/ 4.axios框架的基本使用 1.新建vue项目 vue init webpack learn

  • vue中axios封装使用的完整教程

    前言 如今,在项目中,普遍采用Axios库进行Http接口请求.它是基于promise的http库,可运行在浏览器端和node.js中.此外还有拦截请求和响应.转换JSON数据.客户端防御XSRF等优秀的特性. 考虑到各个项目实际使用时写法混乱,不统一.对Axios进行一下通用化的封装,目的是帮助简化代码和利于后期的更新维护,尽量通用化. 方法如下 1. vue安装axios npm install axios -S 或者 npm i axios -S 2. 在main.js进行全局引入 imp

  • vue项目实战之优雅使用axios

    vue项目实战之优雅使用axios

    目录 axios传参 params与data传参 封装axios 总结 axios传参 params与data传参 params 传参:参数以 k=v&k=v 格式放置在 url 中传递. springboot后端可以使用@RequestParam注解接受请求,或者保证参数名跟k一样时也可以接收到 只要是使用params传参,无论是post请求还是get请求都是拼接都url中,此时的post请求也只是伪post请求 data传参:参数被放在请求体中. 后端必须使用@RequestBody来接收,

  • vue全局使用axios的操作

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us

  • 如何在Vue项目中使用axios请求

    在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axios 库,所以以下示例也是以 axios 为基础来进行封装的. 1.安装 首先是 npm 安装 axios 很简单:npm install axios 2.没有封装存在的问题 如果在没有封装接口的项目中,在文件中随处可以看到如下的接口调用方法: this.$axios.post("/user/add", { params: { name: this.name, age: this.age } }) .then(res =

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • django和vue实现数据交互的方法

    我使用的是jQuery的ajax与django进行数据交互,遇到的问题是django的csrf 传输数据的方法如下: $(function() { $.ajax({ url: 'account/register', type: 'post', dataType:'json', data: $('#form1').serialize(), success: function (result) { console.log(result); if (result) { alert("result&qu

  • 使用Vue-axios进行数据交互的方法

    目录 1.安装axios 2.axios的使用 3.讲一下代理proxyTable的使用 1.安装axios 打开cmd命令行工具 cd到项目目录 输入以下命令 npm install axios 提示安装完成以后,打开main.js 输入以下代码: import axios from 'axios' 接着在底下输入: Vue.prototype.$axios = axios 配置就完事了 2.axios的使用 this.$axios({         method: 'post',//交互方

  • 如何理解Vue前后端数据交互与显示

    如何理解Vue前后端数据交互与显示

    一.技术概述 将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面,再传值给后端.该技术是Web开发必备,是前后端交互的纽带.难点在于获取后端数据并且防止数据联动. 二.技术详述 1. 从接口获取后端数据 (1) 仔细查看后端所传数据的类型.主要是区分数组和单个数据.查看后端的请求方式,区分post或者get. (2) 首先,在data中return一个xxxData:[]数组或一个变量xxxData:<类型>来接收后端传来的数据. (3) 在方法中定义一个请求函数

  • AngularJS实现自定义指令与控制器数据交互的方法示例

    本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

  • 详解vue与后端数据交互(ajax)：vue-resource

    详解vue与后端数据交互(ajax)：vue-resource

    本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <sc

  • Vue axios设置访问基础路径方法

    看过axios的官方文档后配置变得简单: 在main.js 做如下配置: import axios from 'axios' axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web' Vue.prototype.axios = axios 最后一行是将axios配置到Vue原型中,使用方法为: this.axios.get('/test/1').then(function (response) {}) 可能会遇到下面的报错:

  • 在SSM框架下用laypage和ajax实现分页和数据交互的方法

    layui,一款前端框架,提供了丰富的组件和模板,layui提供的简约后台管理模板,对于后端学习者来说是个不错的福音.这里记录在SSM框架下使用layui的分页组件laypage.(官网开发文档) 环境 Spring+SpringMVC+Mybatis , jquery-3.1.0.min.js , mysql-connector-java-5.1.34 参考文档 layui-laypage参数文档 前端代码主要参考的是layui官网给定的代码,加载layui.css和layui.js:除此之外

  • Vue.js实现数据响应的方法

    许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎.通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架.在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. 如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理.

  • vue组件之间数据传递的方法实例分析

    vue组件之间数据传递的方法实例分析

    本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

随机推荐