2_html/css_WEB-ITnose を使用した竜巻概要 4-html テンプレート-htmlチュートリアル-php.cn

2_html/css_WEB-ITnose を使用した竜巻概要 4-html テンプレート

WBOY

リリース： 2016-06-24 11:18:41

オリジナル

1107 人が閲覧しました

参考アドレス

http://www.tornadoweb.org/en/stable/guide/templates.html?highlight=render#ui-modules

目的の説明

すべての上部にこのナビゲーションバーがありますosc のページでは、tornado の UI モジュールを使用してナビゲーションバーを実装し、コードの再利用を実現できます

コード構造

tornado テンプレートの uimodules を含む my_uimodules.py を追加し、Header.html を追加しました。ナビゲーションバーの HTML コード。単純な HTML ページ page2.html を返すために、page2.py が追加されます。

実際の実行効果

パス "/" にアクセスしたときの効果

ナビゲーションリンクをクリックします。「ページ 1」の効果

ナビゲーションリンク「ページ 2」をクリックした場合の効果

コードの説明

my_uimodules.py

import tornado.webclass HeaderBar(tornado.web.UIModule):    def render(self, location):        return self.render_string("header.html", location=location)class HeaderBar2(tornado.web.UIModule):    def render(self, location):        return self.render_string("header.html", location=location)

ログイン後にコピー

すべてのテンプレートドライバーは tornado.web.UIModule から継承され、その後call render_string 指定したテンプレートとパラメータを呼び出します。ここではトップナビゲーションバーとサイドナビゲーションバーを記述できます。ここでは、パラメータの場所を受け入れます。これは、ナビゲーションバーのページの説明として使用されます。このテンプレートドライバーは header.html を返し、それに場所を渡します

header.html

<div>    <a href="/">主页</a>    <a href="/page1">页面1</a>    <a href="/page2">页面2</a>    <span>你现在处于页面 {{ location }}</span></div>

ログイン後にコピー

このテンプレートファイルは、ページの上部のナビゲーションバーとして機能し、現在のページは location パラメーターを通じて取得されます。

main.py

import osimport tornado.httpserverimport tornado.ioloopimport tornado.webimport my_uimodulesfrom handlers.home import HomeHandlerfrom handlers.page1 import Page1Handlerfrom handlers.page2 import Page2Handlerclass PageNotFoundHandler(tornado.web.RequestHandler):    def get(self):        return self.write_error(404)class Application(tornado.web.Application):    def __init__(self):        handlers = [            (r"/", tornado.web.RedirectHandler, {"url": "/home"}),            (r"/home", HomeHandler),            (r"/page1", Page1Handler),            (r"/page2", Page2Handler),            (r".*", PageNotFoundHandler),        ]        settings = dict(            static_path= os.path.join(os.path.dirname(__file__), "static"),            template_path=os.path.join(os.path.dirname(__file__), "templates"),            ui_modules=my_uimodules,        )        tornado.web.Application.__init__(self, handlers, **settings)if __name__ == "__main__":    port = 8899    application = Application()    http_server = tornado.httpserver.HTTPServer(application, xheaders=True)    http_server.listen(port)    print('Listen on http://localhost:{0}'.format(port))    print('Listen on http://localhost:{0}/page1'.format(port))    print('Listen on http://localhost:{0}/page2'.format(port))    tornado.ioloop.IOLoop.instance().start()

ログイン後にコピー

tornado が設定を初期化するときに、カスタムテンプレートが配置されているモジュールが設定で指定されます

"ui_modules=my_uimodules"

tornado がテンプレートを処理しているときに、次のような場合に発生します。ステートメントを実行すると、xxxx テンプレートドライバーを見つけるために設定した ui_modules モジュールに移動します

{% module xxxx %}

ログイン後にコピー

ページコード

home.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>主页</title></head><body>    {% module HeaderBar("主页") %}    <h1 id="home_head">这是主页</h1>    <script src="/static/js/home.js"></script></body></html>

ログイン後にコピー

page1.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>{{ argu1 }}</title></head><body>    {% module HeaderBar("页面1") %}     <h1>这是Page1</h1>     <ul>       {% for i in argu2 %}         <li>{{ i }}</li>       {% end %}     </ul></body></html>

ログイン後にコピー

page2.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Page2</title></head><body>    {% module HeaderBar("页面2") %}     <h1>这是Page2</h1></body></html>

ログイン後にコピー

全ページA

{% module HeaderBar("Page 2") %}

がテンプレート本体の最初の行に追加されます。前述したように、tornado はレンダーテンプレートを処理するときにこの形式のリクエストに遭遇すると、次のヘッダーバーを検索します。 ui_modules で指定されたモジュール my_uimodules を最初のパラメータとして渡し、HeaderBar はこのパラメータを header.html の場所として渡しますこのように、各ページの上部にあるナビゲーションバーは同じです。違いが反映されます。

コード git アドレス

http://git.oschina.net/donggen/tornado-test