web.py开发web 第六章 静态文件

    这一章介绍下在web.py中加载css和js等静态文件的方法,在main.py同级创建一个static目录,这里我们用bootstrap做例子,没用过的同学可以先去了解下,非常好用的一个css框架,大部分功能兼容性都不错,当然,如果您还要兼容ie6就没办法了。
    bootstrap包含css,img,js,为了在项目里区分清楚,我们在static目录下创建css目录,img目录,js目录,下载bootstrap后分别将对应文件放入对应目录中,层次如下图所示
web.py开发web 第六章 静态文件_第1张图片
    接下来让我们修改下之前的templates下的index.html,代码如下
index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link type="text/css" href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="well">
            <div class="row-fluid">
                <div class="span12">
                    <a class="btn btn-large" href="#">Click Me</a>
                </div>
            </div>
        </div>

        <div class="well">
            <div class="row-fluid">
                <div class="span12">
                    <div>
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#A" data-toggle="tab">A</a></li>
                            <li><a href="#B" data-toggle="tab">B</a></li>
                            <li><a href="#C" data-toggle="tab">C</a></li>
                        </ul>
                        <div class="tabbable">
                            <div class="tab-content">
                                <div class="tab-pane active" id="A">
                                    I'm A
                                </div>
                                <div class="tab-pane" id="B">
                                    I'm B
                                </div>
                                <div class="tab-pane" id="C">
                                    I'm C
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
    main.py修改如下
main.py
#-*- coding:utf-8 -*-
import web, middleware
from web.contrib.template import render_jinja
from models import *

urls = (
    "/", "index",
)
app = web.application(urls, globals())
app.add_processor(middleware.set_orm)

render = render_jinja(
    'templates',
    encoding = 'utf-8',
)

class BaseView(object):
    def __init__(self):
        #从web.ctx.orm获取session放入基类的db中
        self.db = web.ctx.orm

class index(BaseView):
    def GET(self):
        return render.index()

if __name__ == "__main__":
    app.run()
    运行main.py,看看是不是页面出现了一个button和tab:)

你可能感兴趣的:(web.py开发web 第六章 静态文件)