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

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

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

2. 確定技術選型

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

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

路由層?router?

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

頁面結構層?views?

組件結構層?components?

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

功能邏輯處理層?util?

常量管理層?constants?

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

├─assets

├─components

├─constants

├─mixins

├─request

├─router

├─store

├─utils

└─views

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

一般項目中對于數(shù)據(jù)請求的方式都是基于 methods?鉤子或其他生命周期鉤子中調用請求方法，也存在一些項目中是通過發(fā)送一個 disptach?異步請求方法在 actions?中調用請求函數(shù)。使用后者的說法是便于統(tǒng)一管理請求接口，并對請求返回的數(shù)據(jù)進行統(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. 登錄與權限管理

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

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

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

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. 常量枚舉值管理

在項目當中對關鍵的常量枚舉值進行管理是非常有必要的。比如在項目當中后端用某個狀態(tài)碼 1?代表賬號為啟用狀態(tài)，如果在項目當中多次使用 ===1?去判斷賬號是否為啟用狀態(tài)，當需要更改這個狀態(tài)碼的時候，對于前端來說是一件十分麻煩的事情，所以可以通過把 1?賦值給一個常量，在項目代碼中引用這個常量，如果需要更改狀態(tài)碼的時候，則直接改變這個賦值給常量枚舉值的狀態(tài)碼即可，常量的配置也可提醒開發(fā)人員此參數(shù)不可輕易修改，便于項目的維護和統(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. 組件設計

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

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

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

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

總結

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

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