首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

为Python的web框架编写前端模版的教程

Posted in Python onApril 30, 2015

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

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

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

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

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

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

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

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

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

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

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

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

<!-- base.html -->
<html>
  <head>
    <title>{% block title%} 这里定义了一个名为title的block {% endblock %}</title>
  </head>
  <body>
    {% block content %} 这里定义了一个名为content的block {% endblock %}
  </body>
</html>

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

{% extends 'base.html' %}

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

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

对于子模板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样式，编写子模板就会非常容易。

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

<!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> 注册</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 © 2014. [<a href="/manage/" target="_blank">Manage</a>]</p>
        <p><a href="http://www.liaoxuefeng.com/" 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定义的几个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 %}

  <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">发表于{{ blog.created_at}}</p>
      <p>{{ blog.summary }}</p>
      <p><a href="/blog/{{ blog.id }}">继续阅读 <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="#">读书</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 %}

相应地，首页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的创建日期显示的是一个浮点数，因为它是由这段模板渲染出来的：

<p class="uk-article-meta">发表于{{ blog.created_at }}</p>

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

<p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>

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

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

为Python的web框架编写前端模版的教程

为Python的web框架编写前端模版的教程

- Author -

廖雪峰

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
Python自然语言处理之词干,词形与最大匹配算法代码详解
Nov 16 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
Apr 17 Python
解决Pycharm中import时无法识别自己写的程序方法
May 18 Python
浅谈PySpark SQL 相关知识介绍
Jun 14 Python
python os.fork() 循环输出方法
Aug 08 Python
python getpass实现密文实例详解
Sep 24 Python
基于Python批量生成指定尺寸缩略图代码实例
Nov 20 Python
Pytorch中的VGG实现修改最后一层FC
Jan 15 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
Jan 18 Python
python logging 日志的级别调整方式
Feb 21 Python
python的json包位置及用法总结
Jun 21 Python
Python延迟绑定问题原理及解决方案
Aug 04 Python
为Python的web框架编写MVC配置来使其运行的教程
Apr 30 #Python
在Python的web框架中配置app的教程
Apr 30 #Python
python实现从ftp服务器下载文件的方法
Apr 30 #Python
简单介绍Python下自己编写web框架的一些要点
Apr 29 #Python
编写Python的web框架中的Model的教程
Apr 29 #Python
python获取本地计算机名字的方法
Apr 29 #Python
Python中编写ORM框架的入门指引
Apr 29 #Python
索引树扫描(1) 匹配(1) into outfile(1) 全表扫描(1) 相对定位(1) sql模式(1) lua(3) geoserver(1) 逻辑备份(1) 绝对定位(1)
You might like
咖啡知识大全
2021/03/03 新手入门
基于mysql的论坛（4）
2006/10/09 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
Destoon旺旺无法正常显示，点击提示“会员名不存在”的解决办法
2014/06/21 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
Python实现SVN的目录周期性备份实例
2015/07/17 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Java及python正则表达式详解
2017/12/27 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Probikekit日本：自行车套件，跑步和铁人三项装备
2017/04/03 全球购物
美国著名的女性内衣零售商：Frederick’s of Hollywood
2018/02/24 全球购物
Nanushka官网：匈牙利服装品牌
2019/08/14 全球购物
Tomcat的缺省是多少，怎么修改
2014/04/09 面试题
医学类导师推荐信范文
2013/11/19 职场文书
工作说明书格式
2014/07/29 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android