Django模板靜態文件處理和媒體文件處理

時間 2019-11-08

原文原文鏈接

1.Django 對css靜態文件的處理

咱們先來看Django 對css靜態文件是怎麼處理的，一塊兒來實現一下：css

第一步：首先須要在settings文件中指定靜態文件的存儲路徑，可使用Django模板引擎語法提示，如STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), )，須要注意的是這種方式必需要在 DEBUG模型下使用，也就是讓DEBUG等於True，這個是在settings.py文件中設置的；html
第二步：在static目錄中建立一個css目錄，建立一個base.css文件, 將以前的base.html頁面中的 css樣式複製進來；django

.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>

2.Django 對image靜態文件的處理

第一步：在settings文件中添加指定靜態文件的存儲路徑，也就是：；

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), )

第二步：在static目錄下建立image目錄，且拷貝圖片到目錄下；app
第三步：引入加載器staticfiles ，而後再使用導入圖片；post

< img src="{% static 'images/圖片名稱' %}" alt="說明">

3.Django 對用戶上傳圖片的處理

Django 對於文件或圖片上傳在HTML頁面中通常是經過form表單附件上傳的，通常是使用form的post提交方式，編碼類型爲："multipart/form-data"； form表單提交須要csrf token認證如：{% csrf_token %}；ui

4.圖片文件等上傳

本身選擇一個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')

5.圖片訪問

第一步：在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',

參考：https://www.9xkd.com/user/plan-view.html?id=2612520594url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。