实践六：在数据模型中添加图片字段-编程知识

实践六：在数据模型中添加图片字段

news/2025/4/2 4:45:50/文章来源:https://www.cnblogs.com/chrisxyz/p/18801063

实践六：在数据模型中添加图片字段

内容简介：在本节内容中，我们将增加一个team应用，team的数据模型中包括ImageField字段，用于存储用户上传的照片。ImageField不同于CharField，需要重新设置settings.py文件。最终效果如下：

1. 在实践5的基础上，新增一个team应用

python manage.py startapp team

2.将team应用添加到settings.py文件中

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','home', 'about','posts','team',#新增内容
]

3. 修改team应用中的settings.py文件，在STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]后添加新的代码如下：

STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') #新加内容
MEDIA_URL = '/media/' #新加内容

代码解释：在 Django 中，MEDIA_ROOT 和 MEDIA_URL 是用于处理上传的媒体文件（如图片、音频和视频）的重要设置。MEDIA_ROOT 用于指定媒体文件的存储路径，而 MEDIA_URL 则用于指定媒体文件在浏览器中访问的 URL。

4.修改my_project/urls.py文件

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include urlpatterns = [path('admin/', admin.site.urls),path('', include('home.urls')) ,path('about/', include('about.urls')) ,path('posts/', include('posts.urls')),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) #新加内容

代码解释：接下来，我们需要在项目的 urls.py 文件中添加相应的 URL 配置，以便 Django 可以正确处理媒体文件的访问请求。此处，我们使用了 static() 函数来配置媒体文件的 URL 和文档根路径。settings.MEDIA_URL 指定了媒体文件的 URL，settings.MEDIA_ROOT 指定了媒体文件的文档根路径

5.更新team/models.py文件，代码如下：

from django.db import models# Create your models here.
class Student(models.Model):name=models.CharField(max_length=100)major=models.CharField(max_length=50)age=models.IntegerField()location=models.CharField(max_length=300)quote=models.CharField(max_length=300)description=models.TextField()profile=models.ImageField(upload_to='photo/')def __str__(self):return self.name

代码解释：在该数据模型中，我们增加了一个ImageField用于存储照片。

6.迁移数据模型

python manage.py makemigrations team

python manage.py migrate team

7.打开team/views.py文件，创建一个StudentListView类

from django.views.generic import ListView
from .models import Studentclass StudentListView(ListView):model=Studenttemplate_name='students.html'context_object_name='students'

8.在templates中新建一个students.html文件，并添加如下代码

{% extends 'base.html' %}
{% block content %}
<h1 class="text-center">团队成员</h1>
<table class="table"><tr><th>姓名</th><th>专业</th><th></th></tr>{% for s in students %}<tr><td>{{s.name}}</td><td>{{s.major}}</td><td><a href="#" class="btn btn-primary">详情</a></td></tr>{% endfor %}
</table>{% endblock content %}

9.更改my_project项目和team中的urls.py文件

（1）在my_project/urls.py文件中添加如下代码：

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include urlpatterns = [path('admin/', admin.site.urls),path('', include('home.urls')) ,path('about/', include('about.urls')) ,path('posts/', include('posts.urls')),path('team/',include('team.urls')), #新加内容
]

（2）在team中创建urls.py文件，并添加如下代码：

from django.urls import path
from . import viewsurlpatterns=[path('',views.StudentListView.as_view(),name='students'),
]

10.修改templates/base.html文件，在导航条中增加一个“团队成员”链接

<nav class="navbar navbar-expand-sm bg-light">   <div class="container-fluid"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="{% url 'home' %}">主页</a></li><li class="nav-item"><a class="nav-link" href="{% url 'posts' %}">信息公告</a></li><!-- 新加内容 --><li class="nav-item"><a class="nav-link" href="{% url 'students' %}">团队成员</a> </li><li class="nav-item"><a class="nav-link" href="{% url 'about' %}">关于我们</a></li></ul></div></nav>

11.启动本地服务器，查看效果

python manage.py runserver

12.添加详情页，更新team/views.py文件

from django.views.generic import ListView,DetailView #新增DetailView类
from .models import Studentclass StudentListView(ListView):model=Studenttemplate_name='students.html'context_object_name='students'class StudentDetailView(DetailView): #新增内容model=Studenttemplate_name='student_detail.html'context_object_name='student'

13.在templates中增加student_detail.html文件，代码如下

{% extends 'base.html' %}
{% block content %}
<h1 class="text-center">{{student.name}}</h1>
<p class="text-center">{{student.quote}}</p>   
<hr>
<div class="row"><div class="col-4"><p class="fw-bolder">About Me</p><p>{{student.description}}</p></div><div class="col-4"><img src="{{student.profile.url}}" class="rounded-circle mx-auto d-block" alt="个人照片" width="250" height="250"></div><div class="col-4"><p class="fw-bolder">Name:</p><p>{{student.name}}</p><p class="fw-bolder">Age:</p><p>{{student.age}}</p><p class="fw-bolder">Location:</p><p>{{student.location}}</p></div>
</div> 
{% endblock content %}

14.更新team/urls.py文件

from django.urls import path
from . import viewsurlpatterns=[path('',views.StudentListView.as_view(),name='students'),path('<int:pk>/',views.StudentDetailView.as_view(),name='student_detail'), #新增内容
]

15.更新templates/students.html，更新详情的链接

{% extends 'base.html' %}
{% block content %}
<h1 class="text-center">团队成员</h1>
<table class="table"><tr><th>姓名</th><th>专业</th><th></th></tr>{% for s in students %}<tr><td>{{s.name}}</td><td>{{s.major}}</td><!-- 更新链接 --><td><a href="{% url 'student_detail' s.pk %}" class="btn btn-primary">详情</a></td></tr>{% endfor %}
</table>{% endblock content %}