Django 开发环境中静态文件配置
前言
使用Django开发网页时,虽然按照官方教程,静态文件都是可以找到的。一切正常。但一直没搞懂STATIC_URL
和STATICFILES_DIRS
之间的联系。今天专门了解了下。算是了解了下。本文则是通过两个场景来实际地说明下这两个变量之间的关系。
测试环境
Python: 2.7.14
Django: 1.11.8
新建一个Django项目,项目名:demo
, 应用名:testStatic
,在testStatic目录下新建文件夹templates
存放模板网页,这里就随便设个index.html
,新建文件夹staticTest
存放静态文件,这里为一张图片。之所以设置为staticTest
,是因为太多的博客都是设置的static
,这个对于规范化确实挺好的,但是对于理解相应的配置起到反作用,反正我是没看懂。最终的项目结构如下:
demo
|_ demo
|_ __init__.py
|_ settings.py
|_ urls.py
|_ wsgi.py
|_ testStatic
|_ migrations\
|_ staticTest
|_ img
|_ 1.jpg
|_ templates
|_ index.html
|_ __init__.py
|_ admin.py
|_ apps.py
|_ modesl.py
|_ tests.py
|_ views.py
|_ staticImg
|_ 2.jpg
|_ manage.py
新建项目和应用后,更改testStatic
文件夹下面的views.py
和demo
文件夹下的urls.py
和settings.py
,分别如下
views.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
def index(request):
return render(request, 'index.html') # 这里的index.html就是刚刚新建的templates文件夹下面的index.html
urls.py
from django.conf.urls import url
from django.contrib import admin
from testStatic import views as testStaticViews # 添加的部分
urlpatterns = [
url(r'^$', testStaticViews.index), # 添加的部分
url(r'^admin/', admin.site.urls),
]
settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'testStatic', # 添加的部分
]
# 其余部分保持不变
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/sta/' # 改变的部分,原来默认为 STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'testStatic/staticTest'),
os.path.join(BASE_DIR, 'staticImg')
]
场景1:网页直接访问
这里解释下这两个变量,STATIC_URL
和STATICFILES_DIRS
。
STATIC_URL
用来对静态文件进行定位,不是实际的文件路径。
STATICFILES_DIRS
是一个列表 或者元祖,每一个项都是实际的静态文件的路径。
推荐使用绝对路径。这里为了演示方便,只是设置了两个文件夹。在实际使用时,可以设置任意文件夹,当然最好是放在项目文件夹之内了。
这里网页访问的只要是两张图片1.jpg
和2.jpg
。可以看到两张图片在项目中的位置是不同的。根据现在的设置。在开发服务器中,通过http://127.0.0.1:8000/sta/img/1.jpg
和http://127.0.0.1:8000/2.jpg
就可以直接访问到这两张图片。其中sta
是根据STATIC_URL
得来的,你将STATIC_URL
设置为其他值,例如seu
,则只需要将url中的sta
替换成seu
即可。
接下来运行以下验证下。
在项目根目录打开命令行,输入以下命令启动开发服务器
python manage.py runserver 8000
当STATIC_URL = '/sta/'
时
结果见截图。
当STATIC_URL = '/seu/'
时
结果见截图
场景2:模板文件
在模板文件中,要使用STATIC_URL
则需要两步:
1. 加载,具体的做法就是在html文件head
标签的第一行加上一行语句。
{% load static %}
当然只要在使用前的位置进行加载都是OK的。
2. 使用
对于1.jpg
src="{% static 'img/1.jpg' %}"
对于2.jpg
src="{% static '2.jpg' %}"
把这些填充到 index.html
中,最终结果如下:
<!DOCTYPE html>
<html>
<head>
{% load static %}
<title>a test html for static file destination</title>
</head>
<body>
<img src="{% static 'img/1.jpg' %}" width="100" height="100">
<img src="{% static '2.jpg' %}" width="300" height="200">
</body>
</html>
最终结果如下:
可以看到,一切正常。
总结
到此,本文就结束了。总结一下,STATIC_URL
负责外部接口,STATICFILES_DIRS
负责内部实现。本文的全部代码我放到github上了,有需要的可以自行下载试验。github代码戳这里
如果对你有帮助,麻烦顶一下。