基于vue-cli的vue项目之axios的使用2--最基础的请求
2017-09-08 10:28
1146 查看
先抱歉下,下面的请求的链接,我会把域名隐藏起来,所以想尝试的朋友麻烦自己找一条重新测试,很抱歉了
在下面也配置了跨域的
这个是最基础的,比较简单,大家可以试试
在下面也配置了跨域的
1.config/index.js的配置:解决跨域 dev: { env: require('./dev.env'), port: 8008, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/ajaxurl': { target: 'https://www.aaaaaaa.com/', changeOrigin: true, pathRewrite: { '^/ajaxurl': '/' } } } } 2.main.js的配置:使用axios:注意第二十五行,将其添加到原型链中,而不是使用use方法 import Vue from 'vue' import App from './App' import axios from 'axios' Vue.prototype.$http=axios; new Vue({ el: '#app', render: h => h(App) }) 3.app.vue:调用ajax:第四十五行,axios支持promise方法,这样写方便点 <template> <div id="app"> huoqu <button @click="myajax">获取首页信息</button> </div> </template> <script> export default { name: 'app', components: {}, data: function() {}, methods: { myajax: function() { this.$http.get("/ajaxurl/welfare/gpa/index/index").then(response => { console.log("获取信息成功") console.log(response); }, response => { console.log("获取信息失败") console.log(response); }) } } } </script> <style> </style>最后的效果是这样的:
这个是最基础的,比较简单,大家可以试试
相关文章推荐
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 基于vue-cli的vue项目之axios的使用3--get传参请求
- 基于vue-cli的vue项目之axios的使用5--axios方法发送请求
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
- 基于vue-cli的vue项目之axios的使用6--配置axios
- 基于vue-cli的vue项目之axios的使用1--准备工作
- 基于vue-cli的vue项目之路由1--最基本的使用
- 使用vue-cli+axios构建的项目本地环境API代理设置和解决跨域
- 基于vue-cli的vue项目之vuex的使用3-------action异步传参
- 封装axios在vue-cli项目中便捷使用
- 在 vue-cli 里基于 axios 封装复用请求
- 使用vue-cli脚手架 与 axios 请求数据 配置代理进行跨域访问数据问题
- vue项目使用axios发送请求让ajax请求头部携带cookie的方法
- vue2.0项目实战(3)使用axios发送请求
- 基于vue-cli的vue项目之vuex的使用4-------moudles分块
- vue项目使用axios发送请求让ajax请求头部携带cookie
- 详解在vue-cli项目中使用mockjs(请求数据删除数据)
- 详解基于 axios 的 Vue 项目 http 请求优化
- vue-cli的axios使用方法,get、post请求的跨域问题解决