# full-stack-code

**Repository Path**: cczeros/full-stack-code

## Basic Information

- **Project Name**: full-stack-code
- **Description**: 全栈代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-14
- **Last Updated**: 2025-11-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript 全栈应用

一个现代化的 Vue 3 + TypeScript 全栈应用，包含前后端分离架构、自动化测试、Docker容器化部署和完整的CI/CD流水线。

## 🚀 特性

### 前端特性
- ✅ Vue 3 + TypeScript
- ✅ Vite 构建工具
- ✅ 响应式设计
- ✅ 组件化开发
- ✅ 热重载开发环境

### 后端特性
- ✅ Express + TypeScript
- ✅ SQLite 数据库
- ✅ RESTful API
- ✅ Swagger 文档
- ✅ 健康检查端点

### DevOps 特性
- ✅ Docker 容器化
- ✅ Docker Compose 编排
- ✅ GitHub Actions CI/CD
- ✅ 自动化测试
- ✅ 安全扫描

## 📦 项目结构

```
├── client/                 # 前端应用
│   ├── src/               # 源码目录
│   ├── public/            # 静态资源
│   ├── Dockerfile         # 生产环境镜像
│   ├── Dockerfile.dev     # 开发环境镜像
│   └── nginx.conf         # Nginx配置
├── server/                # 后端应用
│   ├── src/               # 源码目录
│   ├── data/              # 数据库文件
│   ├── Dockerfile         # 生产环境镜像
│   └── Dockerfile.dev     # 开发环境镜像
├── .github/workflows/     # CI/CD配置
├── scripts/               # 工具脚本
├── docker-compose.yml     # 生产环境编排
├── docker-compose.dev.yml # 开发环境编排
├── deploy.sh              # 部署脚本
└── README.md              # 项目文档
```

## 🛠️ 快速开始

### 环境要求

- Node.js 18+
- Docker & Docker Compose
- Git

### 1. 克隆项目

```bash
git clone <repository-url>
cd full-stack-code
```

### 2. 安装依赖

```bash
npm run install:all
```

### 3. 开发环境启动

**方式一：使用 Docker（推荐）**
```bash
npm run docker:dev
```

**方式二：本地启动**
```bash
npm run dev
```

### 4. 访问应用

- **前端**: http://localhost:5173
- **后端API**: http://localhost:3000
- **Swagger文档**: http://localhost:3000/api-docs
- **健康检查**: http://localhost:3000/api/health

## 🐳 Docker 部署

### 生产环境部署

```bash
# 构建并启动生产环境
npm run docker:prod

# 或使用部署脚本
npm run deploy
```

### 开发环境部署

```bash
# 构建并启动开发环境
npm run docker:dev

# 或使用部署脚本
npm run deploy:dev
```

### 常用 Docker 命令

```bash
# 查看运行状态
docker-compose ps

# 查看日志
docker-compose logs -f

# 停止服务
docker-compose down

# 重新构建
docker-compose build --no-cache

# 清理镜像和卷
docker-compose down -v --rmi local
```

## 🔧 开发指南

### 前端开发

```bash
cd client
npm run dev          # 启动开发服务器
npm run build        # 构建生产版本
npm run preview      # 预览构建结果
npm test             # 运行测试
```

### 后端开发

```bash
cd server
npm run dev          # 启动开发服务器
npm run build        # 构建生产版本
npm start            # 启动生产服务器
npm test             # 运行测试
```

### 数据库操作

```bash
cd server
npm run db:init      # 初始化数据库
```

## 🧪 测试

### 运行测试

```bash
# 运行所有测试
npm test

# 前端测试
cd client && npm test

# 后端测试
cd server && npm test

# 测试覆盖率
cd client && npm test -- --coverage
cd server && npm test -- --coverage
```

### 测试报告

- 前端测试报告: `client/coverage/`
- 后端测试报告: `server/coverage/`

## 📊 API 文档

应用集成了 Swagger UI，提供完整的 API 文档：

- **访问地址**: http://localhost:3000/api-docs
- **文档格式**: OpenAPI 3.0.0
- **功能特性**:
  - 交互式 API 测试
  - 自动生成文档
  - 请求/响应示例

## 🔒 安全配置

### 环境变量安全

1. **不要提交敏感信息**
   ```bash
   # 将敏感信息添加到 .env 文件（不提交到Git）
   echo "JWT_SECRET=your-secret-key" >> .env
   ```

2. **使用环境变量文件**
   ```bash
   # 复制示例文件
   cp .env.example .env
   # 编辑实际配置
   nano .env
   ```

### 容器安全

- 使用非 root 用户运行容器
- 配置只读文件系统
- 设置资源限制
- 启用健康检查

## 🚀 CI/CD 流水线

### 自动化流程

1. **代码推送触发**
   - 代码质量检查
   - 单元测试运行
   - 安全扫描
   - Docker 镜像构建

2. **主分支推送**
   - 生产环境部署
   - 健康检查
   - 发布通知

### 手动触发

在 GitHub 仓库的 Actions 标签页可以手动触发部署流程。

## 📈 监控和日志

### 健康检查

应用提供健康检查端点：

```bash
curl http://localhost:3000/api/health

# 响应示例
{
  "status": "OK",
  "timestamp": "2024-01-01T00:00:00.000Z",
  "database": "connected",
  "userCount": 5
}
```

### 日志配置

- 开发环境：控制台输出
- 生产环境：文件日志 + 结构化日志

## 🔧 故障排除

### 常见问题

1. **端口冲突**
   ```bash
   # 修改 docker-compose.yml 中的端口映射
   ports:
     - "8080:80"
   ```

2. **权限问题**
   ```bash
   # 给予脚本执行权限
   chmod +x deploy.sh
   chmod +x scripts/health-check.js
   ```

3. **数据库连接失败**
   ```bash
   # 检查数据库文件权限
   chmod 755 server/data
   ```

### 调试技巧

```bash
# 查看容器日志
docker-compose logs -f backend

# 进入容器调试
docker-compose exec backend sh

# 健康检查脚本
node scripts/health-check.js
```

## 📚 相关文档

- [Docker 配置指南](./DOCKER.md)
- [测试指南](./client/README.md#测试)
- [API 文档](./server/README.md#api-文档)
- [数据库设计](./DATABASE.md)

## 🤝 贡献指南

1. Fork 项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

感谢以下开源项目：

- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [Express.js](https://expressjs.com/) - Node.js Web 框架
- [Docker](https://www.docker.com/) - 容器化平台
- [GitHub Actions](https://github.com/features/actions) - CI/CD 平台

---

**Happy Coding! 🎉**