为Python的web框架编写前端模版的教程_程序人生

虽然我们跑通了一个最简单的MVC，但是页面效果肯定不会让人满意。

对于复杂的HTML前端页面来说，我们需要一套基础的CSS框架来完成页面布局和基本样式。另外，jQuery作为操作DOM的JavaScript库也必不可少。

从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。有很多CSS框架可供选择。我们这次选择uikit这个强大的CSS框架。它具备完善的响应式布局，漂亮的UI，以及丰富的HTML组件，让我们能轻松设计出美观而简洁的页面。

可以从uikit首页下载打包的资源文件。

所有的静态资源文件我们统一放到www/static目录下，并按照类别归类：

由于前端页面肯定不止首页一个页面，每个页面都有相同的页眉和页脚。如果每个页面都是独立的HTML模板，那么我们在修改页眉和页脚的时候，就需要把每个模板都改一遍，这显然是没有效率的。

常见的模板引擎已经考虑到了页面上重复的HTML部分的复用问题。有的模板通过include把页面拆成三部分：


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

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

但是include方法不利于页面整体结构的维护。jinjia2的模板还有另一种“继承”方式，实现模板的复用更简单。

“继承”模板的方式是通过编写一个“父模板”，在父模板中定义一些可替换的block（块）。然后，编写多个“子模板”，每个子模板都可以只替换父模板定义的block。比如，定义一个最简单的父模板：



  
    {% block title%} 这里定义了一个名为title的block {% endblock %}
  
  
    {% block content %} 这里定义了一个名为content的block {% endblock %}

对于子模板a.html，只需要把父模板的title和content替换掉：

{% extends \'base.html\' %}

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

{% block content %}
Chapter A
blablabla...
{% endblock %}

对于子模板b.html，如法炮制：

{% extends \'base.html\' %}

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

{% block content %}
Chapter B

  list 1
  list 2

{% endblock %}

这样，一旦定义好父模板的整体布局和CSS样式，编写子模板就会非常容易。

让我们通过uikit这个CSS框架来完成父模板__base__.html的编写：




  
  {% block meta %}{% endblock %}
  {% block title %} ? {% endblock %} - Awesome Python Webapp
  
  
  
  
  
  
  
  {% block beforehead %}{% endblock %}


  
    
      Awesome
      
         日志
         教程
         源码
      
      
        
        {% if user %}
          
             {{ user.name }}
            
              
                 登出
              
            
          
        {% else %}
           登陆
           注册
        {% endif %}
        
      
    
  

  
    
      
      {% block content %}
      {% endblock %}
      
    
  

  
    
      
        
          
          
          
          
        
        Powered by Awesome Python Webapp. Copyright © 2014. [Manage]
        www.liaoxuefeng.com. All rights reserved.

__base__.html定义的几个block作用如下：

用于子页面定义一些meta，例如rss feed：

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

覆盖页面的标题：

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

子页面可以在标签关闭前插入JavaScript代码：

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

子页面的content布局和内容：

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

我们把首页改造一下，从__base__.html继承一个blogs.html：

{% extends \'__base__.html\' %}

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

{% block content %}

  
  {% for blog in blogs %}
    
      {{ blog.name }}
      发表于{{ blog.created_at}}
      {{ blog.summary }}
      继续阅读 
    
    
  {% endfor %}
  

  
    
      友情链接
      
         编程
         读书
         Python教程
         Git教程
      
    
  

{% endblock %}

相应地，首页URL的处理函数更新如下：

@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表中手动插入一些数据，我们就可以看到一个真正的首页了。但是Blog的创建日期显示的是一个浮点数，因为它是由这段模板渲染出来的：

发表于{{ blog.created_at }}

解决方法是通过jinja2的filter（过滤器），把一个浮点数转换成日期字符串。我们来编写一个datetime的filter，在模板里用法如下：

发表于{{ blog.created_at|datetime }}

filter需要在初始化jinja2时设置。修改wsgiapp.py相关代码如下：

# 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小时前\' % (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添加到jinjia2，filter名称为datetime，filter本身是一个函数对象:
template_engine.add_filter(\'datetime\', datetime_filter)

wsgi.template_engine = template_engine

现在，完善的首页显示如下：

201543095806337.jpg (640×708)