Python学习笔记：Day 8 构建前端
前言
最近在学习深度学习，已经跑出了几个模型，但Pyhton的基础不够扎实，因此，开始补习Python了，大家都推荐廖雪峰的课程，因此，开始了学习，但光学有没有用，还要和大家讨论一下，因此，写下这些帖子，廖雪峰的课程连接在这里：廖雪峰
Python的相关介绍，以及它的历史故事和运行机制，可以参见这篇：python介绍
Python的安装可以参见这篇：Python安装
Python的运行模式以及输入输出可以参见这篇：Python IO
Python的基础概念介绍，可以参见这篇：Python 基础
Python字符串和编码的介绍，可以参见这篇：Python字符串与编码
Python基本数据结构：list和tuple介绍，可以参见这篇：Python list和tuple
Python控制语句介绍：ifelse，可以参见这篇：Python 条件判断
Python控制语句介绍：循环实现，可以参见这篇：Python循环语句
Python数据结构：dict和set介绍Python数据结构dict和set
Python函数相关：Python函数
Python高阶特性：Python高级特性
Python高阶函数：Python高阶函数
Python匿名函数：Python匿名函数
Python装饰器：Python装饰器
Python偏函数：Python偏函数
Python模块：Python模块
Python面向对象编程（1）：Python面向对象
Python面向对象编程（2）：Python面向对象（2）
Python面向对象编程（3）：Python面向对象（3）
Python面向对象编程（4）：Pyhton面向对象（4）
Python面向对象高级编程（上）：Python面向对象高级编程（上）
Python面向对象高级编程（中上）：Python面向对象高级编程（中上）
Python面向对象高级编程（中下）：Python面向对象高级编程（中下）
Python面向对象高级编程（完）：Python面向对象高级编程（完）
Python错误调试（起）：Python调试：起
Python错误调试（承）：Python调试：承
Python错误调试（转）：Python调试：转
Python错误调试（合）：python调试：合
Python文件IO编程：Python文件IO
Python文件IO编程2：Python文件IO2
Python文件IO编程3：PYthon文件IO3
Python进程和线程（起）：Python进程和线程起
Python进程和线程（承）：Python进程和线程承
Python进程和线程（转）：Python进程和线程转
Python进程和线程（合）：Python进程和线程合
Python正则表达式：Python正则表达式
Python学习笔记:常用内建模块1：Python学习笔记：常用内建模块1
Python学习笔记:常用内建模块2：Python学习笔记：常用内建模块2
Python学习笔记:常用内建模块3：Python学习笔记：常用内建模块3
Python学习笔记:常用内建模块4：Python学习笔记: 常用内建模块4
Python学习笔记:常用内建模块5：Python学习笔记: 常用内建模块5
Python学习笔记:常用内建模块6:Python学习笔记：常用内建模块6
Python学习笔记:第三方模块1：Python常用第三方模块
Python学习笔记:第三方模块2：Python常用第三方模块
Python学习笔记:第三方模块3：Python常用第三方模块
Pytho学习笔记：网络编程：Python网络编程
Python学习笔记：电子邮件：Python电子邮件1
Python学习笔记：SMTP服务器：PythonSMTP服务器
Python学习笔记：POP3服务器：PythonPOP3服务器
Python学习笔记：Python数据库 Python数据库1
Python学习笔记：Python数据库2Python数据库2
Python学习笔记：web开发1Python学习笔记：web开发1
Python学习笔记：web开发2Python学习笔记: web开发2
Python学习笔记: web开发3Python学习笔记: web开发3
Python学习笔记：异步IO（1）Python学习笔记：异步IO（1）
Python学习笔记：异步IO（2）Python学习笔记：异步IO（2）
Python学习笔记：异步IO（3）Python学习笔记：异步IO（3）
Python学习笔记：Day 1-2开发Python学习笔记：Day1-2开发
Python学习笔记：Day 3 ORMPython学习笔记：Day3 ORM
Python学习笔记：Day 4 ModelPython学习笔记：Day4Model
Python学习笔记：Day 5 web框架PYTHON学习笔记：DAy5
Python学习笔记：Day 6 配置文件Python学习笔记：Day 6 配置文件
Python学习笔记：Day 7 编写MVCPython学习笔记：Day 7编写MVC
目录
- 前言
- 目录
- 构建前端
构建前端
虽然我们跑通了一个最简单的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把页面拆成三部分：
<% 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。比如，定义一个最简单的父模板：
<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 Ah1>
<p>blablabla...p>
{% endblock %}对于子模板b.html，如法炮制：
{% extends 'base.html' %}
{% block title %} B {% endblock %}
{% block content %}
<h1>Chapter Bh1>
<ul>
<li>list 1li>
<li>list 2li>
ul>
{% endblock %}这样，一旦定义好父模板的整体布局和CSS样式，编写子模板就会非常容易。
让我们通过uikit这个CSS框架来完成父模板base.html的编写：
<html>
<head>
<meta charset="utf-8" />
{% block meta %}{% endblock %}
<title>{% block title %} ? {% endblock %} - Awesome Python Webapptitle>
<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 %}{% 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">Awesomea>
<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">
{% block content %}
{% endblock %}
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 Webappa>. Copyright © 2014. [<a href="/manage/" target="_blank">Managea>]p>
<p><a href="http://www.liaoxuefeng.com/" target="_blank">www.liaoxuefeng.coma>. 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的处理函数更新如下：
@get('/')
def index(request):
summary = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
blogs = [
Blog(id='1', name='Test Blog', summary=summary, created_at=time.time()-120),
Blog(id='2', name='Something New', summary=summary, created_at=time.time()-3600),
Blog(id='3', name='Learn Swift', summary=summary, created_at=time.time()-7200)
]
return {
'__template__': 'blogs.html',
'blogs': 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时设置。相关代码如下：
def datetime_filter(t):
delta = int(time.time() - t)
if delta < 60:
return '1分钟前'
if delta < 3600:
return '%s分钟前' % (delta // 60)
if delta < 86400:
return '%s小时前' % (delta // 3600)
if delta < 604800:
return '%s天前' % (delta // 86400)
dt = datetime.fromtimestamp(t)
return '%s年%s月%s日' % (dt.year, dt.month, dt.day)
...
init_jinja2(app, filters=dict(datetime=datetime_filter))
...现在，完善的首页显示如下：
