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 相关文章推荐
jquery 应用代码 方便的排序功能
Feb 06 Javascript
javascript 节点遍历函数
Mar 28 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
JS如何监听div的resize事件详解
Dec 03 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
python中 * 的用法详解
2019/07/10 Python
wxpython绘制圆角窗体
2019/11/18 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
sklearn的predict_proba使用说明
2020/06/28 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
安全生产检查通报
2014/01/29 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
财产保全担保书范文
2014/04/01 职场文书
活动总结报告格式
2014/05/09 职场文书
民生工作实施方案
2014/05/31 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
借款民事起诉状范文
2015/05/19 职场文书
酒店宣传语大全
2015/07/13 职场文书