vue實(shí)現(xiàn)把接口單獨(dú)存放在一個(gè)文件方式
更新時(shí)間：2020年08月13日 08:34:45 作者：蟲(chóng)兒啊
這篇文章主要介紹了vue實(shí)現(xiàn)把接口單獨(dú)存放在一個(gè)文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
第一步：在src/router目錄下，建立一個(gè)js文件（文件名：httpConfig.js）；
第二步：在httpConfig.js文件里面寫(xiě)上
const aa = 'http://192.168.1.123';//本地測(cè)試
const config = {
bb: aa+ '/article/articleListPage',//所需的接口
}
//需要讓外部拿到
export default config;
第三步：掉接口
_this.$http({
url: _this.$httpConfig.bb, //接口地址
method: 'POST', //請(qǐng)求方式
contentType: "application/json;", //內(nèi)容類型
headers: {
'Content-Type': 'application/json' //請(qǐng)求頭
},
dataType: "json", //數(shù)據(jù)格式
async: false, //設(shè)置同步/異步
data: {
//所需參數(shù)
},
}).then(function(response) {
console.log(response.data); //打印成功信息
}, function(error) {
console.log(error); //打印錯(cuò)誤信息
});
補(bǔ)充知識(shí)：Vue項(xiàng)目整合接口到同一個(gè)配置文件
首先創(chuàng)建一個(gè)js文件，我的命名是用api.js。
//數(shù)據(jù)接口的ip和端口
const ip = 'http://192.168.101.127:8080';
const zymllist = ip+'/hg6000/dsjjm/zymllist.do';
const wsqk = ip+'/hg6000/dsjjm/wssj.do';
const fdcqk1 = ip+'/hg6000/dsjjm/fdcqkZ.do';
const fdcqk2 = ip+'/hg6000/dsjjm/fdcqkB.do?sbno=2018-09&xzqhbm=420000&xzqhjb=2';
const sq = ip+'/hg6000/dsjjm/hbssq.do'
//一定要注冊(cè)才可以使用
export default {
zymllist: zymllist,
wsqk: wsqk,
fdcqk1:fdcqk1,
fdcqk2:fdcqk2,
sq:sq,
}
在其他 .vue 文件內(nèi)，如需調(diào)用api.js內(nèi)的接口，需要先引用：
import api from "common/js/api";
引用完成后，使用如下：
this.axios
.get(api.sq, { //api.sq 為 api.js 文件夾中，名稱為 sq 的接口路徑
params: { //傳入的參數(shù)
a:a
}
})
.then(res => { //此處要使用箭頭函數(shù)，this指向才正確
console.log(res)
})
.catch(function(error) {
alert(error);
});
以上這篇vue實(shí)現(xiàn)把接口單獨(dú)存放在一個(gè)文件方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ant design vue嵌套表格及表格內(nèi)部編輯的用法說(shuō)明
這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問(wèn)題
這篇文章主要介紹了vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
本文主要介紹了vue3生成隨機(jī)密碼的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了為大家函數(shù)式組件劫持替代json封裝element表格的過(guò)程思路及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在Vue項(xiàng)目中實(shí)現(xiàn)首頁(yè)布局,包括可收放的左側(cè)菜單和主體內(nèi)容區(qū),在store中管理菜單狀態(tài),通過(guò)修改isCollapse狀態(tài)控制菜單的展開(kāi)與收起,在home.vue中編寫(xiě)左側(cè)菜單欄的代碼和樣式,實(shí)現(xiàn)一個(gè)響應(yīng)式的用戶界面2024-09-09
vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式
這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項(xiàng)目中我們經(jīng)常會(huì)碰到圖片預(yù)覽的功能需求,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤(pán)問(wèn)題的解決
這篇文章主要介紹了Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤(pán)問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中如何下載文件導(dǎo)出保存到本地，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了Vue首屏?xí)r間指標(biāo)采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01