vue框架搭建之axios使用教程

　　

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

　　

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

　　

　　 　　 　　cnpm安装axios——save-dev 　　 　　

　　

主要。js文件引入:

　　 　　 　　从“Vue”//进口Vue引入Vue 　　从“axios”//进口axios引入axios 　　Vue.prototype。axios=axios;美元//把axios挂载到vue上 　　 　　

　　 　　 　　getStore () { 　　让这=美元。axios ({ 　　方法:“文章”,//指定请求方式 　　url:“/商业应用/getCityShopList.cgi”//请求接口(相对接口,后面会介绍到) 　　数据:{ 　　cityId: cityId, 　　数据:{}, 　　isDebug:“1”, 　　经度:“”, 　　纬度:“” 　　} 　　}) 　　不要犹豫(函数(res) {//接口成功返回结果执行 　　}) 　　.catch(函数(err) {//请求失败或者接口返回失败或者不要犹豫()中的代码发生错误时执行 　　}) 　　} 　　 　　

　　

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

　　

<>强解决方案:配置代理

　　

配置下的指数。js文件

　　 　　 　　proxyTable: { 　　“/商业应用/*”:{ 　　目标:http://* * * *: 8080,//被代理的接口 　　 　　changeOrigin:没错, 　　安全:真//如果是https接口,需要配置这个参数 　　} 　　}, 　　 　　

当URL以‘/商业应用/层级开端时,把“http://* * * *: 8080”代理成本地IP

　　

　　

两者用途不一样,

　　

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

　　

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

　　

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

　　

　　

先看两者的用法

　　 　　 　　Vue.prototype。$ axios=axios 　　和 　　从“vue-axios”进口Vueaxios 　　Vue.use (VueAxios axios) 　　 　　

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

　　


　　

　　

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

　　

　　

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

vue框架搭建之axios使用教程