vue 項目接口管理的實現(xiàn)
更新時間：2019年01月17日 14:57:42 作者：hyangteng
在vue開發(fā)中，會涉及到很多接口的處理，當項目足夠大時，就需要定義規(guī)范統(tǒng)一的接口，本文就來介紹一下vue 項目接口管理，具有一定的參考價值，感興趣的小伙伴可以一起來了解一下
在vue開發(fā)中，會涉及到很多接口的處理，當項目足夠大時，就需要定義規(guī)范統(tǒng)一的接口，如何定義呢？
方法可能不只一種，本文使用axios+async/await進行接口的統(tǒng)一管理
本文使用vue-cli生成的項目舉例
舉例
拿segmentfault的官網(wǎng)簡單舉個例子，先看一下官網(wǎng)
看下網(wǎng)站，腦補一下后臺給出的文檔，如果后臺不傻的話給出的文檔肯定分模塊的，假設(shè)后臺給出的文檔分為了以下幾個模塊（假設(shè)的，不要較真哈）
- 資訊模塊 (我的訂閱、熱門資訊)
- 問答模塊
- 專欄模塊
- 講堂模塊
- 圈子模塊
- 發(fā)現(xiàn)模塊
- 個人信息模塊
- 用戶登錄注冊模塊
- ...還有其他很多
一般來說，網(wǎng)站的首頁都是復(fù)雜的，會用到很多其他頁面也會用到api，所以接口統(tǒng)一管理可以做到api的復(fù)用
那么如何做呢？
動手
1.首先，在src目錄下新建一個文件夾，我這里叫apis，后臺提供的所有接口都在這里定義
cd src #切換到src目錄 mkdir apis #新建apis文件
2.第二步，按照后臺文檔劃分的模塊新建js文件,這里簡單舉個例子
- 資訊模塊： info.js
- 登錄注冊模塊: member.js
- 個人信息模塊 user_info.js
- ....
cd apis #切換到apis目錄 touch info.js member.js user_info.js #新建js文件
現(xiàn)在的目錄大概是這個樣子
src
apis
info.js
member.js
user_info.js
main.js3.第三步，需要引入axios做相應(yīng)的配置
在apis下新建一個文件夾,叫http.js,在里面做axios相應(yīng)的配置
touch http.js //新建http.js文件
配置如下:
import axios from 'axios'
//創(chuàng)建axios的一個實例
var instance = axios.create({
baseURL:xxx,
timeout: 6000
})
//------------------- 一、請求忽略
instance.interceptors.request.use(function (config) {
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
instance.interceptors.response.use(function (response) {
return response.data;
}, function (error) {
// 對響應(yīng)錯誤做點什么
return Promise.reject(error);
});
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
}
}配置簡要說明一下：
- 引入axios,新建了個axios的實例(axios的實例的axios的功能一樣)
- 第30行代碼及以后是重點，拉出來重點看一下
/**
* 使用es6的export default導(dǎo)出了一個函數(shù)，導(dǎo)出的函數(shù)代替axios去幫我們請求數(shù)據(jù)，
* 函數(shù)的參數(shù)及返回值如下：
* @param {String} method 請求的方法：get、post、delete、put
* @param {String} url 請求的url:
* @param {Object} data 請求的參數(shù)
* @returns {Promise} 返回一個promise對象，其實就相當于axios請求數(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
}
}4.第四步、在apis下面的js文件中引入http.js導(dǎo)出的函數(shù)，拿其中一個文件member.js說明
//member.js 用于定義用戶的登錄、注冊、注銷等
import req from './http.js'
//定義接口
//在這里定義了一個登陸的接口，把登陸的接口露出去給組件使用
export const LOGIN =params=>req('post','/operator/login',params)
//這里使用了箭頭函數(shù)，轉(zhuǎn)換一下寫法：
//export const LOGIN=function(req){
// return req('post','/operator/login',params)
//}
//定義注冊接口
export const REG =params=>req('post','/operator/reg',params)
//定義注銷接口
export const LOGOUT =params=>req('post','/operator/logout',params)5.第五步，在組件中使用接口
登陸組件Login.js使用登錄接口
//Login.vue
<template>
<div>
<input type='text' v-modal='user.userId'>
<input type='text' v-modal='user.pass'>
</div>
</template>
<script>
//1. 引入登錄的接口定義
import {LOGIN} from '../../apis/user.js'
export default{
data(){
return {
user:{
userId:'',
pass:''
}
}
},
methods{
//2. 定義登錄的邏輯
async login(){
//2.1 awiat LOGIN(this.user)
//等待LOGIN(this.user)執(zhí)行完,
//把返回值給user_info
let user_info=await LOGIN(this.user)
//2.2假設(shè)登錄成功,返回的數(shù)據(jù)應(yīng)該是
//user_info={code:200,msg:'success',data:{token:'xxxxx'}}
//然后根據(jù)返回的數(shù)據(jù)做相應(yīng)的處理，比如儲存token
}
},
mounted(){
//3. 執(zhí)行登錄
this.login()
}
}
</script>6.這樣定義接口雖然看起來麻煩點，但有以下幾個好處：
代碼看起來規(guī)范，所有的接口都在一個文件夾定義，不用分散的各個組件，維護起來簡單，例如后臺的一些url變了，改起來也方便
可以做到接口一次定義，到處使用
例如首頁使用了很多api
//index.js 首頁的js文件
import {GET_USER_INFO} from 'apis/user_info.js' //用戶信息
import {GET_CURRENT_INFO,GET_HOT_INFO} from 'apis/info.js' //熱門資訊 最新資訊
import {GET_HOT_LECTRUE} from'apis/lectrue.js' //講座推薦用戶界面也會用到用戶信息api
//user_info.js用戶信息頁面
import {GET_USER_INFO} from 'apis/user_info.js' //用戶信息就先寫到這里了，如有錯誤，請在評論區(qū)指正，下次整理下用戶權(quán)限相關(guān)的內(nèi)容，包括jwt,token保存和更新,頁面權(quán)限問題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 按鈕 權(quán)限控制，在日常項目中，會碰到需要根據(jù)后臺接口返回的數(shù)據(jù)，來判斷當前用戶的操作權(quán)限，必須當有刪除權(quán)限時，就顯示刪除按鈕，下面我們就來了解一下具體的解決方法,需要的朋友也可以參考一下2021-12-12
使用Bootstrap4 + Vue2實現(xiàn)分頁查詢的示例代碼
本篇文章主要介紹了使用Bootstrap4 + Vue2實現(xiàn)分頁查詢的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))
開發(fā)中有時候需要input只能輸入數(shù)字,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
本篇文章主要介紹了vue.js實例todoList項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
基于iview-admin實現(xiàn)動態(tài)路由的示例代碼
這篇文章主要介紹了基于iview-admin實現(xiàn)動態(tài)路由的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家介紹了vue實現(xiàn)前端按鈕組件權(quán)限管理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue初嘗試--項目結(jié)構(gòu)的相關(guān)知識,需要的朋友可以參考下2018-01-01
vue對象復(fù)制方式(深拷貝,多層對象拷貝方式在后面)
這篇文章主要介紹了vue對象復(fù)制方式(深拷貝,多層對象拷貝方式在后面)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
element el-input directive數(shù)字進行控制
本文介紹了vue使用directive 進行控制的方法，使用element開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點，有需要小數(shù)點的，就有一定的參考價值，有興趣的可以了解一下2018-10-10
這篇文章主要給大家介紹了關(guān)于vue cli使用絕對路徑引用圖片問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起看看吧。2017-12-12