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代码
Dec 15 Javascript
jQuery 选择器理解
Mar 16 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
Python中的zipfile模块使用详解
2015/06/25 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
基于python的列表list和集合set操作
2019/11/24 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
移动通信专业自荐信范文
2013/11/12 职场文书
迎国庆演讲稿
2014/09/15 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年资料员工作总结
2014/11/18 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
Python基于百度API识别并提取图片中文字
2021/06/27 Python
vue3获取当前路由地址
2022/02/18 Vue.js