Python Flask No.6_Flask_Jinja2模板的简化代码手段

阳光穿透心脏的1/2处 2022-02-27 10:52 163阅读 0赞

## Python Flask No.6\_Flask\_Jinja2模板的简化代码手段 ##

**1.设计原理**  
在前端的设计中有一条大家默认的准则，那就是当进行app或系统设计时不同界面间的颜色搭配应该是协调一致的，这样做的结果是不同界面间存在背景色等相似设计，根据编程原则来看，相同的代码不应该多次重复，对于前端来说更是这样。Jinja2模板的extends就能在继承基类模板的基础上简化开发时间。  
**2.首先在flask templates模块中建立基类模板 base.html**  
将需要用的css、js全引用到这个界面  
加入base.html是这样的内容

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>IT行业职位信息采集与数据可视化分析</title>
        <link rel="stylesheet" href="../static/css/bootstrap.min.css">
        <link rel="stylesheet" href="../static/css/base.css">
        <link rel="icon" type="image/x-icon" href='../static/img/favicon.ico'>
        <script src="../static/js/jquery-slim.min.js"></script>
        <script src="../static/js/popper.min.js"></script>
        <script src="../static/js/bootstrap.min.js"></script>
        <script src="../static/js/echarts.min.js"></script>
        <script src="../static/js/echarts-wordcloud.min.js"></script>
    </head>
    <body>
    {% block content %}{% endblock %}
    </body>
    </html>

**其中的 \{% block content %\}\{% endblock %\}部分相当于给这个基类模板挖的空，告诉系统你会在其他html里调用这个基类模板并把内容填充到 \{% block content %\}\{% endblock %\}中**

**3.建立一个新HTML界面，将界面内容改成如下**：

{% extands 'base.html'%}
    {% block content%}
    ...
    {%endblock%}

在…中直接写html内容，在flask运行时会自动把基类模板内容引进与新HTML结合，这样就达到简化代码量的目的了  
**后记**  
**下一篇内容将介绍如何给app.py进行逻辑分层，即Blueprint,MVC结构中经典的Controller**