VUE學(xué)習(xí)之接口調(diào)試
一、項目創(chuàng)建
二、使用axios發(fā)送請求
三、調(diào)試小插曲
一、項目創(chuàng)建
1、全局安裝vue的腳手架
npm install -g vue-cli
2、通過webpack初始化一個項目,項目名稱為my-project
vue init webpack my-project
3、進(jìn)入到剛剛初始化的項目中
cd my-project
4、安裝項目依賴
npm install
5、運行項目
npm run dev
如果你想構(gòu)建項目，使用如下命令即可
npm run build
注意 ：使用npm比較慢，可以使用淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org, 之后的npm可以使用cnpm進(jìn)行替換。
二、使用axios發(fā)送請求
首先項目中引入axios依賴
npm install axios
依賴安裝好之后需要在使用的的地方進(jìn)行中引入在項目中新建了一個axios.js
import axios from 'axios'
const instance = axios.create({
// basic url
baseURL: 'http://ucarabs.10101111.com/ucarlpp',
// 超時時間
timeout: 3000,
withCredentials: true
})
export default instance
這樣就可以創(chuàng)建一個axios實例了，只有在需要使用axios的js中引入新建的axios.js即可，這樣就可以直接使用導(dǎo)出的axios實例了。
接下來新建一個api.js，引入axios，我們要發(fā)送一個POST請求：
// 這個是我們后面新建的axios.js
import axios from '@/axios'
function exportExcel (param) {
return axios({
method: 'POST',
url: '/excel/doExport.do',
params: param
})
}
export default {exportExcel}</pre>
method可以是POST,GET,PUT,DELETE等請求，里面還有許多的請求參數(shù)，請求的需要傳入的數(shù)據(jù)params，headers等等。在需要此方法的vue組件中使用該方法，引入導(dǎo)出的方法就可以。
import {exportExcel} from '@/api'
export default {
//省略其他不相關(guān)代碼
data() {
return {
param: ''
}
}
methods: {
myExportExcel() {
exportExcel(this.param).then((data) => {
// do success logic, handle the data
// data from server
})
.catch((error) => {
// do error logic
})
}
}
}
其他的請求也多類似，具體的看業(yè)務(wù)，具體情況具體分析。
三、調(diào)試小插曲
在調(diào)試的時候發(fā)現(xiàn)調(diào)試失敗，感覺請求的url也沒有什么問題
// 這是請求的url
http://ucarabs.10101111.com:9528/ucarlpp/excel/importData.do_?serviceName=ucarAisStockImport
在看一下別的接口請求正常的url
對比一下Request URL發(fā)現(xiàn)多了端口號9528，問題出在在訪問getUserInfo這個接口是通過axios發(fā)送的GET請求，而importData.do_是通過組件的submit方法提交的，所以其完整的url
ucarabs.10101111.com:9528/ucarlpp/importData.do_?serviceName=AisStockImport
而我們服務(wù)端的端口是使用的80，端口號對不上所以出現(xiàn)404錯誤，如果端口號和服務(wù)器端的端口號一致肯定可以訪問。
解決方案是配置代理，在項目的config/index.js中配置代碼
proxyTable: {
'/ucarlpp': {
target: 'http://ucarabs.10101111.com',
changeOrigin: true,
pathRewrite: {
'^/ucarlpp/': '/ucarlpp/'
}
}
}
將以/ucarlpp開頭的全以/ucarlpp/覆蓋target就可以了。修改了配置文件需要重新跑一下。
ok~，請求成功，ok，關(guān)于vue學(xué)習(xí)之接口調(diào)試到此結(jié)束，若需要學(xué)習(xí)了解更多關(guān)于vue和axios可以去官網(wǎng)學(xué)習(xí)。??
