作者:qichangxing

题目要求

CSS文件的引用,在模板中引入default.css

框架说明

web.py (http://webpy.org)

步骤

说明:做这个之前我假设您看过 web.py 的文档,以及了解 MVC 的一些路数。 详细步骤如下:

创建Project4项目

手动建立 prodject4 目录及该项目需要的相关目录,结构如下

controllers/
    __init__.py # 空文件,代表当前包可被引用
    index.py
models/
    # 本次不会用到,以后用来放一些 db 操作的代码
static/
    style/
        default.css
templates/
    index.html
code.py
settings.py
url.py

详细说明

在 project4/ 下创建 code.py

   1 #!/usr/bin/env python
   2 # coding: utf-8
   3 
   4 import sys
   5 import web
   6 import url
   7 
   8 
   9 # 将 controllers 目录加入到当前环境变量中,这样的好处是方便写 url 时不多写这么多字符串。
  10 sys.path.append('./controllers')
  11 urls = url.urls
  12 
  13 if __name__ == "__main__":
  14     app = web.application(urls, globals())
  15     app.run()

在 project4/ 下创建 settings.py

目的是将一些较公用的设置放在这里

   1 #!/usr/bin/env python
   2 # coding: utf-8
   3 
   4 import web
   5 
   6 
   7 render = web.template.render('templates/', cache=False) # 设置模板目录和模板缓存
   8 web.template.Template.globals['static'] = '/static' # 在模板中可以使用 static 该全局对象

在 project4/ 下创建 url.py

# url 设置独立出来,不用每次修改都要去找主文件来修改,会使主文件越来越长,这样结构更清晰。

   1 #!/usr/bin/env python
   2 # coding: utf-8
   3 
   4 urls = (
   5     '/',        'index.Index',
   6     # 该行代表用户请求根目录时是去请求 index 控制器对象的 Index 方法
   7 )

在 project4/controllers/ 下创建 index.py

   1 #!/usr/bin/env python
   2 # coding: utf-8
   3 
   4 from settings import render
   5 
   6 
   7 class Index:
   8 
   9     def GET(self):
  10         return render.index()
  11         # 请求 index 模板,可以按目录结构来写
  12         # 如 rendr.default.index(),代表请求 default 目录下的 index 模板
  13         # 模板的扩展名有要求,.html 或者 .xml 都可以

在 project4/templates/ 下创建index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="$static/style/default.css">
<!--
模板变量用 $ 符号加变量名称来表示,这里已经在设置了全局变量,故不用在顶部写 $def with(a, b, c...)
否则直接写“/static/...”
-->
</head>
<body>
    <h1>CSS Test</h1>
</body>
</html>

结束

测试

cd project4
python code.py

访问 http://127.0.0.1:8080/ 效果如下:

WebPyCssFile.png

说明

web.py 在开发服务器上是直接在 /static 下找静态文件

WebPyCssFile (last edited 2009-12-25 07:18:11 by localhost)