中小学综合档案管理系统开发与部署全流程实操

一、技术栈选型与环境初始化

针对中小学档案管理系统，我们选择Django 4.2作为后端框架，配合Vue 3作为前端框架。Django自带的Admin后台和ORM能极大减少开发量，Vue3则提供轻量级且响应迅速的前端交互体验。本指南默认所有操作在Linux服务器或Windows PowerShell环境下执行。

1. 后端环境搭建

首先创建项目目录并初始化Python虚拟环境，确保依赖隔离。执行以下命令：

• 创建目录并激活虚拟环境：

```bash
mkdir school_archive_system
cd school_archive_system
python -m venv venv
source venv/bin/activate Windows下使用 venv\Scripts\activate
```

• 安装核心依赖包：

```bash
pip install django==4.2 djangorestframework django-cors-headers pillow
```

这里安装了Django核心、REST API框架、处理跨域的cors-headers以及处理图片附件的Pillow库。

• 初始化Django项目：

```bash
django-admin startproject backend .
python manage.py startapp archive_app
```

2. 前端端环境搭建

在项目根目录下初始化Vue项目。确保已安装Node.js (v16+)。

```bash
npm init vue@latest frontend
cd frontend
npm install
npm install axios element-plus
```

我们安装了Axios用于请求后端接口，Element Plus用于快速构建管理后台UI组件。

二、后端核心功能开发

后端主要实现档案数据的CRUD（增删改查）接口。我们将针对“学生档案”和“教师档案”进行建模。

1. 数据库模型设计

打开 backend/archive_app/models.py，写入以下代码。这里定义了学生档案表，包含基础信息及文件上传字段。

```python
from django.db import models
import os
from django.utils.timezone import now
def upload_to(instance, filename):
return os.path.join('archives', now().strftime('%Y%m%d'), filename)
class StudentArchive(models.Model):
GENDER_CHOICES = ((0, '男'), (1, '女'))
name = models.CharField(max_length=50, verbose_name='姓名')
student_id = models.CharField(max_length=20, unique=True, verbose_name='学号')
gender = models.IntegerField(choices=GENDER_CHOICES, default=0, verbose_name='性别')
admission_date = models.DateField(verbose_name='入学日期')
class_name = models.CharField(max_length=50, verbose_name='班级')
document = models.FileField(upload_to=upload_to, null=True, blank=True, verbose_name='档案附件')
created_at = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
class Meta:
db_table = 'tb_student_archive'
verbose_name = '学生档案'
verbose_name_plural = verbose_name
```

2. 接口序列化与视图

在 backend/archive_app/ 下创建 serializers.py：

```python
from rest_framework import serializers
from .models import StudentArchive
class StudentArchiveSerializer(serializers.ModelSerializer):
class Meta:
model = StudentArchive
fields = '__all__'
```

修改 backend/archive_app/views.py，使用ModelViewSet快速提供CRUD接口：

```python
from rest_framework import viewsets
from .models import StudentArchive
from .serializers import StudentArchiveSerializer
class StudentArchiveViewSet(viewsets.ModelViewSet):
queryset = StudentArchive.objects.all().order_by('-created_at')
serializer_class = StudentArchiveSerializer
```

3. 路由与跨域配置

修改 backend/backend/urls.py，注册路由：

```python
from django.contrib import admin
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from archive_app.views import StudentArchiveViewSet
router = DefaultRouter()
router.register(r'students', StudentArchiveViewSet)
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include(router.urls)),
]
```

修改 backend/backend/settings.py，进行关键配置。首先注册App：

```python
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'archive_app',
]
```

配置中间件（corsheaders必须在CommonMiddleware之前）和静态文件设置：

```python
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ALLOW_ALL_ORIGIN = True 开发环境允许所有跨域
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
```

在 backend/backend/urls.py 顶部添加静态文件服务支持（开发用）：

```python
from django.conf import settings
from django.conf.urls.static import static
... (urlpatterns定义之后)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

最后执行数据库迁移：

```bash
cd backend
python manage.py makemigrations
python manage.py migrate
```

三、前端界面与交互实现

前端使用Element Plus构建表格和表单，实现档案的展示与录入。

1. 请求封装

在 frontend/src/ 下创建 utils/request.js：

```javascript
import axios from 'axios'
const service = axios.create({
baseURL: 'http://127.0.0.1:8000/api',
timeout: 5000
})
export default service
```

2. 档案管理页面开发

修改 frontend/src/App.vue，直接编写核心逻辑：

```vue


```

注意：代码中 `` 为笔误修正，实际使用时请确保为 ``。同时需要在 frontend/src/main.js 中引入Element Plus：

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('app')
```

四、系统联调与生产部署

开发完成后，我们需要将前后端结合并部署到服务器上。

1. 本地联调测试

开启两个终端窗口，分别启动后端和前端：

```bash
终端1：后端
cd backend
python manage.py runserver
```

```bash
终端2：前端
cd frontend
npm run dev
```

访问前端控制台输出的URL（通常是 http://localhost:5173），尝试添加一条学生数据，检查列表是否刷新。若后端报错，请检查 settings.py 中的 CORS 设置。

2. 生产环境打包与部署

生产环境我们使用Nginx作为反向代理，同时处理静态文件和接口转发。

• 前端打包：

```bash
cd frontend
npm run build
```

打包完成后，frontend/dist 目录包含所有静态文件。

• 后端收集静态文件：

修改 backend/backend/settings.py，设置 DEBUG = False 并配置 ALLOWED_HOSTS = ['']。安装Gunicorn：

```bash
pip install gunicorn
```

• Nginx配置：

编辑Nginx配置文件（通常是 /etc/nginx/sites-available/school_archive）：

```nginx
server {
listen 80;
server_name your_domain_or_ip;
前端静态文件
location / {
root /path/to/school_archive_system/frontend/dist;
try_files $uri $uri/ /index.html;
} 后端API接口
location /api/ {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
} 后端媒体文件（档案附件）
location /media/ {
alias /path/to/school_archive_system/backend/media/;
}
}
```

将配置文件软链接到 sites-enabled 并重启Nginx：

```bash
sudo ln -s /etc/nginx/sites-available/school_archive /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
```

• 启动Django服务：

使用Gunicorn启动Django应用，确保它在后台持续运行：

```bash
cd backend
gunicorn --bind 127.0.0.1:8000 backend.wsgi:application
```

至此，一套完整的中小学综合档案管理系统已成功部署。通过浏览器访问服务器的IP地址，即可进行档案的录入与管理。如需实现更复杂的权限控制（如班主任只能管理本班数据），可在Django Admin中配置用户组，或在ViewSet中重写 get_queryset 方法进行过滤。