鸿蒙应用展示平台

基于华为应用市场数据的鸿蒙应用展示平台，采用前后端分离架构，风格简约美观，参考 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+

后端设置

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 启动

前端设置

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 设计，以白色、灰色为主
• 字体: 使用系统默认字体栈
• 阴影: 使用柔和的阴影效果
• 过渡: 使用流畅的过渡动画

开发计划

• 基础架构搭建
• 首页模块
• 应用列表页
• 应用详情页
• 搜索功能
• 分类浏览
• 用户登录
• 个人中心完善
• 应用收藏
• 评论功能

许可证

MIT License