為Python的web框架編寫(xiě)前端模版的教程

更新時(shí)間：2015年04月30日 10:03:25 作者：廖雪峰

這篇文章主要介紹了為Python的web框架編寫(xiě)前端模版的教程,示例代碼基于Python2.x版本,需要的朋友可以參考下

雖然我們跑通了一個(gè)最簡(jiǎn)單的MVC，但是頁(yè)面效果肯定不會(huì)讓人滿意。

對(duì)于復(fù)雜的HTML前端頁(yè)面來(lái)說(shuō)，我們需要一套基礎(chǔ)的CSS框架來(lái)完成頁(yè)面布局和基本樣式。另外，jQuery作為操作DOM的JavaScript庫(kù)也必不可少。

從零開(kāi)始寫(xiě)CSS不如直接從一個(gè)已有的功能完善的CSS框架開(kāi)始。有很多CSS框架可供選擇。我們這次選擇uikit這個(gè)強(qiáng)大的CSS框架。它具備完善的響應(yīng)式布局，漂亮的UI，以及豐富的HTML組件，讓我們能輕松設(shè)計(jì)出美觀而簡(jiǎn)潔的頁(yè)面。

可以從uikit首頁(yè)下載打包的資源文件。

所有的靜態(tài)資源文件我們統(tǒng)一放到www/static目錄下，并按照類別歸類：

復(fù)制代碼代碼如下:

static/

+- css/

|  +- addons/

|  |  +- uikit.addons.min.css

|  |  +- uikit.almost-flat.addons.min.css

|  |  +- uikit.gradient.addons.min.css

|  +- awesome.css

|  +- uikit.almost-flat.addons.min.css

|  +- uikit.gradient.addons.min.css

|  +- uikit.min.css

+- fonts/

|  +- fontawesome-webfont.eot

|  +- fontawesome-webfont.ttf

|  +- fontawesome-webfont.woff

|  +- FontAwesome.otf

+- js/

   +- awesome.js

   +- html5.js

   +- jquery.min.js

   +- uikit.min.js

由于前端頁(yè)面肯定不止首頁(yè)一個(gè)頁(yè)面，每個(gè)頁(yè)面都有相同的頁(yè)眉和頁(yè)腳。如果每個(gè)頁(yè)面都是獨(dú)立的HTML模板，那么我們?cè)谛薷捻?yè)眉和頁(yè)腳的時(shí)候，就需要把每個(gè)模板都改一遍，這顯然是沒(méi)有效率的。

常見(jiàn)的模板引擎已經(jīng)考慮到了頁(yè)面上重復(fù)的HTML部分的復(fù)用問(wèn)題。有的模板通過(guò)include把頁(yè)面拆成三部分：

<html>
  <% include file="inc_header.html" %>
  <% include file="index_body.html" %>
  <% include file="inc_footer.html" %>
</html>

這樣，相同的部分inc_header.html和inc_footer.html就可以共享。

但是include方法不利于頁(yè)面整體結(jié)構(gòu)的維護(hù)。jinjia2的模板還有另一種“繼承”方式，實(shí)現(xiàn)模板的復(fù)用更簡(jiǎn)單。

“繼承”模板的方式是通過(guò)編寫(xiě)一個(gè)“父模板”，在父模板中定義一些可替換的block（塊）。然后，編寫(xiě)多個(gè)“子模板”，每個(gè)子模板都可以只替換父模板定義的block。比如，定義一個(gè)最簡(jiǎn)單的父模板：

<!-- base.html -->
<html>
  <head>
    <title>{% block title%} 這里定義了一個(gè)名為title的block {% endblock %}</title>
  </head>
  <body>
    {% block content %} 這里定義了一個(gè)名為content的block {% endblock %}
  </body>
</html>

對(duì)于子模板a.html，只需要把父模板的title和content替換掉：

{% extends 'base.html' %}

{% block title %} A {% endblock %}

