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