開發(fā)后臺管理系統(tǒng)是大部分前端開發(fā)人員接觸過的項目，如何更好的進(jìn)行項目的搭建、組件的開發(fā)、數(shù)據(jù)結(jié)構(gòu)的設(shè)計等等，這些都是需要考慮的問題。以下是我結(jié)合一些項目的經(jīng)歷和其他大佬的項目代碼與技術(shù)分享，做出了對于后臺管理系統(tǒng)中前端項目的思考

1. 了解需求，熟悉掌握需求

這一要求無論是對于前端開發(fā)人員或是其他端的開發(fā)人員，都是能夠順利開發(fā)項目的前提。在開發(fā)項目之前，需對 PM?的需求了然于胸，對原型設(shè)計能夠充分掌握。理解每一個操作邏輯的含義，并且擴(kuò)散思維思考如何進(jìn)行組件和數(shù)據(jù)結(jié)構(gòu)的設(shè)計。但是單獨只是對需求文檔和原型進(jìn)行閱讀是比較容易遺漏某些功能點的，最好能夠?qū)椖恐匦略O(shè)計一張 思維導(dǎo)圖?，從開發(fā)自己的角度進(jìn)行設(shè)計，從項目整體的根節(jié)點出發(fā)，細(xì)分每一個模塊，每個模塊下設(shè)計好對應(yīng)的需求，確保每一個功能不被遺漏。雖然多花了設(shè)計思維導(dǎo)圖的時間，但我覺得這是值得的，這樣不僅僅能夠增加對于整體項目的理解，也能更好的及時發(fā)現(xiàn)項目的難點和疑惑點。

2. 確定技術(shù)選型

后臺管理系統(tǒng)的主流技術(shù)選型為 Vue+ElemetUI，不過個人覺得在組件設(shè)計上 AntDesignVue?的 UI?框架設(shè)計得好一些，更多的是采取數(shù)據(jù)驅(qū)動組件的設(shè)計模式，在項目開發(fā)中可以更方便的解耦邏輯函數(shù)。不過 UI?框架的選擇還是得結(jié)合開發(fā)人員團(tuán)隊自身對于某一個的熟練程度和是否有對應(yīng)的 UI?框架能更好的解決項目中存在的難點進(jìn)行綜合比較。
全局按需引入 element-ui?組件：

import Vue from "vue";

···

import { Input } from "element-ui";

Vue.use(Input);

組件使用：

<el-input

v-model="user"

clearable

@keyup.enter.native="search"

@clear="search"

>el-input>

3. 設(shè)計項目結(jié)構(gòu)

通過 Vue?腳手架工具搭建的前端項目在 src?文件夾下可分為以下幾部分：

路由層?router?

靜態(tài)文件層?assets?

頁面結(jié)構(gòu)層?views?

組件結(jié)構(gòu)層?components?

全局狀態(tài)管理層?store?

功能邏輯處理層?util?

常量管理層?constants?

在 Vue?項目中還可以引入更多的配置如混入層 mixins?、過濾層 filtters?等。
在項目開發(fā)中，需要區(qū)分開業(yè)務(wù)功能和非業(yè)務(wù)功能的邏輯設(shè)計，對于一些可以解耦出來的非業(yè)務(wù)功能函數(shù)，一般不直接在開發(fā)頁面的業(yè)務(wù)邏輯中直接定義此函數(shù)，而是需要抽離出來，可供多個業(yè)務(wù)功能函數(shù)進(jìn)行調(diào)用。
組件結(jié)構(gòu)層 components 中一般也只開發(fā)非業(yè)務(wù)功能相關(guān)的頁面組件或功能組件，以供多個頁面結(jié)構(gòu)進(jìn)行調(diào)用，若一個頁面需分成幾個組件開發(fā)，且此子組件屬于業(yè)務(wù)功能的，建議直接在頁面結(jié)構(gòu)層 views 中定義，開發(fā)和維護(hù)同一個頁面也比較方便。src?文件夾下結(jié)構(gòu)如下：

├─assets

├─components

├─constants

├─mixins

├─request

├─router

├─store

├─utils

└─views

4. 數(shù)據(jù)請求 methods中 OR actions中

