确保你的开发环境满足以下要求:操作系统为Windows 10/11或Ubuntu 20.04 LTS及以上,安装Node.js 18.x LTS版本和Python 3.10+。我们将使用前后端分离架构,前端采用Vue 3 + TypeScript,后端采用Django REST framework。
打开命令行工具,执行以下命令创建前端项目:
npm create vue@latest archive-admin-frontend
在创建向导中,依次选择:TypeScript、Vue Router、Pinia、ESLint。创建完成后,进入项目目录并安装UI库和必要依赖:
```bash cd archive-admin-frontend npm install element-plus @element-plus/icons-vue npm install axios npm install dayjs ```
创建并激活Python虚拟环境,然后安装Django及相关依赖:
```bash python -m venv venv Windows: venv\Scripts\activate Linux/Mac: source venv/bin/activate pip install django==4.2 djangorestframework==3.14 django-cors-headers pip install pillow python-magic ```
创建Django项目和应用:
```bash django-admin startproject archive_backend cd archive_backend python manage.py startapp archive ```
本系统核心是档案管理,需要设计以下数据模型:征收项目、档案卷宗、文件材料、借阅记录。使用Django的ORM定义模型。
编辑archive/models.py文件,添加以下模型代码:
```python from django.db import models from django.contrib.auth.models import User class Project(models.Model): """征收项目""" project_code = models.CharField(max_length=50, unique=True, verbose_name='项目编号') project_name = models.CharField(max_length=200, verbose_name='项目名称') start_date = models.DateField(verbose_name='开始日期') end_date = models.DateField(verbose_name='结束日期', null=True, blank=True) status_choices = [ ('ongoing', '进行中'), ('completed', '已完成'), ('archived', '已归档'), ] status = models.CharField(max_length=20, choices=status_choices, default='ongoing') created_at = models.DateTimeField(auto_now_add=True) class ArchiveBox(models.Model): """档案盒""" box_number = models.CharField(max_length=50, unique=True, verbose_name='盒号') project = models.ForeignKey(Project, on_delete=models.CASCADE, related_name='boxes') location = models.CharField(max_length=100, verbose_name='存放位置') capacity = models.IntegerField(default=50, verbose_name='容量') current_count = models.IntegerField(default=0, verbose_name='当前文件数') created_at = models.DateTimeField(auto_now_add) class Document(models.Model): """文件材料""" doc_number = models.CharField(max_length=50, unique=True, verbose_name='文号') title = models.CharField(max_length=500, verbose_name='文件标题') archive_box = models.ForeignKey(ArchiveBox, on_delete=models.CASCADE, related_name='documents') file_type_choices = [ ('notice', '征收决定书'), ('assessment', '评估报告'), ('agreement', '补偿协议'), ('payment', '支付凭证'), ('other', '其他材料'), ] file_type = models.CharField(max_length=50, choices=file_type_choices) file_path = models.FileField(upload_to='documents/%Y/%m/%d/', verbose_name='文件路径') uploader = models.ForeignKey(User, on_delete=models.SET_NULL, null=True) upload_time = models.DateTimeField(auto_now_add=True) keywords = models.CharField(max_length=500, blank=True, verbose_name='关键词') class BorrowRecord(models.Model): """借阅记录""" document = models.ForeignKey(Document, on_delete=models.CASCADE, related_name='borrow_records') borrower = models.ForeignKey(User, on_delete=models.CASCADE, related_name='borrow_records') borrow_date = models.DateField(auto_now_add=True) expected_return = models.DateField(verbose_name='应还日期') actual_return = models.DateField(null=True, blank=True, verbose_name='实际归还') purpose = models.TextField(verbose_name='借阅用途') ```
执行以下命令创建数据库表:
```bash python manage.py makemigrations archive python manage.py migrate ```
基于Django REST framework创建RESTful API,提供完整的CRUD操作。
在archive应用下创建serializers.py文件:
```python from rest_framework import serializers from .models import Project, ArchiveBox, Document, BorrowRecord class ProjectSerializer(serializers.ModelSerializer): class Meta: model = Project fields = '__all__' class ArchiveBoxSerializer(serializers.ModelSerializer): project_name = serializers.CharField(source='project.project_name', read_only=True) class Meta: model = ArchiveBox fields = '__all__' class DocumentSerializer(serializers.ModelSerializer): project_name = serializers.CharField(source='archive_box.project.project_name', read_only=True) box_number = serializers.CharField(source='archive_box.box_number', read_only=True) class Meta: model = Document fields = '__all__' read_only_fields = ('uploader', 'upload_time') class BorrowRecordSerializer(serializers.ModelSerializer): document_title = serializers.CharField(source='document.title', read_only=True) borrower_name = serializers.CharField(source='borrower.username', read_only=True) class Meta: model = BorrowRecord fields = '__all__' ```

