Django图片管理系统
Django图片管理系统
下面是一个完整的Django图片管理系统Demo，使用Django 5.2.3实现。这个系统允许用户上传、浏览、搜索和删除图片。
系统功能
-
图片上传（支持拖放）
-
图片浏览（网格视图）
-
图片搜索（按标题）
-
图片删除
-
响应式设计（适配移动设备）
实现思路
-
使用Django的模型存储图片信息
-
使用Django的表单处理图片上传
-
使用Bootstrap 5进行UI设计
-
使用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&