README.md · xiyg/python_django_react_redux_axios_antd_simpleSystem

# python_django_react_redux_axios_antd_simpleSystem
下面是一个完整的实现方案，用于构建一个基于 Python (Django)、React、Redux、Axios、MySQL 和 Ant Design 的管理系统，包含登录/注册功能，以及学校、班级、学生的增删改查和学生信息的文件上传功能。

### 1. 后端（Django）
#### 1.1 安装依赖
安装 Django 和相关库：

`pip install django djangorestframework mysqlclient django-cors-headers`

#### 1.2 创建项目和应用
创建 Django 项目和应用：

- `django-admin startproject school_management`
- `cd school_management`
- `django-admin startapp api`

#### 1.3 配置 settings.py
配置数据库和跨域请求：

```
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'your_database_name',
        'USER': 'your_username',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
    'api',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
```

#### 1.4 创建模型
在 api/models.py 中定义学校、班级、学生和文件上传模型：

```

from django.db import models
from django.contrib.auth.models import User

class School(models.Model):
    name = models.CharField(max_length=100)

class Class(models.Model):
    name = models.CharField(max_length=100)
    school = models.ForeignKey(School, related_name='classes', on_delete=models.CASCADE)

class Student(models.Model):
    name = models.CharField(max_length=100)
    age = models.IntegerField()
    class_enrolled = models.ForeignKey(Class, related_name='students', on_delete=models.CASCADE)
    info_file = models.FileField(upload_to='uploads/', null=True, blank=True)

class FileUpload(models.Model):
    file = models.FileField(upload_to='uploads/')
```

#### 1.5 创建序列化器
在 api/serializers.py 中创建相应的序列化器：

```

from rest_framework import serializers
from .models import School, Class, Student

class SchoolSerializer(serializers.ModelSerializer):
    class Meta:
        model = School
        fields = '__all__'

class ClassSerializer(serializers.ModelSerializer):
    class Meta:
        model = Class
        fields = '__all__'

class StudentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Student
        fields = '__all__'
```

#### 1.6 创建视图
在 api/views.py 中实现增删改查的视图：

```
from rest_framework import viewsets
from .models import School, Class, Student
from .serializers import SchoolSerializer, ClassSerializer, StudentSerializer

class SchoolViewSet(viewsets.ModelViewSet):
    queryset = School.objects.all()
    serializer_class = SchoolSerializer

class ClassViewSet(viewsets.ModelViewSet):
    queryset = Class.objects.all()
    serializer_class = ClassSerializer

class StudentViewSet(viewsets.ModelViewSet):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer
```
#### 1.7 配置路由
在 api/urls.py 中设置路由：

```
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import SchoolViewSet, ClassViewSet, StudentViewSet

router = DefaultRouter()
router.register(r'schools', SchoolViewSet)
router.register(r'classes', ClassViewSet)
router.register(r'students', StudentViewSet)

urlpatterns = [
    path('', include(router.urls)),
]
```

在主 URL 配置 urls.py 中包含 API 路由：

```
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('api.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

### 2. 前端（React）
#### 2.1 创建 React 项目
使用 Create React App 创建项目：

- `npx create-react-app school-management`
- `cd school-management`

#### 2.2 安装依赖
`npm install axios redux react-redux antd react-router-dom`

#### 2.3 配置 Redux
创建 Redux store，例如在 src/store.js 中：

```
import { createStore } from 'redux';

const initialState = {
    schools: [],
    classes: [],
    students: [],
    user: null
};

const store = createStore(reducer);
export default store;
```

在 src/index.js 中提供这个 store：

```
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

```

#### 2.4 创建认证组件
创建登录和注册组件：

```
import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import axios from 'axios';

const Auth = () => {
    const [isLogin, setIsLogin] = useState(true);

return (
        <Form onFinish={handleSubmit}>
            <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
                <Input placeholder="用户名" />
            </Form.Item>
            <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
                <Input.Password placeholder="密码" />
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit">{isLogin ? '登录' : '注册'}</Button>
                <Button type="link" onClick={() => setIsLogin(!isLogin)}>
                    {isLogin ? '没有账户? 立即注册' : '已有账户? 立即登录'}
                </Button>
            </Form.Item>
        </Form>
    );
};

export default Auth;
```

#### 2.5 创建管理组件
例如，学校管理组件：

```
import React, { useEffect } from 'react';
import { Table, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import axios from 'axios';

const SchoolManagement = () => {
    const dispatch = useDispatch();
    const schools = useSelector(state => state.schools);

useEffect(() => {
        const fetchSchools = async () => {
            const response = await axios.get('/api/schools/');
            dispatch({ type: 'SET_SCHOOLS', payload: response.data });
        };
        fetchSchools();
    }, [dispatch]);

const columns = [
        { title: '学校名称', dataIndex: 'name', key: 'name' },
        {
            title: '操作',
            render: (_, record) => (
                <Button type="link" onClick={() => handleDelete(record.id)}>删除</Button>
            ),
        },
    ];

return (
        <div>
            <h1>学校管理</h1>
            <Table dataSource={schools} columns={columns} rowKey="id" />
            <Button type="primary">添加学校</Button>
        </div>
    );
};

export default SchoolManagement;
```

#### 2.6 班级和学生管理组件
类似于学校管理，班级和学生管理组件可以重复此过程进行编写。

#### 2.7 路由配置
配置路由以连接这些组件：

```
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Auth from './components/Auth';
import SchoolManagement from './components/SchoolManagement';
// 导入类和学生管理组件

const App = () => (
    <Router>
        <Switch>
            <Route path="/auth" component={Auth} />
            <Route path="/schools" component={SchoolManagement} />
            {/* 这里可以添加班级和学生管理路由 */}
            {/* <Route path="/classes" component={ClassManagement} /> */}
            {/* <Route path="/students" component={StudentManagement} /> */}
        </Switch>
    </Router>
);

export default App;
```

#### 3. 文件上传功能
在学生管理组件中实现文件上传功能：

```
import React from 'react';
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios';

return (
        <Upload
            action="/api/files/"
            onChange={handleChange}
            showUploadList={false}
        >
            <Button icon={<UploadOutlined />}>上传文件</Button>
        </Upload>
    );
};
```

#### 4. 运行项目
启动 Django 后端：

- `python manage.py migrate`
- `python manage.py runserver`

启动 React 前端：
`npm start`

### 5. 总结
以上步骤搭建了一个基于 Django 后端和 React 前端的管理系统，实现了用户登录/注册、学校、班级和学生的增删改查功能，以及学生信息文件上传功能。你可以根据需求进一步扩展应用，比如添加用户权限管理、改进界面样式等。

xiyg/python_django_react_redux_axios_antd_simpleSystem

简介

发行版

贡献者

近期动态

xiyg/python_django_react_redux_axios_antd_simpleSystem .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

xiyg/python_django_react_redux_axios_antd_simpleSystem