前端|基于angular的企业级中后台前端系统的一些思考和实践前端|angular

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
应导入模块：