添加README说明
This commit is contained in:
261
README.md
261
README.md
@@ -1,109 +1,149 @@
|
|||||||
# 树萌芽の作品集
|
# 🌱 树萌芽の作品集
|
||||||
|
|
||||||
一个展示创意作品和项目的现代化网站，采用React + Flask架构开发。
|
<div align="center">
|
||||||
|
<img src="frontend/public/assets/logo.png" alt="Logo" width="120" height="120">
|
||||||
|
|
||||||
|
[](LICENSE)
|
||||||
|
[](https://reactjs.org/)
|
||||||
|
[](https://flask.palletsprojects.com/)
|
||||||
|
[](https://www.python.org/)
|
||||||
|
|
||||||
|
**展示创意作品和项目的现代化作品集网站**
|
||||||
|
</div>
|
||||||
|
|
||||||
## 功能特点
|
---
|
||||||
|
|
||||||
- 🎨 清新可爱的淡绿色配色方案
|
### 🚀 功能特点
|
||||||
- 📱 完全响应式设计，优先适配手机端
|
|
||||||
- 🔍 作品搜索和分类筛选功能
|
|
||||||
- 📦 多平台作品下载支持（Windows/Android/Linux）
|
|
||||||
- 🖼️ 作品截图和视频展示
|
|
||||||
- 📄 详细的作品信息页面
|
|
||||||
- 🏷️ 网站logo、备案号、页尾配置支持
|
|
||||||
- 👑 管理员后台界面，支持作品增删改
|
|
||||||
- 📁 文件上传管理功能
|
|
||||||
- 📊 作品统计功能：浏览量、下载量、点赞量、更新次数
|
|
||||||
- 🛡️ 防刷机制：基于用户指纹的智能防刷保护
|
|
||||||
- 👍 互动功能：支持作品点赞
|
|
||||||
- 🔄 自动统计：管理员编辑作品自动增加更新次数
|
|
||||||
- ⚡ 模块化架构，易于扩展维护
|
|
||||||
|
|
||||||
## 技术栈
|
- 🎨 **清新设计**: 清新可爱的淡绿色配色方案
|
||||||
|
- 📱 **移动优先**: 完全响应式设计，优先适配手机端
|
||||||
|
- 🔍 **智能搜索**: 作品搜索和分类筛选功能
|
||||||
|
- 📦 **多平台支持**: 支持Windows/Android/Linux下载
|
||||||
|
- 🖼️ **丰富媒体**: 作品截图和视频展示
|
||||||
|
- 📊 **数据统计**: 浏览量、下载量、点赞量、更新次数统计
|
||||||
|
- 🛡️ **防刷机制**: 基于用户指纹的智能防刷保护
|
||||||
|
- 👑 **管理后台**: 完整的后台管理界面
|
||||||
|
- 📁 **文件管理**: 拖拽上传，支持批量操作
|
||||||
|
- ⚡ **现代技术栈**: 基于React和Flask构建
|
||||||
|
|
||||||
### 前端
|
### 🛠️ 技术栈
|
||||||
|
|
||||||
|
**前端**
|
||||||
- React 18.2.0
|
- React 18.2.0
|
||||||
- Styled Components
|
- Styled Components
|
||||||
- Axios
|
- Axios
|
||||||
- React Router DOM
|
- React Router DOM
|
||||||
|
|
||||||
### 后端
|
**后端**
|
||||||
- Python 3.13.2
|
- Python 3.13.2
|
||||||
- Flask 3.0.0
|
- Flask 3.0.0
|
||||||
- Flask-CORS
|
- Flask-CORS
|
||||||
|
|
||||||
## 快速开始
|
### 📦 快速开始
|
||||||
|
|
||||||
### 方式一：使用批处理文件（Windows）
|
#### 方式一：使用批处理文件（Windows）
|
||||||
|
|
||||||
1. **启动后端服务**
|
1. **启动后端服务**
|
||||||
```
|
```bash
|
||||||
双击运行 start_backend.bat
|
# 双击运行
|
||||||
|
start_backend.bat
|
||||||
```
|
```
|
||||||
|
|
||||||
2. **启动前端服务**（新开一个命令窗口）
|
2. **启动前端服务**（新开命令窗口）
|
||||||
```
|
```bash
|
||||||
双击运行 start_frontend.bat
|
# 双击运行
|
||||||
|
start_frontend.bat
|
||||||
```
|
```
|
||||||
|
|
||||||
### 方式二：手动启动
|
#### 方式二：手动启动
|
||||||
|
|
||||||
1. **启动后端服务**
|
1. **后端设置**
|
||||||
```bash
|
```bash
|
||||||
cd backend
|
cd backend
|
||||||
pip install -r requirements.txt
|
pip install -r requirements.txt
|
||||||
python app.py
|
python app.py
|
||||||
```
|
```
|
||||||
|
|
||||||
2. **启动前端服务**（新开一个终端）
|
2. **前端设置**（新开终端）
|
||||||
```bash
|
```bash
|
||||||
cd frontend
|
cd frontend
|
||||||
npm install
|
npm install
|
||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## 访问地址
|
### 🌐 访问地址
|
||||||
|
|
||||||
- 前端页面: http://localhost:3000
|
- **前端页面**: http://localhost:3000
|
||||||
- 后端API: http://localhost:5000
|
- **后端API**: http://localhost:5000
|
||||||
- 管理员界面: http://localhost:3000/admin?token=shumengya520
|
- **管理员界面**: http://localhost:3000/admin?token=shumengya520
|
||||||
|
|
||||||
## 项目结构
|
### 📁 项目结构
|
||||||
|
|
||||||
```
|
```
|
||||||
树萌芽の作品集/
|
树萌芽の作品集/
|
||||||
├── backend/ # Flask后端
|
├── 📂 backend/ # Flask后端
|
||||||
│ ├── app.py # 主应用文件
|
│ ├── 🐍 app.py # 主应用程序
|
||||||
│ └── requirements.txt # Python依赖
|
│ └── 📋 requirements.txt # Python依赖
|
||||||
├── frontend/ # React前端
|
├── 📂 frontend/ # React前端
|
||||||
│ ├── public/ # 静态文件
|
│ ├── 📂 public/ # 静态资源
|
||||||
│ ├── src/ # 源代码
|
│ ├── 📂 src/ # 源代码
|
||||||
│ │ ├── components/ # React组件
|
│ │ ├── 📂 components/ # React组件
|
||||||
│ │ ├── services/ # API服务
|
│ │ ├── 📂 services/ # API服务
|
||||||
│ │ ├── App.js # 主应用组件
|
│ │ ├── ⚛️ App.js # 主应用组件
|
||||||
│ │ └── index.js # 入口文件
|
│ │ └── 🎯 index.js # 入口文件
|
||||||
│ └── package.json # Node.js依赖
|
│ └── 📦 package.json # Node.js依赖
|
||||||
├── config/ # 配置文件
|
├── 📂 config/ # 配置文件
|
||||||
│ └── settings.json # 网站基础配置（包含logo、备案号、页尾等）
|
│ └── ⚙️ settings.json # 网站设置
|
||||||
├── works/ # 作品目录
|
├── 📂 works/ # 作品目录
|
||||||
│ ├── aicodevartool/ # AI代码变量工具
|
│ ├── 📁 aicodevartool/ # AI代码变量工具
|
||||||
│ ├── mengyafarm/ # 萌芽农场
|
│ ├── 📁 mengyafarm/ # 萌芽农场
|
||||||
│ └── mml_cgj2025/ # MML创意游戏大赛2025
|
│ └── 📁 mml_cgj2025/ # MML创意游戏大赛2025
|
||||||
└── README.md # 项目说明
|
└── 📖 README.md # 本文件
|
||||||
```
|
```
|
||||||
|
|
||||||
## 作品配置格式
|
### 🔧 API接口
|
||||||
|
|
||||||
|
#### 公共API
|
||||||
|
- `GET /api/settings` - 获取网站设置
|
||||||
|
- `GET /api/works` - 获取所有作品
|
||||||
|
- `GET /api/works/{work_id}` - 获取作品详情
|
||||||
|
- `GET /api/search` - 搜索作品
|
||||||
|
- `GET /api/categories` - 获取分类
|
||||||
|
- `POST /api/like/{work_id}` - 点赞作品
|
||||||
|
|
||||||
|
#### 管理员API（需要token）
|
||||||
|
- `GET /api/admin/works` - 管理员获取作品
|
||||||
|
- `POST /api/admin/works` - 创建新作品
|
||||||
|
- `PUT /api/admin/works/{work_id}` - 更新作品
|
||||||
|
- `DELETE /api/admin/works/{work_id}` - 删除作品
|
||||||
|
- `POST /api/admin/upload/{work_id}/{file_type}` - 上传文件
|
||||||
|
|
||||||
|
### 👨💻 开发
|
||||||
|
|
||||||
|
1. **克隆仓库**
|
||||||
|
```bash
|
||||||
|
git clone <repository-url>
|
||||||
|
cd 树萌芽の作品集
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **按照上面的快速开始指南操作**
|
||||||
|
|
||||||
|
3. **使用token访问管理员面板**: `shumengya520`
|
||||||
|
|
||||||
|
### 📄 许可证
|
||||||
|
|
||||||
|
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
|
||||||
|
|
||||||
|
### 📋 作品配置格式
|
||||||
|
|
||||||
每个作品需要在 `works/{作品ID}/` 目录下包含：
|
每个作品需要在 `works/{作品ID}/` 目录下包含：
|
||||||
|
|
||||||
- `work_config.json` - 作品配置文件
|
- `work_config.json` - 作品配置文件
|
||||||
- `image/` - 作品截图目录
|
- `image/` - 作品截图目录
|
||||||
- `platform/` - 各平台文件目录
|
- `platform/` - 各平台文件目录
|
||||||
- `Windows/` - Windows版本文件
|
- `video/` - 作品视频目录（可选）
|
||||||
- `Android/` - Android版本文件
|
|
||||||
- `Linux/` - Linux版本文件
|
|
||||||
|
|
||||||
### work_config.json 示例
|
#### work_config.json 示例
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
@@ -123,87 +163,64 @@
|
|||||||
},
|
},
|
||||||
"作品截图": ["image1.jpg", "image2.jpg"],
|
"作品截图": ["image1.jpg", "image2.jpg"],
|
||||||
"作品视频": [],
|
"作品视频": [],
|
||||||
"作品封面": "image1.jpg"
|
"作品封面": "image1.jpg",
|
||||||
|
"作品下载量": 0,
|
||||||
|
"作品浏览量": 0,
|
||||||
|
"作品点赞量": 0,
|
||||||
|
"作品更新次数": 0
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## API接口
|
### 🔧 管理员功能
|
||||||
|
|
||||||
- `GET /api/settings` - 获取网站设置
|
#### 访问管理员界面
|
||||||
- `GET /api/works` - 获取所有作品列表
|
|
||||||
- `GET /api/works/{work_id}` - 获取单个作品详情
|
|
||||||
- `GET /api/search?q={query}&category={category}` - 搜索作品
|
|
||||||
- `GET /api/categories` - 获取所有分类
|
|
||||||
- `GET /api/image/{work_id}/{filename}` - 获取作品图片
|
|
||||||
- `GET /api/download/{work_id}/{platform}/{filename}` - 下载作品文件
|
|
||||||
- `POST /api/like/{work_id}` - 点赞作品
|
|
||||||
|
|
||||||
### 管理员API接口
|
|
||||||
|
|
||||||
- `GET /api/admin/works?token=shumengya520` - 管理员获取所有作品
|
|
||||||
- `POST /api/admin/works?token=shumengya520` - 管理员创建新作品
|
|
||||||
- `PUT /api/admin/works/{work_id}?token=shumengya520` - 管理员更新作品
|
|
||||||
- `DELETE /api/admin/works/{work_id}?token=shumengya520` - 管理员删除作品
|
|
||||||
- `POST /api/admin/upload/{work_id}/{file_type}?token=shumengya520` - 管理员上传文件
|
|
||||||
- `DELETE /api/admin/delete-file/{work_id}/{file_type}/{filename}?token=shumengya520` - 管理员删除文件
|
|
||||||
|
|
||||||
## 管理员功能使用说明
|
|
||||||
|
|
||||||
### 访问管理员界面
|
|
||||||
|
|
||||||
1. 确保后端和前端服务都已启动
|
1. 确保后端和前端服务都已启动
|
||||||
2. 访问: http://localhost:3000/admin?token=shumengya520
|
2. 访问: http://localhost:3000/admin?token=shumengya520
|
||||||
3. 正确的token是 `shumengya520`
|
3. 管理员token: `shumengya520`
|
||||||
|
|
||||||
### 管理员功能
|
#### 主要功能
|
||||||
|
|
||||||
1. **查看作品列表**: 显示所有作品的基本信息和操作按钮
|
1. **作品管理**
|
||||||
2. **添加新作品**:
|
- ✅ 查看所有作品列表
|
||||||
- 点击"添加新作品"按钮
|
- ➕ 添加新作品
|
||||||
- 填写作品基本信息（作品ID、名称、描述等）
|
- ✏️ 编辑作品信息
|
||||||
- 选择支持的平台
|
- 🗑️ 删除作品
|
||||||
- 保存后可以上传文件
|
|
||||||
3. **编辑作品**:
|
|
||||||
- 点击作品旁的"编辑"按钮
|
|
||||||
- 修改作品信息
|
|
||||||
- 管理作品文件（上传、删除）
|
|
||||||
4. **删除作品**:
|
|
||||||
- 点击作品旁的"删除"按钮
|
|
||||||
- 确认删除（将删除整个作品目录）
|
|
||||||
|
|
||||||
### 文件管理
|
2. **文件管理**
|
||||||
|
- 📸 作品截图上传（PNG、JPG、JPEG、GIF）
|
||||||
|
- 🎥 作品视频上传（MP4、AVI、MOV）
|
||||||
|
- 📦 平台文件上传（ZIP、RAR、APK、EXE、DMG）
|
||||||
|
- 🖼️ 封面图片选择
|
||||||
|
- 📤 拖拽批量上传
|
||||||
|
- 🗑️ 单独文件删除
|
||||||
|
|
||||||
- **作品截图**: 支持PNG、JPG、JPEG、GIF格式，支持批量上传
|
3. **统计功能**
|
||||||
- **作品视频**: 支持MP4、AVI、MOV格式
|
- 📊 实时数据统计
|
||||||
- **平台文件**: 支持ZIP、RAR、APK、EXE、DMG等格式
|
- 🛡️ 防刷机制保护
|
||||||
- **自动命名**: 图片自动命名为image1.jpg、image2.png等，视频命名为video1.mp4等，平台文件命名为作品ID_平台.扩展名
|
- 👍 用户互动统计
|
||||||
- **封面选择**: 可以从已上传的图片中点击选择封面图
|
|
||||||
- **拖拽上传**: 支持拖拽文件到上传区域
|
|
||||||
- 支持批量上传和单独删除
|
|
||||||
|
|
||||||
### 统计功能说明
|
### 🛡️ 防刷机制说明
|
||||||
|
|
||||||
#### 防刷机制
|
|
||||||
- **用户识别**: 基于IP地址和User-Agent生成用户指纹
|
- **用户识别**: 基于IP地址和User-Agent生成用户指纹
|
||||||
- **时间限制**:
|
- **时间限制**:
|
||||||
- 浏览量：同一用户1分钟内对同一作品只计数一次
|
- 浏览量：1分钟内同一用户同一作品只计数一次
|
||||||
- 下载量：同一用户5分钟内对同一作品只计数一次
|
- 下载量：5分钟内同一用户同一作品只计数一次
|
||||||
- 点赞量：同一用户1小时内对同一作品只计数一次
|
- 点赞量：1小时内同一用户同一作品只计数一次
|
||||||
- **自动更新**: 管理员编辑作品时自动增加更新次数
|
- **自动更新**: 管理员编辑作品时自动增加更新次数
|
||||||
|
|
||||||
#### 统计展示
|
### 🤝 贡献
|
||||||
- **作品卡片**: 显示浏览、下载、点赞、更新次数的简洁图标统计
|
|
||||||
- **详情页面**: 显示详细的统计卡片和互动点赞按钮
|
|
||||||
- **实时更新**: 点赞后立即更新显示数据
|
|
||||||
|
|
||||||
## 开发说明
|
欢迎提交Issue和Pull Request来改进这个项目！
|
||||||
|
|
||||||
- 前端采用模块化架构，组件分离，便于维护
|
### 👨💻 作者
|
||||||
- 响应式设计优先考虑手机端体验
|
|
||||||
- 后端提供RESTful API接口
|
|
||||||
- 支持作品搜索和分类筛选
|
|
||||||
- 自动解析works目录下的作品配置
|
|
||||||
|
|
||||||
## 作者
|
**树萌芽** - [3205788256@qq.com](mailto:3205788256@qq.com)
|
||||||
|
|
||||||
树萌芽 - 3205788256@qq.com
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<p>Made with ❤️ by 树萌芽</p>
|
||||||
|
<p>如果这个项目对你有帮助，请给它一个 ⭐️</p>
|
||||||
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user