angular6 + ng-zorro鹿途後臺管理系統（二）項目結構規劃

 

上一節咱們已經搭建好項目的基本骨架，如今咱們就來對項目的總體結構進行規劃，項目結構規劃每一個人每一個公司都有不一樣的方式，咱們不去論好壞仍是是否合理，只要你當前以爲它是最好的實現就好，不過我仍是建議去參考優秀項目的規劃方式。

____________________________________________________

 

2018年11月23日更新：

 

 關於項目結構部分會有所調整，最近比較忙，我會盡快重構代碼。

__________________________________________________________

2018年11月25更新

代碼結構主要調整core模塊裏的項目公用組件的存放位置，將原存放在core模塊裏放到shared模塊裏，並在shared模塊裏新增routes文件夾用於存放非項目公用的模塊部分。

__________________________________________________________

 

 

 

 

項目結構設計總原則：一切皆模塊，鹿途項目的模塊主要以功能劃分，每一個完整的功能點就是一個獨立的模塊，有本身獨立的路由服務等，而後咱們在把構建完成的子模塊注入到主模塊，若是不須要這個模塊的功能，直接從主模塊裏把它移除，須要什麼新功能就新開一個模塊而後在注入到主模塊。

咱們先分析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模塊是項目中的公共美容室，職責就不贅述了。

 

 

 

 

項目github地址：https://github.com/ZhouRenYou/ng-deerway
項目預覽地址（非實時更新）：https://zhourenyou.github.io/web-deerway/passport/login