feat: setup frontend project with bun and dynamic data fetching
- Create new frontend project directory with Next.js 15 + React 19 - Migrate from pnpm to bun for faster package management - Add TanStack Query + Axios for dynamic data fetching - Create comprehensive Makefile with development commands - Setup API layer with query hooks and error handling - Configure environment variables and bun settings - Add TypeScript type checking and project documentation - Update CLAUDE.md with bun-specific development workflow
This commit is contained in:
99
frontend/README.md
Normal file
99
frontend/README.md
Normal file
@ -0,0 +1,99 @@
|
||||
# 摄影作品集前端项目
|
||||
|
||||
这是一个基于Next.js 15的现代化摄影作品集网站,支持动态数据获取和响应式设计。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **Next.js 15** - React框架
|
||||
- **React 19** - 用户界面库
|
||||
- **TypeScript** - 类型安全
|
||||
- **Tailwind CSS** - 样式框架
|
||||
- **shadcn/ui** - UI组件库
|
||||
- **TanStack Query** - 数据获取和缓存
|
||||
- **Axios** - HTTP客户端
|
||||
|
||||
## 功能特性
|
||||
|
||||
- 🖼️ 照片画廊展示
|
||||
- 📅 时间线视图
|
||||
- 🔍 分类筛选
|
||||
- 🎨 响应式设计
|
||||
- 🌙 主题切换支持
|
||||
- 📱 移动端优化
|
||||
- 🔄 数据缓存和同步
|
||||
- 🎯 TypeScript类型安全
|
||||
|
||||
## 开发环境设置
|
||||
|
||||
1. 安装依赖:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. 配置环境变量:
|
||||
复制 `.env.local` 文件并设置API地址
|
||||
|
||||
3. 启动开发服务器:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. 构建生产版本:
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── app/ # Next.js应用目录
|
||||
│ ├── layout.tsx # 根布局
|
||||
│ ├── page.tsx # 主页
|
||||
│ └── globals.css # 全局样式
|
||||
├── components/ # 组件目录
|
||||
│ ├── providers/ # 上下文提供者
|
||||
│ ├── ui/ # UI组件
|
||||
│ └── ... # 业务组件
|
||||
├── lib/ # 工具库
|
||||
│ ├── api.ts # API配置
|
||||
│ ├── queries.ts # 数据查询
|
||||
│ └── utils.ts # 工具函数
|
||||
├── hooks/ # 自定义钩子
|
||||
├── public/ # 静态资源
|
||||
└── types/ # 类型定义
|
||||
```
|
||||
|
||||
## API接口
|
||||
|
||||
项目使用React Query进行数据管理,支持以下API接口:
|
||||
|
||||
- `GET /api/photos` - 获取所有照片
|
||||
- `GET /api/photos/:id` - 获取单张照片
|
||||
- `GET /api/categories` - 获取分类列表
|
||||
- `POST /api/photos` - 添加照片
|
||||
- `PUT /api/photos/:id` - 更新照片
|
||||
- `DELETE /api/photos/:id` - 删除照片
|
||||
|
||||
## 开发命令
|
||||
|
||||
```bash
|
||||
# 启动开发服务器
|
||||
npm run dev
|
||||
|
||||
# 构建生产版本
|
||||
npm run build
|
||||
|
||||
# 启动生产服务器
|
||||
npm start
|
||||
|
||||
# 代码检查
|
||||
npm run lint
|
||||
|
||||
# 类型检查
|
||||
npm run type-check
|
||||
```
|
||||
|
||||
## 部署
|
||||
|
||||
项目可以部署到Vercel、Netlify等平台。确保设置正确的环境变量。
|
||||
Reference in New Issue
Block a user