vue實(shí)現(xiàn)把接口單獨(dú)存放在一個(gè)文件方式

更新時(shí)間：2020年08月13日 08:34:45 作者：蟲兒啊

這篇文章主要介紹了vue實(shí)現(xiàn)把接口單獨(dú)存放在一個(gè)文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

第一步：在src/router目錄下，建立一個(gè)js文件（文件名：httpConfig.js）；

第二步：在httpConfig.js文件里面寫上

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)部編輯的用法說明
這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問題
這篇文章主要介紹了vue使用element ui自定義手機(jī)驗(yàn)證規(guī)則問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue3生成隨機(jī)密碼的示例代碼
本文主要介紹了vue3生成隨機(jī)密碼的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
函數(shù)式組件劫持替代json封裝element表格
這篇文章主要介紹了為大家函數(shù)式組件劫持替代json封裝element表格的過程思路及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue3菜單展開和收起實(shí)現(xiàn)
在Vue項(xiàng)目中實(shí)現(xiàn)首頁布局,包括可收放的左側(cè)菜單和主體內(nèi)容區(qū),在store中管理菜單狀態(tài),通過修改isCollapse狀態(tài)控制菜單的展開與收起,在home.vue中編寫左側(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ù)覽的功能需求,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤問題的解決
這篇文章主要介紹了Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤問題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue中如何下載文件導(dǎo)出保存到本地
這篇文章主要介紹了vue中如何下載文件導(dǎo)出保存到本地，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue首屏?xí)r間指標(biāo)采集最佳方式詳解
這篇文章主要為大家介紹了Vue首屏?xí)r間指標(biāo)采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01