一、利用vue-cli創(chuàng)建項(xiàng)目（推薦）：
1.安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)
2.基于node.js,利用淘寶npm鏡像安裝相關(guān)依賴
在cmd里直接輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回車蹲缠，等待安裝...
3.安裝全局vue-cli腳手架,用于幫助搭建所需的模板框架
在cmd里 1)輸入：cnpm install -g vue-cli，回車悠垛，等待安裝...
-
vue init webpack 項(xiàng)目名稱
項(xiàng)目結(jié)構(gòu).jpg
二线定、axios的baseURL配置
配置
1.在pro.env.js或dev.env.js中增添API_BASEURL字段；
2.在axios文件：
2.1 在axios文件中引入pro.env.js（生產(chǎn)時(shí)）或dev.env.js（開發(fā)時(shí)）：
import process from '../../config/prod.env'
2.2 初始化axios時(shí)使用：
// axios初始化：延遲時(shí)間确买，主路由地址
let instance = axios.create({
baseURL: process.API_BASEURL, // 從環(huán)境進(jìn)程中根據(jù)運(yùn)行環(huán)境獲取的api的base_url
timeout:10000, // 請求超時(shí)時(shí)間
});
應(yīng)用
/*
* 附帶axios的封裝
*/
import Vue from 'vue'
import { LoadingPlugin, ToastPlugin } from 'vux'
Vue.use(LoadingPlugin);
Vue.use(ToastPlugin);
import axios from 'axios'
import process from '../../config/prod.env'
// axios初始化：延遲時(shí)間斤讥，主路由地址
let instance = axios.create({
baseURL: process.API_BASEURL, // 從環(huán)境進(jìn)程中根據(jù)運(yùn)行環(huán)境獲取的api的base_url
timeout: 10000, // 請求超時(shí)時(shí)間
});
//http request攔截器
instance.interceptors.request.use(config => {
//在發(fā)送請求之前做某事
Vue.$vux.loading.show({
text: 'Loading'
})
config.headers = {
"Content-Type": "application/json; charset=utf-8"
}
config.data = JSON.stringify(config.data);
return config;
}, error => {
//請求錯(cuò)誤時(shí)做些事
setTimeout(() => {
Vue.$vux.loading.hide();
Vue.$vux.toast.text('加載超時(shí)', 'middle')
},3000)
return Promise.reject(error);
});
//http response攔截器
instance.interceptors.response.use(response => {
//對(duì)響應(yīng)數(shù)據(jù)做些事
Vue.$vux.loading.hide();
return response;
}, error => {
//請求錯(cuò)誤時(shí)做些事
setTimeout(() => {
Vue.$vux.loading.hide()
Vue.$vux.toast.text('請求失敗', 'middle');
},1000)
return Promise.reject(error);
});
export default {
get(url, params = {}) {
return new Promise((resolve, reject) => {
instance.get(url, {
params: params
})
.then(res => {
//請求結(jié)束成功
if (res.status === 200 || res.status === 304) {
resolve(res.data)
}else{
reject(new Error(res.data.msg))
}
})
.catch(res => {
reject(res)
})
})
},
post(url, data = {}) {
return new Promise((resolve, reject) => {
instance.post(url, data)
.then(res => {
//請求結(jié)束成功
if (res.status === 200 || res.status === 304) {
resolve(res.data)
}else{
reject(new Error(res.data.msg))
}
})
.catch(res => {
reject(res)
})
})
},
}
axios封裝路徑圖.jpg
在main中引入.jpg
在.vue中請求接口
this.$http.get('/orion/verify/picVerify.do?md5=3752531FCF2BEDF6946EC2372D78B17B')
.then(res => {
console.log('get~~~~~~~~~~~~', res)
})
.catch(error => {
console.log(error)
})
請求接口.jpg
