Day 8 - 构建前端

虽然我们跑通了一个最简单的MVC,但是页面效果肯定不会让人满意。

对于复杂的HTML前端页面来说,我们需要一套基础的CSS框架来完成页面布局和基本样式。另外,jQuery作为操作DOM的JavaScript库也必不可少。

从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。有很多CSS框架可供选择。我们这次选择uikit这个强大的CSS框架。它具备完善的响应式布局,漂亮的UI,以及丰富的HTML组件,让我们能轻松设计出美观而简洁的页面。

可以从uikit首页下载打包的资源文件。

所有的静态资源文件我们统一放到www/static目录下,并按照类别归类:

  1. static/
  2. +- css/
  3. | +- addons/
  4. | | +- uikit.addons.min.css
  5. | | +- uikit.almost-flat.addons.min.css
  6. | | +- uikit.gradient.addons.min.css
  7. | +- awesome.css
  8. | +- uikit.almost-flat.addons.min.css
  9. | +- uikit.gradient.addons.min.css
  10. | +- uikit.min.css
  11. +- fonts/
  12. | +- fontawesome-webfont.eot
  13. | +- fontawesome-webfont.ttf
  14. | +- fontawesome-webfont.woff
  15. | +- FontAwesome.otf
  16. +- js/
  17. +- awesome.js
  18. +- html5.js
  19. +- jquery.min.js
  20. +- uikit.min.js

由于前端页面肯定不止首页一个页面,每个页面都有相同的页眉和页脚。如果每个页面都是独立的HTML模板,那么我们在修改页眉和页脚的时候,就需要把每个模板都改一遍,这显然是没有效率的。

常见的模板引擎已经考虑到了页面上重复的HTML部分的复用问题。有的模板通过include把页面拆成三部分:

  1. <html>
  2. <% include file="inc_header.html" %>
  3. <% include file="index_body.html" %>
  4. <% include file="inc_footer.html" %>
  5. </html>

这样,相同的部分inc_header.htmlinc_footer.html就可以共享。

但是include方法不利于页面整体结构的维护。jinjia2的模板还有另一种“继承”方式,实现模板的复用更简单。

“继承”模板的方式是通过编写一个“父模板”,在父模板中定义一些可替换的block(块)。然后,编写多个“子模板”,每个子模板都可以只替换父模板定义的block。比如,定义一个最简单的父模板:

  1. <!-- base.html -->
  2. <html>
  3. <head>
  4. <title>{% block title%} 这里定义了一个名为title的block {% endblock %}</title>
  5. </head>
  6. <body>
  7. {% block content %} 这里定义了一个名为content的block {% endblock %}
  8. </body>
  9. </html>

对于子模板a.html,只需要把父模板的titlecontent替换掉:

  1. {% extends 'base.html' %}
  2. {% block title %} A {% endblock %}
  3. {% block content %}
  4. <h1>Chapter A</h1>
  5. <p>blablabla...</p>
  6. {% endblock %}

对于子模板b.html,如法炮制:

  1. {% extends 'base.html' %}
  2. {% block title %} B {% endblock %}
  3. {% block content %}
  4. <h1>Chapter B</h1>
  5. <ul>
  6. <li>list 1</li>
  7. <li>list 2</li>
  8. </ul>
  9. {% endblock %}

这样,一旦定义好父模板的整体布局和CSS样式,编写子模板就会非常容易。

让我们通过uikit这个CSS框架来完成父模板base.html的编写:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. {% block meta %}<!-- block meta -->{% endblock %}
  6. <title>{% block title %} ? {% endblock %} - Awesome Python Webapp</title>
  7. <link rel="stylesheet" href="/static/css/uikit.min.css">
  8. <link rel="stylesheet" href="/static/css/uikit.gradient.min.css">
  9. <link rel="stylesheet" href="/static/css/awesome.css" />
  10. <script src="/static/js/jquery.min.js"></script>
  11. <script src="/static/js/md5.js"></script>
  12. <script src="/static/js/uikit.min.js"></script>
  13. <script src="/static/js/awesome.js"></script>
  14. {% block beforehead %}<!-- before head -->{% endblock %}
  15. </head>
  16. <body>
  17. <nav class="uk-navbar uk-navbar-attached uk-margin-bottom">
  18. <div class="uk-container uk-container-center">
  19. <a href="/" class="uk-navbar-brand">Awesome</a>
  20. <ul class="uk-navbar-nav">
  21. <li data-url="blogs"><a href="/"><i class="uk-icon-home"></i> 日志</a></li>
  22. <li><a target="_blank" href="#"><i class="uk-icon-book"></i> 教程</a></li>
  23. <li><a target="_blank" href="#"><i class="uk-icon-code"></i> 源码</a></li>
  24. </ul>
  25. <div class="uk-navbar-flip">
  26. <ul class="uk-navbar-nav">
  27. {% if user %}
  28. <li class="uk-parent" data-uk-dropdown>
  29. <a href="#0"><i class="uk-icon-user"></i> {{ user.name }}</a>
  30. <div class="uk-dropdown uk-dropdown-navbar">
  31. <ul class="uk-nav uk-nav-navbar">
  32. <li><a href="/signout"><i class="uk-icon-sign-out"></i> 登出</a></li>
  33. </ul>
  34. </div>
  35. </li>
  36. {% else %}
  37. <li><a href="/signin"><i class="uk-icon-sign-in"></i> 登陆</a></li>
  38. <li><a href="/register"><i class="uk-icon-edit"></i> 注册</a></li>
  39. {% endif %}
  40. </ul>
  41. </div>
  42. </div>
  43. </nav>
  44. <div class="uk-container uk-container-center">
  45. <div class="uk-grid">
  46. <!-- content -->
  47. {% block content %}
  48. {% endblock %}
  49. <!-- // content -->
  50. </div>
  51. </div>
  52. <div class="uk-margin-large-top" style="background-color:#eee; border-top:1px solid #ccc;">
  53. <div class="uk-container uk-container-center uk-text-center">
  54. <div class="uk-panel uk-margin-top uk-margin-bottom">
  55. <p>
  56. <a target="_blank" href="#" class="uk-icon-button uk-icon-weibo"></a>
  57. <a target="_blank" href="#" class="uk-icon-button uk-icon-github"></a>
  58. <a target="_blank" href="#" class="uk-icon-button uk-icon-linkedin-square"></a>
  59. <a target="_blank" href="#" class="uk-icon-button uk-icon-twitter"></a>
  60. </p>
  61. <p>Powered by <a href="#">Awesome Python Webapp</a>. Copyright &copy; 2014\. [<a href="/manage/" target="_blank">Manage</a>]</p>
  62. <p><a href="http://www.liaoxuefeng.com/" target="_blank">www.liaoxuefeng.com</a>. All rights reserved.</p>
  63. <a target="_blank" href="#"><i class="uk-icon-html5" style="font-size:64px; color: #444;"></i></a>
  64. </div>
  65. </div>
  66. </div>
  67. </body>
  68. </html>

