一、安装axios和qs 依赖包
二、配置 axios 全局变量
在main.js加上依赖的引入
import qs from 'qs'
import common from '../public/js/common'
import Axios from 'axios'
Vue.prototype.$http = Axios
Vue.prototype.$qs=qs
1
2
3
4
5
在src根目录创建一个 vue.config.js 的文件，这个是因为 cli-3 和 cli-2 创建项目的结构不同。
// vue.config.js 配置说明
// 这里只列一部分，具体配置惨考文档啊
module.exports = {
// baseUrl type:{string} default:'/'
// 将部署应用程序的基本URL
// 将部署应用程序的基本URL。
// 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。
// https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.
baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
/*
构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目
的字符串，
注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
*/
// pages: {
// index: {
// entry for the page
// entry: 'src/index/main.js',
// the source template
// template: 'public/index.html',
// output as dist/index.html
// filename: 'index.html'
// },
// when using the entry-only string format,
// template is inferred to be `public/subpage.html`
// and falls back to `public/index.html` if not found.
// Output filename is inferred to be `subpage.html`.
// subpage: 'src/subpage/main.js'
// },
// lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
lintOnSave: true,
// productionSourceMap：{ type:Bollean,default:true } 生产源映射
// 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
productionSourceMap: false,
// devServer:{type:Object} 3个属性host,port,https
// 它支持webPack-dev-server的所有选项
devServer: {
port: 8080, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
proxy: {
'/sell': {
target: 'http://127.0.0.1/sell', // 需要请求的地址
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/sell': '/' // 替换target中的请求地址，也就是说，在请求的时候，url用'/proxy'代替'http://ip.taobao.com'
}
}
}, // 配置多个代理
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
三、用法
getData() {
var self = this;
this.$http.get('/sell/orderMaster/queryOrders', {
params: {
current: this.current,
size: this.size
}
}).then(function (response) {
var data = self.common.handleData(response.data);
self.records = data.records;
self.total = data.total;
self.current = data.current;
});
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
四、axios 几种用法
1：GET
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2：POT
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
1
2
3
4
5
6
7
8
9
10
3：通用
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
}) .then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
1
2
3
4
5
6
7
4：axios地址
https://www.npmjs.com/package/axios
五、表单提交
表单提交用QS
this.$http({
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
transformRequest: [data => self.$qs.stringify(data)],
method: 'post',
url: 'sell/login',
data: {
userId: self.userInfo.userId,
password: self.userInfo.password
}
}).then(function (response) {
self.$router.push({path: '/index'});
})
.catch(function (error) {
console.log(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
axios请求加上下面两句
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
transformRequest: [data => self.$qs.stringify(data)],
---------------------
作者：Eternal1125
来源：CSDN
原文：https://blog.csdn.net/qq_36306590/article/details/81746897
版权声明：本文为博主原创文章，转载请附上博文链接！
一、安装axios和qs 依赖包
二、配置 axios 全局变量
在main.js加上依赖的引入
import qs from 'qs'import common from '../public/js/common'import Axios from 'axios'Vue.prototype.$http = AxiosVue.prototype.$qs=qs12345在src根目录创建一个 vue.config.js 的文件，这个是因为 cli-3 和 cli-2 创建项目的结构不同。
// vue.config.js 配置说明// 这里只列一部分，具体配置惨考文档啊module.exports = { // baseUrl type:{string} default:'/' // 将部署应用程序的基本URL // 将部署应用程序的基本URL。 // 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。 // https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.
baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind } /* 构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一 个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目 的字符串， 注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的 */ // pages: { // index: { // entry for the page // entry: 'src/index/main.js', // the source template // template: 'public/index.html', // output as dist/index.html // filename: 'index.html' // }, // when using the entry-only string format, // template is inferred to be `public/subpage.html` // and falls back to `public/index.html` if not found. // Output filename is inferred to be `subpage.html`. // subpage: 'src/subpage/main.js' // },
// lintOnSave：{ type:Boolean default:true } 问你是否使用eslint lintOnSave: true, // productionSourceMap：{ type:Bollean,default:true } 生产源映射 // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建 productionSourceMap: false, // devServer:{type:Object} 3个属性host,port,https // 它支持webPack-dev-server的所有选项
devServer: { port: 8080, // 端口号 host: 'localhost', https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 proxy: { '/sell': { target: 'http://127.0.0.1/sell', // 需要请求的地址 changeOrigin: true, // 是否跨域 pathRewrite: { '^/sell': '/' // 替换target中的请求地址，也就是说，在请求的时候，url用'/proxy'代替'http://ip.taobao.com' } }
}, // 配置多个代理 }}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364三、用法
getData() { var self = this; this.$http.get('/sell/orderMaster/queryOrders', { params: { current: this.current, size: this.size } }).then(function (response) { var data = self.common.handleData(response.data); self.records = data.records; self.total = data.total; self.current = data.current; }); },1234567891011121314四、axios 几种用法
1：GET
// Make a request for a user with a given IDaxios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
// Optionally the request above could also be done asaxios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });1234567891011121314151617181920212：POT
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });123456789103：通用
axios({ method:'get', url:'http://bit.ly/2mTM3nY', responseType:'stream'}) .then(function(response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))});12345674：axios地址
https://www.npmjs.com/package/axios
五、表单提交 表单提交用QS
this.$http({ headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, transformRequest: [data => self.$qs.stringify(data)], method: 'post', url: 'sell/login', data: { userId: self.userInfo.userId, password: self.userInfo.password } }).then(function (response) { self.$router.push({path: '/index'}); }) .catch(function (error) { console.log(error); });123456789101112131415axios请求加上下面两句
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},transformRequest: [data => self.$qs.stringify(data)],--------------------- 作者：Eternal1125 来源：CSDN 原文：https://blog.csdn.net/qq_36306590/article/details/81746897 版权声明：本文为博主原创文章，转载请附上博文链接！