新余 网站建站 设计 公司外贸网站推广策划

Django图片管理系统

下面是一个完整的Django图片管理系统Demo，使用Django 5.2.3实现。这个系统允许用户上传、浏览、搜索和删除图片。

系统功能

1.  图片上传（支持拖放）

2.  图片浏览（网格视图）

3.  图片搜索（按标题）

4.  图片删除

5.  响应式设计（适配移动设备）

实现思路

1. 使用Django的模型存储图片信息

2. 使用Django的表单处理图片上传

3. 使用Bootstrap 5进行UI设计

4. 使用JavaScript增强用户体验（拖放上传、即时搜索）

完整代码实现

 1. 项目结构

image_manager/
├── images/
│   ├── migrations/
│   ├── templates/
│   │   └── images/
│   │       ├── base.html
│   │       ├── image_list.html
│   │       └── upload.html
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── models.py
│   ├── urls.py
│   └── views.py
├── image_manager/
│   ├── settings.py
│   ├── urls.py
│   └── ...
└── manage.py
 

### 2. 模型定义 (images/models.py)

```python
from django.db import models

class Image(models.Model):
    title = models.CharField(max_length=100, verbose_name="图片标题")
    image = models.ImageField(upload_to='images/', verbose_name="图片文件")
    uploaded_at = models.DateTimeField(auto_now_add=True, verbose_name="上传时间")
    
    def __str__(self):
        return self.title
```

### 3. 表单定义 (images/forms.py)

```python
from django import forms
from .models import Image

class ImageUploadForm(forms.ModelForm):
    class Meta:
        model = Image
        fields = ['title', 'image']
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control', 'placeholder&