From cb491e8b875be564c091b3d5a621655a3baf4ca5 Mon Sep 17 00:00:00 2001 From: mashen Date: Thu, 9 Apr 2026 12:06:14 +0000 Subject: [PATCH] Initial commit: React + Django full-stack project setup - Backend: Django 4.2 + DRF + JWT + GraphQL - Frontend: React 18 + MobX + styled-components - Deployment: Docker + Docker Compose + Nginx - Database: PostgreSQL support - Documentation: README, INIT, PROJECT_DOCS, TESTING --- .env.example | 22 +++ .gitignore | 29 ++++ INIT.md | 120 ++++++++++++++ PROJECT_DOCS.md | 262 ++++++++++++++++++++++++++++++ README.md | 187 +++++++++++++++++++++ TESTING.md | 163 +++++++++++++++++++ backend/.gitignore | 45 +++++ backend/Dockerfile | 31 ++++ backend/apps/__init__.py | 1 + backend/apps/api/__init__.py | 1 + backend/apps/api/apps.py | 6 + backend/apps/api/graphql_urls.py | 7 + backend/apps/api/schema.py | 31 ++++ backend/apps/api/serializers.py | 29 ++++ backend/apps/api/urls.py | 12 ++ backend/apps/api/views.py | 11 ++ backend/apps/core/__init__.py | 1 + backend/apps/core/apps.py | 6 + backend/apps/users/__init__.py | 1 + backend/apps/users/apps.py | 6 + backend/apps/users/models.py | 22 +++ backend/apps/users/serializers.py | 20 +++ backend/apps/users/urls.py | 10 ++ backend/apps/users/views.py | 23 +++ backend/config/__init__.py | 1 + backend/config/asgi.py | 9 + backend/config/settings/base.py | 165 +++++++++++++++++++ backend/config/settings/dev.py | 19 +++ backend/config/settings/prod.py | 31 ++++ backend/config/urls.py | 18 ++ backend/config/wsgi.py | 9 + backend/manage.py | 22 +++ backend/requirements.txt | 11 ++ backend/start.sh | 29 ++++ docker-compose.yml | 54 ++++++ frontend/.env.example | 2 + frontend/.gitignore | 23 +++ frontend/Dockerfile | 31 ++++ frontend/nginx.conf | 37 +++++ frontend/package.json | 48 ++++++ frontend/public/index.html | 15 ++ frontend/src/App.js | 35 ++++ frontend/src/index.js | 27 +++ frontend/src/services/api.js | 54 ++++++ frontend/src/setupTests.js | 5 + frontend/src/stores/AuthStore.js | 44 +++++ frontend/src/stores/UserStore.js | 32 ++++ frontend/src/styles/global.js | 24 +++ frontend/start.sh | 13 ++ 49 files changed, 1804 insertions(+) create mode 100644 .env.example create mode 100644 .gitignore create mode 100644 INIT.md create mode 100644 PROJECT_DOCS.md create mode 100644 README.md create mode 100644 TESTING.md create mode 100644 backend/.gitignore create mode 100644 backend/Dockerfile create mode 100644 backend/apps/__init__.py create mode 100644 backend/apps/api/__init__.py create mode 100644 backend/apps/api/apps.py create mode 100644 backend/apps/api/graphql_urls.py create mode 100644 backend/apps/api/schema.py create mode 100644 backend/apps/api/serializers.py create mode 100644 backend/apps/api/urls.py create mode 100644 backend/apps/api/views.py create mode 100644 backend/apps/core/__init__.py create mode 100644 backend/apps/core/apps.py create mode 100644 backend/apps/users/__init__.py create mode 100644 backend/apps/users/apps.py create mode 100644 backend/apps/users/models.py create mode 100644 backend/apps/users/serializers.py create mode 100644 backend/apps/users/urls.py create mode 100644 backend/apps/users/views.py create mode 100644 backend/config/__init__.py create mode 100644 backend/config/asgi.py create mode 100644 backend/config/settings/base.py create mode 100644 backend/config/settings/dev.py create mode 100644 backend/config/settings/prod.py create mode 100644 backend/config/urls.py create mode 100644 backend/config/wsgi.py create mode 100644 backend/manage.py create mode 100644 backend/requirements.txt create mode 100755 backend/start.sh create mode 100644 docker-compose.yml create mode 100644 frontend/.env.example create mode 100644 frontend/.gitignore create mode 100644 frontend/Dockerfile create mode 100644 frontend/nginx.conf create mode 100644 frontend/package.json create mode 100644 frontend/public/index.html create mode 100644 frontend/src/App.js create mode 100644 frontend/src/index.js create mode 100644 frontend/src/services/api.js create mode 100644 frontend/src/setupTests.js create mode 100644 frontend/src/stores/AuthStore.js create mode 100644 frontend/src/stores/UserStore.js create mode 100644 frontend/src/styles/global.js create mode 100755 frontend/start.sh diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..7e89912 --- /dev/null +++ b/.env.example @@ -0,0 +1,22 @@ +# Django Settings +DJANGO_SECRET_KEY=your-secret-key-here-change-in-production +DJANGO_DEBUG=False + +# Database +DB_NAME=your_database_name +DB_USER=your_database_user +DB_PASSWORD=your_database_password +DB_HOST=postgres +DB_PORT=5432 + +# Allowed Hosts +ALLOWED_HOSTS=localhost,yourdomain.com + +# CORS +CORS_ALLOWED_ORIGINS=http://localhost,https://yourdomain.com + +# Email (optional) +EMAIL_HOST=smtp.gmail.com +EMAIL_PORT=587 +EMAIL_HOST_USER=your-email@example.com +EMAIL_HOST_PASSWORD=your-email-password \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4a41ad5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,29 @@ +# Python +__pycache__/ +*.py[cod] +*$py.class +*.so +.Python + +# Django +*.log +.env +/local_settings.py + +# Node +node_modules/ +npm-debug.log* + +# Build +build/ +dist/ + +# IDE +.vscode/ +.idea/ +*.swp +*.swo + +# OS +.DS_Store +Thumbs.db \ No newline at end of file diff --git a/INIT.md b/INIT.md new file mode 100644 index 0000000..ba5a5c8 --- /dev/null +++ b/INIT.md @@ -0,0 +1,120 @@ +# 项目初始化指南 + +## 快速开始 + +### 1. 配置环境变量 + +```bash +# 复制环境变量模板 +cp .env.example .env + +# 编辑 .env 文件，配置以下内容： +# - DJANGO_SECRET_KEY (生成一个安全的密钥) +# - DB_NAME, DB_USER, DB_PASSWORD, DB_HOST (数据库配置) +# - ALLOWED_HOSTS (允许的域名) +``` + +### 2. 后端初始化 + +```bash +cd backend + +# 创建虚拟环境 +python -m venv venv +source venv/bin/activate # Windows: venv\Scripts\activate + +# 安装依赖 +pip install -r requirements.txt + +# 配置自定义用户模型 (首次运行需要) +# 在运行迁移前，确保 apps.users.models.User 已创建 + +# 运行迁移 +python manage.py migrate + +# 创建超级用户 +python manage.py createsuperuser + +# 运行开发服务器 +python manage.py runserver +``` + +后端将在 http://localhost:8000 启动 + +### 3. 前端初始化 + +```bash +cd frontend + +# 安装依赖 +npm install + +# 配置环境变量 +cp .env.example .env +# 编辑 .env，设置 REACT_APP_API_URL + +# 启动开发服务器 +npm start +``` + +前端将在 http://localhost:3000 启动 + +## Docker 部署 + +```bash +# 构建并启动所有服务 +docker-compose up -d + +# 查看日志 +docker-compose logs -f + +# 停止服务 +docker-compose down + +# 停止并删除卷 +docker-compose down -v +``` + +## 数据库配置 + +### 使用外部 PostgreSQL + +在 `.env` 中配置： + +```env +DB_HOST=your-db-host +DB_PORT=5432 +DB_NAME=your_database_name +DB_USER=your_database_user +DB_PASSWORD=your_database_password +``` + +### 使用 Docker PostgreSQL + +默认配置会启动一个 PostgreSQL 容器，无需额外配置。 + +## 验证安装 + +1. 访问 http://localhost:8000/admin - Django 管理后台 +2. 访问 http://localhost:8000/api/ - REST API +3. 访问 http://localhost:8000/graphql/?graphiql - GraphQL playground +4. 访问 http://localhost:3000 - React 前端 + +## 常见问题 + +### 迁移错误 +如果遇到迁移错误，删除 migrations 文件并重新生成： + +```bash +find . -path "*/migrations/*.py" -not -name "__init__.py" -delete +python manage.py makemigrations +python manage.py migrate +``` + +### 静态文件收集错误 +```bash +python manage.py collectstatic --noinput +``` + +### 数据库连接错误 +检查 `.env` 文件中的数据库配置是否正确。 \ No newline at end of file diff --git a/PROJECT_DOCS.md b/PROJECT_DOCS.md new file mode 100644 index 0000000..89de462 --- /dev/null +++ b/PROJECT_DOCS.md @@ -0,0 +1,262 @@ +# 项目架构文档 + +## 技术栈 + +### 后端 (Django) +- **框架**: Django 4.2 +- **API 框架**: Django REST Framework +- **认证**: JWT (djangorestframework-simplejwt) +- **GraphQL**: graphene-django +- **数据库**: PostgreSQL +- **静态文件**: Whitenoise +- **生产服务器**: Gunicorn + +### 前端 (React) +- **框架**: React 18 +- **构建工具**: Create React App +- **状态管理**: MobX + mobx-react-lite +- **样式**: styled-components +- **路由**: React Router 6 +- **HTTP 客户端**: axios + +### 部署 +- **容器化**: Docker + Docker Compose +- **反向代理**: Nginx +- **进程管理**: Gunicorn + +## 项目结构 + +### 后端结构 +``` +backend/ +├── config/ +│ ├── settings/ +│ │ ├── base.py # 基础配置 +│ │ ├── dev.py # 开发环境 +│ │ └── prod.py # 生产环境 +│ ├── urls.py # 主路由 +│ ├── wsgi.py # WSGI 配置 +│ └── asgi.py # ASGI 配置 +├── apps/ +│ ├── users/ # 用户管理 +│ │ ├── models.py # User 模型 +│ │ ├── serializers.py +│ │ ├── views.py # ViewSets +│ │ └── urls.py +│ ├── core/ # 核心业务 +│ └── api/ # API 配置 +│ ├── serializers.py +│ ├── views.py +│ ├── urls.py +│ ├── schema.py # GraphQL schema +│ └── graphql_urls.py +├── static/ # 静态文件 +├── media/ # 媒体文件 +├── requirements.txt +├── manage.py +└── start.sh # 快速启动脚本 +``` + +### 前端结构 +``` +frontend/ +├── src/ +│ ├── components/ # React 组件 +│ ├── stores/ # MobX stores +│ │ ├── AuthStore.js +│ │ └── UserStore.js +│ ├── services/ # API 服务 +│ │ └── api.js # axios 配置 +│ ├── styles/ # 全局样式 +│ │ └── global.js +│ ├── App.js # 主应用 +│ └── index.js # 入口文件 +├── public/ # 公共资源 +├── package.json +├── .env.example +├── nginx.conf # Nginx 配置 +├── Dockerfile +└── start.sh # 快速启动脚本 +``` + +## 核心功能 + +### 1. 用户认证 + +**JWT 认证流程：** +1. 用户发送 email + password 到 `/api/auth/login/` +2. 后端验证并返回 access_token 和 refresh_token +3. 前端保存 tokens 到 localStorage +4. 后续请求在 Header 中携带 Bearer token +5. Token 过期时自动使用 refresh_token 刷新 + +**自定义用户模型：** +```python +# apps/users/models.py +class User(AbstractUser): + email = models.EmailField(unique=True) + avatar = models.ImageField(upload_to='avatars/') + USERNAME_FIELD = 'email' +``` + +### 2. REST API + +**端点：** +- `POST /api/auth/login/` - 登录获取 token +- `POST /api/auth/token/refresh/` - 刷新 token +- `GET /api/users/` - 获取用户列表 +- `GET /api/users/me/` - 获取当前用户 +- `GET /api/users/:id/` - 获取特定用户 + +### 3. GraphQL + +**Schema：** +```graphql +type User { + id: ID! + email: String! + username: String! +} + +type Query { + allUsers: [User!]! + me: User +} +``` + +访问 `/graphql/?graphiql` 查看调试界面。 + +### 4. 状态管理 (MobX) + +**AuthStore：** +- 管理认证状态 +- 处理登录/登出 +- 保存和读取 tokens + +**UserStore：** +- 获取当前用户信息 +- 管理用户数据状态 + +## 开发流程 + +### 1. 添加新的 API 端点 + +```python +# apps/yourapp/views.py +class YourViewSet(viewsets.ModelViewSet): + queryset = YourModel.objects.all() + serializer_class = YourSerializer + +# apps/yourapp/urls.py +router = DefaultRouter() +router.register(r'endpoint', YourViewSet) +``` + +### 2. 添加新的 MobX Store + +```javascript +// src/stores/YourStore.js +import { makeAutoObservable } from 'mobx'; + +class YourStore { + data = null; + loading = false; + + constructor() { + makeAutoObservable(this); + } + + async fetchData() { + this.loading = true; + // API 调用 + this.loading = false; + } +} + +export default YourStore; +``` + +### 3. 添加新的 React 组件 + +```javascript +// src/components/YourComponent.js +import React from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + padding: 20px; +`; + +function YourComponent() { + return Your content; +} + +export default YourComponent; +``` + +## 部署配置 + +### Docker Compose 服务 + +**backend：** +- 基于 Python 3.11 +- 运行 Gunicorn +- 暴露 8000 端口 +- 挂载 static 和 media 卷 + +**frontend：** +- 基于 Node 18 构建 +- 使用 nginx 作为服务器 +- 暴露 80 端口 +- 代理 API 请求到 backend + +**db：** +- PostgreSQL 15 +- 持久化数据卷 + +### Nginx 配置 + +- `/` → React 应用 +- `/api/*` → Django 后端 +- `/graphql/*` → Django GraphQL +- `/media/*` → Django media +- `/static/*` → Django static + +## 安全注意事项 + +1. **生产环境必须：** + - 设置 `DJANGO_SECRET_KEY` 为强随机值 + - `DEBUG=False` + - 配置 `ALLOWED_HOSTS` + - 启用 HTTPS + - 设置 `CORS_ALLOWED_ORIGINS` + +2. **数据库：** + - 使用强密码 + - 不暴露到公网 + - 定期备份 + +3. **JWT：** + - Token 过期时间合理配置 + - 刷新 token 轮换 + - 生产环境使用 HTTPS + +## 下一步开发建议 + +1. **后端：** + - 添加更多业务 apps + - 实现权限控制 + - 添加 API 文档 (Swagger) + - 实现文件上传功能 + +2. **前端：** + - 创建登录/注册页面 + - 添加路由保护 + - 实现加载状态处理 + - 添加错误处理 + +3. **部署：** + - 配置 HTTPS (Let's Encrypt) + - 设置 CI/CD + - 配置日志收集 + - 实现自动备份 \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..0642403 --- /dev/null +++ b/README.md @@ -0,0 +1,187 @@ +# React + Django Full-Stack Project + +## Tech Stack + +### Backend +- Django 4.2 +- Django REST Framework +- JWT Authentication (djangorestframework-simplejwt) +- GraphQL (graphene-django) +- PostgreSQL + +### Frontend +- React 18 (Create React App) +- MobX (state management) +- styled-components (CSS-in-JS) +- React Router + +### Deployment +- Docker & Docker Compose +- Nginx (reverse proxy) + +## Project Structure + +``` +. +├── backend/ # Django project +│ ├── config/ # Settings and configuration +│ ├── apps/ # Django apps +│ ├── static/ # Static files +│ └── media/ # Media files +├── frontend/ # React project +│ ├── src/ +│ │ ├── components/ +│ │ ├── stores/ # MobX stores +│ │ ├── services/ # API calls +│ │ └── styles/ +│ └── public/ +├── docker-compose.yml +└── .env.example +``` + +## Setup Instructions + +### 1. Environment Variables + +Copy `.env.example` to `.env` and configure: + +```bash +cp .env.example .env +``` + +Update the following variables: +- `DJANGO_SECRET_KEY` - Generate a secure secret key +- Database credentials (DB_NAME, DB_USER, DB_PASSWORD) +- `ALLOWED_HOSTS` - Add your domain(s) + +### 2. PostgreSQL Configuration + +If using external PostgreSQL (already deployed): + +Update `.env` with your database credentials: +```env +DB_HOST=your-db-host +DB_PORT=5432 +DB_NAME=your_database_name +DB_USER=your_database_user +DB_PASSWORD=your_database_password +``` + +If using Docker PostgreSQL: + +The default values in `docker-compose.yml` will work. + +### 3. Backend Setup + +```bash +cd backend + +# Create virtual environment +python -m venv venv +source venv/bin/activate # On Windows: venv\Scripts\activate + +# Install dependencies +pip install -r requirements.txt + +# Run migrations +python manage.py migrate + +# Create superuser +python manage.py createsuperuser + +# Run development server +python manage.py runserver +``` + +### 4. Frontend Setup + +```bash +cd frontend + +# Install dependencies +npm install + +# Start development server +npm start +``` + +### 5. Docker Deployment + +```bash +# Build and start all services +docker-compose up -d + +# View logs +docker-compose logs -f + +# Stop services +docker-compose down +``` + +## API Endpoints + +### REST API +- `/api/users/` - User management +- `/api/users/me/` - Current user +- `/api/auth/token/` - Login (POST) +- `/api/auth/token/refresh/` - Refresh token (POST) + +### GraphQL +- `/graphql/` - GraphQL endpoint +- `/graphql/?graphiql` - GraphQL playground + +## Development + +### Running Backend +```bash +cd backend +python manage.py runserver +``` + +### Running Frontend +```bash +cd frontend +npm start +``` + +### Running Tests + +Backend: +```bash +cd backend +python manage.py test +``` + +Frontend: +```bash +cd frontend +npm test +``` + +## Production Deployment + +### Using Docker Compose +1. Update `.env` with production values +2. Build images: `docker-compose build` +3. Start services: `docker-compose up -d` + +### Nginx Configuration + +The frontend Dockerfile includes nginx configuration that: +- Serves React app +- Proxies `/api` requests to Django backend +- Proxies `/graphql` requests to Django backend +- Handles static and media files + +## Security Notes + +- **Never commit `.env` files** +- Change `DJANGO_SECRET_KEY` in production +- Use strong passwords for database +- Enable HTTPS in production +- Configure `ALLOWED_HOSTS` properly +- Set `DEBUG=False` in production + +## License + +MIT \ No newline at end of file diff --git a/TESTING.md b/TESTING.md new file mode 100644 index 0000000..06be04d --- /dev/null +++ b/TESTING.md @@ -0,0 +1,163 @@ +# API 测试指南 + +## 测试后端 API + +### 1. 获取 Token (登录) + +```bash +curl -X POST http://localhost:8000/api/auth/login/ \ + -H "Content-Type: application/json" \ + -d '{ + "email": "your@email.com", + "password": "your_password" + }' +``` + +响应示例： +```json +{ + "access": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...", + "refresh": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...", + "user": { + "id": 1, + "email": "your@email.com", + "username": "your_username", + "first_name": "First", + "last_name": "Last" + } +} +``` + +### 2. 刷新 Token + +```bash +curl -X POST http://localhost:8000/api/auth/token/refresh/ \ + -H "Content-Type: application/json" \ + -d '{ + "refresh": "your_refresh_token" + }' +``` + +### 3. 获取用户列表 (需要认证) + +```bash +curl -X GET http://localhost:8000/api/users/ \ + -H "Authorization: Bearer your_access_token" +``` + +### 4. 获取当前用户 + +```bash +curl -X GET http://localhost:8000/api/users/me/ \ + -H "Authorization: Bearer your_access_token" +``` + +## GraphQL 测试 + +访问 http://localhost:8000/graphql/?graphiql + +### 查询所有用户 + +```graphql +query { + allUsers { + id + email + username + firstName + lastName + } +} +``` + +### 查询当前用户 + +```graphql +query { + me { + id + email + username + firstName + lastName + } +} +``` + +## Postman 集合 + +你可以导入以下 Postman 集合来测试 API： + +### 环境变量 +- `base_url`: http://localhost:8000 +- `access_token`: (登录后自动填充) + +### 请求示例 + +**1. 登录** +- Method: POST +- URL: `{{base_url}}/api/auth/login/` +- Body: +```json +{ + "email": "test@example.com", + "password": "testpass123" +} +``` +- Tests (自动提取 token): +```javascript +var jsonData = pm.response.json(); +pm.environment.set("access_token", jsonData.access); +``` + +**2. 获取用户** +- Method: GET +- URL: `{{base_url}}/api/users/` +- Headers: +``` +Authorization: Bearer {{access_token}} +``` + +**3. 获取当前用户** +- Method: GET +- URL: `{{base_url}}/api/users/me/` +- Headers: +``` +Authorization: Bearer {{access_token}} +``` + +## 自动化测试 + +### 后端测试 + +```bash +cd backend +python manage.py test +``` + +### 前端测试 + +```bash +cd frontend +npm test +``` + +## 常见错误 + +### 401 Unauthorized +- Token 过期，使用 refresh_token 刷新 +- Token 格式错误，确保 `Bearer` 前缀存在 +- Token 被吊销 + +### 403 Forbidden +- 权限不足，检查用户是否有相应权限 +- CSRF token 问题（开发环境可能遇到） + +### 404 Not Found +- 端点不存在，检查 URL 路径 +- 检查 Django 是否正确启动 + +### 500 Server Error +- 检查 Django 日志 +- 检查数据库连接 +- 检查代码语法错误 \ No newline at end of file diff --git a/backend/.gitignore b/backend/.gitignore new file mode 100644 index 0000000..9603e91 --- /dev/null +++ b/backend/.gitignore @@ -0,0 +1,45 @@ +# Python +__pycache__/ +*.py[cod] +*$py.class +*.so +.Python +env/ +venv/ +ENV/ +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +*.egg-info/ +.installed.cfg +*.egg + +# Django +*.log +/local_settings.py +/staticfiles/ +/media/ + +# Environment +.env +.env.local + +# IDE +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# OS +.DS_Store +Thumbs.db \ No newline at end of file diff --git a/backend/Dockerfile b/backend/Dockerfile new file mode 100644 index 0000000..0a9afe2 --- /dev/null +++ b/backend/Dockerfile @@ -0,0 +1,31 @@ +FROM python:3.11-slim + +# Set environment variables +ENV PYTHONDONTWRITEBYTECODE=1 +ENV PYTHONUNBUFFERED=1 + +# Set work directory +WORKDIR /app + +# Install system dependencies +RUN apt-get update && apt-get install \ + gcc \ + postgresql-client \ + -y --no-install-recommends && \ + rm -rf /var/lib/apt/lists/* + +# Install Python dependencies +COPY requirements.txt . +RUN pip install --no-cache-dir -r requirements.txt + +# Copy project +COPY . . + +# Collect static files +RUN python manage.py collectstatic --noinput --settings=config.settings.prod + +# Expose port +EXPOSE 8000 + +# Run gunicorn +CMD ["gunicorn", "config.wsgi:application", "--bind", "0.0.0.0:8000", "--workers", "3"] \ No newline at end of file diff --git a/backend/apps/__init__.py b/backend/apps/__init__.py new file mode 100644 index 0000000..79d4401 --- /dev/null +++ b/backend/apps/__init__.py @@ -0,0 +1 @@ +# Apps package \ No newline at end of file diff --git a/backend/apps/api/__init__.py b/backend/apps/api/__init__.py new file mode 100644 index 0000000..5ceea3e --- /dev/null +++ b/backend/apps/api/__init__.py @@ -0,0 +1 @@ +# API app \ No newline at end of file diff --git a/backend/apps/api/apps.py b/backend/apps/api/apps.py new file mode 100644 index 0000000..4bdc425 --- /dev/null +++ b/backend/apps/api/apps.py @@ -0,0 +1,6 @@ +from django.apps import AppConfig + + +class ApiConfig(AppConfig): + default_auto_field = 'django.db.models.BigAutoField' + name = 'apps.api' \ No newline at end of file diff --git a/backend/apps/api/graphql_urls.py b/backend/apps/api/graphql_urls.py new file mode 100644 index 0000000..e7932cf --- /dev/null +++ b/backend/apps/api/graphql_urls.py @@ -0,0 +1,7 @@ +from django.urls import path +from graphene_django.views import GraphQLView +from apps.api.schema import schema + +urlpatterns = [ + path('', GraphQLView.as_view(graphiql=True, schema=schema)), +] \ No newline at end of file diff --git a/backend/apps/api/schema.py b/backend/apps/api/schema.py new file mode 100644 index 0000000..4dc083f --- /dev/null +++ b/backend/apps/api/schema.py @@ -0,0 +1,31 @@ +import graphene +from graphene_django import DjangoObjectType +from apps.users.models import User + + +class UserType(DjangoObjectType): + """GraphQL type for User.""" + + class Meta: + model = User + fields = '__all__' + + +class Query(graphene.ObjectType): + """Root GraphQL Query.""" + + all_users = graphene.List(UserType) + me = graphene.Field(UserType) + + def resolve_all_users(root, info): + """Resolve all users query.""" + return User.objects.all() + + def resolve_me(root, info): + """Resolve current user query.""" + if info.context.user.is_authenticated: + return info.context.user + return None + + +schema = graphene.Schema(query=Query) \ No newline at end of file diff --git a/backend/apps/api/serializers.py b/backend/apps/api/serializers.py new file mode 100644 index 0000000..c9b49d6 --- /dev/null +++ b/backend/apps/api/serializers.py @@ -0,0 +1,29 @@ +from rest_framework import serializers +from django.contrib.auth import get_user_model +from rest_framework_simplejwt.serializers import TokenObtainPairSerializer + +User = get_user_model() + + +class CustomTokenObtainPairSerializer(TokenObtainPairSerializer): + """Custom JWT token serializer that includes user data.""" + + @classmethod + def get_token(cls, user): + token = super().get_token(user) + # Add custom claims + token['email'] = user.email + token['username'] = user.username + return token + + def validate(self, attrs): + data = super().validate(attrs) + # Add user data to response + data['user'] = { + 'id': self.user.id, + 'email': self.user.email, + 'username': self.user.username, + 'first_name': self.user.first_name, + 'last_name': self.user.last_name, + } + return data \ No newline at end of file diff --git a/backend/apps/api/urls.py b/backend/apps/api/urls.py new file mode 100644 index 0000000..ce928d9 --- /dev/null +++ b/backend/apps/api/urls.py @@ -0,0 +1,12 @@ +from django.urls import path, include +from rest_framework_simplejwt.views import ( + TokenRefreshView, +) +from apps.users.urls import urlpatterns as users_urls +from apps.api.views import CustomTokenObtainPairView + +urlpatterns = [ + path('auth/login/', CustomTokenObtainPairView.as_view(), name='token_obtain_pair'), + path('auth/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'), + path('', include(users_urls)), +] \ No newline at end of file diff --git a/backend/apps/api/views.py b/backend/apps/api/views.py new file mode 100644 index 0000000..19757fb --- /dev/null +++ b/backend/apps/api/views.py @@ -0,0 +1,11 @@ +from rest_framework import status +from rest_framework.decorators import api_view +from rest_framework.response import Response +from rest_framework_simplejwt.views import TokenObtainPairView +from .serializers import CustomTokenObtainPairSerializer + + +class CustomTokenObtainPairView(TokenObtainPairView): + """Custom token view that returns user data with tokens.""" + + serializer_class = CustomTokenObtainPairSerializer \ No newline at end of file diff --git a/backend/apps/core/__init__.py b/backend/apps/core/__init__.py new file mode 100644 index 0000000..7d61711 --- /dev/null +++ b/backend/apps/core/__init__.py @@ -0,0 +1 @@ +# Core app \ No newline at end of file diff --git a/backend/apps/core/apps.py b/backend/apps/core/apps.py new file mode 100644 index 0000000..bea492a --- /dev/null +++ b/backend/apps/core/apps.py @@ -0,0 +1,6 @@ +from django.apps import AppConfig + + +class CoreConfig(AppConfig): + default_auto_field = 'django.db.models.BigAutoField' + name = 'apps.core' \ No newline at end of file diff --git a/backend/apps/users/__init__.py b/backend/apps/users/__init__.py new file mode 100644 index 0000000..6c59483 --- /dev/null +++ b/backend/apps/users/__init__.py @@ -0,0 +1 @@ +# Users app \ No newline at end of file diff --git a/backend/apps/users/apps.py b/backend/apps/users/apps.py new file mode 100644 index 0000000..fd6c1d8 --- /dev/null +++ b/backend/apps/users/apps.py @@ -0,0 +1,6 @@ +from django.apps import AppConfig + + +class UsersConfig(AppConfig): + default_auto_field = 'django.db.models.BigAutoField' + name = 'apps.users' \ No newline at end of file diff --git a/backend/apps/users/models.py b/backend/apps/users/models.py new file mode 100644 index 0000000..bc6ef35 --- /dev/null +++ b/backend/apps/users/models.py @@ -0,0 +1,22 @@ +from django.contrib.auth.models import AbstractUser +from django.db import models + + +class User(AbstractUser): + """Custom user model extending AbstractUser.""" + + email = models.EmailField(unique=True) + first_name = models.CharField(max_length=150) + last_name = models.CharField(max_length=150) + avatar = models.ImageField(upload_to='avatars/', null=True, blank=True) + + USERNAME_FIELD = 'email' + REQUIRED_FIELDS = ['username', 'first_name'] + + class Meta: + db_table = 'users' + verbose_name = 'User' + verbose_name_plural = 'Users' + + def __str__(self): + return self.email \ No newline at end of file diff --git a/backend/apps/users/serializers.py b/backend/apps/users/serializers.py new file mode 100644 index 0000000..3d2c0d0 --- /dev/null +++ b/backend/apps/users/serializers.py @@ -0,0 +1,20 @@ +from rest_framework import serializers +from .models import User + + +class UserSerializer(serializers.ModelSerializer): + """Serializer for User model.""" + + class Meta: + model = User + fields = ('id', 'username', 'email', 'first_name', 'last_name', 'avatar') + read_only_fields = ('id',) + + +class UserDetailSerializer(serializers.ModelSerializer): + """Detailed serializer for User model.""" + + class Meta: + model = User + fields = '__all__' + read_only_fields = ('id', 'date_joined', 'last_login') \ No newline at end of file diff --git a/backend/apps/users/urls.py b/backend/apps/users/urls.py new file mode 100644 index 0000000..f703f10 --- /dev/null +++ b/backend/apps/users/urls.py @@ -0,0 +1,10 @@ +from django.urls import path, include +from rest_framework.routers import DefaultRouter +from .views import UserViewSet + +router = DefaultRouter() +router.register(r'users', UserViewSet, basename='user') + +urlpatterns = [ + path('', include(router.urls)), +] \ No newline at end of file diff --git a/backend/apps/users/views.py b/backend/apps/users/views.py new file mode 100644 index 0000000..7fb83cf --- /dev/null +++ b/backend/apps/users/views.py @@ -0,0 +1,23 @@ +from rest_framework import viewsets, permissions +from rest_framework.decorators import action +from rest_framework.response import Response +from .models import User +from .serializers import UserSerializer, UserDetailSerializer + + +class UserViewSet(viewsets.ModelViewSet): + """ViewSet for User model.""" + + queryset = User.objects.all() + permission_classes = [permissions.IsAuthenticated] + + def get_serializer_class(self): + if self.action in ['retrieve', 'update', 'partial_update']: + return UserDetailSerializer + return UserSerializer + + @action(detail=False, methods=['get']) + def me(self, request): + """Get current user.""" + serializer = self.get_serializer(request.user) + return Response(serializer.data) \ No newline at end of file diff --git a/backend/config/__init__.py b/backend/config/__init__.py new file mode 100644 index 0000000..be6a4fc --- /dev/null +++ b/backend/config/__init__.py @@ -0,0 +1 @@ +# Config package \ No newline at end of file diff --git a/backend/config/asgi.py b/backend/config/asgi.py new file mode 100644 index 0000000..e31783e --- /dev/null +++ b/backend/config/asgi.py @@ -0,0 +1,9 @@ +""" +ASGI config for the project. +""" + +import os +from django.core.asgi import get_asgi_application + +os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings.prod') +application = get_asgi_application() \ No newline at end of file diff --git a/backend/config/settings/base.py b/backend/config/settings/base.py new file mode 100644 index 0000000..70463c3 --- /dev/null +++ b/backend/config/settings/base.py @@ -0,0 +1,165 @@ +""" +Base Django settings for the project. +""" + +from pathlib import Path +import os + +# Build paths inside the project +BASE_DIR = Path(__file__).resolve().parent.parent.parent + +# SECURITY WARNING: keep the secret key used in production secret! +SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'django-insecure-change-this-in-production') + +# SECURITY WARNING: don't run with debug turned on in production! +DEBUG = False + +ALLOWED_HOSTS = ['*'] + +# Application definition +INSTALLED_APPS = [ + 'django.contrib.admin', + 'django.contrib.auth', + 'django.contrib.contenttypes', + 'django.contrib.sessions', + 'django.contrib.messages', + 'django.contrib.staticfiles', + + # Third party + 'rest_framework', + 'rest_framework_simplejwt', + 'corsheaders', + 'django_filters', + 'graphene_django', + + # Local apps + 'apps.users', + 'apps.core', +] + +MIDDLEWARE = [ + 'corsheaders.middleware.CorsMiddleware', + 'django.middleware.security.SecurityMiddleware', + 'whitenoise.middleware.WhiteNoiseMiddleware', + 'django.contrib.sessions.middleware.SessionMiddleware', + 'django.middleware.common.CommonMiddleware', + 'django.middleware.csrf.CsrfViewMiddleware', + 'django.contrib.auth.middleware.AuthenticationMiddleware', + 'django.contrib.messages.middleware.MessageMiddleware', + 'django.middleware.clickjacking.XFrameOptionsMiddleware', +] + +ROOT_URLCONF = 'config.urls' + +TEMPLATES = [ + { + 'BACKEND': 'django.template.backends.django.DjangoTemplates', + 'DIRS': [], + 'APP_DIRS': True, + 'OPTIONS': { + 'context_processors': [ + 'django.template.context_processors.debug', + 'django.template.context_processors.request', + 'django.contrib.auth.context_processors.auth', + 'django.contrib.messages.context_processors.messages', + ], + }, + }, +] + +WSGI_APPLICATION = 'config.wsgi.application' + +# Database +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.postgresql', + 'NAME': os.environ.get('DB_NAME', 'postgres'), + 'USER': os.environ.get('DB_USER', 'postgres'), + 'PASSWORD': os.environ.get('DB_PASSWORD', 'postgres'), + 'HOST': os.environ.get('DB_HOST', 'localhost'), + 'PORT': os.environ.get('DB_PORT', '5432'), + } +} + +AUTH_USER_MODEL = 'users.User' + +# Password validation +AUTH_PASSWORD_VALIDATORS = [ + { + 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', + }, + { + 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', + }, + { + 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', + }, + { + 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', + }, +] + +# Internationalization +LANGUAGE_CODE = 'en-us' +TIME_ZONE = 'UTC' +USE_I18N = True +USE_TZ = True + +# Static files (CSS, JavaScript, Images) +STATIC_URL = 'static/' +STATIC_ROOT = BASE_DIR / 'staticfiles' +STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' + +# Media files +MEDIA_URL = 'media/' +MEDIA_ROOT = BASE_DIR / 'media' + +# Default primary key field type +DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' + +# REST Framework +REST_FRAMEWORK = { + 'DEFAULT_AUTHENTICATION_CLASSES': ( + 'rest_framework_simplejwt.authentication.JWTAuthentication', + ), + 'DEFAULT_PERMISSION_CLASSES': ( + 'rest_framework.permissions.IsAuthenticated', + ), + 'DEFAULT_FILTER_BACKENDS': ( + 'django_filters.rest_framework.DjangoFilterBackend', + 'rest_framework.filters.SearchFilter', + 'rest_framework.filters.OrderingFilter', + ), + 'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination', + 'PAGE_SIZE': 20, +} + +# JWT Settings +from datetime import timedelta +SIMPLE_JWT = { + 'ACCESS_TOKEN_LIFETIME': timedelta(minutes=60), + 'REFRESH_TOKEN_LIFETIME': timedelta(days=7), + 'ROTATE_REFRESH_TOKENS': True, + 'BLACKLIST_AFTER_ROTATION': True, + 'UPDATE_LAST_LOGIN': True, + 'ALGORITHM': 'HS256', + 'SIGNING_KEY': SECRET_KEY, + 'AUTH_HEADER_TYPES': ('Bearer',), +} + +# CORS Settings +CORS_ALLOWED_ORIGINS = [ + "http://localhost:3000", +] + +CSRF_TRUSTED_ORIGINS = [ + "http://localhost:3000", +] + +# GraphQL +GRAPHENE = { + 'SCHEMA': 'apps.api.schema.schema', + 'MIDDLEWARE': [ + 'graphql_jwt.middleware.JSONWebTokenMiddleware', + ], +} \ No newline at end of file diff --git a/backend/config/settings/dev.py b/backend/config/settings/dev.py new file mode 100644 index 0000000..e85dd21 --- /dev/null +++ b/backend/config/settings/dev.py @@ -0,0 +1,19 @@ +""" +Development settings for the project. +""" + +from .base import * + +DEBUG = True + +ALLOWED_HOSTS = ['localhost', '127.0.0.1', '0.0.0.0'] + +CORS_ALLOW_ALL_ORIGINS = True + +# Email backend (console for development) +EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' + +# Additional apps for development +INSTALLED_APPS += [ + 'django_extensions', +] \ No newline at end of file diff --git a/backend/config/settings/prod.py b/backend/config/settings/prod.py new file mode 100644 index 0000000..fc03a32 --- /dev/null +++ b/backend/config/settings/prod.py @@ -0,0 +1,31 @@ +""" +Production settings for the project. +""" + +from .base import * + +DEBUG = False + +ALLOWED_HOSTS = os.environ.get('ALLOWED_HOSTS', '').split(',') + +# Security settings +SECURE_BROWSER_XSS_FILTER = True +SECURE_CONTENT_TYPE_NOSNIFF = True +SECURE_HSTS_SECONDS = 31536000 +SECURE_HSTS_INCLUDE_SUBDOMAINS = True +SECURE_HSTS_PRELOAD = True +SECURE_SSL_REDIRECT = True +SESSION_COOKIE_SECURE = True +CSRF_COOKIE_SECURE = True + +# CORS - use environment variable +CORS_ALLOWED_ORIGINS = os.environ.get('CORS_ALLOWED_ORIGINS', '').split(',') +CSORS_ALLOW_CREDENTIALS = True + +# Email backend (use your email service in production) +EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' +EMAIL_HOST = os.environ.get('EMAIL_HOST') +EMAIL_PORT = os.environ.get('EMAIL_PORT', 587) +EMAIL_USE_TLS = True +EMAIL_HOST_USER = os.environ.get('EMAIL_HOST_USER') +EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_HOST_PASSWORD') \ No newline at end of file diff --git a/backend/config/urls.py b/backend/config/urls.py new file mode 100644 index 0000000..fb2e160 --- /dev/null +++ b/backend/config/urls.py @@ -0,0 +1,18 @@ +""" +URL configuration for the project. +""" + +from django.contrib import admin +from django.urls import path, include +from django.conf import settings +from django.conf.urls.static import static + +urlpatterns = [ + path('admin/', admin.site.urls), + path('api/', include('apps.api.urls')), + path('graphql/', include('apps.api.graphql_urls')), +] + +# Serve media files in development +if settings.DEBUG: + urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \ No newline at end of file diff --git a/backend/config/wsgi.py b/backend/config/wsgi.py new file mode 100644 index 0000000..a398cb3 --- /dev/null +++ b/backend/config/wsgi.py @@ -0,0 +1,9 @@ +""" +WSGI config for the project. +""" + +import os +from django.core.wsgi import get_wsgi_application + +os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings.prod') +application = get_wsgi_application() \ No newline at end of file diff --git a/backend/manage.py b/backend/manage.py new file mode 100644 index 0000000..60076d4 --- /dev/null +++ b/backend/manage.py @@ -0,0 +1,22 @@ +#!/usr/bin/env python +"""Django's command-line utility for administrative tasks.""" +import os +import sys + + +def main(): + """Run administrative tasks.""" + os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings.dev') + try: + from django.core.management import execute_from_command_line + except ImportError as exc: + raise ImportError( + "Couldn't import Django. Are you sure it's installed and " + "available on your PYTHONPATH environment variable? Did you " + "forget to activate a virtual environment?" + ) from exc + execute_from_command_line(sys.argv) + + +if __name__ == '__main__': + main() \ No newline at end of file diff --git a/backend/requirements.txt b/backend/requirements.txt new file mode 100644 index 0000000..215fb61 --- /dev/null +++ b/backend/requirements.txt @@ -0,0 +1,11 @@ +Django>=4.2,<5.0 +djangorestframework>=3.14 +djangorestframework-simplejwt>=5.2 +django-cors-headers>=4.0 +psycopg2-binary>=2.9 +python-dotenv>=1.0 +Pillow>=10.0 +graphene-django>=3.1 +django-filter>=23.0 +gunicorn>=21.0 +whitenoise>=6.5 \ No newline at end of file diff --git a/backend/start.sh b/backend/start.sh new file mode 100755 index 0000000..3e9bbc1 --- /dev/null +++ b/backend/start.sh @@ -0,0 +1,29 @@ +#!/bin/bash + +echo "🚀 Starting Django Backend..." + +# 激活虚拟环境 +if [ -d "venv" ]; then + source venv/bin/activate + echo "✅ Virtual environment activated" +else + echo "❌ Virtual environment not found. Creating one..." + python -m venv venv + source venv/bin/activate +fi + +# 安装依赖 +echo "📦 Installing dependencies..." +pip install -r requirements.txt + +# 运行迁移 +echo "🔄 Running migrations..." +python manage.py migrate + +# 收集静态文件 +echo "📁 Collecting static files..." +python manage.py collectstatic --noinput + +# 启动服务器 +echo "🎉 Starting development server on http://localhost:8000" +python manage.py runserver \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..49db3c2 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,54 @@ +version: '3.8' + +services: + backend: + build: + context: ./backend + dockerfile: Dockerfile + container_name: django_backend + restart: unless-stopped + env_file: + - .env + volumes: + - ./backend:/app + - backend_static:/app/staticfiles + - backend_media:/app/media + ports: + - "8000:8000" + depends_on: + - db + networks: + - app_network + + frontend: + build: + context: ./frontend + dockerfile: Dockerfile + container_name: react_frontend + restart: unless-stopped + ports: + - "80:80" + depends_on: + - backend + networks: + - app_network + + db: + image: postgres:15-alpine + container_name: postgres_db + restart: unless-stopped + env_file: + - .env + volumes: + - postgres_data:/var/lib/postgresql/data + networks: + - app_network + +volumes: + postgres_data: + backend_static: + backend_media: + +networks: + app_network: + driver: bridge \ No newline at end of file diff --git a/frontend/.env.example b/frontend/.env.example new file mode 100644 index 0000000..d2bf86f --- /dev/null +++ b/frontend/.env.example @@ -0,0 +1,2 @@ +REACT_APP_API_URL=http://localhost:8000 +REACT_APP_ENV=development \ No newline at end of file diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..24cdedf --- /dev/null +++ b/frontend/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* \ No newline at end of file diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 0000000..3c8ca21 --- /dev/null +++ b/frontend/Dockerfile @@ -0,0 +1,31 @@ +FROM node:18-alpine as build + +# Set work directory +WORKDIR /app + +# Copy package files +COPY package*.json ./ + +# Install dependencies +RUN npm ci + +# Copy project +COPY . . + +# Build +RUN npm run build + +# Production stage +FROM nginx:alpine + +# Copy built files +COPY --from=build /app/build /usr/share/nginx/html + +# Copy nginx config +COPY nginx.conf /etc/nginx/conf.d/default.conf + +# Expose port +EXPOSE 80 + +# Start nginx +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/frontend/nginx.conf b/frontend/nginx.conf new file mode 100644 index 0000000..53858d4 --- /dev/null +++ b/frontend/nginx.conf @@ -0,0 +1,37 @@ +server { + listen 80; + server_name localhost; + + root /usr/share/nginx/html; + index index.html index.htm; + + location / { + try_files $uri $uri/ /index.html; + } + + location /api { + proxy_pass http://backend:8000; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + } + + location /graphql { + proxy_pass http://backend:8000; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + } + + location /media { + proxy_pass http://backend:8000; + } + + location /static { + proxy_pass http://backend:8000; + } + + gzip on; + gzip_comp_level 5; + gzip_types text/plain text/css application/json application/javascript text/xml application/xml; +} \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json new file mode 100644 index 0000000..544a266 --- /dev/null +++ b/frontend/package.json @@ -0,0 +1,48 @@ +{ + "name": "react-frontend", + "version": "0.1.0", + "private": true, + "dependencies": { + "axios": "^1.6.0", + "mobx": "^6.12.0", + "mobx-react-lite": "^4.0.7", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.20.0", + "react-scripts": "5.0.1", + "styled-components": "^6.1.0", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "eslint": "^8.55.0", + "prettier": "^3.1.0" + }, + "proxy": "http://localhost:8000" +} \ No newline at end of file diff --git a/frontend/public/index.html b/frontend/public/index.html new file mode 100644 index 0000000..7966434 --- /dev/null +++ b/frontend/public/index.html @@ -0,0 +1,15 @@ + + + + + + + + + React + Django App + + + +
+ + \ No newline at end of file diff --git a/frontend/src/App.js b/frontend/src/App.js new file mode 100644 index 0000000..cacbc41 --- /dev/null +++ b/frontend/src/App.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { Routes, Route } from 'react-router-dom'; +import styled from 'styled-components'; + +const Container = styled.div` + max-width: 1200px; + margin: 0 auto; + padding: 20px; +`; + +const Header = styled.header` + margin-bottom: 30px; + padding-bottom: 20px; + border-bottom: 2px solid #eee; +`; + +const Title = styled.h1` + margin: 0; + font-size: 28px; +`; + +function App() { + return ( + +
+ React + Django App +
+ + Welcome to the app!} /> + + + ); +} + +export default App; \ No newline at end of file diff --git a/frontend/src/index.js b/frontend/src/index.js new file mode 100644 index 0000000..a1cfeff --- /dev/null +++ b/frontend/src/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { BrowserRouter } from 'react-router-dom'; +import { Provider } from 'mobx-react-lite'; +import App from './App'; +import './styles/global'; + +// Import stores +import UserStore from './stores/UserStore'; +import AuthStore from './stores/AuthStore'; + +const root = ReactDOM.createRoot(document.getElementById('root')); + +const stores = { + userStore: new UserStore(), + authStore: new AuthStore(), +}; + +root.render( + + + + + + + +); \ No newline at end of file diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js new file mode 100644 index 0000000..a0b6b6c --- /dev/null +++ b/frontend/src/services/api.js @@ -0,0 +1,54 @@ +import axios from 'axios'; + +const api = axios.create({ + baseURL: process.env.REACT_APP_API_URL || 'http://localhost:8000', + headers: { + 'Content-Type': 'application/json', + }, +}); + +// Add token to requests +api.interceptors.request.use( + (config) => { + const token = localStorage.getItem('token'); + if (token) { + config.headers.Authorization = `Bearer ${token}`; + } + return config; + }, + (error) => Promise.reject(error) +); + +// Handle token refresh +api.interceptors.response.use( + (response) => response, + async (error) => { + const originalRequest = error.config; + + if (error.response?.status === 401 && !originalRequest._retry) { + originalRequest._retry = true; + + try { + const refreshToken = localStorage.getItem('refresh'); + const response = await axios.post('/api/token/refresh/', { + refresh: refreshToken, + }); + + const newToken = response.data.access; + localStorage.setItem('token', newToken); + originalRequest.headers.Authorization = `Bearer ${newToken}`; + + return api(originalRequest); + } catch (refreshError) { + localStorage.removeItem('token'); + localStorage.removeItem('refresh'); + window.location.href = '/login'; + return Promise.reject(refreshError); + } + } + + return Promise.reject(error); + } +); + +export default api; \ No newline at end of file diff --git a/frontend/src/setupTests.js b/frontend/src/setupTests.js new file mode 100644 index 0000000..b28b910 --- /dev/null +++ b/frontend/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; \ No newline at end of file diff --git a/frontend/src/stores/AuthStore.js b/frontend/src/stores/AuthStore.js new file mode 100644 index 0000000..04f0000 --- /dev/null +++ b/frontend/src/stores/AuthStore.js @@ -0,0 +1,44 @@ +import { makeAutoObservable } from 'mobx'; +import axios from 'axios'; + +class AuthStore { + token = localStorage.getItem('token') || null; + isAuthenticated = !!localStorage.getItem('token'); + + constructor() { + makeAutoObservable(this); + } + + async login(email, password) { + try { + const response = await axios.post('/api/auth/login/', { + email, + password, + }); + + this.token = response.data.access; + this.isAuthenticated = true; + localStorage.setItem('token', this.token); + localStorage.setItem('refresh', response.data.refresh); + + axios.defaults.headers.common['Authorization'] = `Bearer ${this.token}`; + + return { success: true }; + } catch (error) { + return { + success: false, + error: error.response?.data?.detail || 'Login failed', + }; + } + } + + logout() { + this.token = null; + this.isAuthenticated = false; + localStorage.removeItem('token'); + localStorage.removeItem('refresh'); + delete axios.defaults.headers.common['Authorization']; + } +} + +export default AuthStore; \ No newline at end of file diff --git a/frontend/src/stores/UserStore.js b/frontend/src/stores/UserStore.js new file mode 100644 index 0000000..53be8ce --- /dev/null +++ b/frontend/src/stores/UserStore.js @@ -0,0 +1,32 @@ +import { makeAutoObservable } from 'mobx'; +import axios from 'axios'; + +class UserStore { + user = null; + loading = false; + error = null; + + constructor() { + makeAutoObservable(this); + } + + async fetchCurrentUser() { + this.loading = true; + this.error = null; + + try { + const response = await axios.get('/api/users/me/'); + this.user = response.data; + } catch (error) { + this.error = error.response?.data || 'Failed to fetch user'; + } finally { + this.loading = false; + } + } + + clearUser() { + this.user = null; + } +} + +export default UserStore; \ No newline at end of file diff --git a/frontend/src/styles/global.js b/frontend/src/styles/global.js new file mode 100644 index 0000000..178280c --- /dev/null +++ b/frontend/src/styles/global.js @@ -0,0 +1,24 @@ +import { createGlobalStyle } from 'styled-components'; + +const GlobalStyle = createGlobalStyle` + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; + } +`; + +export default GlobalStyle; \ No newline at end of file diff --git a/frontend/start.sh b/frontend/start.sh new file mode 100755 index 0000000..7d6d1e8 --- /dev/null +++ b/frontend/start.sh @@ -0,0 +1,13 @@ +#!/bin/bash + +echo "🚀 Starting React Frontend..." + +# 检查 node_modules +if [ ! -d "node_modules" ]; then + echo "📦 Installing dependencies..." + npm install +fi + +# 启动开发服务器 +echo "🎉 Starting development server on http://localhost:3000" +npm start \ No newline at end of file