Django是什麼
Django 是一個流行的 Python Web 開發框架，它提供了一系列工具和庫，用於幫助開發人員構建高效、可擴充套件的 Web 應用程式。Django 的目標是讓開發者能夠以快速和簡單的方式構建複雜的 Web 應用，透過提供許多預構建的元件和功能，如 ORM（物件關係對映）、表單處理、認證系統、管理介面等，從而降低了開發工作的複雜性。
今天，我們將會以一個示例為例，來演示關於影像上傳的操作。
專案建立
前提條件
要順利完成本教程，你需要具備以下條件：
- 紮實的 Python 和 Django 基礎知識，包括但不限於 Django 的模型、檢視、模板以及表單等方面的理解。
- 一個程式碼編輯器，比如 Visual Studio Code，它能夠提供豐富的編輯功能和便捷的開發環境，有助於你更高效地編寫和除錯程式碼。
環境配置
首先，要在新專案中執行以下命令：
pip install django
安裝完成後，我們現在開始執行以下步驟，以建立一個名為 xiaoYuGallery 的 Django 專案：
django-admin startproject xiaoYuGallery
cd xiaoYuGallery
py manage.py startapp demo
admin端影像處理
現在，我們需要開啟位於專案目錄下的 settings.py 檔案，並在已安裝應用程式列表 (INSTALLED_APPS) 中進行註冊，以便將我們的 demo 應用程式納入其中。請參考下面的示例程式碼：
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'demo', # 這是我們新增的應用程式
]
確保在列表中新增 demo 這一行，並且位於其他 Django 內建應用程式的下方，這樣可以確保我們的應用程式能夠正確載入和執行。
當我們配置Django時，我們必須明確指定媒體檔案的URL和儲存位置。這可以透過設定MEDIA_URL和MEDIA_ROOT來完成。因此，在settings.py檔案中，我們需要新增以下內容：
import os
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
為了確保使用者在開發過程中能夠上傳圖片，我們需要在專案級的urls.py檔案中進行相應設定，以便進行測試。
from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
在models.py檔案中，使用Django框架中的模型類來定義一個名為Image的模型。在這個模型中，我們定義了兩個欄位：
title：這是一個CharField欄位，用於儲存圖片的標題。max_length引數指定了該欄位的最大長度為20個字元。photo：這是一個ImageField欄位，用於儲存圖片檔案。upload_to引數指定了上傳圖片時的儲存路徑，這裡設定為'pics'，意味著上傳的圖片將會儲存在專案中的'pics'資料夾下。
這個模型將允許我們在資料庫中儲存圖片的標題和相應的圖片檔案，並且可以透過Django的ORM（物件關係對映）進行管理和操作。
from django.db import models
class Image(models.Model):
title = models.CharField(max_length=20)
photo = models.ImageField(upload_to='pics')
在admin.py 中我們定義了一個名為imageAdmin的類，它繼承自admin.ModelAdmin。在這個類中，我們可以自定義模型在後臺管理介面中的顯示方式。在這個例子中，我們透過設定list_display屬性，指定了在Image模型的列表頁面中顯示哪些欄位。在這裡，我們希望顯示圖片的標題和對應的圖片檔案。
最後，我們使用admin.site.register()函式將Image模型和imageAdmin類關聯起來，這樣就可以在後臺管理介面中對Image模型進行管理，並且按照我們定義的方式進行顯示。
from django.contrib import admin
from .models import Image
class imageAdmin(admin.ModelAdmin):
list_display = ["title", "photo"]
admin.site.register(Image, imageAdmin)
在views.py ，我們新增這段程式碼，它是一個Django檢視函式，用於處理使用者請求並返回相應的網頁內容。
from django.shortcuts import render
from .models import Image
# Create your views here.
def index(request):
data = Image.objects.all()
context = {
'data' : data
}
return render(request,"display.html", context)
def index(request):: 這是一個名為index的檢視函式，它接收一個request物件作為引數，該物件包含了使用者請求的所有資訊。data = Image.objects.all(): 這一行程式碼透過Image模型的objects管理器呼叫all()方法，從資料庫中獲取了所有的Image物件，並將它們儲存在名為data的變數中。context = {'data': data}: 這行程式碼建立了一個字典context，其中鍵為'data'，值為之前獲取的所有Image物件。這個字典將被傳遞給模板，以便在HTML頁面中使用這些資料。return render(request, "display.html", context): 最後一行程式碼呼叫了render函式，它接收了三個引數：request物件、要渲染的HTML模板檔名（在這裡是"display.html"），以及要傳遞給模板的上下文資料。該函式將使用指定的模板和上下文資料渲染HTML頁面，並將渲染後的頁面作為HTTP響應返回給使用者的瀏覽器。
在display.html 裡面渲染頁面
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Demo Gallery</title>
</head>
<body class="container" style="padding-top: 5%;">
<div class="row">
{% for x in data %}
<div class="col-md-4">
<div class="card mb-4">
<img src="{{ x.photo.url }}" class="card-img-top" alt="{{ x.title }}">
<div class="card-body">
<h5 class="card-title">{{ x.title }}</h5>
</div>
</div>
</div>
{% endfor %}
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
urls.py中配置URLs
path('admin/', admin.site.urls),：將admin應用的 URL 對映到 Django 自帶的管理頁面。這使得你可以透過yourdomain.com/admin/訪問管理員介面。path('', include('demo.urls'))：將根 URL 對映到名為demo的應用程式的 URL 配置。這意味著所有根 URL 請求（例如yourdomain.com/）將被傳遞給demo應用程式的 URL 配置以進一步處理。
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('', include('demo.urls')) # new
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
顯示圖片
執行一下進行資料庫遷移的命令：
py manage.py makemigrations：這個命令告訴 Django 你對模型進行了更改，並且需要將這些更改記錄下來以便在資料庫中進行更新。
py manage.py migrate：Django 會讀取之前生成的遷移檔案，並根據這些檔案中的指令，在資料庫中執行相應的更改，例如建立新的表、修改表結構或新增新的欄位等。
py manage.py createsuperuser
當你執行這個命令時，Django 會提示你輸入超級使用者的使用者名稱、電子郵件地址和密碼。輸入完畢後，Django 將會在資料庫中建立一個新的超級使用者，並使用你提供的資訊設定其登入憑據。這個超級使用者可以用來登入到 Django 的後臺管理介面，進行網站管理和維護工作。
啟動服務，一旦伺服器啟動，你就可以在瀏覽器中訪問你的 Django 專案，並在開發環境中進行測試和除錯。預設情況下，開發伺服器會監聽本地主機的 8000 埠，你可以透過在瀏覽器中輸入 http://127.0.0.1:8000/ 或 http://localhost:8000/ 來訪問你的網站。
py manage.py runserver
看下管理後臺效果，點選add也會進行新增圖片。
使用者圖片上傳
在這個示例中，我們將建立一個名為 forms.py 的檔案，並在其中定義一個用於處理上傳表單的類，將其與我們的 Image 模型相關聯。這樣做可以確保我們的程式碼結構清晰，易於維護和擴充套件。
class Meta:：這是一個內部類，用於提供關於該表單的後設資料。在這個內部類中，我們可以指定與表單相關的元資訊。model = Image：在 Meta 類中，這行程式碼指定了表單對應的模型是 Image。這意味著表單將基於 Image 模型生成欄位。fields = ['title', 'photo']：這行程式碼指定了表單中應該顯示的欄位。在這個例子中，表單中將包含名為 'title' 和 'photo' 的欄位，這與 Image 模型中定義的欄位相對應。
from django import forms
from .models import Image
class ImageUploadForm(forms.ModelForm):
class Meta:
model = Image
fields = ['title', 'photo']
在您的專案的templates資料夾中，您可以新增一個名為upload.html的檔案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Upload</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
}
input[type="file"] {
margin-bottom: 10px;
}
button[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit"> Upload Image </button>
</form>
</body>
</html>
在views.py更新下程式碼
def uploadView(request):
if request.method == 'POST':
form = ImageUploadForm(request.POST, request.FILES)#如果請求方法為 POST，這一行建立一個 `ImageUploadForm` 的例項，透過將 `request.POST` 和 `request.FILES` 傳遞給它來填充表單資料。`request.POST` 包含使用者透過 POST 方法提交的表單資料，而 `request.FILES` 包含使用者上傳的檔案資料。
if form.is_valid(): #這一行檢查表單資料是否有效，即是否透過了表單的驗證。
form.save()#如果表單資料有效，這一行將儲存表單資料到資料庫中。
return redirect('index')
else:
form = ImageUploadForm()
return render(request, 'upload.html', {'form': form})
demo檔案中更新下urls.py
from django.urls import path
from .import views
urlpatterns = [
path('', views.index, name='index'),
path('upload_image/', views.uploadView, name= 'upload_image')
]
我們來看下效果：
首頁效果：
結語
透過本文，我們深入瞭解了 Django 框架的一些基本概念和使用方法，以及如何利用 Django 構建一個簡單的影像上傳應用程式。從專案建立到環境配置，再到 admin 端影像處理和使用者圖片上傳，我們逐步學習瞭如何利用 Django 提供的功能快速搭建 Web 應用。無論是對於初學者還是有一定經驗的開發者，掌握 Django 都能夠幫助我們更高效地開發出高質量的 Web 應用。希望本文能夠為您提供一些幫助和啟發，讓您更加深入地瞭解 Django，並能夠在實際專案中運用所學知識。
我是努力的小雨，一名 Java 服務端碼農，潛心研究著 AI 技術的奧秘。我熱愛技術交流與分享，對開源社群充滿熱情。身兼掘金優秀作者、騰訊雲內容共創官、阿里雲專家博主、華為云云享專家等多重身份。
🚀 目前，我的探索重點在於 AI Agent 智慧體應用，我對其充滿好奇，並不斷探索著其潛力與可能性。如果你也對此領域充滿熱情，歡迎與我交流分享，讓我們共同探索未知的領域！
💡 我將不吝分享我在技術道路上的個人探索與經驗，希望能為你的學習與成長帶來一些啟發與幫助。
🌟 歡迎關注努力的小雨！🌟