怎么實現(xiàn)一個后臺管理系統(tǒng)-架構(gòu)篇

"修身，齊家，治國，平天下。這是儒家奉行的人生之道，也是我們現(xiàn)代人所所求的境界。當(dāng)我們邁出腳步的時候，需要征服一座山，那就是我們自己"

--出自《稻盛和夫給年輕人的忠告》

01

前

一直以來想找個合適的機會寫一寫關(guān)于VueAdminWork的整體框架原理以及一細(xì)節(jié)。前期覺得還是不太成熟，而且也沒準(zhǔn)備好要怎么寫。今天打算試寫一篇關(guān)于VueAdminWork的整體框架設(shè)計。寫的不好還請各們小伙伴見諒

以下的說明是VueAdminWorkP（Vue3 + Vite2 + NaiveUI + Typescript）版本為例來進行介紹的

02

VueAdminWork框架的設(shè)計初衷和說明

很多用過后臺管理系統(tǒng)的小伙伴一定會有一個感覺就是要么功能少，要么頁面不美觀?；蚨嗷蛏俣紩嬖谶@樣那樣的問題，其實我有使用別人的后臺管理模板的時候也是一樣的感覺。

所以就下定決心要自己搞一款屬于自己的后臺管理系統(tǒng)，不僅如此，要盡可能的兼顧到大部分人的需求。但是由于個人能力始終有限，VueAdminWork框架到現(xiàn)在還有很多很多需要完善的地方。在今后的時間，我會繼續(xù)努力去完善給大家?guī)砀玫拈_源作品。

做這樣一款框架也是對自己的知識體系的沉淀，在這過程也學(xué)習(xí)到了很多很多知識。中間也曾想到放棄，但是咬牙堅持到了最后，還好沒有放棄。

VueAdminWork框架發(fā)展至今已經(jīng)有6款不同技術(shù)架構(gòu)的版本。其實目前開源了4款。另一款基于Antd的版本也準(zhǔn)備開源。

這里面我要重點說明一下，VueAdminWork全部都是由我本人一點點代碼寫出來的，從一個簡單的html頁面項目，一點點發(fā)展到現(xiàn)在的體系。

絕對不是隨便從網(wǎng)上下載一個模板改改樣式改改文字就變成自己的了。

這樣的行為是讓人不恥的。

03

VueAdminWork運行原理和模型

VueAdminWork和一個普通的項目一樣，入口也是 main.ts 或者 main.js 。也存在一個 App.vue組件。

可以看成一個普通的Vue項目

App.vue代碼如下：

是不是很簡單……

框架本身的運行原理也是非常簡單的，用下面一張圖就可以清楚的表示

在整體的架構(gòu)上，設(shè)計的構(gòu)思就是框架由一個個組件組合來成，這樣便于后期的維護和替換。

VueAdminWork采用了兩級路由，從而對應(yīng)兩級視圖渲染的方式。如下

最外層的路由對應(yīng)的組件是: Layout。

Layout對應(yīng)的模板代碼如下：

同時，為了適配移動端，Layout還有很多關(guān)于 移動端的代碼。這里不多介紹關(guān)于移動端的適配情況了。

Layout組件是整個項目運行的骨架和載體。根據(jù)用戶的配置來進行切換不同的布局模式。是最重要的一個組件

每個組件負(fù)責(zé)不同的功能，比如：

SideBar 只負(fù)責(zé)顯示 菜單列表

TabBar只顯示已經(jīng)訪問過的頁面標(biāo)題

NavBar只顯示頁面導(dǎo)航相關(guān)的功能

……

正是因為這樣一個個的小組件，最終組合在一起形成框架的基本的模型。

工作區(qū)Main.vue

而我們平時用的最多的就是工作區(qū)（也就是第二級路由頁面），是由 Main.vue實現(xiàn)，代碼如下：

這樣就可以根據(jù)瀏覽器中不同的路徑來實現(xiàn)不同的頁面切換

04

結(jié)尾

到此，VueAdminWork的整體架構(gòu)和運行原理就給大家介紹到這里，可能還有很多地方?jīng)]有講明白，我會再進行補充。等下期我們再見