# liangfang

**Repository Path**: all233/liangfang

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-04
- **Last Updated**: 2025-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 葡萄干的阳光魔法 - Vue.js + Flask 项目

这是一个将原始HTML页面转换为Vue.js前端和Flask后端的项目。

## 项目结构

```
.
├── frontend/          # Vue.js 前端项目
│   ├── src/
│   │   ├── components/   # Vue组件
│   │   ├── views/        # 页面视图
│   │   ├── router/       # 路由配置
│   │   ├── utils/        # 工具函数
│   │   └── assets/       # 静态资源
│   └── package.json      # 前端依赖配置
│
├── backend/           # Flask 后端项目
│   ├── api/          # API路由
│   ├── config/       # 配置文件
│   ├── utils/        # 工具函数
│   ├── models/       # 数据模型
│   ├── app.py        # Flask应用入口
│   ├── run.py        # 运行脚本
│   └── requirements.txt  # 后端依赖
│
└── README.md         # 项目说明文件
```

## 运行项目

### 后端 (Flask)

1. 进入后端目录：
   ```bash
   cd backend
   ```

2. 安装依赖：
   ```bash
   pip install -r requirements.txt
   ```

3. 运行后端服务：
   ```bash
   python run.py
   ```
   
   后端服务将在 `http://localhost:5000` 上运行

### 前端 (Vue.js)

1. 进入前端目录：
   ```bash
   cd frontend
   ```

2. 安装依赖：
   ```bash
   npm install
   ```

3. 运行前端开发服务器：
   ```bash
   npm run serve
   ```
   
   前端服务将在 `http://localhost:8080` 上运行

## 功能说明

- 前端使用Vue.js 3构建，组件化开发
- 后端使用Flask提供RESTful API
- 前后端通过Axios进行数据交互
- 使用Tailwind CSS进行样式设计
- 实现了完整的交互功能，包括：
  - 晾房结构展示与交互
  - 葡萄干制作流程展示
  - 互动模拟游戏
  - 知识科普展示

## API接口

| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/structure/<section>` | GET | 获取晾房结构信息 |
| `/api/process` | GET | 获取制作流程步骤 |
| `/api/drying` | GET | 获取干燥过程数据 |
| `/api/varieties` | GET | 获取葡萄干品种信息 |
| `/api/game/result` | POST | 获取游戏结果 |

## 开发说明

- 前端组件位于 `frontend/src/components/`
- 后端API位于 `backend/api/`
- 前后端通过 `axios` 进行通信
- 所有组件都具有本地数据备选方案，确保在网络异常时仍能正常显示