一般項目中對于數(shù)據(jù)請求的方式都是基于 methods?鉤子或其他生命周期鉤子中調(diào)用請求方法，也存在一些項目中是通過發(fā)送一個 disptach?異步請求方法在 actions?中調(diào)用請求函數(shù)。使用后者的說法是便于統(tǒng)一管理請求接口，并對請求返回的數(shù)據(jù)進(jìn)行統(tǒng)一的管理。
綜合以上兩種做法，可以優(yōu)化項目中的請求方式，若請求接口發(fā)出后返回的數(shù)據(jù)需要在多個頁面或多個不同的組件中共享和使用，則推薦在需要發(fā)請求的函數(shù)中 dispath?觸發(fā)，在 actions?中發(fā)送請求，返回的數(shù)據(jù)保存在全局狀態(tài)管理 state?中。methods?中發(fā)送請求方式：

getGraphicCode () {

let vm = this;

api.login.getCheckCode({

type: '2'

}).then(res => {

if (res.code === '000') {

vm.graphicCode = 'data:image/png;base64,' + res.data.img;

vm.imgId = res.data.imgId;

} else {

vm.$message.error(res.msg);

}

})

}

actions?中發(fā)送請求方式：

findAllRoles({ commit }) {

return new Promise((resolve, reject) => {

api.systemAccount.findAllRoles().then(response => {

if (response.code === "000" && response.success) {

commit(MUTATIONS_TYPE.AllROLES, response.data)

resolve(response);

} else {

reject(new Error(response.code, response.msg))

}

})

})

},

5. 登錄與權(quán)限管理

token?驗證是目前大部分前后端分離的 Web?項目做登錄驗證比較常見的方法。前端通過發(fā)送賬號和密碼或賬號和驗證碼給到后端后，后端驗證通過會返回一個唯一的 token?作為該用戶的登錄憑證，在之后的每個請求當(dāng)中，請求頭中都需帶上這個 token?作為后端的登錄校驗。token?有過期的機(jī)制，可以在請求攔截中做邏輯判斷處理，若當(dāng)前時間接近了過期時間，則通過更新 token?的接口請求更新 token?，在之后的請求中帶上新的 token?。以此循環(huán)，若用戶過長時間無操作，則可認(rèn)為用戶為離線狀態(tài)，在用戶之后的第一次請求時，由于 token?已經(jīng)過期，訪問后端接口會發(fā)生錯誤，根據(jù)后端返回的錯誤狀態(tài)碼作為判斷，將系統(tǒng)定向至登錄頁面。
通過帶有 token?請求頭的請求方法，后端可以判斷到是哪一個用戶，前端也可以通過獲取權(quán)限接口獲得該用戶的權(quán)限列表，根據(jù)權(quán)限列表做一份路由映射表，如果后端返回的數(shù)據(jù)結(jié)構(gòu)與前端的路由設(shè)置的數(shù)據(jù)結(jié)構(gòu)不同，此時還需編寫此映射路由的業(yè)務(wù)功能函數(shù)。如果該用戶擁有此路由權(quán)限，則通過在全局路由監(jiān)控中 router.beforeEach 進(jìn)行 router?中的 addRoutes?方法將有權(quán)限的路由配置添加到路由當(dāng)中，側(cè)邊欄也可根據(jù)路由列表中的 meta?字段中關(guān)鍵字的判斷進(jìn)行相應(yīng)的渲染。如果權(quán)限的顆粒度小到一個按鈕，則可根據(jù)后端返回的權(quán)限列表映射出的權(quán)限參數(shù)，通過 v-if?進(jìn)行判斷該功能組件是否渲染。
在路由管理中通過 router.beforeEach?鉤子中判斷當(dāng)前的路由權(quán)限是否為空，是的話則可執(zhí)行獲取權(quán)限路由的接口：

store.dispatch("getUserInfoAndAuthorityInfo").then(res => {

// 根據(jù)后端返回的路由權(quán)限格式轉(zhuǎn)成前端路由配置格式

const rolesRoute = setAsyncRouterMap(res.menuList, asyncRouterMap, mainChildrenAsyncRoutes)

store.commit(Vue.VUEX_TYPES.ROLESROUTE, rolesRoute);

// 添加路由

router.addRoutes(rolesRoute);

next({ ...to })

}).catch(() => {

Message.error("驗證失敗")

next('/login')

})

6. 常量枚舉值管理

