100 lines
2.2 KiB
Markdown
100 lines
2.2 KiB
Markdown
# 摄影作品集前端项目
|
||
|
||
这是一个基于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等平台。确保设置正确的环境变量。test change
|