Python项目WebApp实战之六——前端框架及API-变化吧

2020年3月9日21:30:45前端框架评论阅读模式

前端页面

针对繁杂的前端开发网页页面而言，最好是应用一套CSS架构来进行基础的合理布局和款式。新项目中应用uikit架构。全部的静态数据資源文档统一放进static文件目录下，并依照类型分类。因为网页页面将会存有许多同样的一部分，例如页眉和页脚。常见的模板引擎已经考虑到了页面上重复的HTML部分复用问题。

一般有两种实现方式，一种是include。比如：

这样，相同的部分incheader.html和incfooter.html就可以共享。但是include方法不利于页面整体结构的维护。

还有另一种是通过“继承”的方式，编写一个父模板，定义一些可替换的块。然后编写多个子模板，替换父模板中的block。

一旦编写好了父模板，编写子模板非常容易。

首先是编写一个父模板， __base__.html。包含一些block，比如meta块，标题块， <head>标签中插入的JavaScript代码，引入的文件块等。最重要的就是content，页面内容块。

然后就可以编写一个blog.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>
{% 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的创建日期显示的是一个浮点数，因为它是由这段模板渲染出来的：

解决方法是通过jinja2的filter（过滤器），把一个浮点数转换成日期字符串。编写一个datetime的filter，用法如下：

filter需要在初始化jinja2时设置。相关代码如下：

REST就是一种设计API的模式。最常用的数据格式是JSON。

一个API也是一个URL的处理函数，我们希望能直接通过一个@api来把函数变成JSON格式的REST API，这样，获取注册用户可以用一个API实现如下：

@get('/api/users')
def api_get_users(*, page='1'):
page_index = get_page_index(page)
num = yield from User.findNumber('count(id)')
p = Page(num, page_index)
if num == 0:
return dict(page=p, users=())
users = yield from User.findAll(orderBy='created_at desc', limit=(p.offset, p.limit))
for u in users:
u.passwd = '******'
return dict(page=p, users=users)