# portfolio-system

**Repository Path**: aibyte/portfolio-system

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-01
- **Last Updated**: 2025-10-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智能软件工程项目实训作品展示系统

一个基于 React 的现代化作品展示系统，支持作品管理、搜索、分类筛选等功能。

## 功能特性

### 🎨 用户功能
- **作品展示**: 网格布局展示所有作品，支持响应式设计
- **搜索功能**: 支持按标题、创作者、描述、标签搜索
- **分类筛选**: 按作品分类进行筛选
- **作品详情**: 点击作品可查看详细信息和访问链接

### 🛠️ 管理员功能
- **作品管理**: 添加、编辑、删除作品
- **数据统计**: 查看作品总数、分类分布、创作者统计
- **数据管理**: 导出/导入作品数据，支持数据备份和恢复
- **批量操作**: 支持批量删除和数据清空

### 💾 数据存储
- **数据库**: 使用 PostgreSQL 进行服务器端数据存储
- **数据持久化**: 数据在数据库中持久保存，支持多用户共享
- **数据备份**: 支持 JSON 格式的数据导出和导入，以及数据库级别的备份

## 技术栈

### 前端
- **前端框架**: React 19.1.1
- **路由管理**: React Router DOM 7.9.3
- **样式框架**: Tailwind CSS 3.4.0
- **构建工具**: Create React App

### 后端
- **运行环境**: Node.js
- **Web框架**: Express.js
- **数据库**: PostgreSQL
- **数据库客户端**: pg (node-postgres)

## 快速开始

### 1. 数据库设置
首先需要设置 PostgreSQL 数据库。使用提供的数据库连接信息，执行 `server/database.sql` 文件来创建表和初始数据。

### 2. 安装依赖
```bash
# 安装前端依赖
npm install

# 安装后端依赖
npm run install:server
```

### 3. 启动应用
```bash
# 同时启动前后端服务（推荐）
npm run dev

# 或者分别启动
# 启动后端服务
npm run server:dev

# 启动前端服务
npm start
```

应用将在以下地址启动：
- 前端: [http://localhost:9080](http://localhost:9080)
- 后端 API: [http://localhost:9081](http://localhost:9081)

### 4. 构建生产版本
```bash
npm run build
```

详细的部署说明请参考 [DEPLOYMENT.md](DEPLOYMENT.md)。

## 使用说明

### 普通用户
1. 访问首页查看所有作品
2. 使用搜索框搜索感兴趣的作品
3. 使用分类筛选器按分类浏览
4. 点击作品卡片访问作品链接

### 管理员
1. 点击导航栏的"管理员登录"
2. 输入密码（默认: `admin123`）
3. 在管理页面可以：
   - 查看作品统计信息
   - 导出/导入数据
   - 添加新作品
   - 编辑或删除现有作品

## 数据结构

每个作品包含以下字段：
- `title`: 作品标题
- `creator`: 创作者姓名
- `coverUrl`: 封面图片URL
- `url`: 作品访问链接
- `description`: 作品描述
- `category`: 作品分类
- `tags`: 标签数组
- `createdAt`: 创建时间
- `updatedAt`: 更新时间

## 自定义配置

### 修改管理员密码
在 `src/context/PortfolioContext.jsx` 中修改：
```javascript
if (password === "your_new_password") {
  setIsAdmin(true);
  return true;
}
```

### 添加新的作品分类
在 `src/components/WorkForm.jsx` 中的 `<select>` 元素中添加新选项。

### 自定义样式
项目使用 Tailwind CSS，可以在 `tailwind.config.js` 中自定义主题。

## 部署

### 静态部署
```bash
npm run build
```
将 `build` 文件夹部署到任何静态文件服务器。


### Docker部署
# Windows
docker-build.bat

# Linux/macOS  
./docker-build.sh

# 或使用 Make
make deploy

sudo docker run -d \
 --name postgres \
 -e POSTGRES_PASSWORD=difyai123456 \
 -p 9083:5432 \
 postgres:15-alpine

### 推荐部署平台
- Vercel
- Netlify
- GitHub Pages
- Firebase Hosting

## 系统要求

### 前端浏览器兼容性
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

### 后端环境要求
- Node.js 16+
- PostgreSQL 12+
- 网络连接到数据库服务器

## 开发

### 项目结构
```
src/
├── components/          # 可复用组件
│   ├── WorkCard.jsx    # 作品卡片
│   ├── WorkForm.jsx    # 作品表单
│   ├── SearchBar.jsx   # 搜索栏
│   ├── WorkStats.jsx   # 统计组件
│   ├── DataManager.jsx # 数据管理
│   └── ErrorBoundary.jsx # 错误边界
├── context/            # React Context
│   └── PortfolioContext.jsx
├── pages/              # 页面组件
│   ├── Gallery.jsx     # 作品展示页
│   └── Admin.jsx       # 管理页面
├── utils/              # 工具函数
│   └── database.js     # 数据库操作
└── App.jsx             # 主应用组件
```

### 添加新功能
1. 在相应目录创建组件文件
2. 在 Context 中添加状态管理
3. 更新数据库操作（如需要）
4. 更新路由配置

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### Analyzing the Bundle Size

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)