一、安裝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 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！