在項目當(dāng)中對關(guān)鍵的常量枚舉值進(jìn)行管理是非常有必要的。比如在項目當(dāng)中后端用某個狀態(tài)碼 1?代表賬號為啟用狀態(tài)，如果在項目當(dāng)中多次使用 ===1?去判斷賬號是否為啟用狀態(tài)，當(dāng)需要更改這個狀態(tài)碼的時候，對于前端來說是一件十分麻煩的事情，所以可以通過把 1?賦值給一個常量，在項目代碼中引用這個常量，如果需要更改狀態(tài)碼的時候，則直接改變這個賦值給常量枚舉值的狀態(tài)碼即可，常量的配置也可提醒開發(fā)人員此參數(shù)不可輕易修改，便于項目的維護(hù)和統(tǒng)一管理。一般常量枚舉值的管理寫在 constants?層中，常量的變量名使用大寫字母編寫。
狀態(tài)枚舉值得配置如下：

/**

* 賬號狀態(tài)對照表

* "0" 未啟用 NOTUSED_CODE

* "1" 已啟用 ENABLE_CODE

* "2" 已停用 DISABLE_CODE

*/

const NOTUSED_CODE = "0";

const ENABLE_CODE = "1";

const DISABLE_CODE = "2";

const ACCOUNT_TYPE = {

[NOTUSED_CODE]: "未啟用",

[ENABLE_CODE]: "已啟用",

[DISABLE_CODE]: "已停用"

};

export default Object.freeze({

NOTUSED_CODE,

ENABLE_CODE,

DISABLE_CODE,

ACCOUNT_TYPE

});

7. 組件設(shè)計

前端項目當(dāng)中可以把展示組件分為兩部分，分別為頁面組件和功能組件。對于頁面組件，常用于展現(xiàn)頁面的整體內(nèi)容，承擔(dān)著業(yè)務(wù)邏輯的正常運行，與業(yè)務(wù)比較有強(qiáng)的耦合性。功能組件是用于展現(xiàn)和處理某一單一或某一模塊的功能，功能組件并不關(guān)心頁面的業(yè)務(wù)邏輯，充當(dāng)著一個函數(shù)的作用，只要有輸入便有對應(yīng)的輸出，并可在多個頁面組件或功能組件中被調(diào)用。綜上，在設(shè)計頁面組件的時候，不僅應(yīng)該考慮該組件能夠正常的完成業(yè)務(wù)的功能，還要考慮其是否能夠脫離業(yè)務(wù)成為一個功能組件，對于內(nèi)容比較多的頁面組件，可以在其同級目錄下新建多個子頁面組件共同構(gòu)建。在設(shè)計功能組件時，需考慮組件的布局、邏輯、視圖，功能組件的設(shè)計難度在于其要考慮到滿足不斷更新的需求變化，可擴(kuò)展性，靈活性是設(shè)計的一大挑戰(zhàn)。
頁面組件目錄格式如下：

8. 必要的開發(fā)文檔或注釋

項目的開發(fā)文檔可編寫為md文件格式存放于項目的根目錄，一份好的開發(fā)文檔能夠?qū)椖康谋尘斑M(jìn)行介紹，說明項目的結(jié)構(gòu)和開發(fā)的步驟，更有利于其他開發(fā)人員參與或接手項目。對于項目當(dāng)中使用到的與業(yè)務(wù)功能耦合的邏輯函數(shù)，較為復(fù)雜的，編寫函數(shù)的介紹以及使用方法，做好邊界條件判斷，示范輸入數(shù)據(jù)以及對應(yīng)的輸出結(jié)果，可在項目中新建 docs?文件夾存放開發(fā)過程中的使用文檔。對于非復(fù)雜功能的業(yè)務(wù)邏輯函數(shù)或非業(yè)務(wù)邏輯函數(shù)，可直接在定義函數(shù)之前編寫注釋，說明函數(shù)作用功能，以及對應(yīng)的輸入和輸入?yún)?shù)的類型。

每次的開發(fā)過程都可當(dāng)做是一個學(xué)習(xí)和總結(jié)經(jīng)驗的過程，對比以往的代碼，我們可以思考代碼結(jié)構(gòu)是否能設(shè)計得更加完善，邏輯函數(shù)是否清晰且考慮邊界條件，性能是否可以更加的優(yōu)化。

總結(jié)

以上是生活随笔為你收集整理的前端做后台管理系统有前途吗_关于后台管理系统前端项目的思考的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。