1、前后端统一的优势

(环境（node），语言(typescript)，框架核心思想与用法(angular,nest)，编辑器等等)，降低配合成本，提高开发效率，提高代码的复用性，对每个人和公司全面发展都大有好处。

2、从数据流动的角度谈谈前后端统一带来的好处

用户输入的数据-->前端（验证和处理）-->接口-->后端（验证和业务逻辑处理）-->数据库

为用户展现的数据<--前端（布局和处理）<--接口<--后端（业务逻辑处理）<--数据库

一个项目相当一部分的时间（大概30%左右）其实用在了团队协调，特别是前后端协调开发，在前后端分离的情况下，虽然极大的提高了开发效率，但是前后端统一后，还可以再提高一点，前后端可以共用核心的基础类，基础服务，同时对整个项目有更深刻的理解，同时为接口设计奠定了基础。

3、项目开发的流程

需求分析--》原型设计--》数据库设计--》接口设计--》前后端分离开发并测试--》前后端对接并测试--》上线测试--》正式发布

4、代码规范，接口规范，返回状态码规范

代码规范参考：https://blog.csdn.net/weixin_38638020/article/details/86651759

接口规范：restful接口规范（暂时未整理）

返回状态码规范：请求异常（1xx--5xx），业务异常（Nxx（代表业务异常分类，N从6开始）+xxx（代表此分类下具体异常））如600001

5、angular架构概览

参考：https://angular.cn/guide/architecture

6、前端项目结构，借鉴ng-alain

参考：https://ng-alain.com/docs/getting-started/zh

 

6.1 整个项目的目录结构。

├── _mock                                       # Mock 数据规则
├── src
│   ├── app
│   │   ├── core                                # 核心模块
│   │   │   ├── i18n
│   │   │   ├── net
│   │   │   │   └── default.interceptor.ts      # 默认HTTP拦截器
│   │   │   ├── services
│   │   │   │   └── startup.service.ts          # 初始化项目配置
│   │   │   └── core.module.ts                  # 核心模块文件
│   │   ├── layout                              # 通用布局
│   │   ├── routes
│   │   │   ├── **                              # 业务目录
│   │   │   ├── routes.module.ts                # 业务路由模块
│   │   │   └── routes-routing.module.ts        # 业务路由注册口
│   │   ├── shared                              # 共享模块
│   │   │   └── shared.module.ts                # 共享模块文件
│   │   ├── app.component.ts                    # 根组件
│   │   └── app.module.ts                       # 根模块
│   │   └── delon.module.ts                     # @delon模块导入
│   ├── assets                                  # 本地静态资源
│   ├── environments                            # 环境变量配置
│   ├── styles                                  # 样式目录
└── └── style.less                              # 样式引导入口

 6.2 项目的体系结构

 

6.3 模块注册指导原则 

一直以来 AppModule、CoreModule、SharedModule 模块使用没有很明确的规范，很容易让产生乱用。Angular模块目标是为了使组件、指令、服务和管道功能块更内聚，并每一个功能区域形成独立的业务领域或实用工具的集合。

分类说明

AppModule

根模块，用于引导 Angular 启动；它非常适合导入一些需要在整个应用到处需要的模块，例如：主题系统、用户主认证模块、权限模块等模块，以及一些全局性HTTP拦截器、国际化服务等。

CoreModule

核心模块只会被导入一次，它等同 AppModule，但我们更应该把它当成一个纯服务类模块，例如：消息、数据访问等。

SharedModule

我们叫它共享模块；它不应该出现 providers，因为 ShareModule 会在所有业务模块中被导入，这会导致服务被覆盖。

建议

AppModule

应 导入模块：

• Angular 模块：BrowserModule、BrowserAnimationsModule、HttpClientModule

• AlainThemeModule 主题系统

• DelonMockModule Mock数据

• AlainAuthModule 用户认证模块

• AlainACLModule 权限模块

• 国际化模块

应 包含服务：

• Angular 国际化

• HTTP 拦截器

• Angular 启动服务

• ng-zorro-antd 基础组件服务

• @delon/abc 业务组件服务

作用： 贯穿整个应用的定义。

CoreModule

应 仅只留 providers 属性。

作用： 一些通用服务，例如：用户消息、HTTP数据访问。

ShareModule

应 包含定义：

• 应用通用自定义业务组件

应 导入模块：

• Angular 通用模块：CommonModule、FormsModule、RouterModule、ReactiveFormsModule

• ng-zorro-antd 基础组件模块

• @delon/abc 业务组件模块

• 第三方通用依赖组件模块

应 导出所有包含的模块。

不应 有 providers 属性。

作用： 一些通用自定义、第三方组件定义，减少业务模块的导入。

业务模块

业务模块应该包括业务定义模块和路由模块。

模块

应 导入模块：

• SharedModule

• 对应的路由模块

不应：

• 导出任何组件

• 尽可能不要使用 providers 属性

路由模块

应 只包括路由的 import、exports 模块。