一、静态文件配置说明
1、HTML文件
- 我们将html文件默认都放在templates文件夹下，
2、资源文件
- 将网站所使用的静态文件默认都放在static文件夹下
前端已经写好了的，能够直接调用使用的文件。比如：
网站写好的js文件
网站写好的css文件
网站用到的图片文件
第三方前端框架
...
拿来就可以直接使用的
设置静态文件目录：
在Django项目中，Django默认是不会自动帮你创建static文件夹的，需要手动创建。在项目的根目录或每个应用程序的目录下都可以创建一个static文件夹。
例如，项目结构如下：
my_project/
├── my_app/
│ ├── static/
│ │ ├── css/
│ │ ├── js/
│ │ └── images/
├── static/
│ ├── css/
│ ├── js/
│ └── images/
ps：在浏览器中输入url能够看到对应的资源，是因为后端提前开设了该资源的接口。如果访问不到资源，说明后端没有开设该资源的接口
例：
http://127.0.0.1:8000/static/css/bootstrap.min.css访问不到
二、静态文件详细配置
1、配置静态文件路径
在settings.py文件中，需要配置STATIC_URL和STATICFILES_DIRS参数来告诉Django去哪里查找静态文件。
# settings.py
# 定义静态文件的URL前缀
STATIC_URL = '/static/'
# 定义静态文件的存储路径
STATICFILES_DIRS = [
BASE_DIR / "static",
]
2、加载静态文件
在模板文件中，使用{% load static %}标签加载静态文件，然后可以通过{% static 'path/to/your/file.css' %}来引用静态文件。
<!-- template.html -->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
3、收集静态文件
在Django中，收集静态文件是为了将所有应用程序中的静态文件（如CSS、JavaScript、图像等）复制到一个统一的位置，以便在生产环境中通过Web服务器提供这些静态文件。以下是如何收集静态文件的步骤：
-
配置静态文件路径：
在settings.py文件中，确保已经设置了STATIC_URL和STATIC_ROOT两个变量：STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') -
运行收集命令：
在命令行中，进入项目根目录，运行以下命令来收集静态文件：python manage.py collectstatic -
收集静态文件过程：
- Django将遍历所有已安装的应用程序，查找每个应用程序中的
static文件夹。 - Django将收集这些静态文件，并将它们复制到
STATIC_ROOT指定的目录中。
- Django将遍历所有已安装的应用程序，查找每个应用程序中的
-
静态文件存储位置：
- 收集后的静态文件将被复制到
STATIC_ROOT目录中。 - 在生产环境中，您可以配置Web服务器（如Nginx、Apache）来提供这个目录中的静态文件。
- 收集后的静态文件将被复制到
-
注意事项：
- 在收集静态文件之前，确保所有需要的静态文件都已经被添加到各个应用程序的
static文件夹中。 - 在部署到生产环境之前，务必运行
collectstatic命令，以确保所有静态文件都被正确收集和保存。
- 在收集静态文件之前，确保所有需要的静态文件都已经被添加到各个应用程序的
通过收集静态文件，您可以将项目中的所有静态资源集中管理，确保在生产环境中能够正确提供这些静态文件，从而优化网站的性能和用户体验。
三、Django的两种静态文件
1、Static
- 称为静态文件夹，是不变的，形成网站的核心部件
- 如 CSS文件，JS文件，背景图片等
- 可为Templates模板提供支持
2、Media
- 称为媒体文件夹，是变动的，由用户定义的文件
- 如 用户头像， 用户上传的图片或视频等；
- 可为富文本编辑器mdeditor提供支持
3、static和media的区别
（1）文件类别不同
static 是静态文件，是在项目上线之前就需要准备好的，一些基础必备文件，比如需要的js文件、css文件，网站logo图片、用户的默认头像等
media 是动态文件， 指的是项目上线之后，从网站上传的文件、图片、音视频等，比如 用户上传更新自己的新头像图片、用户上传的视频课程等
（2）配置参数不同
① media 配置简单，只需要两个系统参数 MEDIA_URL 和 MEDIA_ROOT
-
MEDIA_URL 是 上传类文件、图片的URI前缀
- 比如
http://127.0.0.1:8080/media/cover/xxx.jpg
- 比如
-
MEDIA_ROOT 是上传类文件、图片实际在服务器上存储的目录
② static 涉及到Django对于文件管理相关，配置较为复杂。一般在开发阶段，我们配置 STATIC_URL 和 STATICFILES_DIRS 两个参数， 在生产环境的时候会配置 STATIC_ROOT 。
- STATIC_URL - 可以理解为通过url访问static文件的路径
- 如 项目路径是：
{{projectName}}/static/common_static/test.css - 则访问url是：
http://IP:PORT/static/common_static/test.css
- 如 项目路径是：
- STATIC_ROOT - 可以理解为你打算在服务器上存储static文件的路径（通过 python manage.py collectstatic命令）
- collectstatic命令后将复制静态文件到STATIC_ROOT指定的目录中，
- 部署django项目的时候需要
- STATICFILES_DIRS - 可以理解为配置Django寻找静态文件时首先去STATICFILES_DIRS里面寻找， 其次再到各个app的static文件夹里面找
- Django查找静态文件是惰性查找
- 查找到第一个，就停止查找了
4、Media 详细说明
demo核心代码
# demoapp/models.py
class TestMedia(models.Model):
name = models.CharField(max_length=32, verbose_name="专题名称")
cover = models.ImageField(upload_to='covers/', verbose_name="专题封面")
video = models.FileField(upload_to='vedios/', verbose_name="专题视频")
def __str__(self):
return self.name
-
修改admin.py 把 TestMedia 注册到 Admin后台
-
然后执行数据库修改和创建超级管理员账号
# 数据库初始化
python manage.py makemigrations
python manage.py migrate
# 创建超级管理员账号
python manage.py createsuperuser
# 运行 server
python manage.py runserver 127.0.0.1:8000
- 然后登录Admin后台，创建一个 TestMedia 的记录，编辑的时候如图所示
- 看到
专题封面和专题视频这里有两个地址，点击任何一个，正常情况应该展示一个封面图片或者一个视频(这里用一个压缩文件代替)。但是实际是报错404提示资源不存在
这里我们先做个STATIC的试验，作为对照说明MEDIA和STATIC的不同之处
我们先来配置下STATIC_URL 和 STATICFILES_DIRS，然后再对应的目录下存放一个照片做测试
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'statics')
]
测试图片 ./statics/images/fox.jpeg， 它对应的地址是 http://127.0.0.1:8003/static/images/fox.jpeg 我们在浏览器打开它，发现是正常
思考： 为什么上传的 media资源打不卡，而配置的 static 资源是默认能打开的呢
答案揭晓:
在文章开始介绍STATICFILES_DIRS的时候，我们讲到了一个 django.contrib.staticfiles，默认的静态文件 static 前缀URL解析就是通过这个APP进行的解析。
可以通过如下命令验证，
python manage.py runserver 127.0.0.1:8003 --nostatic
启动服务再去访问那个 fox 图片这个时候就提示找不到，官方文档参考
https://docs.djangoproject.com/en/3.2/ref/contrib/staticfiles/#runserver
再回过头来说明MEDIA 404的问题
从上面的试验得知， STATIC 默认Django是通过django.contrib.staticfiles 提供了默认的 URL配置，但是 MEDIA 是没有的，需要单独配置，如下
# demo_media_static/settings.py
# Media
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# demo_media_static/urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
然后再请求上面的404地址http://127.0.0.1:8003/media/covers/WechatIMG128.jpeg 这个时间就能正常显示
5、Static 详细说明
用到的核心参数有 STATIC_URL 、 STATIC_ROOT 和 STATICFILES_DIRS ，具体说明前面在异同对比的时候已经说明过了。
这里重点介绍在template 中如何使用。
-
公共的静态文件我们一般方式在项目根目录下的 statics 文件夹，也就是 STATICFILES_DIRS 配置的
-
另外可以在具体应用APP下创建 static 目录，
-
在 template 中使用的时候一般需要先导入
<!-- 如果有extends 的时候， load static 需要放到这个后面-->
{% extends 'base.html' %}
{% load static %}
- 还有一种方式可以不用再 template中 手动 load
# demo_media_static/settings.py
TEMPALTES = [
{
... ...,
'OPTIONS': {
'context_processors': [... ...],
},
# 添加如下，可以不用再template中每次都 {% load static %}
'builtins': [
'django.templatetags.static',
]
}
]
- 然后再template实际使用如下
... ...
<!-- 实际文件位于 statics/css/base.css -->
<link href="{% static 'css/base.css' %}" rel="stylesheet">
<!-- 实际文件位于 statics/js/bootstrap.bundle.min.js -->
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
...
- 对应的 URL地址为
http://127.0.0.1:8003/static/css/base.css
6、扩展说明
最后实际项目发布生产环境的时候，会通过 Web server(比如nginx) 来单独统一管理静态文件。
-
定义 STATCI_ROOT
-
执行 python manage.py collectstatic 把相关的静态文件都收集到 STATIC_ROOT 定义的绝对路径下
-
配置nginx，对 css/js/image 类的 请求单独一个 location 转发到 STATIC_ROOT 定义的目录下去
给URL路径定义别名
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'statics'),
# 采用别名的方式配置URL地址
# os.path.join(BASE_DIR, 'medias/files'),
('downloads', os.path.join(BASE_DIR, 'medias/files')),
]
如上配置，在请求 medias/files 下面的文件的时候，除了 http://127.0.0.1:8003/static/hadoop_exporter.tar.gz 访问之外，还可以使用 http://127.0.0.1:8003/static/downloads/hadoop_exporter.tar.gz
注意这里的downlaods 是定义的别名
四、问题补充
当你在写Django项目的时候，可能会出现后端代码修改了，但是前端页面没有变化的情况
- 你在同一个端口开了好几个Django项目，一直在跑的其实是第一个Django项目
- 浏览器缓存的问题
解决办法：
- settings
- network
- disable cache 勾选上
扫一扫
61
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
