【2.0】Django框架之静态文件配置说明

【一】静态文件配置说明

• 我们将html文件默认都放在templates文件夹下

• 我们将网站所使用的静态文件默认都放在static文件夹下

  静态文件：前段已经写好，能直接使用的文件
  	网站写好的JS文件
  	网站写好的CSS文件
  	网站用到的图片文件
  	第三方框架
  	...
  拿来直接就可以使用的文件

• 一般情况我们再static文件夹下还会对文件进行划分

  • js文件夹
  • css文件夹
  • img文件夹
  • plugins文件夹

• 在浏览器中输入url能够看到对应的资源

• 是因为后端提前开设了相关的接口

• 如果访问不到资源，说明后端没有开设相关资源的端口

【二】静态文件配置

• 配置文件
• settings.py

STATIC_URL = '/static/'  # 类似于访问静态文件的令牌
'''如果想要访问static静态文件，就必须以static开头'''
'''
/static/plugins/Bootstrap/js/bootstrap.js/bootstrap.min.js

/static/ ---- 令牌

允许在以下列表中依次进行查找
如果没有则报错
'''
# 静态文件配置
STATIC_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

【三】静态文件动态解析

• HTML文件

{% load static %}

<!--  本地 链接 引入方法  -->
    <!--  Websource 文件夹 拷贝到当前文件夹下即可使用  -->
    <!--  jQuery 文件  -->
    <script src="{% static 'plugins/Bootstrap/js/bootstrap.min.js' %}"></script>
    <!--  Bootstrap 的 JS 文件 (动画效果需要jQuery)  -->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <!--  Bootstrap 的 CSS 样式文件  -->
    <link rel="stylesheet" href="{% static 'plugins/Bootstrap/css/bootstrap.min.css' %}">
    <!-- bootstrap-sweetalert(弹框) 的 CSS 文件   -->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-sweetalert/dist/sweetalert.css' %}">
    <!-- bootstrap-sweetalert(弹框) 的 JS 文件 -->
    <script src="{% static 'plugins/bootstrap-sweetalert/dist/sweetalert.min.js' %}"></script>

• settings.py

STATIC_URL = '/static/'  # 类似于访问静态文件的令牌
'''如果想要访问static静态文件，就必须以static开头'''
'''
/static/plugins/Bootstrap/js/bootstrap.js/bootstrap.min.js

/static/ ---- 令牌

允许在以下列表中依次进行查找
如果没有则报错
'''
# 静态文件配置
STATIC_DIRS = [
    os.path.join(BASE_DIR, 'static')
]