# django_plat

**Repository Path**: wanggang2020/django_plat

## Basic Information

- **Project Name**: django_plat
- **Description**: django+react后台管理系统，纯自然语言+AI编写，包括前后端代码，功能说明文档，docker compose自动化部署文档，自动化上传gitee等。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-04-07
- **Last Updated**: 2026-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Python, React, Django

## README

# Django + React Web 管理系统使用说明

## 项目简介

本项目是一个基于 Django 5.0.6 和 React 19.2.4 的前后端分离 Web 管理系统，实现了 API 管理、数据展示和数据可视化等功能。
前端端口：8000
后端端口：5173

## 技术栈

### 后端
- Django 5.0.6
- Django REST Framework 3.16.1
- django-cors-headers 4.9.0
- SQLite 数据库
- Python 3.13.11
- Conda 虚拟环境：django-react-env

### 前端
- React 19.2.4
- Ant Design 6.2.3
- React Router DOM 7.13.0
- Recharts 3.7.0
- Axios 1.13.5
- Node.js 22.22.0
- Vite 7.2.4

### 部部署


## 项目结

```
test01/
├── backend/              # Django 后端项目
│   ├── backend/          # 项目配置
│   │   ├── settings.py   # Django 配置文件
│   │   ├── urls.py       # URL 路由配置
│   │   └── wsgi.py       # WSGI 配置
│   ├── api_management/   # API 管理模块
│   │   ├── models.py     # 数据模型
│   │   ├── serializers.py # 序列化器
│   │   ├── views.py      # 视图
│   │   └── urls.py       # 路由
│   ├── data_display/     # 数据展示模块
│   │   ├── views.py      # 视图
│   │   └── urls.py       # 路由
│   ├── data_visualization/ # 数据可视化模块
│   │   ├── models.py     # 数据模型
│   │   ├── serializers.py # 序列化器
│   │   ├── views.py      # 视图
│   │   └── urls.py       # 路由
│   ├── core/             # 核心模块
│   │   ├── models.py     # 数据模型
│   │   ├── views.py      # 视图
│   │   └── urls.py       # 路由
│   ├── manage.py         # Django 管理脚本
│   ├── requirements.txt  # Python 依赖
│   └── Dockerfile        # Docker 配置
├── frontend/             # React 前端项目
│   ├── src/
│   │   ├── views/        # 页面组件
│   │   │   ├── Dashboard/     # 首页
│   │   │   ├── ApiManagement/  # API 管理
│   │   │   ├── DataDisplay/    # 数据展示
│   │   │   ├── DataVisualization/ # 数据可视化
│   │   │   └── Login/          # 登录页
│   │   ├── services/      # API 服务
│   │   │   └── api.js       # API 调用
│   │   ├── components/    # 公共组件
│   │   ├── utils/         # 工具函数
│   │   ├── App.jsx       # 主应用组件
│   │   └── main.jsx      # 入口文件
│   ├── package.json      # Node.js 依赖
│   ├── nginx.conf        # Nginx 配置
│   └── Dockerfile        # Docker 配置
├── docker-compose.yml    # Docker Compose 配置
└── README.md             # 本文档
```

## 环境要求

### 开发环境
- Python 3.13+
- Node.js 22.22.0+
- Conda
- npm 10.9.4+

### 生产环境
- Docker 20.10+
- Docker Compose 2.0+

## 编译步骤

### 后端编译

1. **激活 Conda 虚拟环境**
   ```bash
   eval "$(/opt/software/miniconda3/bin/conda shell.bash hook)"
   conda activate django-react-env
   ```

2. **进入后端目录**
   ```bash
   cd backend
   ```

3. **安装依赖**
   ```bash
   pip install -r requirements.txt
   ```

4. **运行数据库迁移**
   ```bash
   python manage.py makemigrations
   python manage.py migrate
   ```

