pure & tornado -- 综合-优快云博客

本文介绍了一个使用Python Tornado Web框架构建的简单网站项目。该项目包括两个页面：英雄页面和主页，并展示了如何组织代码结构、配置URL映射、设置UI模块及渲染HTML模板等关键步骤。

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

先说一下相关的代码结构

--handlers\

--hero.py

--home.py

--templates\

--modules\

--hero.html

--home.html

--base.html

--hero.html

--home.html

github地址:https://github.com/gf0842wf/tornado-pure

注:***类似"modules/hero.html"这些字符串常量，建议放到一个独立的资源文件中。将修改和代码分离。

发布后,只要修改修改添加templates/modules下面的模板文件即可

url映射

urls = [
    (r"/", HeroHandler),
    (r"/home", HomeHandler),
    ]

uimodules映射

get_path = lambda d: os.path.join(os.path.dirname(__file__), d) # 由yh指点, 换成lambda
SETTINGS = dict(
    template_path=get_path("templates"),
    static_path=get_path("static"),
    ui_modules=[{'Hero': HeroModule}, {'Home': HomeModule}],
    )

hero handler -- hero.py

menus = [["Home", "home"], ["About", "#"], ["Product", "#"], ["Contact", "#"]]
class HeroHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("hero.html", menus=menus, nop=None, sel=-1) # sel用于标记是否选中, 这里-1为无效值

home handler -- home.py

menus = [["Home", "home"], ["About", "#"], ["Product", "#"], ["Contact", "#"]]
class HomeHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("home.html", menus=menus, nop=None, sel=0) # sel -- 第0个被选中,即是home.这个值要和menus序号对应

uimodules -- uimodules.py

# -*- coding: utf-8 -*-

import tornado.web

class HeroModule(tornado.web.UIModule):

    def render(self, nop):
        return self.render_string("modules/hero.html", nop=nop)


class HomeModule(tornado.web.UIModule):

    def render(self, nop):
        return self.render_string("modules/home.html", nop=nop)

__all__ = ["HeroModule", "HomeModule"]

---

template/base.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A test layout">
        <title>{% block main_tittle %} Default main tittle {% end %} &ndash; {% block sub_tittle %} Default sub tittle {% end %}</title>
        <link rel="stylesheet" href="/static/css/pure/pure-min.css" />
        <link rel="stylesheet" href="/static/css/pure/hero.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="/static/css/pure/side-menu-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="/static/css/pure/side-menu.css">
    <!--<![endif]-->
    </head>
    <body>
        <div id="layout">
            <!-- Menu toggle -->
            <a href="#menu" id="menuLink" class="menu-link">
                <!-- Hamburger icon -->
                <span> </span>
            </a>
            <div id="menu">
                <div class="pure-menu pure-menu-open">
                    <a class="pure-menu-heading" href={% block main_link %}/{% end %}>{% block main_name %}Subject{% end %} </a>
                    <ul>
                        {% for idx in xrange(len(menus)) %}
                            {% block idx %}
                            {% if idx % 2 == 1 or idx == 0 %}
                                {% if idx == sel %}
                                <li class="pure-menu-selected">
                                {% else %}
                                <li>
                                {% end %}
                            {% else %}
                                {% if idx == sel %}
                                <li class="menu-item-divided pure-menu-selected">
                                {% else %}
                                <li class="menu-item-divided">
                                {% end %}
                            {% end %}
                                <a href={{escape(menus[idx][1])}}>{{escape(menus[idx][0])}}</a>
                            </li>
                            {% end %}
                        {% end %}    
                    </ul>
                </div>
            </div>
            <div id="main">
                <div class="{% block hero_cls %}header{% end %}">
                    <h1 class="{% block hero_h1 %}{% end %}">{% block page_title %}Page Title{% end %}</h1>
                    <h2>{% block page_desc %}A subtitle for your page goes here{% end %}</h2>
                </div>
                {% block body %}
                {% end %}
            </div>
        </div>

    </body>
</html>

template/hero.html

{% extends "base.html" %}

{% block main_tittle %}MT{% end %}
{% block sub_tittle %}ST-Hero{% end %}
{% block main_link %}/{% end %}
{% block main_name %}Subject{% end %}
{% block hero_cls %}hero-titles{% end %}
{% block hero_h1 %}hero-site{% end %}
{% block page_title %}Subject{% end %}
{% block page_desc %}PDESC-Hero{% end %}

{% block body %}
	{% module Hero(nop) %}
{% end %}

template/home.html

{% extends "base.html" %}

{% block main_tittle %}MT{% end %}
{% block sub_tittle %}ST-Home{% end %}
{% block main_link %}/{% end %}
{% block main_name %}Subject{% end %}
{% block page_title %}PT-Home{% end %}
{% block page_desc %}PDESC-Home{% end %}

{% block body %}
	{% module Home(nop) %}
{% end %}

template/modules/hero.html

.........

template/modules/home.html

<div class="content">
    <h2 class="content-subhead">How to use this layout</h2>
    <p>
        To use this layout, you can just copy paste the HTML, along with the CSS in <a href="/css/layouts/side-menu.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive.
    </p>

    <h2 class="content-subhead">Now Let's Speak Some Latin</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <div class="pure-g">
        <div class="pure-u-1-4">
            <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake">
        </div>
        <div class="pure-u-1-4">
            <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
        </div>
        <div class="pure-u-1-4">
            <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
        </div>
        <div class="pure-u-1-4">
            <img class="pure-img-responsive" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
        </div>
    </div>

    <h2 class="content-subhead">Try Resizing your Browser</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>

效果图 -- hero