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

虽然我们跑通了一个最简单的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框架Django
Python之Web框架: Django 一. Django Django是一个卓越的新一代Web框架 Django的处理流程 1. 下载地址 Python 下载地址:https://www.pyt ...
python各种web框架对比
0 引言 python在web开发方面有着广泛的应用.鉴于各种各样的框架,对于开发者来说如何选择将成为一个问题.为此,我特此对比较常见的几种框架从性能.使用感受以及应用情况进行一个粗略的 ...
Python Flask Web 框架入门
Python Flask 目录本文主要借鉴 letiantian 的文章 http://www.letiantian.me/learn-flask/ 一.简介二.安装三.初始化Flask 四.获 ...
比我的脸还干的gan货——Python Flask Web 框架入门
Flask是一个轻量级的基于Python的web框架. 本文适合有一定HTML.Python.网络基础的同学阅读. 1. 简介这份文档中的代码使用 Python 3 运行.是的,所以读者需要自己在电 ...
Python之Web框架
Python之Web框架: 一. Web框架的本质: 对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env pyth ...
python 实现web框架simfish
python 实现web框架simfish 本文主要记录本人利用python实现web框架simfish的过程.源码github地址:simfish WSGI HTTP Server wsgi模块提供 ...
Python之Web框架们
Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. pip i ...
Python3.5学习十八 Python之Web框架 Django
Python之Web框架: 本质:Socket 引用wsgiref创建web框架根据web框架创建过程优化所得: 分目录管理模板单独目录执行不同函数单独存入一个方法py文件 Web框架的两种形式 ...
python之web框架(3)：WSGI之web应用完善
python之web框架(3):WSGI之web应用完善 1.上篇的web框架太low,只能实现回应固定页面.现在将它进行完善.首先将wsgi和web服务器进行分离,并给予它回复静态页面的能力. we ...

随机推荐

Cookie、Session、localStorage、sessionStorage区别和用法
Cookie 在学习一个新知识点前,我们应该明白自己的学习目标,要带着疑问去学习,该小节须要了解 Cookies 什么是cookie,cookie的作用 cookie的工作机制,即cookie是运作流 ...
【JAVA】编程（5）---递归
作业要求: 利用递归来计算出从1加到100的数和 : public class 递归 { public static void main(String[] args) { System.out.pr ...
SVN设置忽略文件列表以及丢失了预定增加的文件解决方法
设置svn忽略列表 Linux下svn命令行配置 1. 修改版本库的相关属性 2. svn 客户端的配置 Windows下 Tortoise SVN 设置 1. Tortoise SVN 上修改版本库 ...
【linux系统】命令学习（一）ssh
ssh 1.在终端执行命令 ssh -p22 username@host 2.密码输入是看不到内容的 3.登入成功后默认进入的是home目录,就是根目录下的home目录 4.[root@VM-4-1 ...
保姆级神器 Maven，再也不用担心项目构建搞崩了
今天来给大家介绍一款项目构建神器--Maven,不仅能帮我们自动化构建,还能够抽象构建过程,提供构建任务实现:它跨平台,对外提供了一致的操作接口,这一切足以使它成为优秀的.流行的构建工具,从此以后,再 ...
一文详解 OpenGL ES 3.x 渲染管线
OpenGL ES 构建的三维空间,其中的三维实体由许多的三角形拼接构成.如下图左侧所示的三维实体圆锥,其由许多三角形按照一定规律拼接构成.而组成圆锥的每一个三角形,其任意一个顶点由三维空间中 x.y ...
使用idea创建Kotlin项目
1.打开idea 2.选择项目方式: 3.nest 4.创建文件名 4.finish 看这目录结构和java没什么区别 5.在src目录下新建一个Kotlin文件 fun main(args:} fu ...
Kubernetes：了解 Deployment
本文为作者的 Kubernetes 系列电子书的一部分,电子书已经开源,欢迎关注,电子书浏览地址: https://k8s.whuanle.cn[适合国内访问] https://ek8s.whuanl ...
Dockerfile之CMD与Entrypoint使用要点
CMD与ENTRYPOINT都可以代表容器的启动命令,单丛语义上来理解,CMD是一个命令或者口令,而ENTRYPOINT则是一个入口(相当于容器启动时的入口),那么其实就可以理解为每当我们开启一个容器 ...
【POJ1961 Period】【KMP】
题面一个字符串的前缀是从第一个字符开始的连续若干个字符,例如"abaab"共有5个前缀,分别是a, ab, aba, abaa, abaab. 我们希望知道一个N位字符串S的前缀 ...

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

为Python的web框架编写前端模版的教程的更多相关文章

随机推荐

热门专题