< 返回技术文档列表

Django中怎么处理静态文件

发布时间:2021-09-01 01:04:28⊙投诉举报

本篇文章为大家展示了Django中怎么处理静态文件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

1.Django 对css静态文件的处理

我们先来看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>

2.Django 对image静态文件的处理

  • 第一步:在settings文件中添加指定静态文件的存储路径,也就是:

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), )
  • 第二步:在static目录下创建image目录,且拷贝图片到目录下;

  • 第三步:引入加载器staticfiles ,然后再使用导入图片;

< img src="{% static 'images/图片名称' %}" alt="说明">

3.Django 对用户上传图片的处理

Django 对于文件或图片上传在HTML页面中一般是通过form表单附件上传的,一般是使用form的post提交方式,编码类型为:”multipart/form-data”;
form表单提交需要csrf token认证 如:{% csrf_token %};

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',

上述内容就是Django中怎么处理静态文件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注血鸟云行业资讯频道。


/template/Home/Zkeys/PC/Static