一、为什么需要搭建 Elpis（痛点）？
- 工作中重复性工作很高。
- CRUD 体力活工作很高。
- 多套系统交付间产生大量重复工作。
- 长期从事页面端开发，技术无法得到突破。
二、Elpis 解决了什么（做到了什么）
- 沉淀 80% 重复性工作，支持配置化
- 能只针对 20% 定制化工作进行开发
- 落地即为系统平台，可持续集成
- 支持多系统建设，系统间能够功能复用
三、项目架构
四、BFF 层
1. 什么是 BFF 层
Backend-for-Frontend（简称 BFF）是一种后端架构模式，它为特定的前端应用（Web、移动端、桌面端等）提供专门的后端服务，作为前端与通用后端（或微服务）之间的中间层。
在传统架构中，前端通常直接与一个通用的后端 API（如 RESTful 或 GraphQL API）交互，而 BFF 引入了一层专门的后端，让不同类型的前端（Web、iOS、Android、小程序等）有各自独立的 BFF 层。
2. BFF 层的作用
BFF 主要用于优化前端和后端的交互，解决以下问题：
- 不同前端的需求不同
- Web、移动端、智能设备等不同的前端通常有不同的数据需求，比如：
- Web 端可能需要加载完整的数据列表。
- 移动端可能只需要部分关键数据，减少带宽消耗。
- 小程序可能需要更高效的接口设计，减少 API 调用次数。
- 如果所有前端都直接调用同一个后端 API，可能会导致前端获取了过多或过少的数据，影响性能和用户体验。
- BFF 层可以根据不同前端的需求，定制化数据格式，减少前端的额外处理。
- Web、移动端、智能设备等不同的前端通常有不同的数据需求，比如：
- 减少前端的 API 组合逻辑
- 在没有 BFF 的架构下，前端可能需要多次调用后端 API，然后在前端进行数据合并和转换。
- BFF 层可以封装多个 API 调用，把复杂的业务逻辑放到后端处理，前端只需要调用一个更简单、更直观的 API。
- 提升安全性
- 直接让前端访问后端微服务可能暴露太多细节，而 BFF 层可以充当“网关”：
- 统一进行身份认证、权限控制。
- 避免前端直接暴露数据库结构或业务逻辑，增强安全性。
- 直接让前端访问后端微服务可能暴露太多细节，而 BFF 层可以充当“网关”：
- 降低后端改动对前端的影响
- 如果前端直接依赖通用后端 API，一旦后端改动（比如字段变更、API 结构调整），前端也必须修改。
- BFF 层可以作为适配层，确保前端的 API 结构保持稳定，即使后端发生变更，BFF 也可以进行转换，减少对前端的影响。
五、项目技术选型
- 展示层
- Vue 3
- Element-Plus
- Webpack 5
- BFF 层
- Node.js 18 ( Koa 2 )
- 数据层
- MySQL
- Log4js （提供日志服务）
六、项目文件结构
文件结构
elpis/
├─── app/
├─── controller/
├─── extend/
├─── middleware/
├─── public/
├─── router/
├─── router-schema/
├─── service/
├─── middleware.js
├─── config/
├─── config.beta.js // 测试环境 配置文件
├─── config.default.js // 默认 配置文件
├─── config.local.js // 本地环境 配置文件
├─── config.prod.js // 生产环境 配置文件
├─── elpis-core/
├─── env.js
├─── index.js
├─── loader/
├─── config.js
├─── controller.js
├─── extend.js
├─── middleware.js
├─── router-schema.js
├─── router.js
├─── service.js
├─── logs/
└─── application.log // 日志文件
├─── .eslintignore
├─── .eslintrc
├─── .gitignore
├─── index.js
├─── package.json
├─── README.md
文件夹/文件用途说明
| 文件夹/文件名 | 用途 |
|---|---|
| elpis-core/ | elpis核心，将来会作为一个npm包发布 |
| elpis-core/env.js | 获取、判断项目当前运行环境 |
| elpis-core/index.js | elpis核心入口文件，对loader进行挂载，引入依赖等 |
| elpis-core/loader | 存放各种loader |
| config/ | 项目环境配置 |
| app/ | 应用相关文件（可配置化区域） |
| logs/ | 日志相关文件 |
elpis-core/loader/ 中 各种 loader 的作用
| 名称 | 用途 |
|---|---|
| config-loader | 在不同环境下读取config中不同的配置文件，挂载到app.config |
| controller-loader | 读取app/controller目录下文件，并能够通过app.controller.目录.文件名 访问 |
| extend-loader | 读取app/extend目录下文件，并能够通过app.名称 访问 |
| middleware-loader | 读取app/middleware目录下文件，并能够通过app.middleware.目录.文件名 访问 |
| router-schema-loader | 读取app/router-schema目录下文件，并能够通过app.routerSchema.名称 访问 |
| router-loader | 解析app/router下所有文件，并挂载到KoaRouter上 |
| service-loader | 读取app/service目录中文件，并能够通过app.service.目录.文件名 访问 |
app/ 中 各种文件夹作用
| 名称 | 用途 |
|---|---|
| public | 存放html模版文件、公共资源 |
| controller | 解析用户的输入，返回处理后的结果 |
| extend | 框架扩展 |
| middleware | 中间件 |
| router-schema | 遵循JSON Schema模式定义数据结构，使用ajv进行验证 |
| router | 用于配置URL路由规则 |
| service | 编写业务逻辑层 |
七、项目运行流程图（大致）
elpis 源于 抖音“哲玄前端”《大前端全栈实践》
