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

最新推荐文章于 2022-06-08 14:34:06 发布

weixin_34306593

最新推荐文章于 2022-06-08 14:34:06 发布

阅读量661

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/zhengnazhi/blog/121610

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

    接下来让我们修改下之前的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：）

转载于:https://my.oschina.net/zhengnazhi/blog/121610