一、静态文件配置说明

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指定的目录中。
静态文件存储位置：
- 收集后的静态文件将被复制到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 勾选上

标签：文件,框架,静态,Django,URL,STATIC,static
From： https://www.cnblogs.com/xiao01/p/18102760

Django框架之静态文件