From cc23a6e1f0ce8d1ac9599e0540631d21d48d7896 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BC=96=E7=A0=81=E7=8C=BF?= Date: Thu, 18 Sep 2025 04:12:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=AF=B9app-shared=20?= =?UTF-8?q?=E7=9A=84=E6=8B=86=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 +++--- front-end/app-product/package.json | 7 +++---- .../src/domains/product}/di/productModule.ts | 4 +++- .../src/features/product/views/ProductDetail.tsx | 9 ++++----- .../src/features/product/views/ProductList.tsx | 11 +++++------ .../src/shared/types/product-federation.d.ts | 4 ---- front-end/app-product/vite.config.ts | 8 ++++++-- front-end/app-shared/package.json | 8 ++++---- front-end/app-shared/vite.config.ts | 5 +++++ front-end/main-app/package.json | 7 +++---- front-end/main-app/src/app/router/index.ts | 1 - front-end/main-app/vite.config.ts | 12 +++++++----- 12 files changed, 43 insertions(+), 39 deletions(-) rename front-end/{main-app/src/app => app-product/src/domains/product}/di/productModule.ts (83%) diff --git a/README.md b/README.md index 5a7b56c..7e868d2 100644 --- a/README.md +++ b/README.md @@ -26,8 +26,8 @@ ## 开发任务 - [x] 基于DDD理念改造 -- [ ] 【即将完成】基于 vite-plugin-federation 拆分领域模块为联邦模块，实现微前端 -- [ ] 领域模块实现 docker自动化构建部署上线 +- [x] 基于 vite-plugin-federation 拆分领域模块为联邦模块，实现微前端 +- [ ] 领域模块实现 docker 自动化构建部署上线 - [ ] Deno集成GraphQL ## 文件夹结构 @@ -39,8 +39,8 @@ ├── back-end # 【后端】基于Deno写的后端 测试接口，仅供测试 ├── doc # 一些markdown笔记 ├── front-end # 前端 微服务 项目 -│ ├── app-car # 独立的【购物车】领域模块 │ ├── app-product # 独立的【商品】领域模块 +│ ├── app-shared # 独立的 共享资源 模块 │ ├── .... # 实际项目还会有更多其他的领域模块 │ └── main-app # 主应用（入口应用） └── README.md # 帮助文档 diff --git a/front-end/app-product/package.json b/front-end/app-product/package.json index 5e4400c..c141b73 100644 --- a/front-end/app-product/package.json +++ b/front-end/app-product/package.json @@ -7,10 +7,9 @@ "node": "^20.19.0 || >=22.12.0" }, "scripts": { - "dev": "vite --port 5001 --strictPort", - "serve": "vite preview --port 5001 --strictPort", - "build": "vite build", - "all": "npm run build && npm run serve", + "dev": "concurrently \"npm run build\" \"npm run serve\"", + "serve": "vite preview --port 1301 --strictPort", + "build": "vite build --watch", "type-check": "vue-tsc --build" }, "dependencies": { diff --git a/front-end/main-app/src/app/di/productModule.ts b/front-end/app-product/src/domains/product/di/productModule.ts similarity index 83% rename from front-end/main-app/src/app/di/productModule.ts rename to front-end/app-product/src/domains/product/di/productModule.ts index cc89841..ee041aa 100644 --- a/front-end/main-app/src/app/di/productModule.ts +++ b/front-end/app-product/src/domains/product/di/productModule.ts @@ -1,5 +1,7 @@ // 从商品联邦模块导入领域层资源 -import {HttpProductRepository, ProductApplicationService, ProductRepository} from 'product/ProductDomain'; +import {ProductRepository} from "@domains/product/ports/repositories/ProductRepository"; +import {HttpProductRepository} from "@domains/product/infr/api/HttpProductRepository"; +import {ProductApplicationService} from "@domains/product/application/services/ProductApplicationService"; /** * 商品领域的依赖注入配置 diff --git a/front-end/app-product/src/features/product/views/ProductDetail.tsx b/front-end/app-product/src/features/product/views/ProductDetail.tsx index b32192c..f715f36 100644 --- a/front-end/app-product/src/features/product/views/ProductDetail.tsx +++ b/front-end/app-product/src/features/product/views/ProductDetail.tsx @@ -1,7 +1,7 @@ -import { product } from 'mainApp/productService'; -import { ProductType } from '@domains/product/domain/type/ProductType'; -import { defineComponent, onMounted, reactive } from 'vue' -import { useRoute } from 'vue-router' +import {product} from '@domains/product/di/productModule'; +import {ProductType} from '@domains/product/domain/type/ProductType'; +import {defineComponent, onMounted, reactive} from 'vue' +import {useRoute} from 'vue-router' interface storeType { item: ProductType @@ -9,7 +9,6 @@ interface storeType { } export default defineComponent({ - name: "productModule-ProductDetail", setup() { const route = useRoute(); const productService = product.createProductApplicationService(); diff --git a/front-end/app-product/src/features/product/views/ProductList.tsx b/front-end/app-product/src/features/product/views/ProductList.tsx index de0960a..b8618e8 100644 --- a/front-end/app-product/src/features/product/views/ProductList.tsx +++ b/front-end/app-product/src/features/product/views/ProductList.tsx @@ -1,14 +1,13 @@ -import { defineComponent, onMounted, reactive } from 'vue' -import { useRouter } from 'vue-router'; -import { product } from 'mainApp/productService'; -import { ProductType } from '@domains/product/domain/type/ProductType'; +import {defineComponent, onMounted, reactive} from 'vue' +import {useRouter} from 'vue-router'; +import {product} from '@domains/product/di/productModule'; +import {ProductType} from '@domains/product/domain/type/ProductType'; interface storeType { list: Array } export default defineComponent({ - name: "productModule-ProductList", setup() { const router = useRouter(); @@ -30,7 +29,7 @@ export default defineComponent({ return () => (
-

