python怎样编辑app前端_Python实战-编写Web App-Day9-构建前端

至此，后端工作基本构建完成。接下要开始设计和编程前端页面了。为了更容易构建出复杂的HTML前端页面，我们需要一套基础的CSS框架和jQuery作为操作DOM的JavaScript库。

如今好用流行的CSS框架有很多例如：Bootstrap, Pure CSS, Bulma, Semantic UI 等。此教程会使用UIkit 作为网站的CSS 框架，具体的教程请参考官方Documentation。请下载UIkit的最新版本(3.0.0或以上，最新的是3.4.2，廖大用的UIkit 2.0 将不适用)，将js和css文件放入www/static相应的文件目录中：

+- css/

|  +- awesome.css ## 自定义的css

|  +- uikit.min.css

+- js/

+- awesome.js ## 自定义的script

+- jquery.min.js

+- uikit.min.js

+- uikit-icons.min.js

+- sha1.min.js ## 计算HASH值

+- vue.min.js ## Vue是一种MVVM前端框架, 我们会用它将数据及数据操作与HTML页面显示联系起来

+- sticky.min.js ## 实现黏性布局

由于前端包含很多页面，而每个页面都会有相同的页眉和页脚，最有效率的方法就是构建可以继承的父模板, jinja2提供了很便捷方法用可替换的block来建立模板。例如最简单的父模板base.html：

{% block title%} 子模板可替换title内容 {% endblock %}

{% block content %} 子模板可替换content内容 {% endblock %}

对于子模板a.html, b.html, c.html，只需要把父模板的title和content替换掉：

{% extends 'base.html' %}

{% block title %} A or B or C {% endblock %}

{% block content %}

Chapter A or B or C

blablabla...

{% endblock %}

知道了如何用jinja2, 我们就可以用UIkit框架来完成网站父模板__base__.html的编写了(请将所有的html文件存放在www/templates目录下)。

{% macro pagination(page) %}

{% if page.has_previous %}

{% else %}

{% endif %}

{{ page.page_index }}

{% if page.has_next %}

{% else %}

{% endif %}

{% endmacro %}

{% block meta %}{% endblock %}

{% block title %} ? {% endblock %}| AwesomeDavidBlog

{% block beforehead %}{% endblock %}

凹大卜

• Article | 日志
• Tutorial | 教程
• Landscape | 景观
• Coding | 编程

{% if __user__ %}

{{ __user__.name }}

• Manage
• Logout

{% else %}

Login Register

{% endif %}

凹大卜

• • Article | 日志
  • Tutorial | 教程
  • Landscape | 景观
  • Coding | 编程

  {% if __user__ %}

• Manage | 管理
• Logout | 注销

{% else %}

Login | 登陆 Register | 注册

{% endif %}

{% block content %}

{% endblock %}

Powered by AwesomeDavidBlog! Copyright © 2018.

Zhiyuan Yang. All rights reserved.