{% block content %}
<h1>Chapter A</h1>
<p>blablabla...</p>
{% endblock %}

對(duì)于子模板b.html，如法炮制：

{% extends 'base.html' %}

{% block title %} B {% endblock %}

{% block content %}
<h1>Chapter B</h1>
<ul>
  <li>list 1</li>
  <li>list 2</li>
</ul>
{% endblock %}

這樣，一旦定義好父模板的整體布局和CSS樣式，編寫(xiě)子模板就會(huì)非常容易。

讓我們通過(guò)uikit這個(gè)CSS框架來(lái)完成父模板__base__.html的編寫(xiě)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  {% block meta %}<!-- block meta -->{% endblock %}
  <title>{% block title %} ? {% endblock %} - Awesome Python Webapp</title>
  <link rel="stylesheet" href="/static/css/uikit.min.css">
  <link rel="stylesheet" href="/static/css/uikit.gradient.min.css">
  <link rel="stylesheet" href="/static/css/awesome.css" />
  <script src="/static/js/jquery.min.js"></script>
  <script src="/static/js/md5.js"></script>
  <script src="/static/js/uikit.min.js"></script>
  <script src="/static/js/awesome.js"></script>
  {% block beforehead %}<!-- before head -->{% endblock %}
</head>
<body>
  <nav class="uk-navbar uk-navbar-attached uk-margin-bottom">
    <div class="uk-container uk-container-center">
      <a href="/" class="uk-navbar-brand">Awesome</a>
      <ul class="uk-navbar-nav">
        <li data-url="blogs"><a href="/"><i class="uk-icon-home"></i> 日志</a></li>
        <li><a target="_blank" href="#"><i class="uk-icon-book"></i> 教程</a></li>
        <li><a target="_blank" href="#"><i class="uk-icon-code"></i> 源碼</a></li>
      </ul>
      <div class="uk-navbar-flip">
        <ul class="uk-navbar-nav">
        {% if user %}
          <li class="uk-parent" data-uk-dropdown>
            <a href="#0"><i class="uk-icon-user"></i> {{ user.name }}</a>
            <div class="uk-dropdown uk-dropdown-navbar">
              <ul class="uk-nav uk-nav-navbar">
                <li><a href="/signout"><i class="uk-icon-sign-out"></i> 登出</a></li>
              </ul>
            </div>
          </li>
        {% else %}
          <li><a href="/signin"><i class="uk-icon-sign-in"></i> 登陸</a></li>
          <li><a href="/register"><i class="uk-icon-edit"></i> 注冊(cè)</a></li>
        {% endif %}
        </ul>
      </div>
    </div>
  </nav>

  <div class="uk-container uk-container-center">
    <div class="uk-grid">
      <!-- content -->
      {% block content %}
      {% endblock %}
      <!-- // content -->
    </div>
  </div>

  <div class="uk-margin-large-top" style="background-color:#eee; border-top:1px solid #ccc;">
    <div class="uk-container uk-container-center uk-text-center">
      <div class="uk-panel uk-margin-top uk-margin-bottom">
        <p>
          <a target="_blank" href="#" class="uk-icon-button uk-icon-weibo"></a>
          <a target="_blank" href="#" class="uk-icon-button uk-icon-github"></a>
          <a target="_blank" href="#" class="uk-icon-button uk-icon-linkedin-square"></a>
          <a target="_blank" href="#" class="uk-icon-button uk-icon-twitter"></a>
        </p>
        <p>Powered by <a href="#">Awesome Python Webapp</a>. Copyright &copy; 2014. [<a href="/manage/" target="_blank">Manage</a>]</p>
        <p><a  target="_blank">www.liaoxuefeng.com</a>. All rights reserved.</p>
        <a target="_blank" href="#"><i class="uk-icon-html5" style="font-size:64px; color: #444;"></i></a>
      </div>
    </div>
  </div>
</body>
</html>

__base__.html定義的幾個(gè)block作用如下：

用于子頁(yè)面定義一些meta，例如rss feed：

{% block meta %} ... {% endblock %}

覆蓋頁(yè)面的標(biāo)題：

{% block title %} ... {% endblock %}

子頁(yè)面可以在標(biāo)簽關(guān)閉前插入JavaScript代碼：

{% block beforehead %} ... {% endblock %}

子頁(yè)面的content布局和內(nèi)容：

{% block content %}
...
{% endblock %}

我們把首頁(yè)改造一下，從__base__.html繼承一個(gè)blogs.html：

{% extends '__base__.html' %}

{% block title %}日志{% endblock %}

{% block content %}

  <div class="uk-width-medium-3-4">
  {% for blog in blogs %}
    <article class="uk-article">
      <h2><a href="/blog/{{ blog.id }}">{{ blog.name }}</a></h2>
      <p class="uk-article-meta">發(fā)表于{{ blog.created_at}}</p>
      <p>{{ blog.summary }}</p>
      <p><a href="/blog/{{ blog.id }}">繼續(xù)閱讀 <i class="uk-icon-angle-double-right"></i></a></p>
    </article>
    <hr class="uk-article-divider">
  {% endfor %}
  </div>

  <div class="uk-width-medium-1-4">
    <div class="uk-panel uk-panel-header">
      <h3 class="uk-panel-title">友情鏈接</h3>
      <ul class="uk-list uk-list-line">
        <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">編程</a></li>
        <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">讀書(shū)</a></li>
        <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Python教程</a></li>
        <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Git教程</a></li>
      </ul>
    </div>
  </div>

{% endblock %}

相應(yīng)地，首頁(yè)URL的處理函數(shù)更新如下：

@view('blogs.html')
@get('/')
def index():
  blogs = Blog.find_all()
  # 查找登陸用戶:
  user = User.find_first('where email=?', 'admin@example.com')
  return dict(blogs=blogs, user=user)

往MySQL的blogs表中手動(dòng)插入一些數(shù)據(jù)，我們就可以看到一個(gè)真正的首頁(yè)了。但是Blog的創(chuàng)建日期顯示的是一個(gè)浮點(diǎn)數(shù)，因?yàn)樗怯蛇@段模板渲染出來(lái)的：

<p class="uk-article-meta">發(fā)表于{{ blog.created_at }}</p>

解決方法是通過(guò)jinja2的filter（過(guò)濾器），把一個(gè)浮點(diǎn)數(shù)轉(zhuǎn)換成日期字符串。我們來(lái)編寫(xiě)一個(gè)datetime的filter，在模板里用法如下：

<p class="uk-article-meta">發(fā)表于{{ blog.created_at|datetime }}</p>

filter需要在初始化jinja2時(shí)設(shè)置。修改wsgiapp.py相關(guān)代碼如下：

# wsgiapp.py:

...

# 定義datetime_filter，輸入是t，輸出是unicode字符串:
def datetime_filter(t):
  delta = int(time.time() - t)
  if delta < 60:
    return u'1分鐘前'
  if delta < 3600:
    return u'%s分鐘前' % (delta // 60)
  if delta < 86400:
    return u'%s小時(shí)前' % (delta // 3600)
  if delta < 604800:
    return u'%s天前' % (delta // 86400)
  dt = datetime.fromtimestamp(t)
  return u'%s年%s月%s日' % (dt.year, dt.month, dt.day)

template_engine = Jinja2TemplateEngine(os.path.join(os.path.dirname(os.path.abspath(__file__)), 'templates'))
# 把filter添加到j(luò)injia2，filter名稱為datetime，filter本身是一個(gè)函數(shù)對(duì)象:
template_engine.add_filter('datetime', datetime_filter)

wsgi.template_engine = template_engine

現(xiàn)在，完善的首頁(yè)顯示如下：

201543095806337.jpg (640×708)