商品领域模块 - 商品列表页面

+

商品领域模块 - 商品列表页面3

从Deno 后端 加载的数据，点击进详情

    diff --git a/front-end/app-product/src/shared/types/product-federation.d.ts b/front-end/app-product/src/shared/types/product-federation.d.ts index c14ba79..36845ac 100644 --- a/front-end/app-product/src/shared/types/product-federation.d.ts +++ b/front-end/app-product/src/shared/types/product-federation.d.ts @@ -1,7 +1,3 @@ -declare module 'mainApp/productService' { - export const product: any; -} - declare module 'shared/infra' { export const http: any; } \ No newline at end of file diff --git a/front-end/app-product/vite.config.ts b/front-end/app-product/vite.config.ts index 9874468..a6cc82a 100644 --- a/front-end/app-product/vite.config.ts +++ b/front-end/app-product/vite.config.ts @@ -6,12 +6,16 @@ import federation from '@originjs/vite-plugin-federation'; import {fileURLToPath, URL} from "node:url"; export default defineConfig({ + server: { + port: 1301, + host: '0.0.0.0', + strictPort: true, + }, plugins: [ federation({ name: 'product', remotes: { - mainApp: "http://localhost:5000/assets/remoteEntry.js", - shared: 'http://localhost:5555/assets/remoteEntry.js' + shared: 'http://localhost:1333/assets/remoteEntry.js' }, exposes: { // 暴露给主应用的资源（按功能分组） './ProductDomain': './src/domains/product/index.ts', // 领域层（实体、服务、接口等） diff --git a/front-end/app-shared/package.json b/front-end/app-shared/package.json index e19b2b8..0ce2f96 100644 --- a/front-end/app-shared/package.json +++ b/front-end/app-shared/package.json @@ -6,10 +6,10 @@ "author": "", "license": "ISC", "scripts": { - "dev": "vite --port 5555 --strictPort", - "build": "vite build", - "serve": "vite preview --port 5555 --strictPort", - "all": "npm run build && npm run serve" + "dev": "concurrently \"npm run build\" \"npm run serve\"", + "serve": "vite preview --port 1333 --strictPort", + "build": "vite build --watch", + "type-check": "vue-tsc --build" }, "dependencies": { "axios": "^1.12.2" diff --git a/front-end/app-shared/vite.config.ts b/front-end/app-shared/vite.config.ts index 7f220c7..a3c0664 100644 --- a/front-end/app-shared/vite.config.ts +++ b/front-end/app-shared/vite.config.ts @@ -3,6 +3,11 @@ import federation from '@originjs/vite-plugin-federation'; // https://vite.dev/config/ export default defineConfig({ + server: { + port: 1333, + host: '0.0.0.0', + strictPort: true, + }, plugins: [ federation({ name: 'shared', diff --git a/front-end/main-app/package.json b/front-end/main-app/package.json index 47a606a..bafacaf 100644 --- a/front-end/main-app/package.json +++ b/front-end/main-app/package.json @@ -7,10 +7,9 @@ "node": "^20.19.0 || >=22.12.0" }, "scripts": { - "dev": "vite --port 5000 --strictPort", - "serve": "vite preview --port 5000 --strictPort", - "build": "vite build", - "all": "npm run build && npm run serve", + "dev": "concurrently \"npm run build\" \"npm run serve\"", + "serve": "vite preview --port 1300 --strictPort", + "build": "vite build --watch", "type-check": "vue-tsc --build" }, "dependencies": { diff --git a/front-end/main-app/src/app/router/index.ts b/front-end/main-app/src/app/router/index.ts index 0da4424..9282488 100644 --- a/front-end/main-app/src/app/router/index.ts +++ b/front-end/main-app/src/app/router/index.ts @@ -1,7 +1,6 @@ import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router' import {productRouter} from 'product/ProductRouter' -console.log("productRouter: ", productRouter) const baseRouter: Array = [ { diff --git a/front-end/main-app/vite.config.ts b/front-end/main-app/vite.config.ts index 06eafe5..043b24f 100644 --- a/front-end/main-app/vite.config.ts +++ b/front-end/main-app/vite.config.ts @@ -8,6 +8,11 @@ import federation from '@originjs/vite-plugin-federation'; // https://vite.dev/config/ export default defineConfig({ + server: { + port: 1300, + host: '0.0.0.0', + strictPort: true, + }, plugins: [ vue(), vueJsx(), @@ -15,11 +20,8 @@ export default defineConfig({ federation({ name: 'mainApp', // 主应用模块名（联邦模块需通过此名引用） remotes: { // 配置远程联邦模块地址（开发/生产需对应） - product: 'http://localhost:5001/assets/remoteEntry.js', - shared: 'http://localhost:5555/assets/remoteEntry.js' - }, - exposes: { - "./productService": "./src/app/di/productModule.ts", + product: 'http://localhost:1301/assets/remoteEntry.js', + shared: 'http://localhost:1333/assets/remoteEntry.js' }, shared: { vue: { requiredVersion: '^3.5.18' },