玩转Django 2.0
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.2　静态资源

静态资源指的是网站中不会改变的文件。在一般的应用程序中，静态资源包括CSS文件、JavaScript文件以及图片等资源文件。此处简单介绍CSS和JavaScript文件。

CSS也称层叠样式表（Cascading Style Sheets），是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

JavaScript是一种直译式脚本语言，也是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用的，用来给HTML网页增加动态功能。

一个项目在开发过程中肯定需要使用CSS和JavaScript文件，这些静态文件的存放主要由配置文件settings.py设置，配置信息如下：

     # Static files (CSS, JavaScript, Images)
     # https://docs.djangoproject.com/en/2.0/howto/static-files/
     STATIC_URL = '/static/'

上述配置将静态资源存放在文件夹static，而文件夹static只能放在App里面。当项目启动时，Django会根据静态资源存放路径去查找相关的资源文件，查找功能主要由App列表INSTALLED_APPS的staticfiles实现。在index中添加文件夹static并在文件夹放置图片，如图2-1所示。

图2-1　static文件夹信息

启动项目程序后，在浏览器上访问http://127.0.0.1:8000/static/index_pic.png，可以看到图片展现在浏览器中。如果将static文件夹放置在MyDjango的根目录下，在浏览器上会显示404无法访问的异常信息。

如果想在MyDjango的根目录下存放静态资源，可以在配置文件settings.py中设置STATICFILES_DIRS属性。该属性以列表的形式表示，设置方式如下：

     # 设置根目录的静态资源文件夹public_static
     STATICFILES_DIRS = [os.path.join(BASE_DIR, 'public_static'),
     # 设置App（index）的静态资源文件夹index_static
     os.path.join(BASE_DIR, 'index/index_static'),]

分别在项目的根目录下添加文件夹public_static和在App中添加文件夹index_static，在这两个文件夹下分别放置相应的图片，如图2-2所示。

图2-2　左侧为index_static文件夹的信息，右侧为public_static文件夹的信息

启动项目程序后，在浏览器上分别输入地址http://127.0.0.1:8000/static/public_pic.png和http://127.0.0.1:8000/static/index_pic1.png，可以看到静态资源的内容展现在浏览器上。

从上面的例子可以看到，配置属性STATIC_URL和STATICFILES_DIRS存在明显的区别。

•　STATIC_URL是必须配置的属性而且属性值不能为空。如果没有配置STATICFILES_DIRS，则STATIC_URL只能识别App里的static静态资源文件夹。

•　STATICFILES_DIRS是可选配置属性，属性值为列表或元组格式，每个列表（元组）元素代表一个静态资源文件夹，这些文件夹可自行命名。

•　在浏览器上访问项目的静态资源时，无论项目的静态资源文件夹是如何命名的，在浏览器上，静态资源的上级目录必须为static，而static是STATIC_URL的属性值，因为STATIC_URL也是静态资源的起始URL。

除此之外，静态资源配置还有STATIC_ROOT，其作用是方便在服务器上部署项目，实现服务器和项目之间的映射。STATIC_ROOT主要收集整个项目的静态资源并存放在一个新的文件夹，然后由该文件夹与服务器之间构建映射关系。STATIC_ROOT配置如下：

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

STATIC_ROOT用于项目生产部署，在项目开发过程中作用不大，关于STATIC_ROOT的使用会在第11章11.13节详细讲述。

上一章目录下一章