# project-show

**Repository Path**: numen06/project-show

## Basic Information

- **Project Name**: project-show
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-01-06
- **Last Updated**: 2026-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目展示系统

基于 FastAPI + Vue 3 + Vite 构建的项目地图可视化系统。

## 功能特性

- 🗺️ 中国地图可视化
- 📍 项目位置标记
- 🔥 热力图显示
- 📊 项目信息展示
- 🎨 现代化 UI 设计
- ⚡ Vite 快速开发体验
- 🎯 Vue 3 组件化架构

## 安装依赖

### 方式一：使用 VS Code 任务（推荐）

1. 按 `Ctrl+Shift+P` (Mac: `Cmd+Shift+P`) 打开命令面板
2. 输入 `Tasks: Run Task`
3. 选择以下任务之一：
   - **`初始化: 安装所有依赖`** - 自动安装前后端所有依赖（推荐）
   - **`初始化: 安装前端依赖`** - 仅安装前端依赖
   - **`初始化: 安装后端依赖`** - 仅安装后端依赖

或者直接按 `Ctrl+Shift+B` (Mac: `Cmd+Shift+B`) 运行默认构建任务（会执行"初始化: 安装所有依赖"）。

### 方式二：手动安装

**Python 后端依赖：**
```bash
pip install -r requirements.txt
```

**Node.js 前端依赖：**
```bash
npm install
```

## 运行应用

### 开发模式（推荐）

开发模式下，前端和后端分别运行：

**终端 1 - 启动前端开发服务器：**
```bash
npm run dev
```
前端将在 http://localhost:5173 运行，支持热重载。

**终端 2 - 启动后端 API 服务器：**
```bash
python main.py
```
或者：
```bash
uvicorn main:app --host 0.0.0.0 --port 8000 --reload
```
后端 API 将在 http://localhost:8000 运行。

### 生产模式

**1. 构建前端应用：**
```bash
npm run build
```

**2. 启动后端服务器：**
```bash
python main.py
```

生产模式下，FastAPI 会自动服务构建后的前端文件。

### VS Code 调试

**推荐扩展：**
VS Code 会在打开项目时提示安装推荐的扩展，包括：
- Python 扩展（用于 Python 调试）
- Vue Language Features (Volar)（用于 Vue 3 支持）
- ESLint 和 Prettier（用于代码格式化）
- Chrome Debugger（用于前端调试）

#### 前端调试

1. 在 VS Code 中打开项目
2. 按 `F5` 或点击左侧调试按钮
3. 选择以下配置之一：
   - **`Vite: 前端开发服务器`** - 启动 Vite 开发服务器并自动打开浏览器调试
   - **`Vite: Chrome 调试`** - 连接到已运行的 Vite 开发服务器进行 Chrome 调试

#### 后端调试

1. 在 VS Code 中打开项目
2. 按 `F5` 或点击左侧调试按钮
3. 选择以下配置之一：
   - **`Python: FastAPI`** - 带自动重载的调试模式，输出到集成终端（推荐开发使用）
   - **`Python: FastAPI (调试控制台)`** - 使用 Python Debug Console 输出，方便查看调试信息
   - **`Python: FastAPI (无重载)`** - 不带自动重载的调试模式（性能更好）
   - **`Python: 当前文件`** - 调试当前打开的 Python 文件

#### 全栈调试（推荐）

1. 在 VS Code 中打开项目
2. 按 `F5` 或点击左侧调试按钮
3. 选择以下配置之一：
   - **`全栈调试: 前端 + 后端`** - 同时启动前端 Vite 开发服务器和后端 FastAPI 服务器
   - **`全栈调试: Chrome + 后端`** - 启动 Chrome 调试器和后端 FastAPI 服务器（需要先手动启动 Vite）

**调试功能：**
- ✅ 支持在前端 Vue 组件中设置断点
- ✅ 支持在后端 Python 代码中设置断点
- ✅ 支持变量查看和监视
- ✅ 支持调用堆栈跟踪
- ✅ 支持热重载和自动重启
- ✅ 支持同时调试前后端代码

**调试技巧：**
- 在 Vue 组件中使用 `debugger` 语句或设置断点
- 在 Python 代码中设置断点，支持条件断点
- 使用调试控制台执行表达式和查看变量
- 使用"全栈调试"配置可以同时调试前后端

## 清除端口占用

如果端口 8000 已被占用，可以使用以下方式清除：

### 方式一：使用 Python 脚本（推荐）

```bash
# 清除默认端口 8000
python clear_port.py

# 清除指定端口
python clear_port.py 8000

# 自动确认清除（无需交互）
python clear_port.py 8000 -y
```

### 方式二：使用 Shell 脚本

```bash
# 清除默认端口 8000
./clear_port.sh

# 清除指定端口
./clear_port.sh 8000

# 自动确认清除
./clear_port.sh 8000 -y
```

### 方式三：手动清除

```bash
# 查找占用端口的进程
lsof -ti :8000

# 终止进程（替换 PID 为实际进程号）
kill -9 <PID>

# 或者一行命令清除
lsof -ti :8000 | xargs kill -9
```

## 访问应用

### 开发模式

- 前端应用: http://localhost:5173
- 后端 API: http://localhost:8000
- API 文档: http://localhost:8000/docs
- 健康检查: http://localhost:8000/health

### 生产模式

- 主页面: http://localhost:8000
- API 文档: http://localhost:8000/docs
- 健康检查: http://localhost:8000/health

## 项目结构

```
project-show/
├── .vscode/             # VS Code 配置
│   ├── launch.json     # 调试配置
│   └── settings.json   # 编辑器设置
├── src/                 # Vue 前端源码
│   ├── components/     # Vue 组件
│   │   └── VideoModal.vue
│   ├── data/           # 数据文件
│   │   └── projects.js
│   ├── App.vue         # 主应用组件
│   ├── main.js         # 应用入口
│   └── style.css       # 全局样式
├── static/              # 静态资源目录（CSS、JS、图片等）
│   └── .gitkeep        # 保持目录被 Git 跟踪
├── dist/                # Vite 构建输出目录（生产环境）
├── node_modules/        # Node.js 依赖（自动生成）
├── main.py              # FastAPI 应用主文件
├── index.html           # HTML 入口文件
├── vite.config.js       # Vite 配置文件
├── package.json         # Node.js 依赖配置
├── requirements.txt     # Python 依赖
├── .gitignore          # Git 忽略文件
└── README.md           # 项目说明
```

## 技术栈

- **后端**: FastAPI
- **前端框架**: Vue 3
- **构建工具**: Vite
- **可视化**: ECharts
- **图标**: Font Awesome
- **语言**: JavaScript (ES6+), Python 3