所謂靜態資源,是指圖片、js、css等文件。官方的說明在這里。
以一個小項目來說明,下面是項目的目錄結構:
.
├── static
│ ├── css
│ │ ├── base.css
│ │ ├── bootstrap.min.css
│ │ └── font-awesome.min.css
│ ├── font
│ │ ├── FontAwesome.otf
│ │ ├── fontawesome-webfont.eot
│ │ ├── fontawesome-webfont.svg
│ │ ├── fontawesome-webfont.ttf
│ │ └── fontawesome-webfont.woff
│ └── index.html
└── proxy_server.py
在proxy_server.py給2個靜態文件目錄static/css和static/font添加路由:
app.router.add_static('/css/',
path='static/css',
name='css')
app.router.add_static('/font/',
path='static/font',
name='font')
先來看看add_static方法的定義:
def add_static(self, prefix, path, *, name=None, expect_handler=None,
chunk_size=256*1024, response_factory=StreamResponse,
show_index=False, follow_symlinks=False):
"""Add static files view.
prefix - url prefix
path - folder with files
"""
# TODO: implement via PrefixedResource, not ResourceAdapter
assert prefix.startswith('/')
if prefix.endswith('/'):
prefix = prefix[:-1]
resource = StaticResource(prefix, path,
name=name,
expect_handler=expect_handler,
chunk_size=chunk_size,
response_factory=response_factory,
show_index=show_index,
follow_symlinks=follow_symlinks)
self.register_resource(resource)
return resource
必需的2個參數:
prefix:是靜態文件的url的前綴,以/開始,在瀏覽器地址欄上顯示在網站host之后,也用於index.html靜態頁面進行引用
path:靜態文件目錄的路徑,可以是相對路徑,上面代碼使用的static/css就是相對路徑——相對於proxy_server.py所在路徑。
下面是頁面的效果:

加載的是index.html,下面是它引用靜態資源的代碼:
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Base CSS -->
<link href="css/base.css" rel="stylesheet">
<!-- FA CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
添加font的路徑是因為/font-awesome.min.css需要使用:

在瀏覽器中打開css文件:

可以看到是url的前綴是/css/。
如果修改前綴:
app.router.add_static('/css2017/',
path='static/css',
name='css')
頁面變成了:

css文件也無法訪問了:

修改index.html中的css的引用路徑:
<!-- Bootstrap CSS -->
<link href="css2017/bootstrap.min.css" rel="stylesheet">
<!-- Base CSS -->
<link href="css2017/base.css" rel="stylesheet">
<!-- FA CSS -->
<link href="css2017/font-awesome.min.css" rel="stylesheet">
雖然目錄本身還是css,但通過add_static已經將它視為了css2017,頁面回復正常了:

css文件也可以打開了:

url前綴變成了/css2017/了。
此時直接打開index.html文件就會顯示為

因為static目錄下並沒有css2017這個文件夾。
至此就了解了add_static的基本使用方法了,可以通過重新定義prefix參數還可以隱藏服務器上真實的存放靜態資源的目錄,也可以將分散在各處的資源文件統一到同一個路徑前綴下。
此外,如果加上show_index=True,就可以顯示靜態資源的目錄索引了——默認是禁止訪問的:
app.router.add_static('/css2017/',
path='static/css',
name='css',
show_index=True)

