在vue開(kāi)發(fā)中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要定義規(guī)范統(tǒng)一的接口，如何定義呢？

方法可能不只一種，本文使用axios+async/await進(jìn)行接口的統(tǒng)一管理

本文使用vue-cli生成的項(xiàng)目舉例

使用接口管理之前

在項(xiàng)目的某個(gè)具體組件中調(diào)接口，把調(diào)用接口的方法直接寫(xiě)在mounted中，或在是methods中 比如：

xxx.vue

<template> <div id='areaTree'> <!-- 標(biāo)題 --> <div class='leftTree_Title'> <el-row> <el-col :span='24'>{{msg}}</el-col> </el-row> </div> </div></template><script>import axios from ’axios’export default { name: 'test', data:function(){ return{ msg:’站點(diǎn)選擇’, } }, methods:{ }, computed:{ }, //--------------Vue生命周期---具體細(xì)節(jié)參考：https://www.cnblogs.com/yingyigongzi/p/10844175.html --------------- beforeCreate(){ }, created(){ }, beforeMount(){ }, mounted(){ //理解成初始化，該操作只會(huì)執(zhí)行一次 axios.get(’/GetTreeListForSoilByRegion’,{ //從接口讀取數(shù)據(jù) params: { //參數(shù) } }) .then(function (response) {//代碼操作 }) .catch(function (error) { console.log(error); }); }, beforeUpdate(){ }, updated(){ }, beforeDestroy(){ }, destroyed(){ }, //--------------Vue生命周期---具體細(xì)節(jié)參考：https://www.cnblogs.com/yingyigongzi/p/10844175.html ---------------} </script><style scoped></style>

使用項(xiàng)目管理之后，可以做到接口一次定義，到處使用，

代碼看起來(lái)規(guī)范，所有的接口都在一個(gè)文件夾定義，不用分散的各個(gè)組件，維護(hù)起來(lái)簡(jiǎn)單，例如后臺(tái)的一些url變了，改起來(lái)也方便

步驟：

1.首先，在src目錄下新建一個(gè)文件夾，我這里叫apis，后臺(tái)提供的所有接口都在這里定義

2.在apis下新建一個(gè)js文件,叫http.js,在里面做axios相應(yīng)的配置，目的 封裝axios，完整代碼如下，可以直接使用

http.js

import axios from ’axios’ //創(chuàng)建axios的一個(gè)實(shí)例var instance = axios.create({ baseURL:’’, timeout: 6000}) //------------------- 一、請(qǐng)求攔截器 忽略instance.interceptors.request.use(function (config) { return config;}, function (error) { // 對(duì)請(qǐng)求錯(cuò)誤做些什么 return Promise.reject(error);}); //----------------- 二、響應(yīng)攔截器 忽略instance.interceptors.response.use(function (response) { return response.data;}, function (error) { // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么 console.log(’攔截器報(bào)錯(cuò)’); return Promise.reject(error);}); /** * 使用es6的export default導(dǎo)出了一個(gè)函數(shù)，導(dǎo)出的函數(shù)代替axios去幫我們請(qǐng)求數(shù)據(jù)， * 函數(shù)的參數(shù)及返回值如下： * @param {String} method 請(qǐng)求的方法：get、post、delete、put * @param {String} url 請(qǐng)求的url: * @param {Object} data 請(qǐng)求的參數(shù) * @returns {Promise} 返回一個(gè)promise對(duì)象，其實(shí)就相當(dāng)于axios請(qǐng)求數(shù)據(jù)的返回值 */export default function (method, url, data = null) { method = method.toLowerCase(); if (method == ’post’) { return instance.post(url, data) } else if (method == ’get’) { return instance.get(url, { params: data }) } else if (method == ’delete’) { return instance.delete(url, { params: data }) }else if(method == ’put’){ return instance.put(url,data) }else{ console.error(’未知的method’+method) return false }}

3.按照后臺(tái)文檔劃分的模塊新建js文件,這里簡(jiǎn)單舉個(gè)例子

我要去拿樹(shù)結(jié)構(gòu)的數(shù)據(jù)，到時(shí)候處理完數(shù)據(jù)在頁(yè)面上顯示出來(lái)，操作如下：

a.新建一個(gè)navigationTree.js，這里專(zhuān)門(mén)用來(lái)管理 我的樹(shù)組件(即上文的xxx.vue)的接口，(如果還有別的組件，比如aa.vue也要用到接口，可以在api文件夾內(nèi)再創(chuàng)一個(gè)aa.js，管理aa.vue的接口)

navigationTree.js

//navigationTree.js 用于獲取導(dǎo)航樹(shù)的樹(shù)形json數(shù)據(jù)import req from ’./http.js’ //引入封裝好的axios//在這里定義了一個(gè)登陸的接口，把登陸的接口暴露出去給組件使用export const GETTREEDATA =params=>req(’get’,’/GetTreeListForSoilByRegion’,params)//這里使用了箭頭函數(shù)，轉(zhuǎn)換一下寫(xiě)法：//export const GETTREEDATA=function(req){// return req(’post’,’/GetTreeListForSoilByRegion’,params)//}

4.在組件中使用接口，來(lái)看看現(xiàn)在的xxx.vue

<template> <div id='areaTree'><br> <!-- 標(biāo)題 --><br> <div class='leftTree_Title'><br> <el-row> <br><el-col :span='24'>{{msg}}</el-col> <br> </el-row> <br> </div> <br> </div></template> <script> //1. 引入獲取樹(shù)結(jié)構(gòu)的接口定義import {GETTREEDATA} from ’../apis/navigationTree.js’ let treeTemp =[];export default { name: 'zTree', data:function(){ return{ msg:’站點(diǎn)選擇’, } }, methods:{ }, computed:{ }, beforeCreate(){ }, created(){ }, beforeMount(){ }, mounted(){ //理解成初始化，該操作只會(huì)執(zhí)行一次 let testdata = GETTREEDATA(); //vue項(xiàng)目接口管理,所有接口都在apis文件夾中統(tǒng)一管理 testdata .then(function(response){ //console.log(response); }).catch(function(error){ console.log(error); }); }, beforeUpdate(){ }, updated(){ }, beforeDestroy(){ }, destroyed(){ },}</script> <style scoped></style>

核心部分在 mounted 這塊

補(bǔ)充知識(shí)：vue項(xiàng)目api接口組織方式

一般后端接口是,一個(gè)業(yè)務(wù)的方法,用一個(gè)controller,所以前端這邊,一個(gè)業(yè)務(wù)的接口放到一個(gè)js文件里

shiroApi提供認(rèn)證相關(guān)接口,如下圖

adminApi提供組織,用戶,角色管理等相關(guān)接口,如下圖

將shiroApi和adminApi等等api做個(gè)匯總,到apis.js中,如下圖

登陸接口調(diào)用例子,引入apis.js即可(當(dāng)然也可以引入具體shiroApi.js,看自己需要和習(xí)慣),如下圖:

個(gè)人總結(jié)的api組織方式,歡迎提供更好的建議

以上這篇vue項(xiàng)目接口管理,所有接口都在apis文件夾中統(tǒng)一管理操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。