Vue 介面管理

在vue開發中，會涉及到很多介面的處理，當專案足夠大時，就需要定義規範統一的介面，如何定義呢？

方法可能不只一種，本文使用axios+async/await進行介面的統一管理。

本文使用vue-cli生成的專案舉例。

拿segmentfault的官網簡單舉個例子，先看一下官網：

舉例問答模組

專欄模組

講堂模組

圈子模組

發現模組

個人資訊模組

使用者登入註冊模組

...還有其他很多

模組劃分

那麼如何做呢？

在src目錄下新建乙個資料夾，我這裡叫apis，後台提供的所有介面都在這裡定義：

cd src // 切換到src目錄 mkdir apis // 新建apis檔案

按照後台文件劃分的模組新建js檔案,這裡簡單舉個例子：

cd apis // 切換到apis目錄
type nul > info.js // 新建js檔案
type nul > member.js 
type nul > userinfo.js

現在的目錄大概是這個樣子：

src apis info.js member.js userinfo.js main.js

需要引入axios做相應的配置。

在apis下新建乙個資料夾，叫http.js，在裡面做axios相應的配置。

type nul > http.js // 新建http.js檔案

配置如下：

import axios from 'axios'
// 建立axios的乙個例項 
var instance = axios.create()
// 一、請求*** 忽略
instance.interceptors.request.use(function (config) , function (error) );
// 二、響應*** 忽略
instance.interceptors.response.use(function (response) , function (error) );
export default function (method, url, data = null)  else if (method === 'get') );
} else if (method === 'delete') );
} else if (method === 'put')  else 
}

配置簡要說明一下：

/**
* 使用es6的export default匯出了乙個函式，匯出的函式代替axios去幫我們請求資料，
* 函式的引數及返回值如下：
* @param  method  請求的方法：get、post、delete、put
* @param  url     請求的url:
* @param  data    請求的引數
* @returns      返回乙個promise物件，其實就相當於axios請求資料的返回值
*/ export default function (method, url, data = null)  else if (method === 'get') );
} else if (method === 'delete') );
} else if (method === 'put')  else 
}

在apis下面的js檔案中引入 http.js匯出的函式，拿其中乙個檔案 member.js說明：

// member.js 用於定義使用者的登入、註冊、登出等
// 定義介面  
// 在這裡定義了乙個登陸的介面，把登陸的介面暴露出去給元件使用
export const login = params => req('post', '/operator/login', params);
// 這裡使用了箭頭函式，轉換一下寫法：
//export const login=function(req)
// 定義註冊介面
export const reg = params => req('post', '/operator/reg', params);
// 定義登出介面
export const logout = params => req('post', '/operator/logout', params);

在元件中使用介面。

登陸元件 login.js使用登入介面：

這樣定義介面雖然看起來麻煩點，但有以下幾個好處：

例如首頁使用了很多api：

// index.js  首頁的js檔案
import  from 'apis/userinfo.js'  // 使用者資訊
import  from 'apis/lectrue.js' // 講座推薦

使用者介面也會用到使用者資訊api：

// userinfo.js使用者資訊頁面
import  from 'apis/userinfo.js'  // 使用者資訊

vue 專案介面管理

一前言在vue開發中，會涉及到很多介面的處理，當專案足夠大時，就需要定義規範統一的介面假設後端的文件分成了以下幾個模組 1 發現模組 2 個人資訊模組 3 商品模組一般來說，的首頁都是複雜的，會用到很多其他頁面也會用到api，所以介面統一管理可以做到api的復用二介面管理 1 在src目...

vue專案api介面管理

預設vue專案中已經使用vue cli生成，安裝axios，基於element ui開發，axiosconfig目錄和api目錄是同級，主要記錄配置的相關。import vue from vue import axios from axios import qs from qs import fro...

dtree 後台管理例子 vue 專案介面管理

在vue開發中，會涉及到很多介面的處理，當專案足夠大時，就需要定義規範統一的介面，如何定義呢？方法可能不只一種，本文使用axios async await進行介面的統一管理。本文使用vue cli生成的專案舉例。舉例拿segmentfault的官網簡單舉個例子，先看一下官網問答模組專欄模組講堂...

Vue 介面管理

vue 專案介面管理

vue專案api介面管理

dtree 後台管理例子 vue 專案介面管理

相關推薦