5. **创建超级用户**
   ```bash
   python manage.py createsuperuser
   ```

6. **启动后端服务**
   ```bash
   python manage.py runserver
   ```

### 前端编译

1. **进入前端目录**
   ```bash
   cd frontend
   ```

2. **安装依赖**
   ```bash
   npm install
   ```

3. **启动开发服务器**
   ```bash
   npm run dev
   ```

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

## Docker 部署

### 使用 Docker Compose 部署

1. **确保 Docker 和 Docker Compose 已安装**
   ```bash
   docker --version
   # docker 内置的 compose
   docker compose version
   ```

2. **在项目根目录运行**
   ```bash
   docker compose up -d --build
   ```

3. **查看服务状态**
   ```bash
   docker compose ps
   ```

4. **查看日志**
   ```bash
   docker compose logs -f
   ```

5. **停止服务**
   ```bash
   docker compose down
   ```

### docker 迁移

1. **导出当前环境的镜像**
# 查看现有镜像
docker images

# 将镜像保存为 tar 文件
docker save -o test01-frontend.tar test01-frontend:latest
docker save -o test01-backend.tar test01-backend:latest

2. **备份数据卷（如果有持久化数据）**
# 列出数据卷
docker volume ls

# 备份指定数据卷
docker run --rm -v [VOLUME_NAME]:/data -v $(pwd):/backup alpine tar czf /backup/[VOLUME_NAME].tar.gz -C /data .

3. **传输镜像文件到目标服务器**
# 使用 scp 命令传输
scp django-backend-image.tar user@target-server:/path/to/destination/
scp react-frontend-image.tar user@target-server:/path/to/destination/

sftp -P 14470 wg@37.tcp.cpolar.top:/home/wg/wg_pkg

4. **在目标服务器加载镜像**
# 加载后端镜像
docker load -i django-backend-image.tar

# 加载前端镜像
docker load -i react-frontend-image.tar

# 验证镜像是否加载成功
docker images

5. **传输项目配置文件**
# 传输 docker-compose.yml 文件
scp docker-compose.yml user@target-server:/home/wg/wg_pkg

# 传输其他必要配置文件
scp .env user@target-server:/home/wg/wg_pkg

6. **在目标服务器启动服务**
# 进入项目目录
cd /home/wg/wg_pkg

# 启动服务（首次启动会自动构建镜像）
# 创建目录
mkdir backend frontend

# 复制对应的 Dockerfile

# 启动服务
docker compose up -d

# 如果已有镜像，可以直接启动
docker compose start

7. **恢复数据卷（如果存在）**
# 解压数据卷备份
docker run --rm -v [VOLUME_NAME]:/data -v $(pwd):/backup alpine sh -c "cd /data && tar xzf /backup/[VOLUME_NAME].tar.gz --strip 1"

8. **验证迁移结果**
# 检查服务状态
docker compose ps

# 查看服务日志
docker compose logs -f

# 访问应用验证功能
curl http://localhost:8000/  # 后端
curl http://localhost/       # 前端


### 单独部署

#### 后端部署
```bash
cd backend
docker build -t django-backend .
docker run -p 8000:8000 django-backend
```

#### 前端部署
```bash
cd frontend
docker build -t react-frontend .
docker run -p 80:80 react-frontend
```

## 测试步骤

### 后端测试

1. **启动后端服务**
   ```bash
   cd backend
   eval "$(/opt/software/miniconda3/bin/conda shell.bash hook)"
   conda activate django-react-env
   python manage.py runserver
   ```

2. **访问 API 文档**
   ```
   http://localhost:8000/api/
   ```

3. **访问 Django 管理后台**
   ```
   http://localhost:8000/admin/
   ```

4. **测试登录接口**
   ```bash
   # 使用测试脚本
   ./test_login.sh
   
   # 或手动测试
   curl -X POST http://localhost:8000/api/auth/login/ \
     -H "Content-Type: application/json" \
     -d '{"username":"admin","password":"admin123"}'
   ```

