React + Django Full-Stack Project

项目信息

项目名称： 城市手册（CityWiki）
项目定位： 地方志兼本地生活服务平台
技术栈： React + Django + PostgreSQL + Docker

功能特性

• ✅ 用户认证系统（注册、登录、JWT）
• ✅ 版块层级管理（省→市→县→乡镇→村）
• ✅ 文章管理（创建、审核、发布）
• ✅ 特色服务（衣食住行娱乐旅游文化）
• ✅ 交互功能（评论、评分、点赞、收藏）
• ✅ 版主管理（申请、权限、审核）
• ✅ 内容审核流程（版主初审 + AI 审核）

技术栈

Backend

• Django 4.2
• Django REST Framework
• JWT Authentication (djangorestframework-simplejwt)
• GraphQL (graphene-django)
• PostgreSQL

Frontend

• React 18 (Create React App)
• MobX (状态管理)
• styled-components (CSS-in-JS)
• React Router

Deployment

• Docker & Docker Compose
• Nginx (反向代理)

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

快速开始

1. 克隆项目

git clone http://10.2.0.100:8989/mashen/chengshishouce.git
cd chengshishouce

2. 环境变量配置

cp .env.example .env
# 编辑 .env 文件，配置数据库和其他设置

3. 后端启动

cd backend

# 创建虚拟环境
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# 安装依赖
pip install -r requirements.txt

# 运行迁移
python manage.py migrate

# 创建超级用户
python manage.py createsuperuser

# 启动开发服务器
python manage.py runserver

4. 前端启动

cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm start

5. 访问应用

• 前端：http://localhost:3000
• 后端 API：http://localhost:8000
• GraphQL：http://localhost:8000/graphql
• Django Admin：http://localhost:8000/admin

Docker 部署

# 构建并启动所有服务
docker-compose up -d

# 查看日志
docker-compose logs -f

# 停止服务
docker-compose down

详细部署指南请参考 DEPLOYMENT.md

项目文档

• 需求文档 - 项目需求说明
• 实施计划 - 需求实施进度
• 部署指南 - 详细部署说明
• 技术文档 - 架构和技术文档
• API 测试 - API 测试指南

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

cd backend
python manage.py runserver

Running Frontend

cd frontend
npm start

Running Tests

Backend:

cd backend
python manage.py test

Frontend:

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