经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » Django » 查看文章
探索Django:从项目创建到图片上传的全方位指南
来源:cnblogs  作者:努力的小雨  时间:2024/5/13 13:47:14  对本文有异议

Django是什么

Django 是一个流行的 Python Web 开发框架,它提供了一系列工具和库,用于帮助开发人员构建高效、可扩展的 Web 应用程序。Django 的目标是让开发者能够以快速和简单的方式构建复杂的 Web 应用,通过提供许多预构建的组件和功能,如 ORM(对象关系映射)、表单处理、认证系统、管理界面等,从而降低了开发工作的复杂性。

今天,我们将会以一个示例为例,来演示关于图像上传的操作。

项目创建

前提条件

要顺利完成本教程,你需要具备以下条件:

  1. 扎实的 Python 和 Django 基础知识,包括但不限于 Django 的模型、视图、模板以及表单等方面的理解。
  2. 一个代码编辑器,比如 Visual Studio Code,它能够提供丰富的编辑功能和便捷的开发环境,有助于你更高效地编写和调试代码。

环境配置

首先,要在新项目中执行以下命令:

  1. pip install django

安装完成后,我们现在开始执行以下步骤,以创建一个名为 xiaoYuGallery 的 Django 项目:

  1. django-admin startproject xiaoYuGallery
  2. cd xiaoYuGallery
  3. py manage.py startapp demo

admin端图像处理

现在,我们需要打开位于项目目录下的 settings.py 文件,并在已安装应用程序列表 (INSTALLED_APPS) 中进行注册,以便将我们的 demo 应用程序纳入其中。请参考下面的示例代码:

  1. INSTALLED_APPS = [
  2. 'django.contrib.admin',
  3. 'django.contrib.auth',
  4. 'django.contrib.contenttypes',
  5. 'django.contrib.sessions',
  6. 'django.contrib.messages',
  7. 'django.contrib.staticfiles',
  8. 'demo', # 这是我们新增的应用程序
  9. ]

确保在列表中添加 demo 这一行,并且位于其他 Django 内置应用程序的下方,这样可以确保我们的应用程序能够正确加载和运行。

当我们配置Django时,我们必须明确指定媒体文件的URL和存储位置。这可以通过设置MEDIA_URL和MEDIA_ROOT来完成。因此,在settings.py文件中,我们需要添加以下内容:

  1. import os
  2. MEDIA_URL = '/media/'
  3. MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

