溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了Django中怎么處理靜態文件，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
我們先來看Django 對css靜態文件是怎么處理的，一起來實現一下：
第一步：首先需要在settings文件中指定靜態文件的存儲路徑，可以使用Django模板引擎語法提示，如STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), )，需要注意的是這種方式必須要在 DEBUG模型下使用，也就是讓DEBUG等于True，這個是在settings.py文件中設置的；
第二步：在static目錄中創建一個css目錄，創建一個base.css文件, 將之前的base.html頁面中的 css樣式復制進來；
.header{
color: red;
font-size: 60px;
background-color: black;
height: 100px;
text-align: center;
line-height: 100px;
}
.content{
color: green;
font-size: 60px;
background-color: #eeeeee;
height: 800px;
text-align: center;
line-height: 800px;
}
.footer{
color: green;
font-size: 60px;
background-color: black;
height: 100px;
text-align: center;
}第三步：編輯base.html頁面，將內聯的css樣式刪除使用外鏈的css文件，可以先通過{% load staticfiles %}引入加載器staticfiles ，然后再使用模版語法<link rel="stylesheet" href="{% static 'css/base.css' %}">的形式導入外部css文件，static表示現在的路徑目錄；
<!doctype html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
# 這里使用到了Django的引擎中引用靜態文件的模板語法
# 引用的是static目錄下的css/base.css文件
<link rel="stylesheet" href="{% static 'css/base.css' %}">
</head>
<body>
<div class="header">
今天是星期幾呀
</div>
<!-- 內容變化 -->
{% block content %}
<div class="content">
<p>今天是星期一</p>
</div>
{% endblock %}
<div class="footer">
好的，謝謝
</div>
</body>
</html>第一步：在settings文件中添加指定靜態文件的存儲路徑，也就是：
STATIC_URL = '/static/' STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), )
第二步：在static目錄下創建image目錄，且拷貝圖片到目錄下；
第三步：引入加載器staticfiles ，然后再使用導入圖片；
< img src="{% static 'images/圖片名稱' %}" alt="說明">Django 對于文件或圖片上傳在HTML頁面中一般是通過form表單附件上傳的，一般是使用form的post提交方式，編碼類型為：”multipart/form-data”；
form表單提交需要csrf token認證 如：{% csrf_token %}；
自己選擇一個app，我是在usersAPP中操作的：
第一步：在usersAPP中的urls.py文件中，添加一條路由，我們需要用到一個處理請求的類，命名為ImageView，然后導入這個類，因為我們還沒有創建這個類，所以會代碼會報錯：
url(r'^images/$', ImageView.as_view(), name='image')；
第二步：在usersAPP中的views.py文件中，創建處理請求的ImageView類；
class ImageView(View):
def get(self, request):
return render(request, 'image.html')
def post(self, request):
image = request.FILES.get('upload')
image_instance = Image(name=image.name, image=image)
image_instance.save()
return render(request, 'image.html', {'msg': '圖片上傳成功'})第三步：在usersAPP中的templates目錄中，創建images.html；
<!doctype html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="{% url 'users:image' %}" method="post" enctype="multipart/form-data">
{# <input type="file" name="upload" accept="image/gif, image/jpeg, image/png, image/jpg">#}
<input type="file" name="upload">
<input type="submit" value="提交">
{% csrf_token %}
</form>
<!-- 顯示圖片上傳成功還是失敗 -->
<p> {{ msg }} </p>
</body>
</html>第四步：在usersAPP中的models.py中，創建Image Model表，用來存儲用戶上傳圖片的 路徑和圖片的名稱；
class Image(models.Model): name = models.CharField(max_length=50, verbose_name="圖片名稱") image = models.ImageField(upload_to="images/%Y/%m", verbose_name="用戶上傳的圖片", max_length=100) class Meta: verbose_name = "用戶上傳圖片" verbose_name_plural = verbose_name
第五步：在setting文件中，添加MEDIA_ROOT，指定圖片上傳的位置為項目根目錄下的 media目錄；
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
第一步：在users APP中的users 中的urls.py文件中添加：
url(r'^show_images/(?P<image_name>\w+.(png|jpg|jpeg))$', ShowImageView.as_view(), name='show_images')
第二步：在users APP中的views.py中，創建請求的ShowImageView類；
class ShowImageView(View):
def get(self, request, image_name):
# 這是一個QuerySet
images = Image.objects.filter(name=image_name)
# 取第一張圖片
image = images.first()
return render(request, 'show_image.html', {'image': image})第三步：在users APP中的templates目錄中，創建show_image.html；
<!doctype html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>用戶上傳的圖片為: </p>
<!-- <img src="../../media/{{ image.image }}" rel="{{ MEDIA_URL }}{{ image.image }}" alt="用戶上傳圖片"> -->
<img src="{{ MEDIA_URL }}{{ image.image }}" alt="用戶上傳圖片">
</body>
</html>第四步：在settings文件中，添加MEDIA_URL；
MEDIA_URL = '/media/' 'django.template.context_processors.media',
上述內容就是Django中怎么處理靜態文件，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
