nvex/ns2.0

Fork 0

Files

Nvex c0f81dbbe2 初始化鸿蒙应用展示平台项目 - 前后端分离架构

2025-10-25 11:45:17 +08:00

4.1 KiB

Raw Permalink Blame History

鸿蒙应用展示平台

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

4.1 KiB Raw Permalink Blame History