伸缩自如的Flask [day6] Jinja

像是React这个框架能够使用Hooks来写出一些function component，可以让前端不用写出一些重复冗杂的程序，
也可以让自己的程序更简洁易懂、更容易交接、更知道自己在写什麽(相比於React Class的写法)。
我觉得Jinja 有着类似Hooks的效果，至少存在的用意是如此，你也可以将一些元件写成 Macros ，未来进行引用，
也可以将一些页面继承base.html，来使用共有的navbar或是footer。

https://github.com/wilsonsujames/flask_structure.git

在web内的server.py进行执行。

@app.route('/',methods=[ "GET",'POST'])
def index():
    a={"name":"bob","date":"12月5日","time":"23:30","peopleCount":"10位","phone":"0123456789"}

    Webray_in_flask=[]
    Webray_in_flask.append(a)

    hello_word_in_flask='hello hello hello'

    return render_template('index.html',Webray=Webray_in_flask,hello=hello_word_in_flask)

https://ithelp.ithome.com.tw/upload/images/20210512/20122678yhiQ32gTlP.png

可以发现在根路由我们回传了一个string类别的hello，而在画面上我们在testbutton的旁边能看到hello的文字。
在index.html内:

{{hello}}

而在网页清单订餐资讯的表格最後一行，我们也能看到flask中回传的Webray这个list的资讯。
在index.html内:

    {% for item in Webray %}
    <tr>
      <th scope="row">3</th>
      <td>{{item.name}}</td>
      <td>{{item.date}}</td>
      <td> {{item.time}}</td>
      <td> {{item.peopleCount}} </td>
      <td> {{item.phone}} </td>
    </tr>
    {% endfor %}

你的jinja也可以带有条件判断:

{% if name =='wilson' %}
    <div>blah blah blah blah</div>
{% elif name == 'bob' %}
   <div>bob bob bob</div>
{% else %}
   <div>la lah lah lah</div>
{% endif %}

接着是Jinja的继承，藉由官网的范例base.html，在http://127.0.0.1:5566/base
可以看到:

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
</head>
<body>
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        © Copyright 2008 by <a href="http://domain.invalid/">you</a>.
        {% endblock %}
    </div>
</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20210512/20122678sgOpqwljJJ.png

这个页面只有footer这个区块，接着大家可以到http://127.0.0.1:5566/testsuper
:
看看有神麽变化，以及拔掉super()之後会发生什麽事。

在macro的部分:
compoent.html

{% macro input(name, value='', type='text', size=20) -%}
    <input type="{{ type }}" name="{{ name }}" value="{{
        value|e }}" size="{{ size }}">
{%- endmacro %}

未来引用在HTML:

{% from "compoent.html" import input with context %}
<p>{{ input('password', type='password') }}</p>


<<:  [浅谈]-NoSQL资料库怎麽选？

>>:  [Android 错误处理大全] 解决在 Debug 版进行 Facebook 登入失败

Day3 逻辑斯回归(Logistic Regression)

逻辑斯回归是什麽? 讲人话就是一种对数机率模型，主要用来处理二元[非此即彼(Yes or No)]分...

Day-10 启动程序档

继昨天介绍完<activity_main.xml>之後，今天要来介绍程序档<Mai...

认识 C# 的 存取层级修饰词

修饰词~可以限制类别的存取层级 我的举例是:像是一些私密的东西你不想让别人随便乱看一样 就要设隐私权...

IT管理厂商新电脑入厂的资安第一道防线

设备电脑资安检查承诺书 提供电脑进厂的厂商 , 必需要填写的一份资安切结书. 厂商保证项目: 一.作...

网络框架：应用层工具

这篇主要聊一聊两个应用层工具：web api 和 rpc； 关键字：web api， rpc； 关键...