base.html定义的几个block作用如下:

用于子页面定义一些meta,例如rss feed:

  1. {% block meta %} ... {% endblock %}

覆盖页面的标题:

  1. {% block title %} ... {% endblock %}

子页面可以在标签关闭前插入JavaScript代码:

  1. {% block beforehead %} ... {% endblock %}

子页面的content布局和内容:

  1. {% block content %}
  2. ...
  3. {% endblock %}

我们把首页改造一下,从base.html继承一个blogs.html

  1. {% extends '__base__.html' %}
  2. {% block title %}日志{% endblock %}
  3. {% block content %}
  4. <div class="uk-width-medium-3-4">
  5. {% for blog in blogs %}
  6. <article class="uk-article">
  7. <h2><a href="/blog/{{ blog.id }}">{{ blog.name }}</a></h2>
  8. <p class="uk-article-meta">发表于{{ blog.created_at}}</p>
  9. <p>{{ blog.summary }}</p>
  10. <p><a href="/blog/{{ blog.id }}">继续阅读 <i class="uk-icon-angle-double-right"></i></a></p>
  11. </article>
  12. <hr class="uk-article-divider">
  13. {% endfor %}
  14. </div>
  15. <div class="uk-width-medium-1-4">
  16. <div class="uk-panel uk-panel-header">
  17. <h3 class="uk-panel-title">友情链接</h3>
  18. <ul class="uk-list uk-list-line">
  19. <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">编程</a></li>
  20. <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">读书</a></li>
  21. <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Python教程</a></li>
  22. <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Git教程</a></li>
  23. </ul>
  24. </div>
  25. </div>
  26. {% endblock %}

相应地,首页URL的处理函数更新如下:

  1. @view('blogs.html')
  2. @get('/')
  3. def index():
  4. blogs = Blog.find_all()
  5. # 查找登陆用户:
  6. user = User.find_first('where email=?', 'admin@example.com')
  7. return dict(blogs=blogs, user=user)

往MySQL的blogs表中手动插入一些数据,我们就可以看到一个真正的首页了。但是Blog的创建日期显示的是一个浮点数,因为它是由这段模板渲染出来的:

  1. <p class="uk-article-meta">发表于{{ blog.created_at }}</p>

解决方法是通过jinja2的filter(过滤器),把一个浮点数转换成日期字符串。我们来编写一个datetime的filter,在模板里用法如下:

  1. <p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>

filter需要在初始化jinja2时设置。修改wsgiapp.py相关代码如下:

  1. # wsgiapp.py:
  2. ...
  3. # 定义datetime_filter,输入是t,输出是unicode字符串:
  4. def datetime_filter(t):
  5. delta = int(time.time() - t)
  6. if delta < 60:
  7. return u'1分钟前'
  8. if delta < 3600:
  9. return u'%s分钟前' % (delta // 60)
  10. if delta < 86400:
  11. return u'%s小时前' % (delta // 3600)
  12. if delta < 604800:
  13. return u'%s天前' % (delta // 86400)
  14. dt = datetime.fromtimestamp(t)
  15. return u'%s年%s月%s日' % (dt.year, dt.month, dt.day)
  16. template_engine = Jinja2TemplateEngine(os.path.join(os.path.dirname(os.path.abspath(__file__)), 'templates'))
  17. # 把filter添加到jinjia2,filter名称为datetime,filter本身是一个函数对象:
  18. template_engine.add_filter('datetime', datetime_filter)
  19. wsgi.template_engine = template_engine

现在,完善的首页显示如下:

home-with-uikit

原文: https://wizardforcel.gitbooks.io/liaoxuefeng/content/py2/102.html