JManus是一个前后端分离的项目。说明如下：
项目架构
1. 后端：Java Spring Boot
- 位置：项目根目录（
pom.xml） - 技术栈：Spring Boot 3.x + Java 17
- 运行端口：
18080 - 作用：提供 RESTful API 服务
2. 前端：Vue3 + Vite
- 位置：
ui-vue3/目录 - 技术栈：Vue 3 + TypeScript + Vite
- 作用：纯前端应用，运行在浏览器中
API 目录的作用
src/api/ 目录中的代码是前端调用后端 API 的客户端封装，运行在浏览器中，不是服务器端代码。
工作原理
// cron-api-service.ts 中的代码
static async getAllCronTasks(): Promise<CronConfig[]> {
const response = await fetch(this.BASE_URL) // 浏览器发起 HTTP 请求
// ...
}
这段代码：
- 运行在浏览器中（不是 Node.js 服务器）
- 使用浏览器的
fetchAPI 发起 HTTP 请求 - 请求发送到后端 Spring Boot 服务器（
http://localhost:18080）
开发时的代理配置
查看 vite.config.ts：
``31:43:ui-vue3/vite.config.ts
server: {
open: true, // Automatically open browser on startup
host: true, // Allow external access
proxy: {
'/api': {
target: 'http://localhost:18080',
changeOrigin: true,
},
'/admin': {
target: 'http://localhost:18080',
changeOrigin: true,
},
},
},
`
22:27:ui-vue3/vite.config.ts
export default defineConfig({
base: '/ui',
build: {
outDir: './ui',
sourcemap: true, // Enable source maps for production builds
},
开发时：
- 前端运行在 Vite 开发服务器（通常是 `http://localhost:5173`）
- 后端运行在 Spring Boot（`http://localhost:18080`）
- Vite 代理：前端请求 `/api/*` 会被代理到后端服务器
### 生产环境的部署
查看构建配置：
┌─────────────────────────────────────────┐
│ 浏览器（用户访问） │
│ http://localhost:18080/ui │
└──────────────┬──────────────────────────┘
│
│ HTTP 请求
▼
┌─────────────────────────────────────────┐
│ Spring Boot 服务器 (端口 18080) │
│ ┌──────────────────────────────────┐ │
│ │ 静态资源服务 │ │
│ │ /ui/* → src/main/resources/ │ │
│ │ static/ui/ │ │
│ └──────────────────────────────────┘ │
│ ┌──────────────────────────────────┐ │
│ │ RESTful API │ │
│ │ /api/* → Java Controller │ │
│ └──────────────────────────────────┘ │
└─────────────────────────────────────────┘
▲
│
│ fetch('/api/...')
│
┌──────────────┴──────────────────────────┐
│ 前端代码（运行在浏览器中） │
│ ui-vue3/src/api/*.ts │
│ 这些文件被编译打包后运行在浏览器 │
└─────────────────────────────────────────┘
生产环境：
1. 前端构建：`pnpm build` 生成静态文件到 `ui-vue3/ui/` 目录
2. 部署到后端：构建产物会被复制到 `src/main/resources/static/ui/`
3. 统一服务：Spring Boot 同时提供：
- API 服务：`http://localhost:18080/api/*`
- 前端页面：`http://localhost:18080/ui/*`
## 架构图
总结
- ui-vue3
是纯前端项目，不是 Node.js 服务器项目 - src/api/
目录是前端 API 客户端封装，运行在浏览器中 - 开发时：前端（Vite）和后端（Spring Boot）分离运行，通过代理通信
- 生产时：前端构建后由 Spring Boot 统一提供服务
- 前后端分离，可独立开发和部署
- 类型安全：TypeScript 提供类型检查
- 代码复用：API 调用逻辑集中管理
- 统一部署：生产环境由 Spring Boot 统一服务