167 lines
4.1 KiB
Markdown
167 lines
4.1 KiB
Markdown
# 鸿蒙应用展示平台
|
|
|
|
基于华为应用市场数据的鸿蒙应用展示平台，采用前后端分离架构，风格简约美观，参考 Apple 设计。
|
|
|
|
## 项目特点
|
|
|
|
- 🎨 简约美观的 Apple 风格设计
|
|
- 📱 完美适配移动端和 PC 端
|
|
- 🎯 磁贴效果展示，统一 8px 圆角
|
|
- 🚀 前后端分离架构
|
|
- ⚡ 基于 Vue 3 + TypeScript + FastAPI
|
|
|
|
## 功能模块
|
|
|
|
### 首页
|
|
- **今日上架**: 展示当天上架的应用
|
|
- **热门应用 Top 100**: 按下载量排序的热门应用
|
|
- **高分应用 Top 100**: 按评分排序的优质应用
|
|
|
|
### 应用页面
|
|
- **分类标签**: 展示各个分类的 tag 标签
|
|
- **分类浏览**: 点击标签查看该分类下的应用
|
|
- **搜索功能**: 顶部搜索栏搜索数据库中的所有应用
|
|
- **分页展示**: 支持分页浏览应用列表
|
|
|
|
### 我的页面
|
|
- **个人信息**: 展示登录信息（待开发）
|
|
- **隐私政策**: 隐私政策链接
|
|
- **Cookie 使用条款**: Cookie 相关说明
|
|
- **服务条款**: 服务条款链接
|
|
|
|
## 技术栈
|
|
|
|
### 后端
|
|
- Python 3.10+
|
|
- FastAPI - Web 框架
|
|
- SQLAlchemy - ORM
|
|
- MySQL 8.0+ - 数据库
|
|
- aiomysql - 异步 MySQL 驱动
|
|
|
|
### 前端
|
|
- Vue 3 - 渐进式框架
|
|
- TypeScript - 类型安全
|
|
- Vite - 构建工具
|
|
- Vue Router - 路由管理
|
|
- Pinia - 状态管理
|
|
- Axios - HTTP 客户端
|
|
|
|
## 快速开始
|
|
|
|
### 环境要求
|
|
|
|
- Python 3.10+
|
|
- Node.js 18+
|
|
- MySQL 8.0+
|
|
|
|
### 后端设置
|
|
|
|
```bash
|
|
cd backend
|
|
|
|
# 创建虚拟环境
|
|
python -m venv venv
|
|
source venv/bin/activate # Windows: venv\Scripts\activate
|
|
|
|
# 安装依赖
|
|
pip install -r requirements.txt
|
|
|
|
# 配置环境变量
|
|
cp .env.example .env
|
|
# 编辑 .env 文件，配置数据库连接
|
|
|
|
# 运行服务
|
|
python -m app.main
|
|
```
|
|
|
|
后端服务将在 http://localhost:8000 启动
|
|
|
|
### 前端设置
|
|
|
|
```bash
|
|
cd frontend
|
|
|
|
# 安装依赖
|
|
npm install
|
|
|
|
# 配置环境变量
|
|
cp .env.example .env
|
|
|
|
# 启动开发服务器
|
|
npm run dev
|
|
```
|
|
|
|
前端服务将在 http://localhost:5173 启动
|
|
|
|
### 数据库设置
|
|
|
|
参考 `华为应用市场爬虫系统开发文档.md` 中的数据库设计章节，创建相应的数据表。
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
.
|
|
├── backend/ # 后端项目
|
|
│ ├── app/
|
|
│ │ ├── api/ # API 路由
|
|
│ │ ├── models/ # 数据模型
|
|
│ │ ├── schemas/ # Pydantic 模型
|
|
│ │ ├── config.py # 配置文件
|
|
│ │ ├── database.py # 数据库连接
|
|
│ │ └── main.py # 应用入口
|
|
│ ├── requirements.txt # Python 依赖
|
|
│ └── .env.example # 环境变量示例
|
|
│
|
|
├── frontend/ # 前端项目
|
|
│ ├── src/
|
|
│ │ ├── api/ # API 封装
|
|
│ │ ├── assets/ # 静态资源
|
|
│ │ ├── components/ # 组件
|
|
│ │ ├── router/ # 路由配置
|
|
│ │ ├── views/ # 页面
|
|
│ │ ├── App.vue # 根组件
|
|
│ │ └── main.ts # 应用入口
|
|
│ ├── package.json # Node 依赖
|
|
│ ├── vite.config.ts # Vite 配置
|
|
│ └── .env.example # 环境变量示例
|
|
│
|
|
└── README.md # 项目说明
|
|
```
|
|
|
|
## API 接口
|
|
|
|
### 应用相关
|
|
|
|
- `GET /api/apps/search?q={query}` - 搜索应用
|
|
- `GET /api/apps/categories` - 获取所有分类
|
|
- `GET /api/apps/category/{category}` - 按分类获取应用
|
|
- `GET /api/apps/today` - 获取今日上架应用
|
|
- `GET /api/apps/top-downloads` - 热门应用 Top 100
|
|
- `GET /api/apps/top-ratings` - 高分应用 Top 100
|
|
- `GET /api/apps/{app_id}` - 获取应用详情
|
|
|
|
## 设计规范
|
|
|
|
- **圆角**: 统一使用 8px 圆角
|
|
- **配色**: 参考 Apple 设计，以白色、灰色为主
|
|
- **字体**: 使用系统默认字体栈
|
|
- **阴影**: 使用柔和的阴影效果
|
|
- **过渡**: 使用流畅的过渡动画
|
|
|
|
## 开发计划
|
|
|
|
- [x] 基础架构搭建
|
|
- [x] 首页模块
|
|
- [x] 应用列表页
|
|
- [x] 应用详情页
|
|
- [x] 搜索功能
|
|
- [x] 分类浏览
|
|
- [ ] 用户登录
|
|
- [ ] 个人中心完善
|
|
- [ ] 应用收藏
|
|
- [ ] 评论功能
|
|
|
|
## 许可证
|
|
|
|
MIT License
|