有故事，带项目的flask教程（3）---flask的jinja2模板（1）

 

快到下班时间了，老项来到小王的座位前，问道：“怎么样，上午给你讲的路由熟悉了吗？你这个项目的路由系统构建的如何了？”

         小王兴奋的说：“算是比较熟悉了吧，老铁你还别说，flask的路由还是挺容易上手的，我利用中午的休息时间就把我这个小项目的路由做的差不多了。不过我还有个大问题，网站不是都有网页吗？我们在什么地方，如何展示网页呀？网页上的动态数据又是怎么来的呢？”

         老项赞许的说：“能主动思考很不错，这样吧，看你这么好学，咱们今天就加个班，我把flask模板相关的东西给你讲讲。讲完以后你就知道如何用flask来处理页面和数据了。”

 

         直接展示页面内容

前面的例子都是直接返回字符串作为页面显示的内容，但实际的页面内容都比较多，包含了html，css和js代码，甚至还有一些比如图片这样的静态文件。在flask里面，如何把一个完整的页面作为http响应的内容发送给服务器呢？这个时候就要用到一个名为render_template()的方法。我们在templates文件夹下面增加个首页的html文件index.html，再把前面例子的首页路由对应的视图改造一下，正儿八经的把页面用起来。代码见下图。

上面的代码首先从flask包中导入了render_template方法（第一行）。然后在视图函数返回的时候不再返回字符串，而是利用render_template方法将index.html页面的内容作为响应数据进行返回，该方法的第一个参数填写html的完整文件名称即可（第八行）。index.html和页面见下图。

注意一下前端html文件写在templates文件夹下面。

 

老项讲完这个知识点以后问小王：“明白咋写了吧？是不是很简单？”

“嗯，确实挺简单的。在templates文件夹下面写好html文件，然后直接在视图方法里面用render_template方法返回即可。不过我有一个问题，就是如何想要展示的数据显示到页面上呢？比如在主页上面显示常见的车系”小王又开始提问了。

“这个不难，且听我马上道来”老项说完，开始了下一个部分的讲解。

 

在页面上显示数据

我们就拿小王的这个要求来做案例，在主页上显示一些数据。理论上这些数据应该从数据库查询出来，不过我们还没有涉及数据库，就用一些变量来存储要展示的数据。我们先来看后台的代码如下。

 

我们在index的视图函数中，定义了一个变量，然后把这个变量作为render_template方法的第二个参数进行了传递（注意是一个关键字参数，见代码第9行），这样就可以把数据给到前端页面了。那前端页面如何展示这个数据呢？还记得我们在一开始介绍flask的时候就说过，flask的两大核心，其中一个核心就是jinja2模板引擎。这个模板引擎就是用来处理前端页面和数据渲染的，如果想要将视图中的数据展示在页面模板中，就需要在前端的源码中使用jinja2的语法。jinja2的设计思想来源于 Django 的模板引擎，并扩展了其语法并实现了更强大的功能。我们先看看前端代码熟悉一下jinja2最基本的语法。

注意看前端代码的第11行，我们用两个大括号将car_serial_name包裹起来，而car_serial_name正好是视图方法中传给render_template方法第二个参数的左值，实际上它就是car_serial的值。我们可以看一下服务器运行后的对应页面截图。

从截图可以看出，在页面上已经显示了视图中变量car_serial的值。

小王听到这里，插嘴道：“这个只是显示了单个变量的值，如果我想在前端加一些逻辑，比如只显示价格大于20万的车系，又该怎么办呢？”

         老项说：“jinja2可是很强大的，除了可以在前端页面显示变量的值，还可以在前端实现条件，循环这样的逻辑，接下来我们就讲下jinja2的逻辑语法吧。”

 

在页面上进行条件判断

我们就拿刚才小王提的这个要求来举例，先直接看后端的代码。

为了更好的表示车系和价格的关系，我们先定义了一个汽车类（代码第六行），然后在视图函数里面实例化汽车类（14行，15行），再将实例对象作为数据对前端页面进行渲染。这里我们只传递了car_serial1这个变量。接下来我们看看前端的源码。

前端源码注意看第11行到第15行，如果要在前端用jinja2的模板语法写条件判断，只需要把if和条件表达式用{%  %}这样的符号包裹起来，其中条件表达式和python的语法一样，支持“>, <, ==”等逻辑判断符号。如果还要对条件不满足的情况进行处理，加上13行的{% else %}即可。最后要记得用15行的代码{% endif %}将这个if表达式闭合。在这个代码的第12行，我们还可以看到对python对象属性的引用，同样是用‘.’即可。这个前端模板配合视图显示的效果如下。

“小王啊，你一会就把渲染前端的变量换成那个大众的实例，然后看看页面显示的效果是否发生了变化。下面我们来说下jinja2的循环处理”老项临时给小王布置了个任务，又开始了后面的讲解。

 

在页面上进行循环

视图中可以迭代的数据均可以在前端用循环逻辑进行处理。前面的例子中都只传递了一个数据，在新的例子里面，我们在视图中构建并传递一个列表，然后在前端页面用循环展示这个列表，前后台的代码如下。

后台的视图代码没有什么新的东西，不一样的就是定义了一个列表（14行），然后将列表的数据进行了传递（15行）。我们主要看下前端的代码，主要的循环逻辑就在前端代码的11行到14行。注意循环的基本写法，和判断类似，用{ % % }包裹循环头部，循环的写法基本和python的循环语法一致，在循环体中，使用循环头的拿到的元素car，进一步用{{}}获取car的数据，注意循环完成后，要加上14行的代码将循环闭合。最终页面上显示的效果如下图所示：

         老项讲完上面的内容，神秘的对小王说：“来，小王，接下来我给你展示个神技，让你感受一下jinja2的魅力。来看看下面的前后台代码。”

老项把代码敲完以后，对小王说：“小王，你把这个后台视图的代码和前端代码看看，然后跟我讲讲，看看这个代码有没有什么神奇的地方。”

         小王花五分钟读了代码，然后开始解释起这个代码来。后台的代码就是新定义了一个字典，车系的名称是字典的key，车系的价格是字典的value，然后传递了这个字典的数据。前台的代码还是用for循环来遍历这个字典，咦，等等，前台的jinja模板语法还能这么用，居然可以调用字典的items()方法，同时遍历字典的key和value。果真神奇啊！那我运行看一下啊！代码运行见下图。

看着小王一脸震撼的表情，老项满意的说：“jinja2模板引擎厉害吧，还有更厉害的，我们可以把循环和判断写在一起，比如只显示字典里面价格小于20万的车系，可以先写个循环，再在循环里面进行判断，当然也可以像下面的代码这样写，代码更精简。”

小王惊呆了：“这样也可以，真的神奇。对了，我听说django的模板引擎有过滤器的功能，我们的jinja2也有这个东东吗？”

老项说：“当然有啦，而且flask也支持模板的继承和包含。不过时间也不早了，今天就先到这，我们明天继续吧，你今天就把我下面给你布置的任务做一下，好好体会一下jinja2模板引擎的使用。”

 

本章任务：

1. 完成教程里面的案例和老项布置的任务。
2. 完成一个车型列表页的前后台制作，假设是福特品牌下的车型列表，去查一下福特下有哪些车型，把数据从视图渲染到页面上。