64 lines
2.0 KiB
Markdown
64 lines
2.0 KiB
Markdown
|
## 自动部署Web系统实现计划
|
|||
|
|
|
|||
|
|
### 技术栈
|
|||
|
|
- **后端**: Node.js + Express
|
|||
|
|
- **前端**: Vue.js 3 + Vite + Tailwind CSS
|
|||
|
|
- **认证**: JWT Token
|
|||
|
|
- **设计风格**: 简约现代，无衬线字体，流畅动画
|
|||
|
|
|
|||
|
|
### 目录结构
|
|||
|
|
```
|
|||
|
|
auto-deploy-demo/
|
|||
|
|
├── server/ # 后端代码
|
|||
|
|
│ ├── index.js # 主入口
|
|||
|
|
│ ├── routes/ # API路由
|
|||
|
|
│ ├── middleware/ # JWT认证中间件
|
|||
|
|
│ └── services/ # 业务逻辑
|
|||
|
|
├── client/ # Vue.js前端
|
|||
|
|
│ ├── src/
|
|||
|
|
│ │ ├── views/ # 页面组件
|
|||
|
|
│ │ ├── components/ # 通用组件
|
|||
|
|
│ │ ├── api/ # API封装
|
|||
|
|
│ │ ├── stores/ # Pinia状态管理
|
|||
|
|
│ │ └── router/ # 路由配置
|
|||
|
|
│ └── tailwind.config.js
|
|||
|
|
├── projects/ # 部署项目存储
|
|||
|
|
├── data/ # 数据存储
|
|||
|
|
└── package.json
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 设计规范
|
|||
|
|
- **配色**: 白色/浅灰背景 + 蓝色主色调 + 绿色成功状态
|
|||
|
|
- **字体**: Inter / SF Pro (现代无衬线)
|
|||
|
|
- **动画**: 平滑过渡 (transition-all duration-200)
|
|||
|
|
- **布局**: 简洁卡片式，充足留白
|
|||
|
|
|
|||
|
|
### 实现步骤
|
|||
|
|
|
|||
|
|
**第一阶段: 后端核心 (步骤1-6)**
|
|||
|
|
1. 初始化项目，创建package.json
|
|||
|
|
2. Express服务器主入口
|
|||
|
|
3. JWT认证中间件
|
|||
|
|
4. 用户认证API
|
|||
|
|
5. 项目管理API (CRUD)
|
|||
|
|
6. 文件上传模块
|
|||
|
|
|
|||
|
|
**第二阶段: 部署功能 (步骤7-10)**
|
|||
|
|
7. 端口自动分配 (3100-3200)
|
|||
|
|
8. 项目启动/停止
|
|||
|
|
9. 访问链接生成
|
|||
|
|
10. 日志记录
|
|||
|
|
|
|||
|
|
**第三阶段: Vue前端 (步骤11-18)**
|
|||
|
|
11. 初始化Vue 3 + Vite + Tailwind
|
|||
|
|
12. 路由和状态管理配置
|
|||
|
|
13. 登录页面 (简约现代风格)
|
|||
|
|
14. 项目列表页面
|
|||
|
|
15. 文件上传组件 (拖拽支持)
|
|||
|
|
16. 部署进度显示
|
|||
|
|
17. 响应式布局优化
|
|||
|
|
18. 动画和交互优化
|
|||
|
|
|
|||
|
|
**第四阶段: 文档 (步骤19-20)**
|
|||
|
|
19. 部署文档
|
|||
|
|
20. 使用说明
|