为了确保用户在开发过程中能够上传图片,我们需要在项目级的urls.py文件中进行相应设置,以便进行测试。

  1. from django.contrib import admin
  2. from django.urls import path
  3. from django.conf import settings
  4. from django.conf.urls.static import static
  5. urlpatterns = [
  6. path('admin/', admin.site.urls),
  7. ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

在models.py文件中,使用Django框架中的模型类来定义一个名为Image的模型。在这个模型中,我们定义了两个字段:

  1. title:这是一个CharField字段,用于存储图片的标题。max_length参数指定了该字段的最大长度为20个字符。
  2. photo:这是一个ImageField字段,用于存储图片文件。upload_to参数指定了上传图片时的存储路径,这里设置为'pics',意味着上传的图片将会保存在项目中的'pics'文件夹下。

这个模型将允许我们在数据库中存储图片的标题和相应的图片文件,并且可以通过Django的ORM(对象关系映射)进行管理和操作。

  1. from django.db import models
  2. class Image(models.Model):
  3. title = models.CharField(max_length=20)
  4. photo = models.ImageField(upload_to='pics')

在admin.py 中我们定义了一个名为imageAdmin的类,它继承自admin.ModelAdmin。在这个类中,我们可以自定义模型在后台管理界面中的显示方式。在这个例子中,我们通过设置list_display属性,指定了在Image模型的列表页面中显示哪些字段。在这里,我们希望显示图片的标题和对应的图片文件。

最后,我们使用admin.site.register()函数将Image模型和imageAdmin类关联起来,这样就可以在后台管理界面中对Image模型进行管理,并且按照我们定义的方式进行显示。

  1. from django.contrib import admin
  2. from .models import Image
  3. class imageAdmin(admin.ModelAdmin):
  4. list_display = ["title", "photo"]
  5. admin.site.register(Image, imageAdmin)

在views.py ,我们添加这段代码,它是一个Django视图函数,用于处理用户请求并返回相应的网页内容。

  1. from django.shortcuts import render
  2. from .models import Image
  3. # Create your views here.
  4. def index(request):
  5. data = Image.objects.all()
  6. context = {
  7. 'data' : data
  8. }
  9. return render(request,"display.html", context)
  1. def index(request):: 这是一个名为index的视图函数,它接收一个request对象作为参数,该对象包含了用户请求的所有信息。
  2. data = Image.objects.all(): 这一行代码通过Image模型的objects管理器调用all()方法,从数据库中获取了所有的Image对象,并将它们存储在名为data的变量中。
  3. context = {'data': data}: 这行代码创建了一个字典context,其中键为'data',值为之前获取的所有Image对象。这个字典将被传递给模板,以便在HTML页面中使用这些数据。
  4. return render(request, "display.html", context): 最后一行代码调用了render函数,它接收了三个参数:request对象、要渲染的HTML模板文件名(在这里是"display.html"),以及要传递给模板的上下文数据。该函数将使用指定的模板和上下文数据渲染HTML页面,并将渲染后的页面作为HTTP响应返回给用户的浏览器。

在display.html 里面渲染页面

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <!-- Required meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- Bootstrap CSS -->
  8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  9. <title>Demo Gallery</title>
  10. </head>
  11. <body class="container" style="padding-top: 5%;">
  12. <div class="row">
  13. {% for x in data %}
  14. <div class="col-md-4">
  15. <div class="card mb-4">
  16. <img src="{{ x.photo.url }}" class="card-img-top" alt="{{ x.title }}">
  17. <div class="card-body">
  18. <h5 class="card-title">{{ x.title }}</h5>
  19. </div>
  20. </div>
  21. </div>
  22. {% endfor %}
  23. </div>
  24. <!-- Bootstrap Bundle with Popper -->
  25. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  26. </body>
  27. </html>

urls.py中配置URLs

  1. path('admin/', admin.site.urls),:将 admin 应用的 URL 映射到 Django 自带的管理页面。这使得你可以通过 yourdomain.com/admin/ 访问管理员界面。
  2. path('', include('demo.urls')):将根 URL 映射到名为 demo 的应用程序的 URL 配置。这意味着所有根 URL 请求(例如 yourdomain.com/)将被传递给 demo 应用程序的 URL 配置以进一步处理。
  1. from django.contrib import admin
  2. from django.urls import path, include
  3. from django.conf import settings
  4. from django.conf.urls.static import static
  5. urlpatterns = [
  6. path('admin/', admin.site.urls),
  7. path('', include('demo.urls')) # new
  8. ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

显示图片

执行一下进行数据库迁移的命令:

py manage.py makemigrations:这个命令告诉 Django 你对模型进行了更改,并且需要将这些更改记录下来以便在数据库中进行更新。

py manage.py migrate:Django 会读取之前生成的迁移文件,并根据这些文件中的指令,在数据库中执行相应的更改,例如创建新的表、修改表结构或添加新的字段等。

  1. py manage.py createsuperuser

当你运行这个命令时,Django 会提示你输入超级用户的用户名、电子邮件地址和密码。输入完毕后,Django 将会在数据库中创建一个新的超级用户,并使用你提供的信息设置其登录凭据。这个超级用户可以用来登录到 Django 的后台管理界面,进行网站管理和维护工作。

启动服务,一旦服务器启动,你就可以在浏览器中访问你的 Django 项目,并在开发环境中进行测试和调试。默认情况下,开发服务器会监听本地主机的 8000 端口,你可以通过在浏览器中输入 http://127.0.0.1:8000/http://localhost:8000/ 来访问你的网站。

  1. py manage.py runserver

看下管理后台效果,点击add也会进行添加图片。

image

用户图片上传

在这个示例中,我们将创建一个名为 forms.py 的文件,并在其中定义一个用于处理上传表单的类,将其与我们的 Image 模型相关联。这样做可以确保我们的代码结构清晰,易于维护和扩展。

  1. class Meta::这是一个内部类,用于提供关于该表单的元数据。在这个内部类中,我们可以指定与表单相关的元信息。
  2. model = Image:在 Meta 类中,这行代码指定了表单对应的模型是 Image。这意味着表单将基于 Image 模型生成字段。
  3. fields = ['title', 'photo']:这行代码指定了表单中应该显示的字段。在这个例子中,表单中将包含名为 'title' 和 'photo' 的字段,这与 Image 模型中定义的字段相对应。
  1. from django import forms
  2. from .models import Image
  3. class ImageUploadForm(forms.ModelForm):
  4. class Meta:
  5. model = Image
  6. fields = ['title', 'photo']

在您的项目的templates文件夹中,您可以添加一个名为upload.html的文件。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Image Upload</title>
  8. <style>
  9. body {
  10. font-family: Arial, sans-serif;
  11. margin: 0;
  12. padding: 0;
  13. background-color: #f4f4f4;
  14. display: flex;
  15. justify-content: center;
  16. align-items: center;
  17. height: 100vh;
  18. }
  19. form {
  20. background-color: #fff;
  21. padding: 20px;
  22. border-radius: 8px;
  23. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  24. width: 300px;
  25. }
  26. input[type="file"] {
  27. margin-bottom: 10px;
  28. }
  29. button[type="submit"] {
  30. background-color: #007bff;
  31. color: #fff;
  32. border: none;
  33. padding: 10px 20px;
  34. border-radius: 5px;
  35. cursor: pointer;
  36. transition: background-color 0.3s ease;
  37. }
  38. button[type="submit"]:hover {
  39. background-color: #0056b3;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <form method="POST" enctype="multipart/form-data">
  45. {% csrf_token %}
  46. {{ form.as_p }}
  47. <button type="submit"> Upload Image </button>
  48. </form>
  49. </body>
  50. </html>

在views.py更新下代码

  1. def uploadView(request):
  2. if request.method == 'POST':
  3. form = ImageUploadForm(request.POST, request.FILES)#如果请求方法为 POST,这一行创建一个 `ImageUploadForm` 的实例,通过将 `request.POST` `request.FILES` 传递给它来填充表单数据。`request.POST` 包含用户通过 POST 方法提交的表单数据,而 `request.FILES` 包含用户上传的文件数据。
  4. if form.is_valid(): #这一行检查表单数据是否有效,即是否通过了表单的验证。
  5. form.save()#如果表单数据有效,这一行将保存表单数据到数据库中。
  6. return redirect('index')
  7. else:
  8. form = ImageUploadForm()
  9. return render(request, 'upload.html', {'form': form})

demo文件中更新下urls.py

  1. from django.urls import path
  2. from .import views
  3. urlpatterns = [
  4. path('', views.index, name='index'),
  5. path('upload_image/', views.uploadView, name= 'upload_image')
  6. ]

我们来看下效果:

image

首页效果:

image

结语

通过本文,我们深入了解了 Django 框架的一些基本概念和使用方法,以及如何利用 Django 构建一个简单的图像上传应用程序。从项目创建到环境配置,再到 admin 端图像处理和用户图片上传,我们逐步学习了如何利用 Django 提供的功能快速搭建 Web 应用。无论是对于初学者还是有一定经验的开发者,掌握 Django 都能够帮助我们更高效地开发出高质量的 Web 应用。希望本文能够为您提供一些帮助和启发,让您更加深入地了解 Django,并能够在实际项目中运用所学知识。


我是努力的小雨,一名 Java 服务端码农,潜心研究着 AI 技术的奥秘。我热爱技术交流与分享,对开源社区充满热情。身兼掘金优秀作者、腾讯云内容共创官、阿里云专家博主、华为云云享专家等多重身份。

?? 目前,我的探索重点在于 AI Agent 智能体应用,我对其充满好奇,并不断探索着其潜力与可能性。如果你也对此领域充满热情,欢迎与我交流分享,让我们共同探索未知的领域!

?? 我将不吝分享我在技术道路上的个人探索与经验,希望能为你的学习与成长带来一些启发与帮助。

?? 欢迎关注努力的小雨!??

原文链接:https://www.cnblogs.com/guoxiaoyu/p/18187177

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号