5. **测试 API 端点**
   - 登录接口：`POST /api/auth/login/`
   - 登出接口：`POST /api/auth/logout/`
   - 仪表板数据：`GET /api/auth/dashboard/`
   - 用户信息：`GET /api/auth/profile/`
   - API 管理：`GET /api/api-management/apis/`
   - 数据展示：`GET /api/data-display/tables/`
   - 数据可视化：`GET /api/data-visualization/visualizations/`

### 前端测试

1. **启动前端服务**
   ```bash
   cd frontend
   npm run dev
   ```

2. **访问前端应用**
   ```
   http://localhost:3000/ (开发模式)
   http://localhost/ (Docker 部署)
   ```

3. **登录系统**
   - 默认用户名：`admin`
   - 默认密码：`admin123`

4. **功能测试**
   - **首页**：查看用户统计数据
   - **API 管理**：添加、编辑、删除 API
   - **数据展示**：查看数据库表数据
   - **数据可视化**：创建图表并查看

## 功能模块说明

### 1. 首页（仪表板）
- 显示在线用户数、活跃用户数、总用户数
- 显示最近7天的用户统计趋势
- 数据来源：Django User 模型和 UserStatistics 模型

### 2. API 管理
- 管理站内和站外 API
- 支持配置 API URL、类型（站内/站外）、描述
- 自动生成可点击的访问按钮
- 支持启用/禁用 API
- 数据来源：ApiManagement 模型

### 3. 数据展示
- 展示数据库中以 `my_data_` 开头的表
- 使用 Ant Design Table 组件
- 支持分页功能
- 表头显示 SQL 注释
- 数据来源：动态读取数据库表

### 4. 数据可视化
- 支持选择 `my_data_` 表作为数据源
- 支持选择 X 轴和 Y 轴字段
- 支持多种图表类型：
  - 柱状图
  - 折线图
  - 散点图
  - 饼图
  - 面积图
- 支持数据归一化：
  - 不归一化
  - Min-Max 归一化
  - Z-score 归一化
- 数据来源：DataVisualization 模型和数据库表

## 常见问题

### 1. 后端启动失败
- 检查端口 8000 是否被占用
- 检查数据库迁移是否完成
- 检查 Django settings 配置

### 2. 前端无法连接后端
- 检查后端服务是否正常运行
- 检查 API 地址配置是否正确
- 检查 CORS 配置

### 3. 登录失败
- 确认已创建 Django 超级用户
- 检查用户名和密码是否正确
- 检查 Session 配置

### 4. 数据展示页面没有表
- 确认数据库中有以 `my_data_` 开头的表
- 检查数据库连接配置

### 5. Docker 部署问题
- 检查 Docker 服务是否运行
- 检查 Docker Compose 版本
- 查看容器日志排查问题

## 开发注意事项

### 代码风格
- Python 代码遵循 PEP 8 规范
- JavaScript/JSX 代码遵循 ESLint 规范
- 所有代码必须添加中文注释

### 数据库操作
- 创建新表时，表名应以 `my_data_` 开头才能在前端显示
- 添加字段注释以便在表头显示

### API 开发
- 使用 Django REST Framework 创建 RESTful API
- 遵循 RESTful 设计原则
- 添加适当的权限验证

### 前端开发
- 使用 Ant Design 组件库
- 页面代码放在 views 目录下
- API 调用统一放在 services 目录

## 技术支持

如有问题，请联系开发团队或查看相关文档：
- Django 文档：https://docs.djangoproject.com/
- React 文档：https://react.dev/
- Ant Design 文档：https://ant.design/
- Docker 文档：https://docs.docker.com/

## 更新日志

### v1.0.0 (2026-02-09)
- 初始版本发布
- 实现基本功能模块
- 支持前后端分离部署
- 提供 Docker 部署方案