1. 程式人生 > >angular6 + ng-zorro鹿途後臺管理系統(二)專案結構規劃

angular6 + ng-zorro鹿途後臺管理系統(二)專案結構規劃

上一節我們已經搭建好專案的基本骨架,現在我們就來對專案的整體結構進行規劃,專案結構規劃每個人每個公司都有不同的方式,我們不去論好壞還是是否合理,只要你當前覺得它是最好的實現就好,不過我還是建議去參考優秀專案的規劃方式。

專案結構設計總原則:一切皆模組,鹿途專案的模組主要以功能劃分,每個完整的功能點就是一個獨立的模組,有自己獨立的路由服務等,然後我們在把構建完成的子模組注入到主模組,如果不需要這個模組的功能,直接從主模組裡把它移除,需要什麼新功能就新開一個模組然後在注入到主模組。

我們先分析app目錄下結構的規劃:app目錄下包含core、layout、routes、shared、styles五個部分;這五部門除styles以為都是以模組的方式呈現,生成模組的快捷命令是

ng g m ./ModuleName

如:ng g m ./core

下面我們來討論每個模組的細節設計與此模組在專案中的職責描述:

core模組是專案中的一個公共資源池負責向其它模組提供幫助,給其它模組帶來便利,鹿途專案會把二次封裝的NG-ZORRO元件,專案通用的服務,管道,通用驗證,以及一些公用方法存放在此模組中,至於模組裡的內容如何存放就因人而異,我建議以功能型別劃分放在不同的資料夾下。

layout模組是專案中的模版提供商,整個後臺管理系統存在多種不同的呈現方式,鹿途系統主體是以上部的導航左邊的選單欄以及底部的版權欄的方式進行呈現,鹿途系統的登入部分又是以另一種截然不同的方式呈現,而後期的地圖部分可能又會以區別於前兩種形式風格進行呈現,以上呈現的方式對於專案來說就是不同的模版,我們的設計目標一直秉承著能省就省,於是就誕生了layout模組,layout模組下會存在多種不同風格的模版,專案中的所有呈現方式都由它提供。

routes模組是專案中的功能集中營也是專案的核心,它是專案中的所有模組的一個集中實現的場所,其它模組都是為它服務,我們將在這個模組下進行業務場景的復現和功能的開發。

shared模組是專案中的採購分發中心,它主要是負責將一些公共資源進行引入,然後再從統一的出口分發到專案中的其它部分。

styles模組是專案中的公共美容室,職責就不贅述了。