# photo

**Repository Path**: r1Way/photo

## Basic Information

- **Project Name**: photo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-01
- **Last Updated**: 2026-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智能相册系统 - 项目开发文档

## 项目简介

智能相册系统是一个基于Spring Boot和React的Web应用，旨在帮助用户管理和存储照片，提供自然、美观的用户界面。

## 技术栈

- **后端**：Spring Boot 3.2.0, Spring Data JPA, SQLite, JWT认证
- **前端**：React 18.2.0, TypeScript, Ant Design, Vite

## 目录结构

```
├── backend/          # 后端代码
├── frontend/         # 前端代码
├── docs/             # 文档
└── .trae/            # 开发工具配置
```

## 功能特性

- 用户认证（登录/登出）
- 图片上传和管理
- 文件夹组织
- 回收站功能
- 存储空间管理
- 响应式设计
- 生物友好型界面

## 快速开始

### 1. 启动后端服务

```bash
# 进入后端目录
cd backend

# 安装依赖
mvn install

# 启动服务
mvn spring-boot:run
```

后端服务将在 `http://localhost:8082` 运行。

### 2. 启动前端服务

```bash
# 进入前端目录
cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

前端服务将在 `http://localhost:5173` 运行。

## 端口占用问题

如果遇到 `Port 8082 was already in use` 错误：

**Windows:**

1. 查找占用端口的进程：
```powershell
netstat -ano | findstr :8082
```

2. 终止占用进程（假设 PID 是 31108）：
```powershell
taskkill /PID 31108 /F
```

**Linux/Mac:**
```bash
# 查找进程
lsof -i :8082

# 终止进程 (假设 PID 是 31108)
kill -9 31108
```

## 登录功能

### 初始用户

为了方便开发和测试，系统已创建了一个初始用户：

- **用户名**：testuser
- **密码**：test123456

### 登录流程

1. 访问 `http://localhost:5173`
2. 输入用户名和密码
3. 点击登录按钮
4. 登录成功后将跳转到主页面

### 登录界面实现

#### 前端组件结构

```
frontend/src/
├── components/
│   ├── Login.tsx          # 登录组件
│   ├── PhotoUploader.tsx  # 图片上传组件
│   └── PhotoList.tsx      # 图片列表组件
├── services/
│   └── api.ts             # API服务
├── App.tsx                # 主应用组件
└── styles/
    └── biophilic-theme.css # 主题样式
```

#### 登录组件实现

**文件位置**：`frontend/src/components/Login.tsx`

登录组件使用Ant Design组件库实现，主要功能包括：

- 用户名和密码输入框
- 表单验证
- 登录状态管理
- JWT令牌存储

**核心代码结构**：

```tsx
const Login: React.FC<LoginProps> = ({ onLoginSuccess }) => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  const handleSubmit = async (values: { username: string; password: string }) => {
    setLoading(true);
    try {
      const response = await login(values);
      const { token } = response.data;
      localStorage.setItem('token', token);
      message.success('登录成功');
      onLoginSuccess();
    } catch (error) {
      message.error('登录失败，请检查用户名和密码');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      <Form.Item name="username" label="用户名" rules={[{ required: true }]}>
        <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item name="password" label="密码" rules={[{ required: true }]}>
        <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading}>
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};
```

#### 认证逻辑实现

**文件位置**：`frontend/src/App.tsx`

主应用组件负责管理登录状态：

```tsx
function App() {
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
  const [userId] = useState<number>(1);
  const [folderId] = useState<number>(0);

  useEffect(() => {
    // 检查是否已登录
    const token = localStorage.getItem('token');
    if (token) {
      setIsLoggedIn(true);
    }
  }, []);

  const handleLoginSuccess = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    localStorage.removeItem('token');
    setIsLoggedIn(false);
  };

  if (!isLoggedIn) {
    return <Login onLoginSuccess={handleLoginSuccess} />;
  }

  return (
    // 主页面内容
    <main>
      {/* 上传区域 */}
      <PhotoUploader userId={userId} folderId={folderId} onUploadSuccess={handleUploadSuccess} />
      {/* 图片列表 */}
      <PhotoList userId={userId} folderId={folderId} onPhotosUpdated={handlePhotosUpdated} />
    </main>
  );
}
```

#### API服务配置

**文件位置**：`frontend/src/services/api.ts`

API服务配置了JWT令牌的自动添加和错误处理：

```typescript
const api = axios.create({
  baseURL: 'http://localhost:8082/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 添加认证token到请求头
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 登录API
export const login = async (credentials: { username: string; password: string }) => {
  return api.post('/users/login', credentials);
};
```

#### 后端认证实现

**文件位置**：`backend/src/main/java/com/photo/backend/service/UserService.java`

后端使用BCrypt加密密码，JWT令牌认证：

```java
public String login(String username, String password) {
    // 查找用户
    Optional<User> userOptional = userRepository.findByUsername(username);
    if (!userOptional.isPresent()) {
        throw new RuntimeException("Invalid username or password");
    }

    User user = userOptional.get();

    // 验证密码
    if (!passwordEncoder.matches(password, user.getPasswordHash())) {
        throw new RuntimeException("Invalid username or password");
    }

    // 生成JWT令牌
    return generateToken(user);
}
```

## 后端API

### 用户相关

- `POST /api/users/register` - 用户注册
- `POST /api/users/login` - 用户登录
- `GET /api/users/{id}` - 获取用户信息
- `PUT /api/users/{id}` - 更新用户信息

### 图片相关

- `POST /api/images/upload` - 上传图片
- `GET /api/images` - 获取图片列表
- `DELETE /api/images/{id}` - 删除图片（移至回收站）
- `POST /api/images/{id}/restore` - 恢复图片
- `DELETE /api/images/{id}/permanent` - 永久删除图片

### 文件夹相关

- `POST /api/folders` - 创建文件夹
- `GET /api/folders` - 获取文件夹列表
- `PUT /api/folders/{id}` - 重命名文件夹
- `DELETE /api/folders/{id}` - 删除文件夹（移至回收站）
- `POST /api/folders/{id}/restore` - 恢复文件夹

## 数据库

系统使用SQLite作为数据库，数据文件为 `backend/photo.db`。

主要表结构：

- `User` - 用户表
- `Image` - 图片表
- `Folder` - 文件夹表

## 注意事项

- 图片存储在 `backend/uploads` 目录
- 默认端口为8082（后端）和5173（前端）
- 开发环境下使用的是测试数据，请勿用于生产环境

## 开发规范

- 后端使用Spring Boot标准架构
- 前端使用React函数组件和Hooks
- 代码风格保持一致
- 遵循RESTful API设计规范

## 联系方式

如有问题，请联系项目维护者。