Django导入静态文件

引言

这个问题出在以Djiango做后台的前端界面上。按以往的习惯,css,js,image等静态文件直接在前端html中写好链接,直接丢上去就可以,但当我把含外部css的html在丢到Django后发现,css并没有载入,自然,其他静态文件也是如此。

最初百度查找解决方案,但很多使用的版本与我的不同,解决方案也有偏差,其他可用的方案也并没有讲清楚(其实就是我没能理解),于是自己去看了文档写下了自己的理解

相关软件及版本:

Django 2.1.3

python 3.7.0

Django文档管理静态文件:

https://docs.djangoproject.com/en/2.1/howto/static-files/

原因分析

出现这个问题其实是因为程序员太想当然了(但一般肯定会觉得直接丢上去没问题的啊混蛋)。在以往的php做后端的例子中,我们只要知道url就可以访问网站根目录下的任何文件。以外部css为例,在浏览器获得html文件后会对资源进行链接,链接css文件时,将向服务器请求css的url对应的css文件,该css文件确实存在,于是服务器将之返回,浏览器成功链接到外部css文件。整个过程十分简单。

那么为什么Django链接不到?原因出在一开始,css对应的url不存在。Django并不像php那样可以访问网站根目录下的文件,它只会对路由所包含的路径进行对应的响应。简单来说,你随便往Django根目录丢给文件,在不编写路由的情况下,是不可能通过url获得的。同样,如果尝试访问没有写进路由的css文件,那么返回只可能是404。既然资源404了,那么浏览器请求不到,导入失败就是理所当然的。

解决方法

在settings.py中导入静态资源

既然是url不存在,那么让它存在就好。理论上只要把css对应的url编写进路由使其返回css文件,那么就能请求到了。当然我不会这么干,因为,Django理所当然地提供了解决方案。

在settings.py的INSTALLED_APPS重,我们可以找到django.contrib.staticfiles这项,它的作用就是管理静态文件。它的功能大致可以理解为将settings.py中的STATICFILES_DIRS列表中的路径变为可访问。同时对于路径,django的settings.py中存在一个保存根路径的变量:

BASE_DIRos.path.dirname(os.path.dirname(os.path.abspath(__file__)))

对于官方的解决方案,静态文件是保存在根目录下的static文件夹中,所以使用一个变量指向static文件夹(当然具体情况可以视实际路径而更改):

STATIC_ROOT= os.path.join(BASE_DIR,'static')

然后,在settings.py中,存在这样一个变量(如果没有就自己加上吧):

STATIC_URL = '/static/'

这个变量的功能稍后再提。在这些准备好之后,就可以将静态文件路径加到STATICFILES_DIRS列表中了。比如,如果css文件相对static文件夹的路径为“css/test.css”,那么写入后:

STATICFILES_DIRS=[os.path.join(STATIC_ROOT,'css'),]

那么现在试着访问路径(以本地端口127.0.0.1:8000为例):127.0.0.1:8000/static/css/test.css,会发现成功获取。同样,在html文件link时写 href="static/css/test.css",就可以成功获得。

这里大概就能看出STATIC_URL的作用了。路径中存在/static/这一部分,和STATIC_URL有没有关系呢?

尝试这样修改:

STATIC_URL = '/stardust/'

再访问127.0.0.1:8000/static/css/test.css,返回404。但改为访问127.0.0.1/stardust/css/test.css,访问成功。确认这个变量是静态文件的url的目录。

我们再尝试将图片文件添加进去。比如在static文件夹下有一个src文件夹保存图片等文件,src/img文件夹保存图片,其中有mio.jpg,于是如此修改:

STATICFILES_DIRS=[
    os.path.join(STATIC_ROOT,'css'),
    os.path.join(STATIC_ROOT,'src/img'),
    ]

访问127.0.0.1:8000/static/src/img/mio.jpg,访问成功。其他静态资源添加方式也是如此,只用添加文件夹,就能访问内部文件。

值得多提的是,STATICFILES_DIRSSTATICFILES_DIRS支持添加二元元组,第一个值作为url中的路径,第二个值作为实际路径举个例子,将它如此修改

STATICFILES_DIRS=[
    ('css',os.path.join(STATIC_ROOT,'css')),
    ('img',os.path.join(STATIC_ROOT,'src/img')),
]

127.0.0.1:8000/static/css/test.css依然访问成功,但是127.0.0.1:8000/static/src/img/mio.jpg访问失败。而访问127.0.0.1:8000/static/img/mio.jpg却能成功。就是这样。

在上一步前提下使用html导入静态资源

以css文件为例,在上一步做到后,href属性写为href="static/css/test.css"即可。不过django推荐的方案是使用模板导入。对于模板我的理解并不太少所以只贴方案。

现在文件前方使用{%load static %},之后在使用中(以同样的css文件为例)如此写:href="{%static '/css/main.css'%}"。这样也可以成功访问。如下是官方文档给出的关于图片的例子:

{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">

其他静态资源也是如此。

至此,Django导入静态文件的问题得以解决。本文讲解有限,更多请查阅官方文档。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,588评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,456评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,146评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,387评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,481评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,510评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,522评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,296评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,745评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,901评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,538评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2 352

推荐阅读更多精彩内容

  • 项目部署到阿里云(nginx+uwsgi)上后,静态文件加载没有问题。但是在本地,使用开发服务器,却始终加载不成功...
    兰山小亭阅读 5,614评论 0 9
  • 处理静态文件,尤其是在开发时,是一件很头疼的事情。在这篇文章中,我们将会讨论一些设置,目录结构和他们之间的相互影响...
    51reboot阅读 1,674评论 0 1
  • 此段内容简要来自自强学堂的教程详情请查询自强学堂 一、 后台的运作流程 接收request请求 处理数据 获取请求...
    coder_ben阅读 5,246评论 6 56
  • 切换到创建项目的目录 cd C:\Users\admin\Desktop\DjangoProject创建名为pr...
    在努力中阅读 3,265评论 2 3
  • 模块间联系越多,其耦合性越强,同时表明其独立性越差( 降低耦合性,可以提高其独立性)。软件设计中通常用耦合度和内聚...
    riverstation阅读 2,066评论 0 8