所谓静态资源,是指图片、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/cssstatic/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)

aiohttp之添加静态资源路径的更多相关文章

  1. Spring boot 默认静态资源路径与手动配置访问路径的方法

    这篇文章主要介绍了Spring boot 默认静态资源路径与手动配置访问路径的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下   在application.propertis中配置 ##端口号 ...

  2. springMvc中实现拦截器Interceptor以及添加静态资源映射

    这个代码写了很久了,多久呢?2018年12-20号写的.... 废话不多说,简化一下,作为笔记. 注: public class springmvcConfig extends WebMvcConfi ...

  3. vue+webpack静态资源路径引用

    处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.v ...

  4. 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

    在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...

  5. vue打包静态资源路径不正确的解决办法

    vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...

  6. springboot之静态资源路径配置

    静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户直接读取. 在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/,classp ...

  7. 13.1Springboot 之 静态资源路径配置

    Spring 静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户直接读取. 在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/ ...

  8. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  9. Springboot 之 静态资源路径配置

    1.静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户通过浏览器直接读取. 2.在Springboot中默认的静态资源路径有:classpath:/META-INF/resource ...

随机推荐

  1. NSException异常处理

    异常处理是管理非典型事件(例如未被识别的消息)的过程,此过程将会中断正常的程序执行.如果没有足够的错误处理,遇到非典型事件时,程序可能立刻抛出(或者引发)一种被称之为异常的东西,然后结束运行. 异常的 ...

  2. Hadoop权威指南: 专有数据类型

    Writable 和 WritableComparable接口 Writable接口 ** Writable接口的主要目的是,当数据在网络上传输或从硬盘读写时,提供数据的序列化和反序列化机智 ** * ...

  3. [TPYBoard-Micropython之会python就能做硬件 4] 学习使用电位器和1602显示屏

    一.实验器材 1.TPYboard V102板  一块 2.电位器   一个 3.1602 屏 一块 4.杜邦线:若干 二.电位器的使用 电位器 (英文:Potentiometer)是可变电阻器的一种 ...

  4. 【iOS 录音转码MP3及转码BASE64上传】

    iOS 录音转码MP3及转码BASE64上传 一,开始录音 NSLog(@"开始录音"); [self startRecord]; - (void)startRecord { // ...

  5. 重新学习WCF

    近来工作不怎么忙,一直在想一个问题,今年刚刚毕业,对于我们这应届生到底应该学习那些技术呢? 面对着现在技术横生,到底哪项是适合自己的呢?自己一直都在迷茫,若有那位大神再次经过,望给出您宝贵的建议. 最 ...

  6. Spring Boot 基础教程系列学习文档

    Spring Boot基础教程1-Spring Tool Suite工具的安装 Spring Boot基础教程2-RESTfull API简单项目的快速搭建 Spring Boot基础教程3-配置文件 ...

  7. Java 程序测试_判断语句

    package test; public class Condition_Phase { public static void main (String[] args) { //The Traditi ...

  8. (二) 从Angular1到Angular2需要的预备知识

    1. TypeScript语法与ES6新特性 写惯了jQ的话突然从ES5跳到ES6,又是个变形的ES6(TypeScript),学习成本确实不低.不过笔者也是从ng1直接上手ng2,对与很多新特性的积 ...

  9. "table" is not mapped 解决方法

    现象:使用hql="from person" 出现" person is not mapped " 错误 配置文件如下:<hibernate-mappin ...

  10. Humble Numbers(丑数) 超详解!

    给定一个素数集合 S = { p[1],p[2],...,p[k] },大于 1 且素因子都属于 S 的数我们成为丑数(Humble Numbers or Ugly Numbers),记第 n 大的丑 ...