编辑archive/views.py文件:
```python from rest_framework import viewsets, filters, status from rest_framework.decorators import action from rest_framework.response import Response from django_filters.rest_framework import DjangoFilterBackend from .models import Project, ArchiveBox, Document, BorrowRecord from .serializers import ProjectSerializer, ArchiveBoxSerializer, DocumentSerializer, BorrowRecordSerializer class ProjectViewSet(viewsets.ModelViewSet): queryset = Project.objects.all() serializer_class = ProjectSerializer filter_backends = [DjangoFilterBackend, filters.SearchFilter] filterset_fields = ['status'] search_fields = ['project_code', 'project_name'] class ArchiveBoxViewSet(viewsets.ModelViewSet): queryset = ArchiveBox.objects.all() serializer_class = ArchiveBoxSerializer filter_backends = [DjangoFilterBackend] filterset_fields = ['project', 'location'] class DocumentViewSet(viewsets.ModelViewSet): queryset = Document.objects.all() serializer_class = DocumentSerializer filter_backends = [DjangoFilterBackend, filters.SearchFilter] filterset_fields = ['file_type', 'archive_box'] search_fields = ['doc_number', 'title', 'keywords'] def perform_create(self, serializer): serializer.save(uploader=self.request.user) class BorrowRecordViewSet(viewsets.ModelViewSet): queryset = BorrowRecord.objects.all() serializer_class = BorrowRecordSerializer @action(detail=True, methods=['post']) def return_document(self, request, pk=None): record = self.get_object() record.actual_return = request.data.get('actual_return') record.save() return Response({'status': 'document returned'}) ```
在archive应用下创建urls.py文件:
```python from django.urls import path, include from rest_framework.routers import DefaultRouter from . import views router = DefaultRouter() router.register(r'projects', views.ProjectViewSet) router.register(r'boxes', views.ArchiveBoxViewSet) router.register(r'documents', views.DocumentViewSet) router.register(r'borrow-records', views.BorrowRecordViewSet) urlpatterns = [ path('', include(router.urls)), ] ```
在主项目的urls.py中包含这些路由:
```python 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('archive.urls')), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ```
前端使用Vue 3组合式API,实现档案管理的核心功能页面。
创建src/utils/request.ts文件:
```typescript import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:8000/api/', timeout: 10000 }) request.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) export default request ```
创建src/views/ArchiveManage.vue文件,实现档案列表和检索功能:
```vue
档案管理系统的核心功能之一是文件上传,需要支持多种文件格式和批量上传。
在settings.py中添加媒体文件配置:
```python import os MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 文件上传大小限制(50MB) DATA_UPLOAD_MAX_MEMORY_SIZE = 52428800 FILE_UPLOAD_MAX_MEMORY_SIZE = 52428800 ```
修改Document视图集,添加上传接口:
```python class DocumentViewSet(viewsets.ModelViewSet): ... 原有代码 ... @action(detail=False, methods=['post']) def bulk_upload(self, request): files = request.FILES.getlist('files') archive_box_id = request.data.get('archive_box') results = [] for file in files: document = Document.objects.create( doc_number=f"DOC-{int(time.time())}-{len(results)}", title=file.name, archive_box_id=archive_box_id, file_type='other', file_path=file, uploader=request.user ) results.append({ 'id': document.id, 'title': document.title, 'status': 'success' }) return Response({'results': results}) ```
创建src/components/FileUpload.vue组件:
```vue