Python廖雪峰实战web开发（Day8-构建前端）_综合

在浏览器看到的画面，都是有浏览器解释才呈现出来的。实质它是一段HTML代码，外加JavaScript、CSS构成。如果把网页比作一个人，那么HTML便是他的骨架；JavaScript是肌肉；CSS是衣服。

在前面一章，虽然跑通了一个MVC，但是页面效果肯定不会让人满意。对于复杂的HTML前端页面来说，我们需要一套基础的CSS框架来完成页面布局和基本样式。从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。这里教程使用的是uikit，而我由于下载的文件跟老师的源码文件不太相符，所以直接从老师的github源文件下载下来了。

前端的网页肯定不止首页一个页面，面对类似于网页中的页眉，页脚的重复性工作，常见的模板引擎已经考虑到了页面上重复的HTML部分的复用问题。
有的模板通过include把页面拆成三部分：

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

相同的部分就可以共享，但这样很不利于维护。

因此，Jinja2的模板还有一种一种“继承”方式，实现模板的复用更简单。
“继承”模板的方式是：通过编写一个“父模板”，在父模板中定义一些可替换的block。然后，编写多个“子模板”，每个子模板都可以只替换父模板定义的block。
这样，一旦定义好父模板的整体布局和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 &copy; 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>

以上调用CSS文件时所需的路径，是以执行运行代码所在的路径为基础。
把首页改造一下，从_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.create_at|datetime }}</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 %}

最后再创建MVC并运行：

#!/usr/bin/env python3
# -*- coding: utf-8 -*-__author__ = 'Seiei'from web_app.webframe import get,post
import asyncio
from web_app.models import User,Blog
import time@get('/')
def index(request):summary = 'Hello,World.'blogs = [Blog(id='1', name='Test Blog', summary=summary, create_at=time.time()-120),Blog(id='2', name='Something New', summary=summary, create_at=time.time()-3600),Blog(id='3', name='Learn Swift', summary=summary, create_at=time.time()-7200)]return {
    '__template__': 'blogs.html','blogs': blogs}

最后再浏览器打开页面，就可以看出之前在Day5编写初始化jinja2时，那个datetime_filter有什么用了。上面的Jinja2子模版最原本显示时间的代码是:
<p class="uk-article-meta">发表于{ { blog.create_at}}</p>
由此可看出是调用URL处理函数中的create_at=time.time()-xxx，这样子显示出来的效果是一个浮点数，那么怎么变为显示正常的分钟，小时呢？
这里的datetime_filter作用就如同一个拦截器了，只需在初始化时添加到filter，再对Jinja2模板稍作修改：{ { blog.create_at|datetime }}，这样渲染模板时就会自动拦截并调用datetime_filter。