首页
所有分类
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算法学习之计数排序实例
Dec 18 Python
python模拟新浪微博登陆功能(新浪微博爬虫)
Dec 24 Python
python使用递归解决全排列数字示例
Feb 11 Python
pandas值替换方法
Jul 10 Python
Python中文编码知识点
Feb 18 Python
用scikit-learn和pandas学习线性回归的方法
Jun 21 Python
Django 创建新App及其常用命令的实现方法
Aug 04 Python
Python帮你微信头像任意添加装饰别再@微信官方了
Sep 25 Python
python set集合使用方法解析
Nov 05 Python
Django框架中间件定义与使用方法案例分析
Nov 28 Python
python解析xml文件方式(解析、更新、写入)
Mar 05 Python
python中添加模块导入路径的方法
Feb 03 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) 帝国时代(1) 东方异文石(1) 巫师(1) 守望先锋(1) 我的世界(1) 暴雪(1) LOL(1) 最终幻想(1)
You might like
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
smarty中post用法实例
2014/11/28 PHP
SSO单点登录的PHP实现方法（Laravel框架）
2016/03/23 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
Vue header组件开发详解
2018/01/26 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
python os.path模块常用方法实例详解
2018/09/16 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
科颜氏加拿大官方网站： Kiehl’s加拿大
2016/08/16 全球购物
为智能设备设计个性化保护套网站：caseable
2017/01/05 全球购物
Made in Design德国：设计师家具、灯具和装饰
2019/10/31 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
正规的求职信范文分享
2013/12/11 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
建筑施工安全责任书
2014/07/24 职场文书
学校个人对照检查材料
2014/08/26 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL