From 6c5b25e0d71172ce1ca72fe14d31764d8c30b20d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BC=96=E7=A0=81=E7=8C=BF?= Date: Fri, 19 Sep 2025 02:49:19 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B8=AE=E5=8A=A9=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 143 +++++++++++++++++----------------- front-end/pnpm-workspace.yaml | 4 - 2 files changed, 73 insertions(+), 74 deletions(-) delete mode 100644 front-end/pnpm-workspace.yaml diff --git a/README.md b/README.md index af7b93a..fd45107 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,14 @@ > 持续开发中，及时拉取代码，文档还不够完善，先凑合看！！目前只是demo，代码还会进行大规模封装细化和改造！ -搭建的一套**基于DDD领域驱动设计的微服务前端**，适用于大型企业，开发大型复杂且拓展灵活的前端应用的架构方案。 +搭建的一套 **基于DDD领域驱动设计的微服务前端** 项目脚手架，适用于大型企业，开发大型复杂且拓展灵活的前端应用的架构方案。 -项目大致技术栈： +代码编写建议使用 **OOP面向对象 + TypeScript + JSX** 进行开发，让项目更适合开发和维护，获得更好更极致的编码体验。 + +本案例中 **[主应用]** 采取的就是OOP风格，当然如果你不熟悉上面的写法，那么可以在 +【其他模块】中使用Vue2，Vue3都行，但仍然需要遵守DDD的规范进行开发！ + +## 技术栈： - [DDD领域驱动设计](https://zh.wikipedia.org/zh-cn/%E9%A0%98%E5%9F%9F%E9%A9%85%E5%8B%95%E8%A8%AD%E8%A8%88) - [@originjs/vite-plugin-federation](https://www.npmjs.com/package/@originjs/vite-plugin-federation) @@ -20,18 +25,70 @@ - [axios](https://axios-http.com/) - 等等等.... -## 开发任务 +## 文件夹结构 -- [x] 基于DDD理念改造 -- [x] 基于 vite-plugin-federation 拆分领域模块为联邦模块，实现微前端 -- [x] 基于Vue3+OOP+JSX改造项目代码， -- [ ] 领域模块实现 docker 自动化构建部署上线 -- [ ] Deno集成GraphQL +**根目录：** + +```txt +. +├── back-end # 【后端】基于Deno写的后端 测试接口，仅供测试 +├── doc # 一些markdown笔记 +├── front-end # 前端 微服务 项目 +│ ├── app-product # 独立的【商品】领域模块 +│ ├── app-shared # 独立的 共享资源 模块 +│ ├── .... # 实际项目还会有更多其他的领域模块 +│ └── main-app # 主应用（入口应用） +└── README.md # 帮助文档 +``` + +**main-app 目录：** + +```txt +src/ +├── domains/ # 【核心】领域层 - 所有业务领域模块 +│ └── product/ # 订单领域模块（app-product） +│ ├── domain/ # 领域模型（充血模型） +│ │ ├── entities/ # 实体（如：Product, ProductLineItem） +│ │ ├── value-objects/ # 值对象（如：Money, Address） +│ │ ├── types/ # 领域内通用类型 +│ │ ├── enums/ # 领域枚举 +│ │ └── events/ # 领域事件（如果需要） +│ ├── application/ # 应用服务层 - 协调领域对象完成用例 +│ │ └── services/ # 应用服务（如：ProductApplicationService） +│ ├── infrastructure/ # 基础设施层 - 领域层的具体实现 +│ │ └── api/ # 数据获取实现（如：HttpProductRepository） +│ ├── ports/ # 端口（接口/抽象类）- 定义契约 +│ │ └── repositories/ # 仓储接口（如：ProductRepository） +│ └── use-cases/ # （可选）或将用例放在这里 +├── app/ # 【交付层】应用组装和配置：路由、状态管理、主布局、UI库设置、错误处理、依赖注入容器 +│ ├── components/ # 通用UI组件（与业务无关，如Button，Modal） +│ ├── layouts/ # 布局组件 +│ ├── di/ # 依赖注入配置 +│ ├── router/ # Vue Router 配置 +│ ├── stores/ # Pinia Store（用于UI状态管理，非核心业务状态） +│ └── main.ts # 应用入口，依赖注入的组装之地 +│ └── App.vue # 根组件 +├── features/ # 【交付层】基于领域的功能模块：关注具体的业务功能实现，它是舞台上的“演员”和“节目”。 +│ └── product/ # 订单功能模块（app-product） +│ ├── components/ # 订单领域专用的UI组件 +│ ├── views/ # 订单相关的页面级Vue组件 +│ ├── router/ # 订单相关的页面级Vue组件 +│ ├── composables/ # 订单相关的Vue组合式函数 +│ └── index.ts # 订单功能模块的出口 +├── shared/ # 共享资源 +│ ├── infra(infrastructure) # 基础设施层 +│ │ ├── http/ +│ ├── lib/ # 第三方库的封装/工具函数 +│ ├── utils/ # 纯工具函数 +│ └── types/ # 全局通用的TypeScript类型定义 +│ └── constants/ # 全局常量（如错误码、正则） +│ └── exceptions/ # 通用异常（如NotFoundError） +└── public/ # 静态资源目录 +└── index.html # 主HTML文件 +``` ## 代码风格 -OOP面向对象 + TypeScript + JSX，让项目更适合开发和维护，获得更好更极致的编码体验。 - ```tsx // 首页 页面 import { Autobind, Component, Link, Mut, VueComponent } from 'vue3-oop' @@ -145,67 +202,13 @@ export default class Header extends VueComponent { } ``` -## 文件夹结构 +## 开发任务 -**根目录：** - -```txt -. -├── back-end # 【后端】基于Deno写的后端 测试接口，仅供测试 -├── doc # 一些markdown笔记 -├── front-end # 前端 微服务 项目 -│ ├── app-product # 独立的【商品】领域模块 -│ ├── app-shared # 独立的 共享资源 模块 -│ ├── .... # 实际项目还会有更多其他的领域模块 -│ └── main-app # 主应用（入口应用） -└── README.md # 帮助文档 -``` - -**main-app 目录：** - -```txt -src/ -├── domains/ # 【核心】领域层 - 所有业务领域模块 -│ └── product/ # 订单领域模块（app-product） -│ ├── domain/ # 领域模型（充血模型） -│ │ ├── entities/ # 实体（如：Product, ProductLineItem） -│ │ ├── value-objects/ # 值对象（如：Money, Address） -│ │ ├── types/ # 领域内通用类型 -│ │ ├── enums/ # 领域枚举 -│ │ └── events/ # 领域事件（如果需要） -│ ├── application/ # 应用服务层 - 协调领域对象完成用例 -│ │ └── services/ # 应用服务（如：ProductApplicationService） -│ ├── infrastructure/ # 基础设施层 - 领域层的具体实现 -│ │ └── api/ # 数据获取实现（如：HttpProductRepository） -│ ├── ports/ # 端口（接口/抽象类）- 定义契约 -│ │ └── repositories/ # 仓储接口（如：ProductRepository） -│ └── use-cases/ # （可选）或将用例放在这里 -├── app/ # 【交付层】应用组装和配置：路由、状态管理、主布局、UI库设置、错误处理、依赖注入容器 -│ ├── components/ # 通用UI组件（与业务无关，如Button，Modal） -│ ├── layouts/ # 布局组件 -│ ├── di/ # 依赖注入配置 -│ ├── router/ # Vue Router 配置 -│ ├── stores/ # Pinia Store（用于UI状态管理，非核心业务状态） -│ └── main.ts # 应用入口，依赖注入的组装之地 -│ └── App.vue # 根组件 -├── features/ # 【交付层】基于领域的功能模块：关注具体的业务功能实现，它是舞台上的“演员”和“节目”。 -│ └── product/ # 订单功能模块（app-product） -│ ├── components/ # 订单领域专用的UI组件 -│ ├── views/ # 订单相关的页面级Vue组件 -│ ├── router/ # 订单相关的页面级Vue组件 -│ ├── composables/ # 订单相关的Vue组合式函数 -│ └── index.ts # 订单功能模块的出口 -├── shared/ # 共享资源 -│ ├── infra(infrastructure) # 基础设施层 -│ │ ├── http/ -│ ├── lib/ # 第三方库的封装/工具函数 -│ ├── utils/ # 纯工具函数 -│ └── types/ # 全局通用的TypeScript类型定义 -│ └── constants/ # 全局常量（如错误码、正则） -│ └── exceptions/ # 通用异常（如NotFoundError） -└── public/ # 静态资源目录 -└── index.html # 主HTML文件 -``` +- [x] 基于DDD理念改造 +- [x] 基于 vite-plugin-federation 拆分领域模块为联邦模块，实现微前端 +- [x] 基于Vue3+OOP+JSX改造项目代码， +- [ ] 领域模块实现 docker 自动化构建部署上线 +- [ ] Deno集成GraphQL ## 问 & 答 diff --git a/front-end/pnpm-workspace.yaml b/front-end/pnpm-workspace.yaml deleted file mode 100644 index be660d2..0000000 --- a/front-end/pnpm-workspace.yaml +++ /dev/null @@ -1,4 +0,0 @@ -packages: - - 'main-app' - - 'app-product' - - 'app-shared' \ No newline at end of file