vue框架搭建之axios使用教程


Posted in Javascript onJuly 11, 2018

前后端数据交互作为项目最基础需求(静态的除外),同时也是项目中最重要的需求。

本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步 使用说明

1、安装

cnpm install axios --save-dev

2、引入

main.js 文件引入:

import Vue from 'vue'//引入vue
import axios from 'axios'//引入axios
Vue.prototype.$axios = axios;//把axios挂载到vue上

3、使用

 getStore(){
      let that = this
      that.$axios({
        method: "post",//指定请求方式
        url: "/business-app/getCityShopList.cgi",//请求接口(相对接口,后面会介绍到)
        data: {
          cityId: cityId,
          data:{},
          isDebug:"1",
          longitude: "",
          latitude: ""
        }
      })
      .then(function(res){
        //接口成功返回结果执行
      })
      .catch(function(err){





//请求失败或者接口返回失败或者.then()中的代码发生错误时执行
      })
    }

4、跨域与代理

在vue本地开发时请求总是发生跨域

解决方案:配置代理

config 下的index.js 文件

proxyTable: {
    '/business-app/*': {
      target: 'http://****:8080',//被代理的接口
      
      changeOrigin: true,
      secure:true // 如果是https接口,需要配置这个参数
    }
  },

当URL以 '/business-app/'层级开端时,把 'http://****:8080' 代理成本地IP

5、 baseURL与代理

两者用途不一样,

baseUrl会附加到你绑定的axios实例(如果是全局的,那就是所有实例)上,即如果get/post的url参数是相对路径(如) /api/c/xx,那就会执行 baseUrl + '/api/c/xx',如果未指定baseUrl,那就走浏览器地址栏里的base + baseUrl。

webpack里的proxyTable是测试环境为了避免浏览器下的跨域访问,而以nodejs代理成同前端页面(即浏览器地址栏)同域的一种处理。指定proxyTable后, axios就不需要指定baseUrl了。proxyTable会把base + '/api/c/xx'代理到【base baseUrl + '/api/c/xx'】的接口地址上。

当然工程发布时,后端和前端也需要发布到同一个域下。

6、axios与vue-axios

先看两者的用法

Vue.prototype.$axios = axios
和
import Vueaxios from ‘vue-axios'
Vue.use(VueAxios,axios)

解释:使用vue-axios更多是为了符合规范,并且方便协作

7、其他待补充

对于跨域的处理,除了采用代理外,也可用JSONP或者Qs(axios官方推荐)方案,待详细研究后再来补充

总结

以上所述是小编给大家介绍的vue框架搭建之axios使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS组件Bootstrap Table布局详解
May 27 Javascript
js实现多图左右切换功能
Aug 04 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
vue实现简单loading进度条
Jun 06 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 #Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 #Javascript
node.js到底要不要加分号浅析
Jul 11 #Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 #Javascript
Vue如何实现响应式系统
Jul 11 #Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 #Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 #Javascript
You might like
php实现的MySQL通用查询程序
2007/03/11 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python自定义类的数组排序实现代码
2016/08/28 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014年药房工作总结
2014/11/22 职场文书
联欢会开场白
2015/06/01 职场文书
保姆聘用合同
2015/09/21 职场文书
2019各种承诺书范文
2019/06/24 职场文书
python 实现的截屏工具
2021/05/08 Python
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android