首页
所有分类
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 判断自定义对象类型
Mar 21 Python
在Python中使用mongoengine操作MongoDB教程
Apr 24 Python
简单实现python数独游戏
Mar 30 Python
python使用adbapi实现MySQL数据库的异步存储
Mar 19 Python
python+openCV利用摄像头实现人员活动检测
Jun 22 Python
PyCharm安装Markdown插件的两种方法
Jun 24 Python
详解Python打包分发工具setuptools
Aug 05 Python
Python collections模块使用方法详解
Aug 28 Python
django models里数据表插入数据id自增操作
Jul 15 Python
学生如何注册Pycharm专业版以及pycharm的安装
Sep 24 Python
python中delattr删除对象方法的代码分析
Dec 15 Python
python requests模块的使用示例
Apr 07 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
V Rising(1) harbor(1) procedure(1) Tablespace(1) pytz(1) Navicat(1) commit(1) GoFrame(3) 自定义函数(1) 内置函数(1)
You might like
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php实现将Session写入数据库
2015/07/26 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
python获得一个月有多少天的方法
2015/06/04 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
python 实现aes256加密
2020/11/27 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
印尼最大的婴儿用品购物网站：Orami
2017/09/28 全球购物
高考寄语大全
2014/04/08 职场文书
产品设计开发计划书
2014/05/07 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
元旦晚会开场白
2015/05/29 职场文书
党内外群众意见范文
2015/06/02 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers