基于vue-cli的vue项目之axios的使用3--get传参请求
2017-09-08 10:47
1021 查看
以get传参请求为例子,
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到原型链中,注意第二十五行
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:使用请求,get为例,第四十六行设置参数
<template>
<div id="app">
huoqu
<button @click="myajax">获取首页信息</button>
</div>
</template>
<script>
export default {
name: 'app',
components: {},
data: function() {},
methods: {
//get为例子
myajax: function() {
this.$http.get("/ajaxurl/welfare/gpa/brand/list", {params: {page: 1,size: 10}})
.then(response => {
console.log("获取信息成功");
console.log(response);
}, response => {
console.log("获取信息失败");
console.log(response);
})
}
}
}
</script>
<style>
</style>
效果如下:
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到原型链中,注意第二十五行
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:使用请求,get为例,第四十六行设置参数
<template>
<div id="app">
huoqu
<button @click="myajax">获取首页信息</button>
</div>
</template>
<script>
export default {
name: 'app',
components: {},
data: function() {},
methods: {
//get为例子
myajax: function() {
this.$http.get("/ajaxurl/welfare/gpa/brand/list", {params: {page: 1,size: 10}})
.then(response => {
console.log("获取信息成功");
console.log(response);
}, response => {
console.log("获取信息失败");
console.log(response);
})
}
}
}
</script>
<style>
</style>
效果如下:
相关文章推荐
- 基于vue-cli的vue项目之axios的使用2--最基础的请求
- 基于vue-cli的vue项目之axios的使用5--axios方法发送请求
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 基于vue-cli的vue项目之axios的使用1--准备工作
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 基于vue-cli的vue项目之vuex的使用3-------action异步传参
- 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
- vue-cli的axios使用方法,get、post请求的跨域问题解决
- 基于vue-cli的vue项目之axios的使用6--配置axios
- vue2.0项目实战(3)使用axios发送请求
- 基于vue-cli的vue项目之vuex的使用4-------moudles分块
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- 基于vue-cli的vue项目之路由1--最基本的使用
- 封装axios在vue-cli项目中便捷使用
- vue项目使用axios发送请求让ajax请求头部携带cookie的方法
- 详解在vue-cli项目中使用mockjs(请求数据删除数据)
- vue项目使用axios发送请求让ajax请求头部携带cookie
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- 详解基于 axios 的 Vue 项目 http 请求优化
- 基于vue-cli的vue项目之vuex的使用2